If you want to include graphics on your form, you should place each image inside a button that has its border turned off. Most accessibility guidelines require that there be a text equivalent description of non-text elements such as images and graphics. The best way to meet this requirement is to place images and graphics within buttons. This allows you to place a text description of the image in the button’s accessibility and help messages. Removing the button's border maintains the image's appearance for sighted users.
When users access the button, the screen readers say the accessibility message aloud. If Viewer Help is turned on when users tab into the button, the readers announce the help message while the form displays a hover help. As a result, the layout of the form is not affected.
The following diagram shows part of a form containing an image of the PureEdge logo. Because the image is contained within a button, the form designer was able to use help
items to display descriptive text about the image.
The following code creates the image button shown above:
<acclabel>An image of the PureEdge logo</acclabel>
This code creates the help message for the button:
<value>An image of the PureEdge logo.</value>
Remember, Viewer Help must be turned on before the screen readers can read the help messages.
When using buttons to display images you should remember to:
- Specify an invisible border for the button.
- Make the button the same size as the image.
- Include the image button in your tab layout.
You may be tempted to make the button inactive so that users cannot click it. However, keep in mind that inactive buttons do not receive the focus, and that users with visions impairments must be able to tab to an item to get an accessibility message for it.
Remember that help messages are displayed in text on the screen. Information conveyed in a help message should be applicable for both sighted users and users with visual disabilities.
Exceptions to this practice
According to most accessibility guidelines, you only need to provide text equivalent descriptions for non-text elements that "provide information required for comprehension of content or to facilitate navigation". In other words, you do not need to provide text for graphic elements such as lines, frames, and boxes.