Schibsted's vision is to be the marketplace that improves people's lives. For this vision to be possible, it is necessary to allow access and use of our marketplaces to everyone regardless of their context or situation. The application of good practices on accessibility and inclusion in our daily work will lead us to achieve our goal effectively.
Purpose
Having good practices on accessibility and inclusion benefit every single person. If we facilitate keyboard navigation we guarantee access not only to those with permanent motor disability but also those with a plastered arm. We already live in an adapted world: we have stairs, elevators, slopes and other elements that provide us access and mobility. We just have to guarantee that kind of access to everyone.
About this version
The current version of this guide does not intend to be exhaustive or cover every single use case. Its goal is to serve as a first version, putting upfront the practices that are easier to implement and, at the same time, may have the bigger impact on our users. The recommendations collected here are based on internationally recognized guidelines as WCAG 2.0 or section 508(Standards for Electronic and Information Technology).
Recomendations
1. Every interactive element should be focusable
To facilitate interaction through 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 keyboard or pushbuttons
2. Focus order should match 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 to what is displayed on screen.
3. Focus should be visible
When an element receives focus it is necessary to highlight its difference using a standard display, 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. Structure must be logical and should not skip levels as, 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 behavior is so necessary.
5. 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, content will remain accessible.
Visually impaired users, as those with retinal sensitivity, could apply their own adapted style guidelines.
6. Information should not be supported only by one sense
A single color or an icon on its own are not a sufficient signal by themselves 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 interprete information if we rely only in a color to communicate it.
7. Interactive elements and images should be correctly labelled
A button, besides indicating that is a button, must indicate the function is 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 active form composed written sentences composed by subject and predicate.
Not expert users or cognitive disabled people will benefit from a 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 color and be displayed only on hover state.
A cognitive disabled person would have less interaction difficulties if links and actions are differentiated.
10. 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 in 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 labelled
Input fields, checkboxes, radio buttons and the rest of controls must be accompanied by a label explaining its meaning.
Purpose
About this version
Recomendations
1. Every interactive element should be focusable
2. Focus order should match visual order
3. Focus should be visible
4. Heading structure should be consistent
5. Presentation should be separated from the content
6. Information should not be supported only by one sense
7. Interactive elements and images should be correctly labelled
8. Content should be written in common language
9. Interactive elements should be differentiated from content
10. Clickable area should be sufficient
11. Different contents should be loaded in different pages
12. Controls should be correctly labelled