DEV Community

Cover image for Accessibility: The What, Why & How

Accessibility: The What, Why & How

> Show that you stand for inclusive design by contributing at least a little to make the world a better place for people with disabilities.

In the last few months, accessibility has become more and more important to me, and I hope that after this article (and the upcoming ones in my new a11y series) accessibility will become an important topic for you as well.

Hi, my name is Julia, and I'm an Accessibility & Frontend Developer who is currently taking the next step by studying for the IAAP exam to become a Certified Accessibility Expert. I want to spread the word and encourage every UX designer, frontend developer and anyone else to develop using the accessibility-first approach.

If we all get involved with developing accessible websites and applications and get to it early enough, we can design them to be accessible from the start. This will make it harder for companies to avoid accessibility because of myths and misconceptions like "accessibility means ugly design" or "is very expensive."

That's why I'm starting a series on accessibility by introducing you to this topic in the context of the what, why and how: what accessibility is, why it's important and how we can achieve accessible design.

Table Of Contents

  1. What is accessibility
  2. Why does it matter
  3. How to develop the accessible way

What is accessibility

Regarding to Wikipedia,

Web accessibility is the inclusive practice of ensuring there are no barriers that prevent interaction with, or access to, websites on the World Wide Web by people with physical disabilities, situational disabilities, and socio-economic restrictions on bandwidth and speed. When sites are correctly designed, developed and edited, more users have equal access to information and functionality.

There are all kinds of disabilities, some are recognizable, like people who are in wheelchairs, and others are hidden, like people who are deaf. There are also age-related disabilities like hearing loss or low vision, and temporary disabilities like having a broken arm or even holding a baby.

accessibility does have 11 characters between the letter "a" and the letter "y"

You may have seen the hashtag #a11y, which is the short version of the word accessibility. The reason for this shortening is that there are 11 characters between the letter "a" and the letter "y". In my opinion, this is a cool way to shorten a word and much easier to use as a hashtag.

Why does it matter

"The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect."
Tim Berners-Lee, W3C Director and inventor of the World Wide Web

So why should we make websites accessible? First and foremost, it's simply the right thing to do to give everyone equal access to information. Also, you may be required by law to make your website accessible. Here in Austria, the public sector like universities are forced to make their website 100% accessible under WCAG 2.1 -AA (Web Content Accessibility Guidelines).

Between 10 and 20% of humanity has some kind of disability. Not all of them affect a person's ability to use the internet, such as a person with paralysis in their legs. The most important disabilities in terms of web accessibility are disabilities of the eyes, ears, hands and brain.

People with disabilities use assistive technologies to interact with the Web. To ensure that everyone can use the web with these technologies, it is our job to build websites so that they are properly recognized by these devices. For example, screen readers will not work if your code is not written with accessibility in mind.

The Internet has opened up a whole new world of possibilities, especially for people with disabilities, particularly in terms of vision. Information is now readily available on almost any topic imaginable. People with visual impairments no longer have to rely on others to get the information they need, which means they can achieve a new level of independence that would have been unthinkable just a few years ago.

Finally, when your sites are made more accessible to people with disabilities, they become more accessible to everyone. This means that structuring the site well (which, in my opinion, is what makes a good frontend developer in the first place) by using semantic HTML tags, better design, for example with higher color contrast, and better accessibility for people with disabilities will automatically lead to better accessibility for all.
In addition, search engine optimization (SEO) also improves.

"We nee to make every single thing accessible to every single person with a disability"
Stevie Wonder, Grammy Awards Ceremony 2016

How to develop the accessible way

> Digital text is the most universally accessible format, because it can be transformed into all other useful sensory formats.

Here I would like to give a rough overview of how you can make your website accessible. In the coming weeks, I will write articles with more detailed information about each category.

The W3C, a worldwide web consortium, maintains a working group that deals with website accessibility and publishes standards for it. These standards are called WCAG, which stands for Web Content Accessibility Guidelines. This is a great resource to get more information on how to handle accessibility in your projects.

How can we make the web or our websites more accessible?

Let's go over a few points. If you follow them, your website won't be 100% accessible right away, but it's definitely a good starting point.

Use semantic HTML whenever possible
When using <header>, <main>, <footer> you have already laid a good basic structure of your website that will allow screen reader users to find their way around your site.
The list of semantic HTML tags is long. Try to include as many as possible and use <div> and <span> only for styling purposes, since they are not semantic.

