Accessibility 101

Ease of accessing things especially for those who have difficulty to access product, information with ease. While working on a product lately where primary goal was accessibility and challenges. Most of the times I used to scratch my head since it was first time achieving that area which was grey before, at least to me.

There are lot of things that needs to be done in Accessibility area and there are many things that are already done. While doing discovery of many websites and taking examples of sites for my project I ran across lot of issues and difficulties around accessibility for the project I was working on.

“Accessibility is most often used to describe facilities or amenities to assist people with disabilities, as in ‘wheelchair accessible’. This can extend to Braille signage, wheelchair ramps, audio signals at pedestrian crossings, walkway contours, website design, and so on”.

Here we will be talking about web accessibility.

There is much that can be covered but as 101 article i will try to keep it subtle and precise.

The key areas that we will consider for this post,

1. HTML — This is where it starts.
2. CSS — It pays vital role as well.
3. JavaScript — Plays equal role here.
4. WAI-ARIA
5. Mobile Accessibility.

They say it all starts with basics, The backbone of good web accessibility is HTML. To be precise, well semantic HTML, Neat mark-up, less nesting, not too many headings, correct use of HTML for correct purposes is what we need for better web accessibility.

For eg.,

<button>submit</button>
<a>submit</a>

Both will do same but good semantics is what helps here. proper use of tags is necessary for Semantic and well documented page.

What is good semantics?

As per WCAG {2.+} report one of the immediate need is of meaningful sequence where page will render down from <h1> to <h6> headings in order, and other elements as well.
One think to note here “google” doesn’t care about it, if your page is without meaningful sequence as will still be able to SEO based on proper tags no matter wherever on page tags are being rendered but it doesn’t go well with screen readers while testing Accessibility.
So good Semantics is required for clutter free and easy to navigate markup.

Where CSS plays role?

Many a times we don’t need to show something on page but needs it to be read by screen reader, we can hide it visually with “Visually hidden” property rather than displaying it none which wont be picked up by screen readers. One more thing to note here is that using floats can degrade and confuse while accessing in Accessible mode. For instance two divs placed as 1, 2 floated to right and left respectively. Will still read 1 as first and 2 div as second no matter if we swapped their position using CSS. That can be confusing many times.

If we are developing for modern browsers only flex-box will be your best bet.

One more overkill is position: absolute. It is one of the worst use case both for responsive as well as ARIA roles and Screen readers. Using positioning is much only when “much needed” avoiding it will be a great case.

JavaScript

Here JavaScript plays an important role, I came across a great use case of property toggling on labels and inputs when handling errors on forms.
One such use case is here, I developed small snippet of code on JSFIDDLE for error handling and being read by Screen Readers https://jsfiddle.net/junaidmasoodi/9xcLw3u1/

One more use case i came across is using JavaScript on iframes, injecting roles and labels which is otherwise very hard to comprehend.

WAI-ARIA

WAI-ARIA, the Accessible Rich Internet Applications Suite, defines a way to make Web content and Web applications more accessible to people with disabilities. It especially helps with dynamic content and advanced user interface controls developed with Ajax, HTML, JavaScript, and related technologies. Currently certain functionality used in Web sites is not available to some users with disabilities, especially people who rely on screen readers and people who cannot use a mouse. WAI-ARIA addresses these accessibility challenges, for example, by defining new ways for functionality to be provided to assistive technology. With WAI-ARIA, developers can make advanced Web applications accessible and usable to people with disabilities.

Web sites are increasingly using more advanced and complex user interface controls, such as tree controls for Web site navigation like the example in Figure 1. To provide an accessible user experience to people with disabilities, assistive technologies need to be able to interact with these controls. However, the information that the assistive technologies need is not available with most current Web technologies.