Web Content Guidelines

• 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.

• 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.

• 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.

• 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.

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)

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 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.

All links should make sense if the link text is read by itself. Assistive technology, like screen readers, 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.

• 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 by using dashes or other types of characters. Screen readers won't recognize the content as a list.

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.

You can caption your own videos using one of several free online tools, including:

• Amara.org
• DotSub.com
• Subtitle Horse

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>