LEARN THE BASICS OF INCLUSIVE DESIGN
The content of this accessible web design guide is based on the latest version of the WCAG (web content accessibility guidelines). All the information you will see is represented in a more visual way and with simpler explanations for greater understanding between designers and users. For more information, you can visit the official WCAG website.
The guidelines are made up of success criteria. Each compliance criterion has a level of adequacy or conformity (A, AA or AAA) that indicates its impact on accessibility.
The requirements that a website must comply with, otherwise it is impossible for one or more groups of users to access the web content.
The requirements that developers have to satisfy, otherwise some user groups may find it difficult to access the content
Web developers can satisfy these requirements to make content easier for some groups to access.
COLOR
1.4.1. USE OF COLOR (A)
Color should not be the only means of transmitting information, indicating an action, requesting a response, or distinguishing a visual element.
1.4.11. CONTRAST OF NON-TEXTUAL ELEMENTS (AA)
The visual presentation of UI components and graphical objects must have at least a 3:1 ratio against adjacent colors (except for inactive components)
1.4.3. MINIMUM CONTRAST (AA)
This criterion establishes that the presentation of text and text images must have a contrast ratio of at least 4.5:1, with the following exceptions:
Large Text – For large text (or large text images), a ratio of 3:1 is sufficient. What is meant by large text? It is one with at least 18 points in size or 14 points if it is bold. This is because large text with larger characters is considered to be readable even if it has lower contrast.
Text and accessory images – There are no contrast requirements if the text or text images are part of inactive components of the UI (for example, a submit button that is disabled until the form is filled), are purely decorative, are not visible to no user or are part of images with many other visual contents.
Logos – If the text is part of a logo or brand name, there are no contrast requirements.
Text and accessory images – There are no contrast requirements if the text or text images are part of inactive components of the UI (for example, a submit button that is disabled until the form is filled), are purely decorative, are not visible to no user or are part of images with many other visual contents.
Logos – If the text is part of a logo or brand name, there are no contrast requirements.
1.4.6. ENHANCED CONTRAST (AAA)
This criterion establishes that the presentation of text and text images must have a contrast ratio of at least 7:1, with the following exceptions:
Large Text – For large text (or large text images), a ratio of 4.5:1 is sufficient.
Text and accessory images – There are no contrast requirements if the text or text images are part of inactive components of the UI, are purely decorative, are not visible to anyone, or are part of images with many other visual contents.
Logos – If the text is part of a logo or brand name, there are no contrast requirements.
Text and accessory images – There are no contrast requirements if the text or text images are part of inactive components of the UI, are purely decorative, are not visible to anyone, or are part of images with many other visual contents.
Logos – If the text is part of a logo or brand name, there are no contrast requirements.
TYPOGRAPHY
1.4.5. TEXT IMAGES (AA)
Avoid using images of text where possible, especially for essential text. Do not use text images on your website except when absolutely necessary or for branding purposes, such as your logo.
2.4.6. HEADINGS AND LABELS (AA)
Headings and labels should be descriptive for easy understanding and navigation. When headings are clear and descriptive, users can more easily find the information they are looking for and understand the relationship between different parts of the content.
3.3.2. LABELS AND INSTRUCTIONS (A)
The intention of this Success Criterion is to help users avoid making errors when required to enter data. To help avoid errors, it is good to design user interfaces that provide simple instructions and clues for entering information.
ERROR IDENTIFICATION & HELP
3.3.1. ERROR IDENTIFICATION (A)
Ensure that users are notified that an error has been found and can determine what the error is. The message that notifies users of the error should be as specific as possible.
3.3.3. ERROR SUGGESTIONS (AA)
Ensure that users receive appropriate suggestions for correcting a data entry error, whenever possible. Success Criterion 3.3.1 stipulates that errors must be reported. However, people with cognitive limitations may have difficulty understanding how to correct errors. Users may abandon it because they are unsure how to fix it, despite realizing that there is a bug.
CONSISTENT DESIGN
3.2.3. COHERENT NAVIGATION (AA)
Encourage the use of consistent presentations and designs to help those users who interact with repeated content on different pages of a website and need to locate certain functionality or specific information more than once.
3.2.4. CONSISTENT IDENTIFICATION (AA)
Ensure that a consistent identification of functional components that appear repeated many times in a given group of web pages is possible. If the same features have different labels on different pages, the site will be much more difficult to navigate.
ADAPTATIVE & RESPONSIVE DESIGN
1.3.4. SCREEN ORIENTATION (AA)
The content does not require that it be viewed and handled in a single screen orientation, such as in portrait or landscape format, unless it's essential.
CONSISTENCY NAVIGATION & PRESENTATION
2.4.5. MULTI-WAY (AA)
Allow users to find content in a way that best suits their needs. Each user may find one technique easier or more understandable than another.
2.4.7. VISIBLE FOCUS (AA)
Ensure that there is at least one mode of operation where the keyboard focus indicator can be located visually.
VISUAL INTERFACE ELEMENTS
2.4.10. SECTION HEADINGS (AAA)
The intent of this is to provide headers for the different parts of a web page when it is divided into sections. When there are divisions, headings are needed to present them.
MOTION CONTROL & ANIMATIONS
2.3.3. ANIMATIONS FROM INTERACTIONS (AAA)
Animated movements triggered by an interaction may be disabled, unless the animation is essential to the functionality or the information being conveyed.
1.4.1. USE OF COLOR (A)
Color should not be the only means of transmitting information, indicating an action, requesting a response, or distinguishing a visual element.
1.4.11. CONTRAST OF NON-TEXTUAL ELEMENTS (AA)
The visual presentation of UI components and graphical objects must have at least a 3:1 ratio against adjacent colors (except for inactive components)
1.4.3. MINIMUM CONTRAST (AA)
This criterion establishes that the presentation of text and text images must have a contrast ratio of at least 4.5:1, with the following exceptions:
Large Text – For large text (or large text images), a ratio of 3:1 is sufficient. What is meant by large text? It is one with at least 18 points in size or 14 points if it is bold. This is because large text with larger characters is considered to be readable even if it has lower contrast.
Text and accessory images – There are no contrast requirements if the text or text images are part of inactive components of the UI (for example, a submit button that is disabled until the form is filled), are purely decorative, are not visible to no user or are part of images with many other visual contents.
Logos – If the text is part of a logo or brand name, there are no contrast requirements.
Text and accessory images – There are no contrast requirements if the text or text images are part of inactive components of the UI (for example, a submit button that is disabled until the form is filled), are purely decorative, are not visible to no user or are part of images with many other visual contents.
Logos – If the text is part of a logo or brand name, there are no contrast requirements.
1.4.6. ENHANCED CONTRAST (AAA)
This criterion establishes that the presentation of text and text images must have a contrast ratio of at least 7:1, with the following exceptions:
Large Text – For large text (or large text images), a ratio of 4.5:1 is sufficient.
Text and accessory images – There are no contrast requirements if the text or text images are part of inactive components of the UI, are purely decorative, are not visible to anyone, or are part of images with many other visual contents.
Logos – If the text is part of a logo or brand name, there are no contrast requirements.
Text and accessory images – There are no contrast requirements if the text or text images are part of inactive components of the UI, are purely decorative, are not visible to anyone, or are part of images with many other visual contents.
Logos – If the text is part of a logo or brand name, there are no contrast requirements.
1.4.5. TEXT IMAGES (AA)
Avoid using images of text where possible, especially for essential text. Do not use text images on your website except when absolutely necessary or for branding purposes, such as your logo.
2.4.6. HEADERS AND LABELS (AA)
Headings and labels should be descriptive for easy understanding and navigation. When headings are clear and descriptive, users can more easily find the information they are looking for and understand the relationship between different parts of the content.
3.3.2. LABELS AND INSTRUCTIONS (A)
The intention of this Success Criterion is to help users avoid making errors when required to enter data. To help avoid errors, it's good to design user interfaces that provide simple instructions and clues for entering information.
3.3.1. ERROR IDENTIFICATION (A)
Ensure that users are notified that an error has been found and can determine what the error is. The message that notifies users of the error should be as specific as possible.
3.3.3. ERROR SUGGESTIONS (AA)
Ensure that users receive appropriate suggestions for correcting a data entry error, whenever possible. Success Criterion 3.3.1 stipulates that errors must be reported. However, people with cognitive limitations may have difficulty understanding how to correct errors. Users may abandon it because they are unsure how to fix it, despite realizing that there is a bug.
3.2.3. COHERENT NAVIGATION (AA)
Encourage the use of consistent presentations and designs to help those users who interact with repeated content on different pages of a website and need to locate certain functionality or specific information more than once.
3.2.4. CONSISTENT IDENTIFICATION (AA)
Ensure that a consistent identification of functional components that appear repeated many times in a given group of web pages is possible. If the same features have different labels on different pages, the site will be much more difficult to navigate.
1.3.1.3.4. SCREEN ORIENTATION (AA)
The content does not require that it be viewed and handled in a single screen orientation, such as in portrait or landscape format, unless it's essential.
2.4.5. MULTI-WAY (AA)
Allow users to find content in a way that best suits their needs. Each user may find one technique easier or more understandable than another.
2.4.7. VISIBLE FOCUS (AA)
Ensure that there is at least one mode of operation where the keyboard focus indicator can be located visually.
2.4.10. SECTION HEADINGS (AAA)
The intent of this is to provide headers for the different parts of a web page when it is divided into sections. When there are divisions, headings are needed to present them.
2.3.3. ANIMATIONS FROM INTERACTIONS (AAA)
Animated movements triggered by an interaction may be disabled, unless the animation is essential to the functionality or the information being conveyed.
INCLUSION IS INNOVATION
