Codex tools: Log in
Contents |
Accessibility is for everyone, even WordPress users. But what is it?
Accessibility in web page design means creating a web page design that anyone can use. And that means anyone. Not just the visually impaired, handicapped, or otherwise challenged. This includes people in Russia and South Africa who are using outdated computers hooked up to generators that only run two hours a day, trying to connect to the Internet with old browsers and dial up connections. It's about people from different countries who speak different languages and yet are trying to learn your language by reading your blog or site.
This also includes using cell phones and handheld computers to access your blog. Those people, including the approximately 25% of all Internet users who are physically impaired in some way, need access to web pages, and as a web page designer (or tweaker), you need to know about accessibility.
In the simplest of examples, web users who have visual or physical impairment rely upon your help to "see" or "hear" your content. When you include a graphic or photograph, it may be appropriate to describe it in the alt part of the <img> tag.
...and the most wonderful thing appeared: <img scr="ball.jpg" alt="a beautiful red and blue ball" />.
Those who rely on screen readers might hear, "and the most wonderful thing appeared: image - a beautiful red and blue ball."
In some cases the image is purely decorative. In these cases a text description only clutters things up. You should always include the alt attribute, but in these cases you can simply leave it empty.
...and the ball bounced higher and higher as <img scr="ball.jpg" alt="" /> the child bounced it....
Those who rely on screen readers might hear, "and the ball bounced higher and higher as the child bounced it."
Making use of the alt attribute has other benefits as well. In some browsers (such as IE), the alt description appears as a tooltip when mousing over the image. In other browsers (such as Firefox), the description appears in an event of the image not being able to load for various reasons.
Many people use these attributes to describe or "editorialize" about the image or link. That is not the primary purpose of using them. It is actually to "replace" the image or link. The descriptive words must let those who cannot see the image know what is there on the screen, if appropriate. If the description is longer than a few words, you can also use the longdesc to link to a descriptive file (ball.html) that thoroughly explains the image.
...and the most wonderful thing appeared: <img scr="ball.jpg" alt="a beautiful red and blue ball" longdesc="ball.html" />.
Some screen readers use both or either of the alt and title attributes, so you might want to include both:
...and the most wonderful thing appeared: <img scr="ball.jpg" alt="a beautiful red and blue ball" title="Red and blue ball" />.
You can use the same technique with the title in links:
If you are <a href="http://example.com/talent-shopping/" title="Article about shopping for photographic models"> shopping for models</a> for your portrait photography....
Such descriptive additions to your graphics and links not only help your users, but they also improve the searchability of your website. Google, Yahoo, and other search engines use the alt and title attributes to display search results. This can also affect your page rankings.
WordPress works right out of the box to help you keep your site accessible. Unfortunately, not all WordPress Theme authors take the time and patience to maintain those accessibility standards. Here is an example of using the title in a link in the index.php and the WordPress Loop:
<h2> <a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>"> <?php the_title(); ?> </a> </h2>
Let's look at this. There is a link inside of the h2 tag for the title of the post. Inside of the link is a call to the permalink, the address of the post. It is followed by a rel which attaches a relationship to the link as a bookmark. This is followed by the title. In this case, it says "Permanent Link to" and then the title of the post, which is automatically generated by the the_title() template tag. The title tag is then used again as the name of the link.
Using these template tags, WordPress automatically gets information from the database to fill in the link information, making the link more accessible.
You can change the title to something other than "Permanent Link to". Here's an example:
<a href="<?php the_permalink() ?>" rel="bookmark" title="Article about <?php the_title(); ?>"> <?php the_title(); ?> </a>
This same technique for generating title for links is used throughout your WordPress site, including lists found in your sidebar for the categories, pages, and archives. The work is done for you. In some cases, you can even customize the way the title is generated, though not always. See Template_Tags for specifics on each tag.
In addition to helping users "hear" descriptions of links and images, there are a few more things you might want to take into consideration when designing your WordPress Theme for yourself or for public release.
Sometimes, the simplest thing a website designer can do is to create a more readable page. Crowded text, busy looks, a jumble of font styles, and too much information on a single page is not only cluttered but difficult to read.
While developing your WordPress Theme, take extra time to pay attention to the white space or "empty" space around the different elements on the page. Make sure the fonts are large enough to be readable at most screen resolutions. Position navigation elements in logical places, so people will naturally look there to move around your site.
If you really want to have a good test of the readability of your website's theme, consider having someone over the age of 60 look at it. This is a great test. ;-)
Color choices also affect people's ability to "see" a page. Approximately 10% of all internet users have problems seeing colors, especially those suffering from color blindness. There are lots of websites that can help you test your color choices to see how they would be "seen" and recognized. You don't have to design your site around these issues, but being better informed makes for better designers.
For the visually or physically challenged, one of the ways of navigating a site is through the use of Access Keys. These are standardized keys that when pressed in combination will move the cursor around to the different areas on your page. For example, if you have a link to a search page for advanced searches, the user would press alt+s in Windows and ctrl+s in Mac and the cursor would jump to the search link. The code to set the accesskey in a link to a search page would be:
<a href="search.php" accesskey="s">Search</a>
Here is an example of the use of access keys within a sidebar using the Pages template tag:
<ul id="pageslist"> <li> <a href="index.php" title="Home Page" accesskey="1">Home</a> </li> <li> <a href="blog.php" title="Blog" accesskey="2>Blog</a> </li> <li> <a title="Site Map" href="sitemap.php" accesskey="3">Site Map</a> </li> </ul>
The template tag for listing pages currently doesn't support access keys, but hopefully it will in future versions.
The United Kingdom's government set a national standard for the use of access keys on official sites, and many website administrators have adopted these same standards internationally. Unfortunately, the Mozilla Firefox Internet browser uses alt+1, or whatever number, to control movement between tab windows, which breaks this usage. Hopefully, all browsers and website's will feature a standard for access keys soon.
In the meantime, you can study the different options and choose your own, but we recommend that you create an "Accessibilty Policy" page on your website, linked from your sidebar or footer, that will help some users find out what access keys you are using.
It's nice when you design your website to work in Internet Explorer, but when viewed with Firefox or Safari, things are not only different, they might be scrambled. Or vice versa. Not all browsers display all websites the same. If you are concerned about accessibility, access via different browsers becomes critical.
Testing your site for accessibility isn't limited to browsers. It is also affected by different screen resolutions and color quality. You can use the Desktop Properties Settings to change your own screen's resolution and color quality, or the Web Developer Tools that come with Firefox, or some of the other resources listed below.
Viewing a web page from your desk or laptop is no longer standard viewing. Many people are accessing the internet via cell phones and hand held computers. How does your website do when pruned down to a tiny screen?
Some small screen browsers simply strip a site's style sheet, leaving the content behind, such as seen when printing a page on your WordPress site. Others show the whole screen, though compressed. You can also control how your site looks on the small screens by adding the hand held media styles to your style sheet.
To include a separate hand-held style sheet (named in the example "handheldstyles.css"), which targets PocketIE, NetFront, and Opera browsers; add the line below to the header.php in your theme, after the screen stylesheet. The syntax must be exactly as shown for all three PocketPC browsers to see it.
<style type="text/css">@import url(<?php bloginfo('stylesheet_directory'); ?>/handheldstyles.css) handheld;</style>
The following articles have more information.
It is also a growing trend for websites to have their own Accessibility Policy, a page that informs users of the standards you are using to make your page accessible to everyone. In Britain, there have been lawsuits and complaints filed against government and corporate websites under the Disability Discrimination Act for NOT being accessible, and the trend is happening here in the United States. It is not hard to be compliant with accessibility standards, it just takes a few extra keystrokes to help everyone get the most from your site.
There are a variety of online services that will test your site for Accessibility standards. Here are a few:
If you are really serious about creating and designing accessible websites, there are some folks who would really love to have your help, or just to have you hang around a bit:
To find out more about accessibility and designing your website with accessibility in mind, visit the following links:
