Website Accessibility

Heading structure benefits both sighted users and visually impaired users. Sighted users can scroll through a page and quickly pick out the big, bold text (headings) to get an idea of the document structure and content. Similarly, visually impaired users who use screen readers have the ability to quickly jump between headings on a page. It is important to always use heading tags (<h1> - <h6>) for all headings. While simply bolding or enlarging text will provide visual structure, it will not provide the back-end structure to benefit visually impaired users.

Headings are to be used in a hierarchical manner. Level 1 is the highest level of heading. Level 2 headings are sub-headings of level 1 headings. Level 3 headings are sub-headings of level 2 headings and so on.

<h1>Heading using H1</h1>

<h2>Heading using H2</h2>

<h3>Heading using H3</h3>…

Every hyperlink should have a clear description of its destination and the description should make sense even when taken out of context. Hyperlink descriptions tell users exactly where the hyperlink will be taking them before even clicking on it. While surrounding text may be helpful for sighted users, it will not benefit visually impaired users who choose to navigate a list of hyperlinks taken out context.

<a href=”http://www.cpp.edu">Cal Poly Pomona</a>

Examples of hyperlink descriptions

• Correct:
  • To learn more about Blackboard, visit our Blackboard eHelp Tutorials.
• Incorrect:
  • Blackboard eHelp Tutorials: https://cpp.service-now.com/ehelp?id=kb_article&sys_id=cbfe854e6fe8e600e020f35d5d3ee433
  • For more information about Blackboard eHelp Tutorials, click here.

Images should be given alternative text, also called alt text, serving as a description of what is happening in the image. This description allows visually impaired users, through the use of a screen reader, the opportunity to receive the same content from an image that a sighted user would receive.

<img src="calpolylogo.gif" alt="Cal Poly logo">

Purely decorative images, or images that don’t help with the understanding of the content, should include an alt attribute with an empty description.

<img src=”imagename.gif” alt=” ">

Images that are used for navigational purposes should include an alt attribute that describes the hyperlink destination.

<a href="http://www.cpp.edu"><img src=”calpolyimage.gif” alt=”Cal Poly Pomona home page”></a>

Alternative text tips

• Don't describe every detail of an image, just describe the main idea you are trying to convey to users.
• Be as concise as possible. If the image conveys a main idea that is already discussed in detail in the surrounding text, one sentence may be all the alt text that's needed.
• Don't begin alt text with "Image of..." because images are already identified to the user as images by the screen reader.
• Alt text should be left blank for purely decorative images, or images that don’t help with the understanding of content.

Being able to read content in the order that it was intended is essential in a user's understanding. When it comes to listing content, there are two popular methods: numbers and bullet points. An ordered list (numbers) (<ol>) should be used when the order matters, otherwise use an unordered list (bullet points) (<ul>).