Home | About

What is accessibility?

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.

Web Accessibility

Let us 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.

Click Me

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="images/accessibility/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:

Form

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.

Form

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

Conclusion

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.

Articles