Raising Awareness for Web Accessibility
Many people are unfamiliar with Web Accessibility, but you really should not be. When you are a front-end dev, you
might have stumbled upon HTML attributes like aria-hidden, aria-live, aria-labelledby and so on. Sadly, not
many developers think about what those attributes actually do and why they even exist.
Table of Contents
Introduction
When you first try to educate yourself about Web Accessibility, you will be greeted by a never-ending flow of abbreviations, acronyms and numeronyms. This can be overwhelming, so over the next few minutes I will try to explain most of them, telling you why they are here and what purpose they serve.
Accessibility in the real world
In the real world, accessibility means anything that improves the life of people that suffer from an impairment. This could be a wheelchair ramp, braille tables to describe historical monuments or guidelines on the floor that help blind people traverse through their hometown with a walking stick.
According to the World Health Organization, approximately 1 billion people suffer from disabilities worldwide. This number is steadily increasing due to various reasons.
As a matter of fact, almost everyone is likely to experience at least one form of disability through their life. As we grow older, for example, our eyesight decreases. Maybe your ability to walk will be impaired because of accidents, or other problems occur because of chronic health problems.
Disabilities
Speaking of which, the term disability refers to any kind of temporary or permanent impairment. Usually of one of the following categories.
- Auditory
- Cognitive
- Neurological
- Physical
- Speech
- Visual
Accessibility in the digital world
How does this translate to the digital world? Like in the real world, people with disabilities suffer from social stigma and discrimination. When we use the term Web Accessibility, we refer to the ability of assistive technology to access web content. In order for assistive technology to access web content, the content must follow a certain ruleset and be designed and coded properly. In order for web content to be designed and coded properly, developers must educate themselves about Web Accessibility.
Over the last 20 years a massive shift has moved many services into the digital world. Bank clerks were replaced by online banking, travel agencies have been succeeded by online booking platforms, call-center agents are being replaced by chatbots. That means that people that rely on human interaction just cannot perform some of their everyday activities as they used to in the past.
The European Union Web Accessibility Directive
All Europeans can take a full and active part in digital economy and society.
In 2016, the European Union decided that the time has come to act. Therefore, in the EU parliament the EU Web Accessibility Directive has been passed. It obliges public sector bodies to provide unrestricted access for people that rely on assistive technology. In order to meet the directive’s requirements, websites and web applications have to provide an accessibility statement, a feedback mechanism for accessibility and must follow the WCAG2.1 Level AA conformance level. On top of that, each member state is obliged to monitor their governmental web content and send a yearly report to the European Union.
The deadline for the directive to be applied into national law is July 28th 2025. From then on, any web content owned by public sectors must meet the directive.
This directive alone will also impact private businesses. Consultants working on public sector projects will have to be proficient with the topic, companies that provide similar services as the government - think about private health insurance - might accelerate their efforts to not alienate their customer base.
The European Union Web Accessibility Act
But because these implications are not enough, a second law has been passed. The EU Web Accessibility Act will oblige private businesses that provide necessary services to meet the WCAG2.1 Level AA conformance level just like public sector bodies.
Many businesses that most certainly will be affected by this are unaware about that act.
Here is the list:
- computers and operating systems
- ATMs, ticketing and check-in machines
- smartphones
- TV equipment related to digital television services
- telephony services and related equipment
- access to audio-visual media services such as television broadcast and related consumer equipment
- services related to air, bus, rail and waterborne passenger transport
- banking services
- e-books
- e-commerce
However, a few exemptions exist. For example, if your business has 10 employees or fewer, or the annual revenue is less than 2 million Euros, you are excused. Everyone else will be prone to penalties and fines.
Foundations
WebAIM
WebAIM is a non-profit organization and short for Web Accessibility in Mind. Their mission is to simplify creating accessible web content. They provide courses, trainings and audits for businesses and conclude a yearly study about the status of Web Accessibility across the globe.
Also, this organization provides a tool called WAVE - Web Accessibility Evaluation Tool - that lets you check the WCAG conformance levels of your websites automatically.
A11y
A11y is a clever numeronym. The accessibility movement is a loosely-coupled community-driven effort to increase awareness about this topic and to make developing accessible content easier. For example, the Svelte compiler has built-in accessibility warnings.
WAI
The World Wide Web Consortium (W3C) is responsible for the Web Accessibility Initiative. It’s a federations of multiple working groups that created the WCAG, ATAG, UAAG and the WAI-ARIA specification.
Guidelines
WAI-ARIA
ARIA is short for Accessible Rich Internet Applications. This is a collection of landmarks and attributes that help improving the accessibility of your web content. As web applications grew more complex and dynamic, accessibility suffered. Landmarks help assistive technology to traverse through your page, with some ARIA roles being implied by HTML5 semantic elements.
For example, <nav> translates into <div aria-role="navigation">.
WCAG
The Web Content Accessibility Guidelines in version 2.1 is a set of rules web developers need to follow in order to meet the conformance levels that are required by European law in the future. Version 2.2 has been proposed in September 2022, although the changes are minuscule.
Still version 2.1 is the technical standard as-is for developers who create web content. Each guideline has testable success criteria that are split into three levels: A, AA, AAA (with the latter being the highest). Each level represents conformance to the four principles, POUR.
POUR
The four principles of WCAG are abbreviated by POUR and require a short description to understand what they stand for.
Perceivable
Information and user interface components must be presentable to users in ways they can perceive.
Content must not be hidden to all senses a user has. For example, if a user with visual impairments to a degree of total
blindness accesses your page, screen readers must be able to announce your page’s content to the user. This can be
achieved by using the right aria attributes and setting the page language for your document so the screen reader knows
what dialect to choose.
Choosing the color scheme for your page requires meeting a certain contrast ratio (4.5 : 1 for normal text, 3 : 1 for large text).
Also, this principle refers to time-based media, such as videos. Videos have to provide closed captions at least, or sign language translations for deaf users.
Operable
User interface components and navigation must be operable.
Your user interface must not require an action that can not be performed by the user. An overexaggerated example would be requiring the user to sing a certain tune in order to click a button.
Android and iOS devices allow you to pair your bluetooth mouse with your smartphone, resulting in your device being capable of concurrent methods of user input. In order to meet the principle, none should be actively blocked by your page.
Generally speaking, websites should be navigable by keyboard alone.
Understandable
Information and the operation of user interface must be understandable.
Complex information needs to be explained understandably. That means for example that you could provide a setting that lowers your text’s language level to suit people with lower reading level. Also form controls, input validation errors and user actions need to be announced properly to the user.
Robust
Content must be robust enough that it can be interpreted reliably by a wide variety of user agents, including assistive technologies.
This is the easiest one, in order to fulfill this principle your markup must be semantically complete, e.g. by having a corresponding ending tag for each starting tag and following HTML5 requirements.
ATAG
The Authoring Tools Accessibility Guidelines in version 2.0 aims at creators of CMS-based websites and developers of WYSIWYG-Editors or Multimedia authoring tools. Think about anything related to Wordpress, Typo3, Joomla, … and video cutting software.
In short, people with and without disabilities must be able to create accessible content.
UAAG
For anything that could serve as a user agent, the User Agent Accessibility Guidelines exist. Developers of tools like browsers and their extensions, media players, screen reader software etc. need to follow those guidelines.
Facts and Numbers
According to WebAIM and their yearly study, 96.8% of the web’s top 1 million websites don’t offer full accessibility. ~51 million distinct accessibility errors have been detected with a 1 in 19 home page elements failing WCAG conformance. I’m talking about the minimum requirement, Level A.
Those numbers were detected by automated tests only. Automated tests alone are insufficient if you try to achieve the Level AA conformance level, so in reality it is expected for the status to be much worse.
Conclusion
I personally stumbled upon this topic when I worked on a project in the public sector. To my surprise, even people employed at that company were not aware of this topic, albeit being affected by the European Accessibility Directive. I hope that more people hear about those various institutions and their work. In my opinion, we developers are the driving force behind automation and digitization, have the social duty of actively raising awareness for vulnerable people in our society.