Jump to main content

Accessibility Guidelines for Web Page Development

March 21, 2017 revised
Some visitors to the University's web site may have difficulty using the site due to visual, auditory, learning or mobility impairments. These users may rely on adaptive technology on their computer to access the web. An example is a speech output system that reads the text on a screen. In order to provide access to the University web site for a wide spectrum of potential users, certain accessibility guidelines should be followed. These guidelines are based on WC3 Web Accessibility (WAI) Initiatives.

Page Design

  1. Avoid using backgrounds that interfere with the text on the page. The text should contrast strongly with any pattern or color of background. Pattern backgrounds should not be used.
  2. Use header tags appropriately. For example, use header 1 for main headings and smaller header tags for sub headings. Do not use header tags to color or enlarge non-heading text.
  3. Make links descriptive so they can be understood out of context. For example, rather than "click here for a list of staff", use "staff listing" as a link. Too many words make the link ineffective; don't link entire sentences
  4. Do not rely on color of text to provide information. For example, do not say "All new dates are in red text"
  5. If you use audio, video or animation on a page, provide as a minimum a text transcription of video and audio along with a text description of the action. Multimedia that are properly captioned and provided with audio descriptors are the ideal standard.Provide a tab order for each form element to allow keyboard access and contact information for those who cannot view the form or database.
  6. Test the pages with Javascript turned off if you are unsure of accessibility.

Images

  1. Provide alt tags for all images to describe their graphical content. This is a crucial element to accessibility design.
  2. Information presented in an image format, such as an image of a manuscript, should include a link to a text description of the information. If you are unsure of the importance of an image, remove it from the page to assess the impact.

Testing/Further Information

  1. WC3's Web Accessibility Initiative has an extensive site of accessible web design information.
  2. The Content Management System has an accessibility page check tool.
  3. Templates and tools in the UNC Content Management System are designed to meet accessibility standards.