Labels, text options and other image alternatives.

It is important that all the elements in a web application have appropriate labels and icons or image based items have text alternatives. Examples would be a radio button that needs to be described or a toolbar icon.

Screen reader users depend on these descriptions as they navigate around an application. The text can also be helpful when a user is unfamiliar with an application and needs extra guidance perhaps where non-standard icons have been used.

It is important to note the position of descriptions or labels for data fields as they should be next to the field or icon, so that it is easy for screen reading software to make an appropriate association with the action required. The preferred position would be flush against the left side of the field, unless it is a checkbox or radio button as can be seen in the label marking a menu for inserting a 'flash object' above. Note any instances where the label and field are separated by space - this will cause difficulties for magnification users in particular.

Method

Manual checking and testing with screen reader (NVDA screen reader or Thunder screen reader) although it also possible to hover the mouse over some icons and elements to see if a label appears - this is not the most accurate way of testing but shows you how a label may work.

The questions to ask yourself may be the ones posed by the American Library Association:

1. Have controls and functions for operating the software been properly labelled or described?
2. Do buttons, checkboxes, menus, toolbars, images, form fields (where you type in information), and any user action function (Save, Print, Copy, etc.) of the software have a text label description?
3. When using screen readers, is the user action correctly described? For example, if a user’s focus is on the “Search” button, does the screen reader say “Search button,” or once activated that the application is searching?

Advice

• University of Newcastle ISS Software Accessibility Standards (Working Draft) (download Word doc.)
• IMS Guidelines for Developing Accessible Interfaces and Interactive Environments with useful notes about accurate labelling.

References

This technique may be used to test the following sections of best practice.