|Introduction: The Definition of Accessibility
Becoming a web developer comes with a cool superpower: to create sites and apps that everyone, including people with disabilities, can easily navigate. When you put this superpower to use, you make accessibility happen. All visitors, regardless of how they access your finished product, will be able to navigate it and understand it.
The DNA of the web is accessible
If you have good sight and hand mobility, you can rely on them to navigate to a webpage and check out its content (probably with the help of a mouse or a keyboard). For the same purpose, a person who is blind may use a screen reader and a keyboard, while a person with good sight but limited or no hand mobility might use speech recognition software.
As a developer, the tools you need to allow for these kinds of interactions (and many others!) are the same tools you use to build your websites or apps:
HTML (with a little help from ARIA opens in a new tab attributes)
CSS
JavaScript
Should your HTML be a soup of <div> tags?
Of course not! We are lucky to be developers at a time when HTML5 is the standard, and it comes with a whole set of semantic tags. These are tags that share the purpose of their content with the browser, and the browser passes this information along to the assistive technologies that people with disabilities use to access the web.
How semantic HTML improves accessibility
You’ve probably used HTML tags like <nav>, <button>, <p> or <h1>. They provide your codebase with a structure that is easy to recognize and maintain.
For example, to designate a navigation section you would use the <nav> tags, and for the main heading of a page you would choose the <h1> tags.
These are examples of semantic tags. They let us know what type of content they hold. But the really neat quality of many semantic tags (not all though!) is that they convey information about their content to assistive technologies as well.
For example, when a screen reader encounters the main heading of this page, it will announce it to the user as "What is accessibility; heading level 1". And that's because we wrapped the main heading in <h1> tags.
Had we chosen a <div> instead and styled it to look like a heading, the user would not be immediately aware of its role. A <div> has no semantic meaning. It is just a container intended for styling purposes or for layout, and requires additional code to make it accessible.
Always start with semantic HTML.
Think about the content and the functionality you want to create, and choose the appropriate HTML tags. While JavaScript and ARIA can help with more complex acccessibility issues, semantic HTML is the foundation of accessibility.
Our job as developers is threefold:
Set accessibility as a goal. Learn about the ways in which users of all abilities interact with the web and the functionality we need to provide for each group.
Follow good coding practices.
Ask questions. Reach out for help and guidance.
If we do our part, then the browser and the assistive technologies can do theirs.
Why accessibility?
From a business side, there are certainly a few practical reasons that can motivate a company to prioritize accessibility:
legal compliance
While the accessibility guidelines established by the W3C (the World Wide Web Consortium) are not legally binding, many countries have adopted legislation founded on them.
Did you know that in 2008, Target (a US-based retail chain) settled a class action lawsuit with the National Federation for the Blind for $6 million? And that in 2023, there were over 4,000 web accessibility lawsuits filed in the US alone?
increased market share
A site can attract new visitors from the millions of users with disabilities who use the web.
improved SEO
Many accessibility practices align with good SEO practices. For example, providing alt text for images and ensuring a logical content structure with proper heading tags are beneficial for both accessibility and SEO.
positive spillover
Many features designed for accessibility, such as clear navigation, easy-to-read fonts, and simple layouts, contribute to a more intuitive and user-friendly interface for all users, not just those with disabilities.
BUT, above all the legal and market incentives, web access is everyone's right.
Web access is everyone's right.
In our world, digital connectivity is key, and your site or app should allow everyone the ability to easily engage with it. The web is not just a form of entertainment; it's a source of information and services that are part of our daily life.
When was the last time you booked a flight with a travel agency? Or mailed a check to pay your bills? We regularly bypass traditional methods for online convenience.
This shift to digital can benefit disabled users as well, but only if we build with accessibility in mind. For disabled users, an accessible web opens the door to freedom and privacy, and can remove many of the challenges associated with their impairments: a blind student could access online courses or a person with limited mobility could order their groceries online.
What next?
Whether it's inconvenience or lack of awareness, the majority of websites are not accessible. 96% of them have some accessibility bugs. The good news is that most of these bugs have easy solutions. In fact, the 6 most common accessibility bugs can be fixed with only HTML and CSS.
Your portfolio site and personal projects are a great place to start implementing accessibility practices. But, before jumping into reviewing your code, let's understand a little bot more about how accessibility works.
Read next: Assistive technologies