To not break legacy code, aria (Accessible Rich Internet Applications) offer a good (temporary) solution. Then you don't have to replace your already built in <div> tags with semantic tags that would break the styling and thus bring increased extra work. Aria roles, for example, simply take the role of the semantic tag as in the following example.

Code example showing that <h1>Hello world</h1> and <div role="heading" aria-level="1">Hello world</div> are the same for the screen reader.

Interactive elements such as links and buttons, as well as multimedia elements such as images and videos, require a more detailed description (e.g. using alternative text) to be better understood by screen reader users.

Never use color alone to indicate specific information, such as a result on a chart, and use sufficient color contrast. Visually impaired people may have difficulty seeing the contrast between, for example, the background color and the text color.

How to identify a11y problems to fix?
There are automated tools like axe, which already finds about 30% of the problems. The most common screen reader you can use to check your website is NVDA in combination with Microsoft and VoiceOver screen reader already installed on macOS.
Other tools worth mentioning are Wave, Taba11y, and Color contrast Checker which I will go into in more detail in other articles.

If you make web pages 100% accessible for mouse, keyboard, screen reader, and braille users, you have most of the accessibility covered. Therefore, this should be the goal of all of us.

> It is essential to review our disability assumptions so that we do not create barriers and problems for people with disabilities by mistake.


Thank you

Thanks for your reading and time. I really appreciate it!

Discussion (17)

Collapse
andrewbaisden profile image
Andrew Baisden

Excellent article. Julia This one was jam-packed with useful and interesting content on the subject. I believe that too many developers regard accessibility as a low priority or afterthought when it should be an integral part of the development process.

Even now, aria (Accessible Rich Internet Applications) can be overlooked when working on a frontend codebase.

Collapse
yuridevat profile image
π•π•¦π•π•šπ•’ πŸ‘©πŸ»β€πŸ’» Author

Thank you so much for your comment, Andrew!

Collapse
murtuzaalisurti profile image
Murtuzaali Surti

Awesome article! Thank you! I am currently learning accessibility and got to know so much from this article. ✨

Collapse
yuridevat profile image
π•π•¦π•π•šπ•’ πŸ‘©πŸ»β€πŸ’» Author • Edited on

Thank you so much for your comment, Murtuza! Really glad it helped! ☺️

Collapse
murtuzaalisurti profile image
Murtuzaali Surti

By the way, my name is Murtuza πŸ˜…

Thread Thread
yuridevat profile image
π•π•¦π•π•šπ•’ πŸ‘©πŸ»β€πŸ’» Author

I will change that immediately, thanks for pointing this out! πŸ˜‡

Thread Thread
murtuzaalisurti profile image
Murtuzaali Surti

Thank You! 😁

Collapse
francoisaudic profile image
francoisaudic

As an accessibility auditor, I am happy to see a web developer like you, who cares about accessibility, and put it as a priority.
Support for you !

Collapse
yuridevat profile image
π•π•¦π•π•šπ•’ πŸ‘©πŸ»β€πŸ’» Author

Thank you so much Francois πŸ˜‡

Collapse
sylwiavargas profile image
Sylwia Vargas

I love your articles! Thank you for this series - I'm looking forward to the next parts!

Collapse
yuridevat profile image
π•π•¦π•π•šπ•’ πŸ‘©πŸ»β€πŸ’» Author

Thanks, Sylwia ☺️

Collapse
brense profile image
Rense Bakker

Nice article! Its worth noting that for web developers, they can use a11y eslint plugin to highlight accessibility problems in their code!

Collapse
yuridevat profile image
π•π•¦π•π•šπ•’ πŸ‘©πŸ»β€πŸ’» Author

There is soooo much to mention, I am only getting started 😁

Collapse
annetawamono profile image
Anneta Wamono

Awesome article! I've been working a lot on improving the accessibility on my sites so this article is very helpful to me.

Collapse
yuridevat profile image
π•π•¦π•π•šπ•’ πŸ‘©πŸ»β€πŸ’» Author

That's nice to hear, thank you. I am happy that you are going to improve your knowledge of accessibility!

Collapse
josefine profile image
Josefine Schfr

Thanks so much for sharing this, Julia - it's such an important topic and we can't educate ourselves enough on it!

Collapse
yuridevat profile image
π•π•¦π•π•šπ•’ πŸ‘©πŸ»β€πŸ’» Author

Thanks, Josefine! You are so right.