What is accessibility?
Definition of accessible
1a : capable of being reached a remote region accessible by rail also : being within reach fashions at accessible prices 2 : capable of being used or seen : available information that should be accessible to everyone 3 : capable of being understood or appreciated the author’s most accessible stories an accessible film 5 : easily used or accessed by people with disabilities : adapted for use by people with disabilities accessible bathrooms/doorways/seating/parking
Accessibility (often abbreviated to A11y—as in “a” then 11 characters then “y”) in Web development means enabling as many people as possible to use Web sites, even when those people’s abilities are limited in some way.
For many people, technology makes things easier. For people with disabilities, technology makes things possible. Accessibility means developing content to be as accessible as possible no matter an individual’s physical and cognitive abilities and no matter how they access the web.
– MDN
Web accessibility is the practice of making your websites usable by as many people as possible. We traditionally think of this as being about people with disabilities, but the practice of making sites accessible also benefits other groups such as those using mobile devices, or those with slow network connections.
You might also think of accessibility as treating everyone the same, and giving them equal opportunities, no matter what their ability or circumstances. Just as it is wrong to exclude someone from a physical building because they are in a wheelchair (modern public buildings generally have wheelchair ramps or elevators), it is also not right to exclude someone from a website because they have a visual impairment. We are all different, but we are all human, and therefore have the same human rights.
Accessibility is the right thing to do. Providing accessible sites is part of the law in some countries, which can open up some significant markets that otherwise would not be able to use your services or buy your products.
– MDN
Which kind of disabilities are we talking about?
We often tend to think about disabilities as some specific and rare condition, but there are as well temporary and situational disabilities:
| Permanent | Temporary | Situational | |
|---|---|---|---|
| visual | Blindness, low-level vision, and color blindness | Cataract | Low-light or too-bright light |
| hearing | Deafness, low-level hearing | Ear infection | Bartender or passenger in a train |
| mobility | Loss of limb or paralysis or neurological disorders | Arm injury | Parent with a baby in hands |
| verbal | Non-verbal | Laryngitis | Heavy accent |
| cognitive | Dyslexia, ADHD, intellectual disabilities | Depression | Stress, distraction |
This chart shows which people with non-permanent disabilities would also benefit from accessibility. Don’t compare different conditions - sadness is not the same as depression.
A lot of disabilities are “invisible” - you would not know that people have them unless people would tell you. A lot of cognitive disabilities are not diagnosed. You or your friends and family members may have a disability and you may not know about it.
Disability can appear after disease, for example, people after stroke may get visual, mobility, verbal, and cognitive disabilities. Some disabilities appear with the age.
Why do we care about Web accessibility?
In modern society, the Web is as important as water, food, and other human essential needs. The UN Convention on the Rights of Persons with Disabilities recognizes access to information and communications technologies, including the Web, as a basic human right.
The Web is needed to make an appointment with the doctor, to do online shopping, to do online banking, to learn and for many other tasks.
The law
Accessibility is required by the law in different countries, for example:
- Section 508 of the Rehabilitation Act in the US
- EN 301 549 in the EU
- the Accessibility Regulations 2018 in the UK
- Federal Ordinance on Barrier-Free Information Technology in Germany
- Accessibilità in Italy
- the Disability Discrimination Act in Australia
- etc.
Top comments (9)
Love this breakdown. Can you possibly compile most common solutions to implement as well for a follow up article? Just interested myself. Docs are all over for different stuff but someone that is more familiar with A11y may have a better process of what works and what doesn’t.
The best documentation for fixing accessibility problems on the web is the WCAG (Web Content Accessibility Guidelines), specifically the 2.1 docs. Like you've noticed though, they can be a little difficult to comprehend for someone who is just starting to understand this field. I've tried to break down some of the more common problems with a top 10 list which should help you understand and fix them.
While a lot of the focus for web accessibility focuses on vision problems, like colour contrast, and screen readers, there's a whole lot more to it. So, for example:
With almost all improvements made to fix issues for people with disabilities, everyone else will also benefit in small ways. This effect is called the drop curb or curb cut effect. It's commonly seen with things like:
Lastly, it's important to remember that disabilities are not on/off switches, and each person has a unique blend of permanent and temporary problems that can change day to day. Any fixes should attempt to take into consideration how well they will function against other problems.
It's a lot of work, but start at the beginning and make accessibility part of your development workflow. Eventually it becomes second nature in the same way that you might avoid using functionality XYZ because you know it doesn't work well on browser ABC. Things change over time, so it always helps to read up blog posts and articles where people cover various topics.
Hi. To be fair I'm not an expert myself (sorry if I made an impression like I am). I am, as you are, interested in the subject. I guess next article can list all types of disabilities in more details, for example like here download.microsoft.com/download/0/...
Having a list of disabilities we can derive list of features required by users, like better contrast, bigger fonts, alts on images etc.
Also we can derive a list assistive technologies that people use, like screen readers, magnifiers, etc. We can use those technologies to do tests, like we use different browsers for cross-browser testing.
If you are looking for quick wins, I guess, this is a good start a11yproject.com/checklist/
Very much appreciated. I think I might have to do some research on different technologies used like screen readers and write how we can develop better using knowledge of those technologies.
I would recommend reading the WCAG standards to get a comprehensive understanding. I would check them out through WebAim, which also has reference to ATAG and WAI-ARIA. Most legal guidelines have their basis on WCAG 2.0 + 2.1.
The first step to making an accessible Web app is to write Semantic HTML.
Then also finding Tools that will help you. There are dev tool extensions like Lighthouse and AXE that will also help make your web app more accessible, without having extensive knowledge on accessibility.
And understanding that DOM order is the reading order/ tab order so moving elements around with CSS may not be the best of ideas.
I tried to follow WAI-ARIA recommendations (including semantic HTML) and used Lighthouse. Example is here dev.to/stereobooster/accessible-re...
But then I tested it with screen reader and result was ... not so good. So I would say that semantic HTML and WAI-ARIA != accessible. Actually testing with real assistive technology - this is what matters.
I pulled your code. It's not too off from being a good example of aria for screen readers. It reads fairly well for your actionable items. it is a little buggy on initial loading, but It's reading fairly well on the screen reader I'm using. So I guess I'm curious what issues you are seeing?
I don't remember - it was long time ago. Which screen reader did you use? I guess, I used built in Mac OS assistive technology (but maybe something else)
I’m using Chrome vox. I’ll have to try it out with the OS assistant on Mac.