How to make the Internet available for everyone — accessibility in the web development

A brown doormat with a black text: ‘all are welcome here’
Photo by LeeAnn Cline on Unsplash

The Internet is a really awesome place. Everyone can find something interesting for them here — and people who share their passion. But what about people who cannot use computers the same way as us? Blind or visually impaired people, people with motion or cognitive problems — they all have to struggle every day with tasks that are super simple for people without any disabilities. And our responsibility as developers is to create the world accessible for everyone. Recently, I spent a lot of time learning and thinking about many different aspects connected with accessibility in web development. In this article, I want to share some of my thoughts and advices with you — hope it will help make our world a place where everyone feels welcomed!

Step into the user’s shoes

A modern street seen through glasses.
A modern street seen through glasses.
Photo by Josh Calabrese on Unsplash

Invisible exhibition

Demo of using screen readers made by University of California San Francisco

Surprising, don’t you think? I strongly recommend you checking the Invisible Exhibition (I know that similar initiatives exist e.g. in Prague and Budapest) or at least start a screen reader on your laptop. Struggling with the daily problems of users will certainly make it easier to remember about accessibility in your application.

The personal blog main webpage presented in 4 modes: normal, emulating blurred vision and emulating two different types of color blindness.
The personal blog main webpage presented in 4 modes: normal, emulating blurred vision and emulating two different types of color blindness.
Emulating different vision deficiencies with Chrome DevTools

Emulate vision deficiencies

What to do?

  • Open the Chrome DevTools Panel (ctrl + shift + I on Linux/Windows or cmd + shift + I on Mac)
  • Click 3 dots on the right side
  • Choose Rendering
  • Find dropdown titled “Emulate vision deficiencies”
  • Choose one of the options from the menu
Emulating vision deficiencies via Chrome DevTools

What is important you can perform that experiment on any webpage via Chrome browser. Try some of your favorite web pages in that mode. Can you still understand the whole content? Is everything readable? Or maybe labels without your beautiful color palette look the same as the background?

Disconnect your mouse from the computer

So many questions — and probably you can add some additional to that list. Test your page against them (paying close attention to your custom elements). Keyboard navigation is not as easy as you think!

Accessibility audits

Lighthouse in Chrome DevTools

  • use ctrl + shift + I on Linux/Windows or cmd + shift + I on Mac to open the panel,
  • go to the Lighthouse tab,
  • tick Accessibility checkbox,
  • decide which version (desktop or mobile) you want to test,
  • click theGenerate Raportbutton.

After some seconds you will receive the report (like in the picture below) with the most important data.

Report of the accessibility test — orange 86 score, expandable list of failing elements and list of passed audits.
Report of the accessibility test — orange 86 score, expandable list of failing elements and list of passed audits.
Example report after performing accessibility audit in Chrome DevTools

OK, so what have we got here? First of all, our webpage is scored on a scale of 1–100. A score below 50 is considered bad, 51–89 medium and 90–100 is the score we want to achieve. But the number is not all. The most important thing in that audit is the list of failing audits — visible just below the main score. When you click on one of the audits and expend details, you will receive much more data — e.g. a link to an article where you can learn more about a given problem and a list of failing elements. What’s more — when you click on the failing element you will be redirected to it in the Source tab where you can find more info about the element and where you can play with its CSS or attributes. Definitely worth checking!

Info about elements failing on the contrast color check. List of two buttons with screenshots and ids.
Info about elements failing on the contrast color check. List of two buttons with screenshots and ids.

Personally, I strongly recommend checking not only the section with failed audits but also the passed ones — thanks to that you can learn what is important and improve your skills.

Axe DevTools

Axe tab in Chrome DevTools panel. Two big buttons ‘Scan all of my page’ and ‘Scan part of my page’ and empty space for the test results.
Axe tab in Chrome DevTools panel. Two big buttons ‘Scan all of my page’ and ‘Scan part of my page’ and empty space for the test results.
The Axe in Chrome DevTools

