Get More Accessible

This post is not about the commonly discussed and basic accessibility issues. They are very well covered by the Web Accessibility Initiative (WAI). This is about adding the last straws to get closer to being accessible by doing a design with that intention.

Skip Links

Skip Links function as navigators within the web page being described. They are required so that a person can navigate through the structure of the page with minimal clicks. They turn out to be an issue of accessibility for those who cannot scroll or move through the page because of mobility problems. And they are also a usability issue for the users with less than efficient tools for navigation, like mobile users.

An classic demonstration is at the 456 Berea Street site. The topmost links fall in the category of the skip links which can be used by users to skip to a specific part of the page. Since these links become part of the design itself there are various ways of including them, one of which has been discussed by the Accessites article. It discusses a way of hiding the skip links from the normal users but making them available to the screenreaders or on demand. You can try it out on the site as Mike Cherim says:

I use an off-screen method, typically taking an unordered list and sending it a few thousand pixels into the darkness off-left — using the display property none should be avoided to ensure access to screen reader users. Then, one-by-one, employing a:focus (or a:active for IE users) in the CSS, I bring the anchors, not the list items, into view. In the interest of a best practice, I recommend locating them, when viewable, in the upper-left or across the top, giving them a good background and enough positive z-index in the CSS to ensure they stand out. An example of this is available right here on this site. Press Tab a couple of times to see the available skip links in action.

As you can see, on the skip links are provided to jump to even different types of information like accessibility information. However, hiding the links falls into the arena of usability which might not approve of it. The article very nicely highlights the importance of skip links and why they should be handled by the developers today to compensate for lack of standardisation in the user agents (browsers).

Whichever way they are included, skip links provide the last mile of accessibility. The fun part is that they are not at all difficult to implement. All they need are anchor names or bookmarks as they are called.

CSS for multiple media

As part of the theme development Cascading Style Sheets should be developed for multiple media – screen, print, aural and other recognized media types.

Alternate High Contrast Theme

Providing a high contrast alternate can make your site more accessible to visually challenged users. Again, using 456 Berea Street as an example, the link in the top right corner – Switch to high contrast layout – does that. For some reason this option is not employed in many sites when this is the most direct and fruitful way of making a site accessible.

Implementation In WordPress

Since WordPress is a popular blogging tool (and one of my favorites), lets use it to see how we can implement the discussed points.

The skip links themselves are nothing but links to specific parts of the page which, as mentioned earlier, can be implemented by using HTML links. They should typically be placed in a location which can be accessed without any additional effort, something like top-level navigation. Once the different parts of the page are identified, mark them up and change the theme to include the links, e.g., header.php can be modified to include the skip links.

WordPress supports CSS to the fullest extent, and supports CSS for media other than the default for screen. It is only a prerogative of the designer to provide it, WordPress does not cause any hindrance.

Switching to the alternate high contrast theme can be provided using the popular theme switcher plugin. The theme switcher temporarily changes the theme using cookies. You can modify the wp_theme_switcher() function to provide link to the alternate high contrast theme. Of course a high contrast theme has to be developed first to be able to implement this. This is something that probably designers should practice, provide a companion high contrast theme along with every theme they develop.

WordPress accessibility has been studied a lot. Here are some good resources:

Technorati tags: , ,

Copyright Abhijit Nadgouda.

Leave a Reply

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

You are commenting using your 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

%d bloggers like this: