The web’s for all – let’s keep it that way!!! – (I)

As developers of the modern web – we have the additional responsibility of ensuring that the web remains a medium for all. I have been around for close to two decades focusing my energies to develop interactive and usable sites and apps. With the advent of frameworks in the recent past the evolution the creative technologists are slowly and steadily giving way to full stack developers.

Its interesting to see how developers today – still show a strong resistance to HTML and CSS – let alone even know what accessibility stands for. The little most developers today know are tags that would ensure they don’t get accessibility “errors” as part of the compliance testing.

Its important to understand the true meaning of “compliance” – and not treat it as a checkbox that needs to be ticked off as part of the development effort. The biggest myth people have around accessibility is the scope is limited to enabling access for the visually challenged audience. The fact is – the scope pans “the sight (visual), hearing (auditory), touch (physical), voice & speech, cognitive, and neurological” limitations.

In this series of blogs – I would share insights/deep dive into some of the frequently used markups for accessibility implementations. Let’s start…

Beyond the mark up – understanding the tags

a. skip navigation

Picture this, you have a think navigation followed by a 10 image carousel before you get to the main content on the page. As someone, who is dependent on screen readers or only using the keyboard, it would get annoying and difficult to go through all the links in navigation section to get to the main content. Same would be the case, if you have a carousel component following the navigation.

It’s advisable to provide the option to skip these sections, by providing a simple internal sub link.

Example:

<a href="#pageStart">Skip the navigation</a>;
<nav> ... </nav>

 <a id="pageStart"></a>
<section>
<h1>Page Title</h1>
</section>

<a href="#mainContent">Skip carousel</a>
<...carousel component.../>
<a id="mainContent"></a>

There are a few options for handling the visibility of the skip link content like

  1. Giving it a negative text indent
    1. While this works well for the normal users and the screen readers, the approach makes it difficult for the keyboard only users to identify the cursor position on focus.
  2. To address the above, one could get the text to appear back in its place when selected and take it off when not in focus.

This meets the needs for all kinds of users and also the necessary accessibility rule for this guideline.

It’s recommended that one should ideally have “skip navigation” for all relevant components. The possibility of using this to serve as a block level navigation for sites / apps have also been a topic of discussion.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s