Introduction
This is just an introduction based on my personal research and note-taking about accessibility on web.
Benefits of accessibility
In a research by Rebecca Wettemann & Trevor White called The Internet is Unavailable they assert:
For Internet retailers alone, denying full access to consumers who are blind is leaving as much as $6.9 billion annually to a handful of accessible alternatives.
In other words, not making your site accessible besides being unethical, can cause a significant loss of users depending on the kind of business that you site operates.
To make your site accessible we are going to understand the work that has been done to make it possible with WCAG
WCAG
What is it ?
The WCAG is a guide created by WAI (Web Accessibility Initiative) through the W3C (The World Wide Web Consortium), that develop patterns and guidelines to help everybody to build a web based on accessibility principles, internationalization, privacy and security.
The structure from the guide is divided in four nested layers
- Principles: At the top are four principles that constitute the base of web accessibility on Web: Perceivable, Operable, Understandable and Robust.
- Guidelines: Below the principles are the guidelines. The thirteen guidelines provide the basic objectives must have to achieve the content more accessible to the users with disabilities.
- Success Criteria: For each guideline, are given success criteria, in order to meet the needs of multiple groups and situations, are defined three levels of compliance: A (the lowest), AA and AAA (the highest)
- Techniques: The techniques are informative and have two categories: those that are sufficient to for meeting the success criteria and those that are advisory
- Success Criteria: For each guideline, are given success criteria, in order to meet the needs of multiple groups and situations, are defined three levels of compliance: A (the lowest), AA and AAA (the highest)
- Guidelines: Below the principles are the guidelines. The thirteen guidelines provide the basic objectives must have to achieve the content more accessible to the users with disabilities.
Now we're going through some of the principles and highlighting some important guidelines for these principles in a VERY short way. The recommendation is to read the official WCAG guide.
But before, to clarify the success criteria, your site doesn't need to follow all the triple A (AAA) criteria, just the AA and A are enough to have a accessible website.
Perceivable
- Provide text alternatives for any non-text content
- Provide alternatives for time-based media.
- Subtitles
- Closed Captions
- Sign Language
- Create content that can be presented from different ways (for example a simplified layout)
- To facilitate the hearing and visualization of content to the users
- Not use just colors to transmit information and use the correct contrast of colors
Operable
- Make all functionality available from a keyboard.
- Provide users enough time to read and use content.
- If you have a component that changes based on time, give funcionalities to pause, stop or extend the time.
- Do not design content in a way that is known to cause seizures or physical reactions.
- Avoid creating websites with excessive animations and blinking stuff on the screen if you need, provide an option to reduce the animations using
prefers-reduced-motion
- Avoid creating websites with excessive animations and blinking stuff on the screen if you need, provide an option to reduce the animations using
Understandable
- Made the text content readable and understandable
- Make Web pages appear and operate in predictable ways.
Robust
- Content must be robust enough that it can be interpreted by a wide variety of user agents, including assistive technologies.
Remembering, the points above are extremelly summarized, in the guide you will found the success criteria for each guideline and their levels.
Making your website accessible
The secret to making your website ready for assistive technologies is on the semantics of your HTML, the foundation is choose wisely the HTML elements used to build your website.
Don't use only divs and spans to build your website, use them just for styling purposes.
Every state of your component needs to be communicated to the users, if it's open or not, if it's related with another element. All these things need to be communicated to the user.
Accessible Rich Internet Applications (ARIA)
The ARIA is a set of special attributes for accessibility, that can be added to any markup language but is specially designed for HTML
This attributes can be categorized into roles, states and properties
Properties can be used to give more meaning or semantics to an element, for example aria-label where you can add a label to any element that doesn't have one, providing more context.
States define the actual condition of an element for example aria-disabled which specifies for screen readers that an element is disabled
Roles define what the element is, imagine a role as a preset, because a role uses other aria attributes to tell what that element is. For example role="alert" under the hood uses aria-live="assertive" and aria-atomic="true".
Conclusion
So that's it, this is a introduction to accessibility on web there's a lot to learn along the way. I hope this article helped you some way, it's the first article that I'm writing and the first time trying to write in english (Currently learning english)
See ya!