Headings

Proper heading use and logical site structure

  • Screen readers and other assistive technology rely on heading tags to navigate websites.
  • Heading tags (H1, H2, etc.) allows for quick and efficient content navigation.
  • When possible avoid using large blocks of text. Readability is improved by use of paragraphs or images to break up larger segments.
  • Proper heading usage will increase SEO (Search Engine Optimization) results.
  • Each page should only have one H1 heading.
    • For WordPress sites, the title will be tagged as the H1 heading.
  • The H1 heading should be used as the page title or a description of the page content or purpose.
  • Avoid using heading tags out of order ( example: H2 to H4)
  • Avoid using bold text ( <b> , <strong>) to indicate section headings. Screen readers will not recognize bold text as a heading.
  • Don’t use empty headings ( <H3></H3>)

Formatting Links

Link text is identifiable out of context

  • Use phrases that describes link destination that makes sense out of context.
  • Avoid using ambiguous phrases like:
    • “click here”
    • “read more”
    • “here”
    • “link to [destination]” (screen readers will add ‘link’ when announcing.

Linking to downloadable documents

  • Alert users to any links to non-html resources (PDFs, Word documents, PowerPoint presentations, etc.)
  • When possible, content should be available on a web page.
  • Add document type tag to the of the link. (PDF), (docx), (pptx)
  • Be sure to include the file type as part of the link text, otherwise screen readers will not announce the document type

Avoid using URLs as link text

  • long web addresses are not easy to read
  • Not screen reader friendly.

Instead of providing link description followed by the full url.

FERPA

Family Education Rights and Privacy Act protects the privacy of student educational records.

http://www.ed.gov/policy/gen/guid/fpco/ferpa/index.html

Create a link that is descriptive and makes sense out of context

FERPA

Family Education Rights and Privacy Act protects the privacy of student educational records.

Open links in current window or tab

  • Whenever possible avoid opening links in a new tab.
  • Users can be confused by an unexpected new window or tab.
  • Some screen readers may detect and announce a new tab, older version may not.
  • The back button is disabled due to lack of previous links in the new tab.
  • When opening in a new tab is required, alert the user with an icon or text.

Alternate Image Text

Why use alternative text?

  • It’s read by screen readers, describes the content or function of the image.
  • Used in place of the image when the browser is unable to load the image or a user choses to disable images.
  • Provides a semantic meaning and description for search engines.

Using alternate text with images

  • Images should have alternate text (in html, the ‘alt=’ tag) and should
    • Be succinct
    • Not be redundant (repeating caption or adjacent text)
    • Be equivalent to the content or function of the image
    • Be in context of the surrounding text

Decorative Images

  • An image can be considered decorative if it does not present important content or used for layout purposes.
  • Decorative images are ignored by screen readers.
  • alt=”” (empty quotes) designate an image a decorative.

Decorative images in WordPress

  • When adding an image to a WordPress site leave the Alt Text field blank (don’t enter empty quotes).
  • WordPress will create the alt=”” tag to designate the image as decorative.

Don’t designate an image as decorative if the image is hyperlinked. If an image is linked the alternative text should describe the link destination.

Avoid using images with text overlay

  • Screen readers will not be able to detect text embedded in an image.
  • Avoid when possible, but when using images with embedded take make sure:
    • sufficient contrast is used
    • Provide equivalent in the alternative text.

Avoid linking to media file

  • When adding an image to a page in a WordPress site, avoid linking to the ‘Media File’ unless absolutely necessary.
  • Select ‘none’ instead.
  • Linking to a media file when alternative text is missing or decorative will result in an empty link.

Additional Resources

Tools

WAVE (Web Accessibility Evaluation Tool)

WAVE Chrome & Firefox Extentions

Further Reading

WashU Web Accessibility Users Group

Links and Hypertext (WebAIM)

Alternative Text (WebAIM)