Transcript
Introduction
In this tutorial, you’ll learn about accessibility: what it is, why it’s important, and how accessible sites benefit everyone.
First, the what. As a subset of digital accessibility, web accessibility means building sites that all people can use regardless of their abilities. In the most general, straightforward sense, accessibility guarantees universal and equal access to content and services.
Technical terms
As you learn or practice accessibility, you’ll encounter technical terms. Let’s clarify them:
- A11Y is a numerical abbreviation of the word accessibility, where “11” represents the number of letters between “a” and “y”.
- WCAG is short for Web Content Accessibility Guidelines, an international accessibility standard developed through the W3C.
- The foundational principles of WCAG are dubbed POUR: Perceivable, Operable, Understandable, and Robust:
- Perceivable means delivering the information so that anyone can understand it. For example, provide text alternatives for audiovisual content, like images or videos.
- Operable refers to enabling people to use the interface and interact with the site. For example, support keyboard functionality instead of mouse-only interactions.
- Understandable ensures people can comprehend the information and use interfaces. For example, form elements need corresponding labels that convey clear instructions.
- Robust means content remains accessible as technology advances and evolves. For example, use correct markup to guarantee compatibility with current and future browsers and assistive technologies.
Misconceptions
All this sounds reasonable enough, yet businesses and web makers are reluctant, citing common misconceptions. It’s time to reframe these fallacies:
- Accessibility is hard. Yes, so is coding, writing, and baking soufflé. Still, humanity has managed to accomplish these tasks for decades, even centuries.
- Accessibility = poorly designed websites. An accessible website would be as beautiful as your skills and project requirements allow it to be.
- Accessibility compliance is expensive. Sometimes. That’s why one should create an inclusive experience from the get-go. Treating it as an afterthought—something you could “solve” with an add-on just before launch—is always the less sensible, costly approach.
- Accessibility is a nice-to-have. On the contrary, it’s as instrumental to a site as the client’s branding, the team’s coding standards, or your language’s grammar rules. You won’t deliberately introduce bugs, so why would you make things inaccessible?
A better way to think about Accessibility is as a code name for empathy. That makes it much harder to ignore and intuitive to adopt. More than the legal compliance, commercial liability, and financial implications—it’s about fundamental human rights.
Statistics
In 2006, the United Nations Convention on the Rights of Persons with Disabilities defined access to information and communications technologies as a basic human right
According to W3C’s 2018 report, there were over 1 billion people with disabilities worldwide
WebAIM’s latest report found that 95.9% of the top million homepages had accessibility issues. 96.4% of the errors detected fall into six categories
Low contrast text | No alternative text for images |
Missing form input label | Empty links |
Empty buttons | No document language |
These six issues have plagued the web for 25 years since WCAG 1.0 was released in 1999.
Why it’s important
Accessibility isn’t only a legal requirement in many countries; it’s good for business, too. People with disabilities have a massive spending power. Yet, the overwhelming majority of websites neglect to take them into account—the following demonstrations help illustrate some difficulties many of them have to overcome:
- In the first example we will see how a non-visually impaired user would see the page (in optimal conditions). The design includes non-default styling: small fonts, links without underlines, and insufficient color contrast. Now, if this is not easy to navigate for a non-visually impaired person, how much more difficult will it be for someone who is visually impaired?
- The next two examples emulate how users with vision deficiencies see the page. The first example shows the impact of low contrast, small fonts, and no underlined links. In the second example, we will see that sometimes, a screen might be a complete blur.
- In the next example, I added an accordion to a post and then interacted with it using the mouse. I then disabled JavaScript in the browser (at 0:09) and tried interacting with it. As the video demonstrates, it’s impossible to use without JavaScript.
- In the last example, I simulated a user navigating through the page with a keyboard, using the tab key to move forward and shift + tab keys to move backward. The links, the search form, and the YouTube video are properly marked when focused, but the Yes/No buttons are not. When developers/designers alter the default styling of interactive elements (in this case, the buttons) to hide the visual indication of the focused element, the user can’t tell if they are active.
The takeaway is that accessible sites aren’t a bonus—they’re essential for so many of us. The range of disabilities is as diverse as humanity, covering everything from physical to cognitive to mental. Permanent blindness to age-related vision impairment, temporary hearing loss to difficulty concentrating, broken wrist to epilepsy, dyslexia to ADHD, color blindness to Multiple sclerosis.
That’s a multitude of people who are unable to fill out forms, navigate through sites, recognize links in texts, discern images, consume podcasts and videos, or add items to the cart.
Conclusion
Accessibility, even on the web alone, is a broad, multifaceted topic that’s impossible to cover in a few minutes. We encourage you to learn more—read, experiment, and advocate for change. Since over a third of the web’s most visited sites use WordPress, our community is pivotal in making the web more accessible. You don’t need to be a (certified) accessibility expert. Anyone involved in online creation can make a difference. In the next lesson, you’ll learn how non-technical users can help without touching a line of code.