DEV Community

loading...

Accessibility

stereobooster
Hello, I'm a full stack web developer. Follow me on Twitter!
Originally published at stereobooster.com on ・3 min read

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

merriam-webster

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:

Discussion (9)

Collapse
j3ffjessie profile image
J3ffJessie

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.

Collapse
ashleyjsheridan profile image
Ashley Sheridan

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:

  • A person with fine motor control issues (e.g. someone suffering from Parkinsons or Motor Neuron Disease) might have perfect eyesight, but be completely unable to use a mouse. Ensuring all core functionality is available via a keyboard would help them.
  • Someone who is deaf in one ear might struggle if speech audio is only available in one earphone (I've seen this happen before first hand). By adding captions, and ensuring that the audio is provided in stereo, you ensure these people can use your creation.
  • A person with a cognitive disorder might struggle with long, complicated blocks of text on a page. By shortening lines (both by word count and visually in width on the page) you make the text more easily read. You can also run your content through a Flesch/Kinkaid test which will gauge the complexity of the content.

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:

  • Captions - kids making noise while the TV is on, or forgot your headphones on the bus? Captions allow you to watch that latest episode without waiting until later.
  • Good colour contrast - besides benefitting those with colour or contrast loss vision issues, good contrast also benefits those in more exreme lighting conditions, like very high or low ambient light environments.
  • Keyboard access - ever tried to fill in a lengthy form using a mouse to move to each input field? It's a slow process, and far easier to tab across to each one. Good keyboard access and tabbing order makes forms easier for everyone.

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.

Collapse
stereobooster profile image
stereobooster Author

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/

Collapse
j3ffjessie profile image
J3ffJessie

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.

Collapse
stories_of_ren profile image
⚡️Ren⚡️

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.

Collapse
stereobooster profile image
stereobooster Author

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.

Thread Thread
stories_of_ren profile image
⚡️Ren⚡️

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?

Thread Thread
stereobooster profile image
stereobooster Author

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)

Thread Thread
stories_of_ren profile image
⚡️Ren⚡️

I’m using Chrome vox. I’ll have to try it out with the OS assistant on Mac.