Practical Accessibility Tips with WCAG 2.0

Derek Featherstone recently wrote a blog entry titled "When is the right time for accessibility?" in which he looks at when is it appropriate to invest in accessibility. Is it better to release your product and add accessibility later, or build-in accessibility from the start?

As far as building web sites is concerned, I’m with James Edwards when he says it’s our job as web developers and designers to ensure content accessibility:

We should make an effort to create accessible content, because it’s part of our job. And frankly, it doesn’t take much effort; it’s not difficult.

I have to admit that for me, accessibility has often appeared to be a minefield, where every seemingly minor decision has the potential to create an accessibility disaster. I’ve looked for a central resource that will show me practical examples of correct markup, so that I can avoid making accessibility mistakes that will be hard to fix in the future. I think the "Techniques for WCAG 2.0" document is a great starting point.

Usually W3C documents are tedious, technical, and hard to wade through — trust me, I did a lot of wading when I was editing the SitePoint CSS Reference. But "Techniques for WCAG 2.0" is unlike that at all; it’s written for web developers and designers — instead of browser makers — which makes it very accessible (ha ha).

As a quick sampler of the techniques presented, here are a few tips for constructing forms. You’ll notice straight away that the techniques frequently seem like basic common sense, but that’s often the case with accessibility.

Use Standard HTML Form Elements

As described in H91: Using HTML form controls and links, the recommendation is to use standard HTML form controls and links. Standard form elements have established keyboard shortcuts provided by user agents, and assistive technology software makes use of the associated accessibility APIs built into every operating system. Yes, it can be as simple as that.

Always Use Explicit Labels

H44: Using label elements to associate text labels with form controls makes the recommendation that you should always have a label element with an appropriate for attribute value for all your form fields:

<label for="fname">First Name:</label>  <input type="text" name="fname" id="fname" value=""/>

It also recommends that you avoid implicit labels like the following because of compatibility problems with some screen readers:

<label>First Name: <input type="text" name="fname" id="fname" value=""/></label>

Use the tabindex Attribute

H4: Creating a logical tab order through links, form controls, and objects highlights the importance of the tabindex attribute. Adding the attribute to all your form elements to create a logical tab order allows for efficient keyboard navigation of your form:

<label for="fname">First Name:</label>  <input type="text" name="fname" id="fname" value="" tabindex="1"/>

Indicating Required Fields

H90: Indicating required form controls is my favorite of the few I’ve mentioned here and an example of the practical help you’ll find in the guidelines. It outlines three simple, accessible ways to indicate that a field is required.

Use the word required in the field label:

<label for="fname">First Name (required):</label>  <input type="text" name="fname" id="fname" value="" tabindex="1"/>

If you use an asterisk to indicate required fields (like so many sites do) then try using the abbr element to add the much needed information:

<label for="fname">First Name <abbr title="required">*</abbr>:</label>  <input type="text" name="fname" id="fname" value="" tabindex="1"/>

If you use an icon, make sure to use the alt attribute:

<label for="fname">First Name <img src="required.png" alt="Required field"/>:</label> <input type="text" name="fname" id="fname" value="" tabindex="1"/>

There are many more tips on the WCAG 2.0 Techniques page, enough for a firm grounding in the art of accessibility. When you read through them you realize that accessibility is more about how to make your content accessible to everyone — regardless of user agent, device, or circumstance — rather than just various screen readers. Which is what the Web is all about anyway.


Category: programming Time: 2009-03-24 Views: 3

