# Introduction

In the world no one is perfect. Some have disabilities like visual or hearing issues. Some may have a slow connection or broken hardware or simply someone who is in an unfavorable environment. To make the web accessible for everyone we got the Accessibility (A11y).

# What is accessibility

According to WHO there 15% of people with disability in the world. That’s a huge amount of people. I am not gonna bore you with the statistics. But it’s huge. There is a myth that a11y is only for blind people. That’s not true and there are a lot of different types of a11y.

Different type of disability Figure: Different type of disability

As you can see in the image the disability can be permanent, temporary, and situational.

# Accessibility in Web

Web accessibility refers to the practice of creating websites that can be used by anyone. For example, adding subtitles to videos is helpful for Hard of hearing or deaf people or who are in a loud environment. Similarly making sure your text is not too low contrast will help the user who has low vision, doesn’t have a high-resolution monitor, and people who are trying to use their phone in bright sunlight. Let’s see some other examples.

People suffering dyslexia

Figure: People suffering dyslexia

People suffering from trembling, usually old people

Figure: People suffering from trembling, usually old people

People with bad eyesight

Figure: People with bad eyesight

People with partial vision loss Figure: People with partial vision loss

# Why is it Important

Now why this is so important. We know that the more people you can bring to your application is better. But this is not just business. Also, most web applications are not enriched with this feature. Most of us think very little about this and treat it as optional. This is a question of morality. We don’t wanna leave anyone behind.

In the USA this is a very serious thing and the “American disability act(ADA)” is very strict about this. A lot of legal actions happened in the USA due to this and a popular one is the Dominos Pizza got sued as the consumer could not place the order because they did not have any a11y.

But is it only the developer’s responsibility? No. From UX to developer, product owner to shareholder everyone’s responsibility is to ensure that their solution has the a11y.

# Type of A11y Tools

There are different types of screen readers to help people with disability. For Windows, NVDA, and Apple have VoiceOver. You can run it by pressing CMD + F5. Linux has ORCA. There is a Google Chrome extension called Screen Reader.

# Semantic Markup

As a developer we often ignore html. Write random markup. Have you ever asked yourself why there is <b> tag and <strong> tag? Both do the same thing.

People with partial vision loss Figure: Example of semantic markup

So what is semantic markup? As you can see, there is a heading, paragraph, and div. But did you notice all of them are just block elements? To build different kinds of layouts, and shapes you should use <div>. For paragraph, we use <p> tag, for heading we use <h1>, <h2>, <h3> and so on. Using the right tag in the right place is the purpose of the semantic markup.

# Semantic markup examples

I have said enough. Even I am getting bored with all these theories. But they are important to realize the whole concept. Let's dive into some code examples.

<nav>
  <ul class="mb-4">
    <li><a href="#">Semantic</a></li>
    <li><a href="#">Markup</a></li>
    <li><a href="#">Example</a></li>
  </ul>
</nav>

Semantic markup Figure: Example of semantic markup

So, when we navigate to the ‘Semantic’ word by the screen reader, it will read like the following.

Navigation list with 3 items. Semantic, internal list, link item

I have used the Chrome extension called Screen Reader. Go try it. For the existing codebase, if there is a situation for which you can not change the markup, you can use role property.

<div role="navigation">
  <ul class="mb-4">
    <li><a href="#">Markup with</a></li>
    <li><a href="#">Semantic Property Role</a></li>
    <li><a href="#">Example</a></li>
  </ul>
</div>

It will be read by the screen reader exactly the same.

# ARIA

Writing semantic markup is not always enough. We need special semantic attributes to indicate the screen reader in different situations. And that is with the help of ARIA. I will write briefly about aria in Part 2 of this blog as it is already HUGE.

# References

  • Youtube Video — A11ycasts with Rob Dodson
  • Book — HTML Mastery: Semantic, Standards and Styling (Paul Haline)
  • A11y Project

Thank you for reading.