DEV Community

Cover image for A practical guide to web accessibility: Part 1: Is my website accessible?
Ary Barros
Ary Barros

Posted on

A practical guide to web accessibility: Part 1: Is my website accessible?

What is web accessibility?

Web accessibility involves a series of resources that make it possible for everyone to browse, understand and interact on the Internet, regardless of their difficulties or limitations.
This means that websites, tools and technologies are properly designed, developed and coded so that people with permanent disabilities or those with momentary disabilities can use them. In this way, people, regardless of their limitations, can perceive, understand, navigate, interact and contribute to the environment in which that page or program is made available on the web.

Why should I care about accessibility?

Disabled people represent 15% of the world population. Sites or systems that do not have specific adaptations for this audience, in addition to suffering from this lost share of users, are still subject to legal penalties in certain countries.

Web accessibility guidelines

Alt Text

The Web Content Accessibility Guidelines (WCAG), created in 2014 and renewed in 2018, is a list of features to be followed for a website or web system to become accessible. Among the elements to be discussed in these guidelines are:

  • Clean navigation
  • Tab order
  • Landmarks and site maps
  • HTML structure
  • Expressive titles
  • Well-placed and defined headings
  • Content lists
  • Text
  • Contrast
  • Color
  • Descriptive images

Each of these items represents a functionality of building a page (involving HTML + CSS + JS) that can be implemented in order to help the final understanding of the website.

How do I know if my website is accessible?

To test whether our website or system is accessible or not, we can imagine the following scenarios:

Blind people

Blind users use websites through a screen reader, which is navigated exclusively by the keyboard. To do this test, consider browsing your website with the TAB key. Check if you can reach all possible inputs and buttons, perform actions with them sequentially.

People with low vision or color blind

Users with color blindness or low vision use high contrast functions or color adaptations for images and texts. Does your page have any of these options?

People who are deaf or have impaired hearing

Deaf people make use of the sign language text transcriber integrated in the website and also of video descriptions. Does your website have any free sign language translation options?

Dyslexia and other intellectual disabilities

This group of people has difficulty interacting with very small or complex screen elements, such as menus in navbars or badly positioned buttons. Does your website have these well positioned elements?

What is your result?

If your website or system has not passed one, or none of the following, don't worry. In the next part of this article, we will discuss how we can prepare our front-end for these diverse situations, using simple and easily accessible tools in the community. Are you ready?

Thanks for reading! :)

Top comments (0)