Word Press Accessibility: The <noscript> attribute.

The basic rules of accessibility state that you should always provide alternative content to users no able to access it, if you rely only on scripts to deploy it.

No one should be left out, and all users are entitled to have a similar “rich browsing experience” regardless of their personal physical challenges.

With this article I intend to bring your Word Press websites a bit closer to what I state in the previous paragraph that sometimes, to some people seems like a utopia.

Let’s get our hands dirty with code!

Using the <script> and <noscript> tags.

If you are not familiar with the use of this HTML tags you should first read about it in the W3Schools: www.w3schools.com/TAGS/tag_noscript.asp

Definition and Usage (according to the W3Schools.)

The <noscript> tag is used to provide an alternate content for users that have disabled scripts in their browser or have a browser that doesn’t support client-side scripting.

The noscript element can contain all the elements that you can find inside the body element of a normal HTML page.

The content inside the noscript element will only be displayed if scripts are not supported, or are disabled in the user’s browser.

This is straight forward if you simple need to textually explain users what “should happen if”, the user had the scripts enabled in their machine.

It’s as simples as adding the <noscript>explanations about what you’d get if you were able to view the script, blab la bla…</noscript> after your  script. This should pass your site trough most automatic validators, However it’s pretty unfair…

The proper way should really give an alternative similar content, and not just a description, as you’d use for an image alternate text or long description.

In this exercise we will replace a flash menu with it’s correspondent HTML menu, all in a script dependant basis without any human interference to swap them.

Case study:

One of my clients asked me to integrate a flash scheme-like menu where links should appear and assemble in a tree-like scheme. The links all belonged to the same post category, and where a fixed number of them.  E.g. 10 posts = 10 links in the menu.

I’ve done it, and as I always do, I imbedded my flash with JavaScript. So this required a noscript alternative to be usable (I was aiming, and reached the triple A conformance [AAA], in that Word Press project.)

The “Grey-hat”, immediate, quick, solution was just describing the flash movie, wich actually wasn’t that bad, since I had an alternative navigation and a site map, where users could reach those URLs, even if they couldn’t use the flash menu.

However,  I’d had some much trouble getting the triple A conformance, that I might as well would do this the best I could.  So I’ve did a little research and reached the following:

If the flash menu was just a set of hyperlinks to posts (all of them) from the same category, I could just replace it by a simple listing of that category posts. Easy!

So, After digging in the Codex (codex.wordpress.org/Template_Tags/query_posts), I’ve reached to this chunk of code to insert in the <noscript> element:

<noscript>

<p>The following content replaces a flash movie with a tree-like animated menu, wich we replicate bellow:</p>

<ul>

<?php

//The Query

query_posts(‘cat=4′);

//The Loop

if ( have_posts() ) : while ( have_posts() ) : the_post();?>

<li><a href=”<?php the_permalink(); ?>” title=”<?php the_title(); ?>” class=”title postTitle” >

<?php the_title(); ?>

</a></li><li style=”display:none”>|</li><!– You need this to separate hyperlinks with printable non-link elements – WCAG –>

<?php endwhile; else: echo(“<li>There are no posts under this category</li>”);

endif;

//Reset Query

wp_reset_query();

?>

</ul>

</noscript>

My posts category ID was #4 so I’ve added the 4 on the database query:  query_posts(‘cat=4′); to list ONLY the posts in that category. You should replace this number with your own category ID.

So basically what this code does is, create an Unordered List (

) with all your post titles and hyperlink them to create a vertical Nav Menu.

This way I provided an effective alternate content to my flash menu, thus increasing the number of users accessing my contents. Besides doing a better job as an accessibility concerned professional, it also can increase the ROI on the website, wich is a good argument to convince your boss that accessibility is a good thing, and is worth the extra time you spend in your projects.

This was just an example of something I’ve used, and should not be considered just by what it is but for what it means in a wider perspective.

Be creative. Use you skills to provide effective alternatives to all your scritp-dependent contents.

Do your share on making the web more accessible to everyone out there…

Hope this has helped you!

1 Comment »