Accessibility Best Practices for Web Content and Electronic Documents

The following best practices align with the Wide World Web Consortium's Web Content Accessibility Guidelines (WCAG):

  1. Use Sans Serif fonts, such as Arial, Tahoma, and Verdana.  When using modern fonts, ensure the appropriate flare extensions and strokes.  For example, Raleway is a font that meets the readability conditions documented on the WebAIM Fonts page.
  2. Use proper headings and subheadings in the correct sequence.  Don't use heading 1 and then skip to heading 3 because you favor the style better of a certain heading.  Straying from the standard heading structure creates issues for screen reader and switch users.
  3. Studies have shown that it's easiest for people to read left-aligned font so center-aligned and left aligned should be the exception, rather than the rule.  For example, a right aligned date in a document is fine, but centering content just for emphasis is not.
  4. Avoid using abbreviations, jargon, complex language, or any content that might confuse the reader unless necessary. If this content must be included, provide definitions for abbreviations and jargon, as well as extra resources for further comprehension of complex language or topics.
  5. Never include a full hyperlink on the page.  Always provide descriptive language such as "Annual Budget Report" and embed the link using the hyperlink functionality.  If you paste in a full hyperlink, a screen reader will not know how to read that link and will read it in either a nonsensical manner.
  6. Do not use non-informative links such as "click here," "here," "more," and "read more."  When using assistive technology, a person will often keyboard through the links first and then read the content around it for more information if they are interested in gathering more information before clicking on the link.  If everything is "click here," the user won't know what they are clicking on and will need to read all the content surrounding it before navigating.  In fact, the phrase "click here" is unnecessary, even if it precedes a more meaningful phrase.  For example, a link that says "click here to read this month's report" can be shortened to "Read this month's report."
  7. When creating documents, always use the automated table of contents rather than manually building the table of contents.  A screen reader will be unable to navigate a manual table of contents, making it impossible for the reader to navigate from section to section in the document. Images and graphs should include alt text.  If the image is complex (such as a graph), include a description below the image either in a caption field or a descriptive summary in a paragraph below or adjacent to the image.
  8. Always use the built in functionality for bullets and numbering.  Manually adding bullets or numbers will reduce the ability for the screen reader to navigate that content.  If you are looking to have the styling modified, please work with a web developer to do so with the built in functionality.
  9. Avoid using underlines to emphasize words.  In fact, in we have the underline feature disabled.  Why?  Underlines are used to indicate hyperlinks on a page.  If someone is colorblind, they will not be able to tell the difference between a hyperlink and underlined words.  Use bold and italics to emphasize. 
  10. Use standard capitalization.  DO NOT USE ALL CAPS.  Use bold to call attention to a word when applicable.  ALL CAPS IS USED FOR YELLING VERY LOUDLY.  DO NOT YELL AT WEBSITE VISITORS.  Some screen readers will also interrupt all caps letters as an acronym and read each letter separately, making for a very confusing experience. 
  11. Do not rely on color to emphasize the meaning of content.  Use bold or italic to emphasize the content.  In the case of graphs, ensure that the color gradients are varied enough or that the labels within the graph make it clear what someone is looking at if they are unable to see the colors.
  12. Use Alt Text when applicable.  Note that decorative images do not need alt text and the alt text field should be left blank.  In addition, if an image already has a caption associated that covers the overall meaning of the image, there is no need to add redundant alt text. Finally, do not start alt text with the words "picture of" or "image of."  The image is already tagged as an image so these words would create a redundant experience for anyone using assistive technology (i.e. the alt text would read, "picture of picture of a student studying the dengue virus in a research lab").  For more information on alt text requirements, please read the Web AIM Alternative Text page.
  13. Remember to review content for spelling, grammatical errors, and readability.

Last Updated

Kelly Weeks
July 28, 2019