Beginners Web Accessibility Guide

5 min readSep 8, 2016

WAI-ARIA (Web Accessibility Initiative — Accessible Rich Internet Applications), I’m pretty sure you heard of this term before & if you didn’t well at least you read it now.

When you are building a web based internet application it’s important to keep web accessibility in your mind. Why is it important?? Well it’s important because with this your web applications will be more accessible to people with disabilities.

Well, enough talking about it, Lets dive right into it.

1.Adding background to links and input fields.

Whenever you are creating a link or input fields make sure that you add a background that stands out. You can add a background color on hover to links & you can add background color to input fields on error & that makes it stand out and make it easy to understand that something went wrong.

Remember: Hover, focus and click are three different things. So keep that in mind while styling your website and making it more accessible for the people with disabilities.

2.Don’t use color alone to convey your message.

You may not be familiar with the fact that some of the people that use internet are color blind which means that they cannot see certain colors that you might be using on your website. So what’s the solution?? You must use other terms like numbers or asterisk * while pointing out important information or error instead of just colors.

3.Add subtitles to your videos

When it comes to disabilities some people face hearing problems as well. So you should be aware of that while building web application. The people who cannot hear, there’s only one common solution & that’s subtitles.

Here’s a guide for making subtitles for your video.

create a file with .vtt (Web Video Text Tracks) extension.

Note: 00:00:00.000 = hours:minutes:seconds:milliseconds

WEBVTT FILE0
00:00:00.000 → 00:00:10.000
[Intro Music]1
00:00:10.000 → 00:00:30.000
[Bird Chirping...]2
00:00:30.000 → 00:00:60.000
[Kids playing in the garden…]

2.Attach your subtitle file with your video element.

<video>
 <source src=”#” type=”video/mp4"/>
 <source src=”#” type=”video/ogg”/>
 <track label=”english” kind=”subtitle” srclang=”en” src=”subtitle.vtt”></track>
</video>

Now play your video and see the magic happen.

4. Give tabindex to your elements.

Its a best practice to index your element so that blind users can tab through your content. This makes it very easy for them to navigate through your content & input fields.

<form action=”#”>
 <label>
 Username
    <input tabindex=”1" type=”text” />
 </label>
 <label>
 Password
    <input tabindex=”2" type=”text” />
 </label>
    <input tabindex=”3" type=”submit”/>
</form>

Note: Don’t use tabindex greater than “0” because it will make it difficult for users with assistive tech to navigate the page. (above example is for demonstration purpose only)
Any element with greater tabindex than “0” will be the first one to get focus and if that isn’t the first item in the order than it will make things more confusing and that’s why it isn’t recommended.
When no tabindex value is used, the default value is “0”, which means that the items will be tabbable in the exact same order they are presented in HTML. (which is a good thing)

5.Give your content some role.

While creating html elements its best practice to give them some roles, Why give them roles? Well it helps user with blindness. Whatever is value of your role attribute will be read by screen reader to the user.

Lets say you are building a link that behaves more like a button and it also has popup. What you need to do is give that link a role=”button” and aria-haspopup=”true”. That will help user with blindness know that this link is a button and it has popup.

<a href="#" role="button" aria-haspopup="true">Menu</a>

6.Labeling, State and hidden elements.

You must label your elements so that screen readers can read their functionality and purpose to the users with blindness.

<button aria-label="Close" onclick="myDialog.close()">X</button>

When normal people click the button they can see whether its pressed or not but that’s not the case with blind people. So how to make sure they know when the button has pressed state & when its doesn’t? Well that’s so simple & all you have to do is use this attribute aria-pressed=”true”.

<button aria-pressed=”false”> CLICK HERE </button>

Hidden elements, Some developers hide html elements and make them appear after a certain event, click or form submit.

Well if the element is hidden and not completely removed then that means it exists. We can easily know that because when an element is hidden it still takes up the space or it exists in html markup.

But what about blind people? They cannot see that an element is hidden and taking up the space or exists. So what’s the solution? Well we can make screen readers read to them that certain element is hidden & how we do that is using this attribute aria-hidden=”true”.

<p aria-hidden=”true” hidden> This content is hidden from users </p>

7. aria-labelledby and aria-describedby

Lets say you created a div with role=”dialog”. The screen reader will read it as dialog and blind users will immediately find out that this is a dialog box but they will not know what this dialog box is about. So how to make sure that users know what’s the heading and description of this dialog box is or in other words what’s this dialog box is all about? Well below is the code snippet to achieve this result.

<div role="dialog" aria-labelledby="dialog1Title" aria-describedby="dialog1Desc">
  <h2 id="dialog1Title">Your personal details were successfully updated</h2>
  <p id="dialog1Desc">You can change your details at any time in the user account section.</p>
  <button>Close</button>
</div>

Well, I hope you enjoyed this article cause we learned some cool stuffs today.
If you missed my last article about html 5 cool tricks here is the link to that article — CLICK HERE