Knowledge Base: Accessibility

Headings

Use headings rather than font size, boldness, etc to create headings. This helps screen readers read pages correctly and also helps the pages look consistent in style.

Links

• For accessibility reasons, use descriptive words/title as the text for the link rather than "click here" or similar. You should be able to know what a link will open from the name. 

• Avoid two different links having the same text. For example, in the Good Links Example below, you can tell what each one does just from the name of the link. However, the Bad Links Example has just "Automatic Updates" listed twice. You can't tell what the difference is if you're only reading the links.

Good Links Example:

• Firefox: Automatic Updates
• Microsoft Office: Automatic Updates

Bad Links Example:

• Firefox: Automatic Updates
• Microsoft Office: Automatic Updates

• Whenever you change a link to open in a new window/tab, include the phrase "(link opens in a new tab)" so it's easier to know how a tab will open. This is important for screen readers.

Nested Lists

When writing nested lists, use a system of numbered lists first and then letter lists like so:

1. Try some general IT troubleshooting tips

   1. Restart the computer

   2. Check the updates

2. Contact the ITS Helpdesk

You can make a nested list with the letters by copying the list above when editing this article and pasting it where you are editing or by making it in Google Docs or Microsoft Word where typing "a." will start a letter list.

This allows those listening to screen readers know that the nested list is a list. Penn State has a great page on how screen readers read different lists for more information: Penn State Accessibility in Lists.

HTML method

1. click the button that says Source
2. Lists start with <ol>, like this:
   1. <ol>
   <li>Coffee</li>
   <li>Tea</li>
   <li>Milk</li>
</ol>
3. If you want your list to be a letter list, you can change the <ol> to the following:
   1. <ol type="a">

Images

All images should have alt text for people who can't see them or if they don't load. Harvard has a good list of ways to write useful image alt text.

Don't rely on images to convey information! Images should only enhance communication that's also available other ways.