What is web accessibility?

What is web accessibility?

Published at

Reading time

Web accessibility means letting the user navigate and interact with a website by any means. Let it be a keyboard, a mouse or people with disabilities or impairments.

So let's learn what is web accessibility by starting with a simple html button. We will style both the <div> and <button> tag to look like a button.

Button

<!-- div used as button -->
<div class="btn">Click Me</div>

<!-- actual button -->
<button class="btn">Click Me</div>

We will inspect and see how the user might use your website, follow the below steps.

  • Keyboard - Try to focus the below buttons using tab key in your keyboard.
  • Mouse - Try to click the below buttons using mouse.
  • Voice Over - Turn on voice over by pressing command + f5 in mac and click the below buttons.
Click Me
  • Not focusable, because of using a div tag as button

  • Focusable, because it's an actual button

Demo Link

Images

Let's imagine, our user is going to read out loud on our website. Using alt text, a user can find what is that image is. That's what alt attribute is for.

Example:

<!-- img tag with alt attribute -->
<img src="sample.jpg" alt="Sample image" />

Forms

Consider a screen reader is going to fill a form on your website, but the user needs to know the information about the form.

<label for="email">Email</label> <input type="email" id="email" required />

Example:

Use voice over for below inputs and inspect the input tag.

Without label & required attribute:

Example Form (No Label)
Name Email

Above form doesn't tell the user that, what kind of an input he is going to fill nor its required or not. It will voiceover that it's just an input.

With label & required attribute:

We don't want our user to submit the form without filling required fields. That's where label element required attribute comes in.

Example Form (With Label)

Above form will voice over the user about the input field and whether its required or not.

Final thoughts

As a developer I recommend my fellow developers to consider all kinds of user and accessibility in mind while developing an application or a website. Thanks for reading my post. Catch you in my next post.

Share this article