Inaccessible content example

The content on the inaccessible and accessible examples are similar visually, however one is inaccessible to screenreaders. The following are common issues.

Heading structure

While it may be evident to someone viewing the page that the phrase above this sentence is a heading, in the inaccessible example there are no semantic clues for the screen reader user. Click here for more information.


Placing content in its appropriate semantic container makes the content more universally available. For example here is a list of items

* A purple item

* A green item

* A blue item

Image descriptions

Images on web sites may play one of two roles. One as important visually information to support the textual content of the page. The other is as a decorative element that has no semantic value. In both cases the image needs an alternative (alt) description created, whether it is descriptive text in the first case or empty in the second. The latter technique tells a screenreader that the image is merely decorative. 

For example, the following image could have different descriptions depending on the context. It could describe the mosaic and colors with a note that a chemical formula is in embedded. If the article is about that chemical formula, it would be described or the location would be included if that is important contextual information. If it is purely decorative it would have an empty alt attribute. Click here for more information.


You will notice there are several links on this page. Are they descriptive or do they use a repetive phrase which gives a screenreader user no clue as to what they are pointing to.

Linked images with no alt tag will similarly give a screen reader no clues or context of where that link will take them. For example, click on the link below or click here for more information.


Tables should be used only to display data and not for layout. When displaying data it is important to appropriately tag column and row headers and add a description if there is not already a descriptive title. An example is below. Click here for more information.

Color Fruits Vegetables
Orange Orange Carrot
Red Apple


Green Pear Celery