The free version without login allows us only to scan all of your page but it is enough for most of the cases. As you can see it found much more problems than Lighthouse and gave me more context on them. All findings have links to gather more info, automatically assigned impact, and links to failing elements. You can even click the highlight option to check where exactly the failing element on your webpage is. Each issue contains also a section informing you what needs to be done to fix it. Trust me or not, it’s an extremely useful option.

Report of accessibility test. On the left — list of the all issues. On the right details about first of them — including ids, links to more info, option to highlight element on the page and some details about bug like impact or found date.
Report of accessibility test. On the left — list of the all issues. On the right details about first of them — including ids, links to more info, option to highlight element on the page and some details about bug like impact or found date.
The report generated by the axe.

Note

The most popular mistakes

Colorful programming code on the computer screen.
Colorful programming code on the computer screen.
Photo by Ferenc Almasi on Unsplash

Incorrect DOM structure

Missing/Broken keyboard navigation

Missing accessible labels and alternative texts on images

The art painting presenting home in mountains in the winter on the museum wall. On the right side of the picture there is a long description about the image.
The art painting presenting home in mountains in the winter on the museum wall. On the right side of the picture there is a long description about the image.
Photo by Vienna Reyes on Unsplash

Sometimes it’s hard to understand something without additional information. It’s why we have footnotes in books or cards with item descriptions in museums. The same story may occur on your site — especially if we remove their visual part. Add alternative text to your images by using a alt tag for images or correct title in SVG elements. Thanks to that also people using screen readers will know what is in the picture. When the image is only decorative leave those tags empty or add aria-hidden=true— screen readers will understand and omit that. Also, check if without visual content all interactive elements are still well-labeled— tags like aria-label, aria-labelledby, aria-description or aria-describedby might be super useful in that case.

A button on the page with a tooltip from the Chrome DevTools over it. Tooltip presents details about styling and accessibility aspects of the element. The contrast category has an orange warning icon next to it. The keyboard-focusable category has a green ‘OK’ icon.
A button on the page with a tooltip from the Chrome DevTools over it. Tooltip presents details about styling and accessibility aspects of the element. The contrast category has an orange warning icon next to it. The keyboard-focusable category has a green ‘OK’ icon.
Tooltip from the Chrome DevTools with element details.

Not sufficient color contrast ratio

Fixing contrast ratio in the Styles tab of Chrome Dev Tools

When you take a look at the Styles tab of that element you can do even more. Click on the square color preview on the left side of the color property value to open the color picker. Below the color value input, you may see an expendable section with contrast ratio information. The red icon close to the ratio informs us that we should take a look at that values. And reload button allows Chrome to automatically propose the new color — which will have a correct contrast ratio and as close to ours as possible. Nice way to fix that issue, don’t you think?

Of course, the list of the accessibility issues and problems is not exhaustive — but the things I listed are a good start to make your webpage accessible. If you want to learn more check https://www.w3.org/WAI/ or https://webaim.org webpages.

How to avoid accessibility problems in the future?

A whiteboard with some charts, infographics and cards with text.
A whiteboard with some charts, infographics and cards with text.
Photo by NEW DATA SERVICES on Unsplash

Code reviews

Add accessibility plugins to your code

Jest-axe unit tests

const React = require('react')
const { render } = require('react-dom')
const App = require('./app')

const { axe, toHaveNoViolations } = require('jest-axe')
expect.extend(toHaveNoViolations)

it('should demonstrate this matcher`s usage with react', async () => {
render(<App/>, document.body)
const results = await axe(document.body)
expect(results).toHaveNoViolations()
})

You can find more examples and information about the tool on its GitHub page: https://github.com/nickcolley/jest-axe

Regular audits

Summary

Front-end & mobile developer from Cracow, Poland. Passionate about singing and IT event organizing. https://www.domizajac.com