Web Page Accessibility Guidelines

The following video contains guidelines that inform UMBC’s web page template, and informs how web-based content should function for people of all abilities:

The above video is for general website accessibility – learn more by clicking on the Web Accessibility and W3C Standards video link and then reviewing for additional features (transcript, playing speed, language) or seeking additional information.  

Some basic elements for an accessible webpage:
  • Include a text equivalent description for every image or figure (“alternative text”)
  • Use text-based file types for documents such as: .txt,.html, and .rtf versus utilizing PDF or image files that may be read as a picture
  • Provide controls for users to select the colors that they can see best on web pages
  • Include captions or transcription for all video content
  • Include a “Skip to Main Content” link at the top of each webpage
  • Properly assign titles and headers to ensure your webpage is formatted with a structure that allows for easier navigation to the content pages
  • Remove parallax images, minimize blinking, or otherwise distracting visual features
  • Online forms should include tags to describe fields (and alternative options for completion available such as printable forms or in-person completion)
  • Clear visual notifications for any sounds that play automatically
  • Use an accessibility checker tool before publishing new content

Accessibility is everyone’s responsibility. Training about disability, inclusion, and website accessibility is available via UMBC’s website accessibility checker, Monsido, and is available at an employee’s convenience via  Skillsoft Percipio – which has an Introduction to Disability and Accessibility course along with a five-course series on Web Accessibility.

For more information about creating or maintaining accessible web page content, please refer to the following web links:

Best Practices for Web Design

Best practices for assuring an ideal website experience for end users with disabilities:

  • Use good colors and contrast (light text on dark background or vice versa) so that the text is easy to read.
  • Provide an option to toggle contrast.
  • Avoid communicating information solely using colors (e.g., emphasizing a “myth” statement by using red font with no additional information).
  • Whenever any information is color-coded, provide an alternative in text, too. Avoid combinations of red & green and blue & yellow since these are the most commonly confused colors.
  • Always have a text alternative to media components like images and videos. Whenever an image is used, give a proper description in the ALT attribute of the IMG tag.
  • Provide an option to toggle font size.
  • Create a navigation bar as a <ul> list, which is easy to read by screen readers. Avoid using images in the navigation bar for menu options. Give meaningful descriptive text as hyperlinks. Avoid using ‘Click Here’ or ‘here’ as a separate text for the links. A screen reader can jump between links on a webpage, and it will read “here” without the benefit of the preceding text.
  • Do not make webpages rely on JavaScript, Java Applets, or Flash because screen readers are incapable of reading these programs. If you do need to use them, provide an alternative experience so that people using screen readers can also access the information.
  • Include ‘Skip Navigation’ or ‘Skip to Content’ at the top of the page. This can be hidden from sighted users, but people using screen readers can read them first and thus be saved from hearing the navigation menu every time they open a page.
  • Refrain from opening links into a new page or window, as it is disorienting for users who are blind.
  • In forms, use the label tag for the labels and give proper id’s so that the input box is properly associated with the label.
  • When providing video or audio content, use subtitles, closed-captioning or otherwise indicate and transcribe audio content.
  • Use ‘Access Keys’ to provide keyboard shortcuts as an alternative to using the mouse.
  • Avoid using blinking images, marquees, or pop-ups which can be disturbing and frustrating.
  • Be consistent in Design (Ex: Keep navigation at the same place on all pages), and keep the page simple. Provide ample white spacing and avoid clutter in the page.
  • Use a sitemap so that people can find everything in one place.
  • Use images/icons to convey an idea whenever possible.
  •  Use simple and easy-to-understand language whenever possible.

 

Resources

The following links are resources that can be leveraged to further support website accessibility:

WebAIM (web accessibility in mind)

W3C.org