Related post

  • Extract Objects from an Access Database with PHP, Part 1 2013-05-24

    Extract Objects from an Access Database with PHP Extract Objects from an Access Database with PHP, Part 2 Extract Objects from an Access Database with PHP, Part 1 A simple search of the Web reveals that there are many programmers who need to work wit

  • What is good practice when dealing with data integrated in the source code? 2016-07-05

    I've been tasked with overhauling a fairly large web-system that requires much user input. In an attempt to instruct the users when making input, the original creators has made extensive use of feedback structures like help texts and tool-tips. The p

  • Need help with Access Database with Front End and Back End really slow with more than 1 user 2010-07-20

    We have had a consultant install a database for a client that is based on Access 2007 with a front end (on each workstation) and I guess the database back end (on the file server, it is a server 2003 domain controller with very current hardware, memo

  • How to sync an offline Access database with Sharepoint (WSS 3.0) List 2010-08-10

    Is there a possibility to sync offline Access database with Sharepoint (WSS 3.0) List? I want to a two way sync to the list. Any articles or links would be of great help!! Thx --saumil --------------Solutions------------- Follow this tutorial: http:/

  • How to apply FIPS to Microsoft Access database with custom VBA 2011-03-13

    As the software engineer on a project, I have been asked to make a Microsoft Access application, with custom interfaces running custom VBA. That part is going just fine. Recently though I was asked to ensure that my Access application complies with F

  • Is there a way to favor one Wi-Fi connection over another when there are two Wi-Fi access points with the same SSID? 2011-03-31

    There are two Wi-Fi access points with the same SSID. One of them is stronger signal but not connecting to the Internet. The other works fine but my Windows XP machine won't connect to it unless I am out of my room. Is there anyway that I can get Win

  • Connect to Wi-Fi access point with specific MAC address 2011-04-01

    I can see several (5+) Wi-Fi access points with the same SSID, but different MAC addresses (using InSSIDer). However, my Windows 7 laptop always keeps connecting to one of the APs, and I suspect it's not the best one. How can I choose to connect to a

  • PHPMaster: Practicing Regular Expressions with Search and Replace 2011-11-23

    If you're just starting out with regular expressions (regex), the syntax can seem a bit puzzling at first (I would recommend Jason Pasnikowski's article as a good starting point). One of the things that make it difficult to grasp regex in the beginni

  • Multiple access point with same SSID but all connections goes to only one access point 2011-12-13

    So I have three multiple access points with same SSID, installed within 60 ft of each other. AP1 - Ch 1 - Linksys WAP4400N AP2 - Ch 6 - Linksys WAP4400N AP3 - Ch 11 - HP V-M200 95% ~ 100% of client connections seem to connect to HP V-M200 AP. I've tr

  • How can I directly access apps with single hot-keys? 2012-08-02

    How can I directly access apps with single hot-keys? Possible solutions which I don't get to work: (1) Having often used applications constantly kept in the dock, it would be useful to have hotkeys like Apple-1, Apple-2, Apple-3, etc to access the fi

  • Making an access plan with openstreetmap 2012-10-06

    What tool would be best to create an access plan (with directions written on roads, local zooms, etc.) from OpenStreetMap (preferably using the MapQuest Open map)? --------------Solutions------------- Grab the images from the web client of whatever m

  • ISPConfig Installation complete but Cannot access page with IP (Debian 3.1) 2012-10-28

    Hi, I managed to install ISPConfig successfully on Debian 3.1 (using the perfect installation guide by Falko) The problem is that I do not currently have a domain pointing to my server.. so i need to use the IP address to access the software... so i

  • Is it OK to share your Facebook access token with others? 2013-01-17

    I came across this particular app which is spreading virally among many Malaysian Facebook users: The app is asking users to copy paste a so called Sony Xperia Mobile token into their app. A

  • Cannot access localhost with proxy enabled 2013-03-13

    My office is a Windows environment, but I have just set up a linux (lubuntu 12.10) machine for me to develop on since I cannot access the command line in Windows. I have set up the LAMP stack on the machine (which I've done numerous times before with

  • Two access points with same SSID, loosing connectivity on mobile devices 2013-05-17

    I have two access points, with the same SSID, same security mode (WPA/WPA2), operating at different channels (1 and 6). I have set the first of them ( to operate as a DHCP server, while the second one has DHCP disabled, only having a stat

  • Extract Objects from an Access Database with PHP, Part 2 2013-05-31

    Extract Objects from an Access Database with PHP Extract Objects from an Access Database with PHP, Part 2 Extract Objects from an Access Database with PHP, Part 1 In the first part of this series we learned how to extract packaged objects from a lega

  • Can I update an Access table with an Oracle table? 2013-06-10

    I have an Access database with a table with a unique key and price field among other fields. I have been told I have access to an Oracle database with those prices in it and the linking Key. Can I run an update query in Access to update those price f

  • Best Practice when dealing with long user first names in UI 2013-07-17

    For the app I am currently developing, I have a vertical navbar which contains the main menus required for the user. One of the menus is for User Admin, which is a profile picture with the User's first name under it. I am having a think about how I s

  • Does a wireless access point with PoE ports exist? 2013-07-25

    I'm currently making my own, because I have yet to find a company that makes an access point with PoE ports. I have seen several APs that are powered by PoE, but they don't pass 48V to their ethernet ports (if they even have those). It would be nice

iOS development

Android development

Python development

JAVA development

Development language

PHP development

Ruby development


Front-end development


development tools

Open Platform

Javascript development

.NET development

cloud computing


Copyright (C), All Rights Reserved.

processed in 1.124 (s). 14 q(s)