Accessibility or a11y for short is making the web accessible to the greatest number of people as possible giving them equal opportunities for growth and a voice on the Web.
It means ensuring a good User Experience for most users, which is our responsibility as designers and developers.
Sincerely I hope you will find this article illustrative to learn the basics and motivates you to dig deeper.
Benefits
Accessibility is all about expressing things and facilitating users' use of our websites.
For example, helping people with:
- Visual impairments by facilitating screen readers to announce content.
- Hearing impairments by providing close captions and audio transcripts.
- Mobility impairments by providing keyboard access.
- Cognitive impairments by focusing on important content, using plain language standards, minimizing distraction, showing clear error messages, delivering content in more than one way, and building consistent layouts and navigations.
But also improve DX:
- Web Semantics reduces the amount of code produced with no extra effort.
- Let us build sites that are easier to maintain and turn responsive.
- Accessibility guidelines improve the clarity of our designs.
Enterprises:
- SEO benefits accessibility.
- It’s law in some places.
And anyone:
- All kinds of users benefit from responsiveness, clarity, and the chance to access content in more than one way, improving the UX.
We are going to start this with an important concept called affordance
Affordance Principle
If you had never met a teapot before, could you imagine how to interact with it if this was the first time you saw it?
For most of us, the answer is: yeah, sure! But how?
The answer is that its physical design gives us some clues.
In the same way, we need to give our users some insights into how they could interact with our apps. Whether it’s their first time visiting it or if they are using different means of access like a mouse, keyboard, screen reader, etc.
Affordance is the intuition that something gives us through its design to interact with it.
On the Web context, it’s telling the users without saying anything what kind of elements, and behavior they could find through its design.
Maybe you are wondering how to express something without saying on the Web, and the answer is using a good:
- Appearance: user interface + design
- Semantics: meaning + behavior
- Consistency: arrangement + order + hierarchy
Appearance
It’s used to give us visual information about an Element, helping us to differentiate one among others, that’s why the User Interface is also called Visual Affordance.
What kind of elements do you think are these?
That was easy, but be careful and ensure to use the right markup to describe your elements, the next is a bad usage of a div:
That’s not all we can do let’s see more:
Semantics
Tricky question: how do you imagine a non-sighted person identifies elements?
In the same way, we use UI to distinguish between elements we use semantics, expressing additional information through metadata reachable by screen readers, this information is given by the tag name and some special attributes the markup has.
Semantics express meaning and behavior through metadata in our elements
Depending on the elements we can find two types of semantics on the Web.
- Generic
- Implicit
Generic Semantics
Its purpose is to allocate elements; for example, a div has no specific meaning, but it's very useful to arrange elements.
Implicit Semantics
Unlike generics, these have a more specific meaning but the cool thing is that these elements also have behavior or functionality by themselves, a button, for example, has some extra features by default that tell screen readers “Hey I’m a button” (meaning), “you can click or press Enter on me” (behavior).
A button for example interprets a key press ‘Enter’ or ‘Spacebar’ as a click by default when we focus it.
On the contrary, a generic element like the previous is going to need extra code to emulate the same behavior:
Choosing the right elements to do the job is one of the most important considerations of A11y because if we use them wrong we end up with more CSS and JS than needed to emulate its visual affordance and its behavior.
As a rule of thumb, every interactive element (buttons, links, and form controls) have implicit semantics.
Consistency
Order
How we order elements in HTML dictates the order of things that will be focusable on our web pages, avoid using CSS arbitrary to allocate elements, use markup instead it will be less CSS 🪄
Expressing Arrangement and Hierarchy
This is the last subject to express affordance on a web page, now we are capable of expressing meaning and behavior, but we are still missing something. How does a visual impair person make a scroll?
Moving through the page one element at a time is not an option, especially when we have a lot of content and our users want to go back or move to a specific part of the page.
So we have to tell people in a certain way how is our page arranged, and what regions and elements make up the page, and also bring the possibility to jump from one region to another. The second part of our previous statement is done by screen readers so our work is to tell it what those regions and elements are.
Headings and Landmarks
<aside> <footer> <header> <form> <main> <nav> <section><h1> <h2> ...
As we can imagine headings and landmarks have implicit semantics to help us to navigate, giving an idea of how the page is arranged and telling us where we are located.
Headings, define hierarchy and importance, for example:
- h1 is used to mention the name of the page or a title
- h2 is used to mention a major section
In another hand, landmarks define regions of the page as footers, headers, forms, or mains (the place the main content is located).
The best of it is that it doesn’t take extra effort just knowing the purpose of each element 🪄.
Many elements are accessible by default, let’s see a good example:
Outro
- A wider amount of people can benefit from our products giving the same rights to access technology to people with disabilities, also helping the future you when your mouse doesn’t work.
- Giving affordance means making things easier for users, and also for developers.
- Reduce the amount of CSS and JS in the website, reducing the load latency, and improving simplicity and the build speed.
- We have to express affordance for users and screen readers equally.
- It’s necessary to use all the affordance components together (appearence, semantics and consistency) to build a true a11y Web.
Resources
If you wonder how to use a screen reader for iPhone and Mac:
References
A11ycasts series on YouTube
