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.
Let us learn what is web accessibility by starting with a simple html button. We will style both the
<button> tag to look like a 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
macand click the below buttons.
Not focusable, because of using a
divtag as button
Focusable, because it’s an actual
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.
<!-- img tag with alt attribute --> <img src="sample.jpg" alt="Sample image"/>
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/>
Use voice over for below inputs and inspect the input tag.
Without label & required attribute:
Example Form (No Label)
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
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.
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.