Accessibility
1. Every interactive element should be focusable
To facilitate interaction through the keyboard it is necessary to ensure that every control is focusable, responds to the interaction just been made and focus does not get caught. Following this recommendation will benefit users accessing through the keyboard or push buttons
2. Focus order should match the visual order
The focus that must be able to receive all the interactive elements, should follow whenever possible, the same order as in the visual presentation. If an individual prefers using the keyboard to interact with a website should be provided with a coherent interaction with what is displayed on the screen.
3. The Focus should be visible
When an element receives focus it is necessary to highlight its difference using a standard display, such as a blue border, to make it easy to be recognised. A keyboard user needs to detect where the focus is in order to interact with the page.
4. Heading structure should be consistent
Every page must contain an H1 or main title. The structure must be logical and should not skip levels, for example, moving directly from a H1 to a H3. One of the usual navigating forms for the users that use a screen reader is to navigate through headings, that's why their correct behaviour is so necessary.
5. The presentation should be separated from the content
Content, styles and scripts must be well-formed to avoid errors and have to be separated. If something fails in its load, the content will remain accessible. Visually impaired users, such as those with retinal sensitivity, could apply their own adapted style guidelines.
6. Information should not be supported only by one sense
Single colour or an icon on its own is not a sufficient signal by itself to communicate information, it will always be necessary to add another kind of signal, such as text. Users with daltonism or those with a visual disability might not correctly interpret information if we rely only on a colour to communicate it.
7. Interactive elements and images should be correctly labelled
A button, besides indicating that it is a button, must tell the function it's going to execute. An image, when not decorative, must detail its content. A person using a screen reader might not interact correctly with the site or application without those indicators.
8. Content should be written in common language
Jargon, technicalities and acronyms might present a barrier to understanding. It is preferable to use a common language, with an active form composed of written sentences composed by subject and predicate. Not expert users or cognitively disabled people will benefit from common language usage.
9. Interactive elements should be differentiated from content
For the interaction to be intuitive it is necessary to reduce the effort needed to detect interactive elements. Its presentation should not be based on colour and be displayed only in a hover state. A cognitively disabled person would have fewer interaction difficulties if links and actions are differentiated.
10. A clickable area should be sufficient
A minimum 40 x 40 pixels area is recommended to ensure a comfortable interaction no matter the device. Users in motion or those with motor disabilities will benefit from an easier way of reaching an interactive element. 11. Different contents should be loaded on different pages Users rely on standard behaviors. When pressing a "back" button, they expect to return to the previous seen page. For that reason, every screen must have its own URL. Following this recommendation will benefit all users because it will allow them to understand their location inside a site or application and will make them feel in control of the navigation.
12. Controls should be correctly labeled
Input fields, checkboxes, radio buttons, and the rest of the controls must be accompanied by a label explaining their meaning. Users with correct vision and also visually impaired users who access content supported by a screen reader will benefit from the correct labeling of controls.
13. Errors should be prevented
If an error occurs it is necessary to tell the user what the source of the error is and how to solve it. It is recommended to display the help information before the field in order for the screen reader to read this information before reading the field. Users who use screen readers will be able to understand how to solve the problem that has occurred and to which field the error message refers to.
14. Content should be able to increase in size
It is important to make it easier for the user to zoom either by gesture in the applications or increase the size of the content in the browser. The structure should not be broken nor the elements change their proportion. Users with vision difficulties will benefit from being able to increase the size of the contents.
15. Content should have enough contrast to its background
For the information to be read easily, it is important to respect the necessary contrast. It is recommended to follow the WCAG AA guidelines which indicate a sufficient level of contrast. Following this recommendation will allow visually impaired users to consume the information.
16. Text should always be displayed as text
Either on a web page or a printed document, content should always remain as text. This will make it easier for users to select content and also for screen readers to interpret the text.
17. Audio or video content should also be provided in the text
Audio or video content broadcasted must be accompanied by a full or summary text transcript. This transcript will facilitate access to information for users with hearing or visual disabilities, as well as users who prefer to consume the information in written form.
18. Content should declare the language
It is important to state the language of the content, whether referring to the whole page or referring to a phrase or text. This indication will allow screen readers to correctly identify the language of the text and thus use the appropriate pronunciation rules for each language.