Personal tools

Web Content Guidelines

An overview of applicable accessibility guidelines for your content, including alternative text, documents, headings, links, and more.

Web content accessibility aims to make content available to as many users as possible, including users with disabilities, older technology, slower networks, and users of different age groups.

The goal of web content accessibility is to make our websites inclusive so that everyone has equal access to information, benefits, and services.

How do we measure web content accessibility?

Accessibility is measured against international standards, called the Web Content Accessibility Guidelines (WCAG) 2.0 and 2.1.

WCAG is a series of success criteria, which can be summarized by the acronym POUR.

WCAG 2.0 in a Nutshell

Perceivable
Can all users perceive the information posted on our website?
Operable
Can users operate the controls and links on our website?
Understandable
Can all users understand our content?
Robust
Does our website work with our users' browsers and assistive technologies?

For a more in-depth explanation, read the W3C's explanation of WCAG 2.0.

Web Content Guidelines

The following guidelines apply to all types of content posted online, including text, documents, images, video, forms, links, curriculum, and software.

Alternative Text (alt-text)

  • Alt-text is required for all non-text content like images.
  • Alt-text acts as the text equivalent of an image.
  • Screen readers can read the alt-text to the user, so the alt-text will provide context that users cannot gather visually.
  • Alt-text should be one to three words or a sentence at most.
  • Don't include "Image of" or "Picture of" in your alt-text — screen readers identify images on their own.
Employees: For more information, head to Alternative Text Guidelines on the Employee Intranet.

Color

  • Colors should have high contrast so that they work for individuals with color-blindness (e.g., black text on a white background.)
  • Color should never be used as the only visual means to convey information.
    • For example, a required form field has an asterisk to indicate it's required instead of just having red text.
Free color contrast checkers are available online: WebAim Color Contrast Checker.

Content

  • All content should be clear, concise, easy to read/scan, and free of jargon and unfamiliar acronyms.
  • Use standard fonts (e.g., Arial, Verdana, etc.).
  • The text should have high contrast with the background.
  • The text must be at a readable size (e.g. 12 pt).
  • Avoid all-capitalized text or overuse of bold and italics.
Where possible and appropriate, we recommend that pages and documents have a reading level of Grade 7 to 9 and lower. Use the Hemingway App to make your content easier to read. Learn more about the Hemingway App.

Data Tables

  • Tables are used only for data, not for layout.
  • All tables must have proper markup:
    • Caption (the title of the table).
    • Summary/alt-text (to identify the table topic).
    • Headings cells with a column or row scope.
      • Heading cells with the column/row scope make associations between the headings and data clear.
      • Without heading cells and scope, the table is read from left to right, top to bottom, which is confusing.
  • Keep reading order clear:
    • Don't merge cells.
    • Avoid empty cells.
  • If there is a long, multi-page table in Microsoft Word, go into Table Design and check "Header Row" box so that the header row is repeated on printed pages.
Employees: For more information, head to Data Table Guidelines on the Employee Intranet.

Documents

Documents must follow the same accessibility guidelines as web pages, with additional document-specific guidelines.

  • Files such as Microsoft Office documents and PDFs should be accessible.
    • All documents need to follow accessible content guidelines, e.g. headings, alt-text, meaningful link text, etc.
    • PDFs must have readable text, tags, and an established language.
  • Use the Accessibility Checker before uploading documents on the website.
  • All documents must have:
    • Headings
    • Alt-text for images
    • Meaningful links
    • Table headers and captions
  • PDFs must have:
    • Readable text (so, avoid or remediate scans)
    • Established language
    • Tags (e.g., using Headings and lists correctly in Word will translate to PDF)
APS Students and Employees: Make Google Docs, Slides, and Sheets accessible with Grackle! Learn more about Grackle.
Employees: For more information, head to Document Guidelines on the Employee Intranet.

Headings

Headings have two purposes:

  1. Headings outline topics and subtopics of a page or document.
  2. Headings are navigation tools for assistive tech users.

Headings allow all users to scan a page to quickly understand what it means, whether by scrolling and reading the page or by using assistive technology.

Heading Tips

  • Use headings in order to make a logical outline of a page/document:
    • Heading 1 is the title of the web page.
    • Use Heading 2 to identify main topics on a page.
    • Use Heading 3 to identify sub-topics of your Heading 2 topic.
  • Use your system's built-in Headings.
    Where to find Headings:
    • In "Styles" for Word, APS.edu, and School Loop.
    • In "Formats" for the Intranet.
  • Don't manually style fonts to look like headings by using bold, italics, different fonts, etc. They won't be recognized as headings for assistive technology users.
  • Don't use headings to make the text bigger. Remember: they are supposed to outline important topics and serve as navigation.

Images

  • Images must have alt-text.
  • Images must be high quality.
  • Use images to enhance comprehension like a map or diagram.
  • Make sure the file size is less than 1 MB before uploading.

Images of Text

  • Images of text should be avoided. Logos are exempt from this guideline.
  • All images should have alt-Text.

Links

All links should make sense if the link text is read by itself. Screen readers allow users to scan pages by reading each link out loud. Assistive technology allows users to scan pages by reading each link out loud.

Make your links descriptive:

  • Describe where the link leads (e.g., the link text should be the name of the page you're linking to, like School Directory).
  • If the link is to a file, identify the file type (e.g., Student Handbook (PDF)).
  • Make sure your link text is concise.
  • Email addresses may be written as mary@aps.edu.

Avoid bad link text:

  • Avoid "click here" or "read more" should be avoided. These phrases don't identify where the link leads.
  • Don't use raw URLs as text: write "Google," not "https://www.Google.com."
  • Don't include the word "link" in your link text.
Employees: For more information, head to Link Guidelines on the Employee Intranet.

Lists

  • Use your system's built-in ordered and unordered lists:
    • Provides context: Assistive technology can announce list type, the number of list items, and the relative position of the list item (e.g., "Apple, item two of three in an ordered list.")
    • Eases navigation: Assistive technology can navigate to the list item, or to the next list on a page.
  • Each list item should be concise.
  • Don't manually create lists because screen readers won't recognize them.

Video, Audio Multimedia

Multimedia players should have controls so a user can manage audio levels, and should not "auto-play." Screen readers read navigational information aloud, so we cannot allow extraneous audio to inhibit navigational audio.

Captions and Transcripts

  • Audio and video files should have a text transcript.
  • Video files should be captioned.
  • Important unspoken content (for example, text on the screen that's not said out loud) should be included in the captions and transcript.

Embedded Media Alt-text

  • When embedding a video iFrame, add a title attribute in the source code.
  • Example: <iframe width="560" height="315" src="https://www.youtube.com/embed/ABCD" title="Video: Title Example"></iframe>
Employees: For more information, head to Multimedia Guidelines on the Employee Intranet.