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. Learn more about heading structure

Lists

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. Learn how to add image descriptions in Kentico.

Detailed marbles with chemical equations, forumulas, and symbols in Bagley Hall

Links

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 linked image below or learn more about descriptive links in this UW article.

Bagley building detail on UW Campus. Link leads you to building information.

Tables

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. Learn how to create row and column headers as well as captions in Kentico.

Fruits and vegetables that have the same color
Color Fruits Vegetables
Orange Orange Carrot
Red Apple

Radish

Green Pear Celery