En The baseline for web development in 2022 se comenta:
Accessibility
We’ve talked a lot about our users’ devices, but let’s now talk about the users themselves. According to the World Health Organization, over 1 billion persons have some kind of disability. There are many different kinds of disabilities but many of them influence how the user will interact with their devices. We usually use the term accessibility (a11y) to refer the actions needed to ensure disabled users can fully interact with our sites.
However, a11y is not only for disabled people. Actions to improve a11y have a positive impact on the UX for every user. The main reason for this is due to situational disabilities. Some examples of situational disabilities include trying to use your phone while eating or drinking something with one hand or device settings that places a black and white filter on the screen after a certain hour to improve sleep quality. Users faced with these situational disabilities will be able to use pages which are designed with a11y in mind as usual.
Moreover, not being accessible can also lead to legal problems. Depending on the legislation, users may even sue sites that don’t take a11y in account. Some famous cases include both Beyonce and Domino’s Pizza being sued for not being accessible for visually impaired users. So, not having proper a11y can be costly too.
How accessible is the web?
Let’s now take a look at how accessible is the web. To do that, we’ll take out some representative data from the Web Almanac’s a11y chapter. There are many more data points in there in case you want to take a deeper look.
- 77.8% of sites don’t have good contrast between background and font color. This means, that some visually impaired users and users using filters such as the one mentioned above may not be able to fully use almost 80% of the web.
- 29.4% of sites block zooming. Some browsers ignore this setting nowadays but this is still a very big number.
- 42% of sites have improperly ordered headings. Cases such as using an
h2
element without using anh1
element before. This lack of order might cause problems, especially for users using assistive technology. - 29% of sites use
role="button"
. Some people might think that having that role and a click listener might be enough, but buttons must also respond to keyboard events and have proper focus handling. While you might achieve this using JS, you don’t need JS at all if you just use thebutton
element. - 32.7% of sites have
input
elements with no accessible label. In other words, they don’t have an associatedlabel
element, anaria-label
attribute, or anything else. This is worrying because you might be losing revenue due to this. For example, if a credit card input isn’t labelled, you might have users that want to buy something but don’t know where to write the information needed.