Accessibility Best Practices: Accessibility Basics

Why Headings?

• Applicable to all types of text documents
• Allows screen readers to easily move through the document 

Heading Tags

• Use the electronic heading tags built into software to provide structure screen readers can interpret.
• Using only visual cues that sighted users can see such as changing font sizes or adding bolding or italics without the tags creates documents that are inaccessible. 
• The Title of the document should be Heading Level 1
  • You should only have one Heading Level 1
• Organize content under descriptive headings in hierarchal fashion
• Heading tags screen reader demo

Alt-Text Basics

• Alt-text provides text descriptions in place of non-text content that screen readers cannot interpret
• Text should present both the content and function of the image within your document
• Alt-text can be presented using the alt-tag feature in your software or in text adjacent to the image within the page
• If a text equivalent cannot be presented succinctly, a link to a separate page that contains a longer description may also be used
• Alt-text screen reader demo

Creating Appropriate Alt-Text

• Alt-text should be as concise as possible while conveying the appropriate amount of information (less than 125 characters)
• Alt-text should not include phrases like "image of" or "picture of"
• Context is everything
  • Alt-text for the same image may be different depending on the context into which it is placed
  • Don't be redundant or provide the same information as text within the context of the image

Null Alt-Tags

• Images should use a null alt-text tag (alt="")
  • if the only information they convey is included in the surrounding text
  • for decorative images that do not convey important content
• To determine if using a null tag is appropriate ask yourself if you weren't using the image to convey the information what text would you replace it with. If the answer is nothing, then use a null alt-tag

Alt-Text Examples

The following websites provide examples of how to create good alternative text.

• Alternative Text - WebAIM
• Write Good Alt-Text to Describe Images - Harvard University

• Using bulleted and numbered lists provides additional structure to your documents
• Break up large chunks of text making it easier for all users to read
• Use the software's built-in bullet and numbered list features to allow screen readers to appropriately process them
• Do not simply type in numbers or decorative features to designate list items
• Bullets and numbered lists screen reader demo

Creating Accessible Hyperlinks

• Hyperlinks should be clear and concise
• Hyperlinks should convey what users will find when they click on them
• Using appropriately formatted hyperlinks allows people using screen readers to pull up a list of links on a page that will have meaning to them rather than a screen reader reading a list of urls to them

Hyperlink Best Practices

• Don't use the website address as the text in your hyperlink
• Create text that is then hyperlinked with the web address "hidden behind the scenes"
• Don't use phrases that don't convey information like click here, link to [destination url], for more info visit, read more, etc.
• Link text should be as concise as possible without losing meaning
• Do not create other non-hyperlink text that looks similar to the hyperlinks

Hyperlink Examples

Good hyperlink

Screen reader demo of accessible and inaccessible hyperlinks

Bad hyperlink

www.youtube.com/watch?v=D8XFkGMF0sw&feature=youtu.be&t=142

• What you see on your screen may not be the colors others see on their screens
• Never use color alone to show emphasis
• Other options to use in addition to color include:
  • Bolding
  • Size
  • Patterns or shapes
  • Highlighting
• Make sure your colors have strong contrast between them