Accessibility, explained.

So let's say you’re browsing the web, reading articles on the latest news. An article catches your eye so you open the page to read it. You love the article, so much so that you decided to share it with your good friend.

You send it over but a thought keeps lingering in your head: "my friend is blind, how is she going to read the article?" Nevertheless, she sends back that she loved the article and said thank you. But how?

Reading for you is a visual experience. You see the letters as you read through articles. How does your friend do it?

The reason your friend can read articles is because she has a piece of software on her computer which reads webpages aloud to her, and the developers of the website have made sure the content is read by the software correctly.

In other words, the developers built the website with accessibility in mind.

Web Accessibility is the practice of being inclusive to all your users, including those who don’t experience the web the same way you do. Considering the experience of visually impaired users is only one aspect of accessibility

Consider this: you’re watching a video on YouTube and found it funny so you decide to send it to a friend who is deaf. How will he be able to enjoy the video, since for you, watching a video is an audiovisual experience?

If you thought of subtitles then you’re right. Video creators with accessibility in mind, include closed caption subtitles for their hearing impaired viewers.

Of course there's more to it:

• Making sure the colours of text and their background have sufficient contrast for visual impaired users

• Reduce unnecessary transitions and animations for visitors with vestibular motion disorders

So what simple things can you do to be more inclusive in your projects?

• Use semantic HTML like <header>, <nav> and <main> instead of just <div>s

• Include labels in your images so screen readers can describe them to their users

• Make sure text and its background has sufficient contrast

• Reduce unnecessary animation, transitions and unexpected behaviour as much as possible.

Being accessible should be at the core of your development, not just an additional feature as an afterthought.

To learn more visit these links:

• A11y Project

• MDN - Accessibility