Georgia Tech Research Institute
 

When using graphical bullets on my web pages, do I need to use alt text for those graphics?

The bullets themselves do not contribute to the understanding of the page, but to satisfy Section 508, they still require empty alt text (an alt attribute with nothing between the quotes where a description would normally go) because they are graphics. Empty alt text can be annoying for some screen reader users, who dislike having to tab over images or empty alt attributes. Even if you put no space or text in an alt attribute, the user is generally alerted to the existence of an image, and in the case of these purely visual elements it can be irritating to have to tab over such frequently employed bits of the visual layout.

Therefore, the best solution to this issue is to simply avoid it altogether by calling the images through the style sheet. When you employ this method, the images appear the same to sighted users, but because they are called by the style sheet rather than hard-coded into the page itself, a screen reader will not register their presence, thus making them functionally invisible to most screen reader users.

You should be watchful when using the style sheet technique. Remember that using nothing but white space or other visual formatting to separate a list of links violates access standards. Ways to solve this issue include assigning the images as bullets in the style sheet formatting of an ordered or unordered list (<ol> and <ul> tags), or you can place a "|" symbol that is the same color as the page background between the links to separate them. Note that the last solution can present its own problem, as some screen readers will vocalize the word "bar" for the character "|".

A good tutorial on Cascading Style Sheets can be found at http://www.w3schools.com/css/default.asp.