Introduction

Hi, that's my first article based on my studies and notes, enjoy.

Beneficts 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

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

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

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 I'm writing and the first time I'm trying to write in english (I am currently learning english)

See ya!

References

Vamos falar sobre Acessibilidade na Web?
WAI-ARIA Roles
WCAG
Supreme Court hands victory to blind man who sued Domino’s over site accessibility
The Internet is unavailable