Â鶹ӳ»­

Web accessibility cheat sheet

Adapted from Â鶹ӳ»­'s:
Basic Web Accessibility Cheat Sheet | 3/23/2017
Accessibility Cheat Sheet | n.d.

Follow the guidelines below when creating content for the web. This includes any web content that is publically accessible, used for internal purposes and content that is directed toward students.

Audio content

• Audio files (i.e. podcasts) need to have a transcript, ideally with timestamps.

Color contrast

• Do not use color to convey meaning or information (for users who cannot distinguish color differences); alternatively colored text should be otherwise differentiated.
• Make sure that the colors you choose have sufficient contrast.

Headings

• Headings are properly nested and in order.
  • Do not use text formatting to achieve the appearance of headings; heading tags (<H1>-<H6>) should be used for all headings. These may be set to specific styles in the content management system you use (i.e. LibGuides).
  • Conversely, do not use heading tags (<H1>-<H6>) to achieve visual results. They are used for conveying the hierarchy and structure of a page.

Images

• All images must have ALT text (i.e. the alt attribute of the <img> tag)
  • Alt text should
    • Be accurate and equivalent.
    • Be succinct, although some more detailed graphics or diagrams may require it to be longer.
    • Not be redundant.
    • Not use the phrases “image of” or “picture of,” etc.
• Graphs or diagrams should not rely on colors to add meaning. An option is to use patterns or textures to differentiate parts of bar or pie charts.
• Images do not contain text.

Links

• Links do not open in a new window (unless the link specifically says it will).
• Documents do open in new windows.
• Emails are linked. The email address itself should be the link. <a href="mailto:anandrews@unr.edu">anandrews@unr.edu</a>
• Phone numbers are linked. <a href="tel:17757841110">775-784-1110</a>
• Links should be descriptive/provide context.
  • Good: Read information about our products.
  • Bad: Click here for more information. Do not use “Click Here”– this has no meaning out of context.
  • Do not use long URLs as link text (i.e. http://er.educause.edu/articles/2017/1/ada-compliance-for-online-course-design).
  • Instead, use a descriptive link in context (i.e. EDUCAUSE review article, , by Sheryl Burgstahler)

PDFs

• All PDFs that are for instructional purposes, internally shared or publically available on the web need to be accessible.
• For scanned documents, all text should be processed by optical character recognition (OCR) so that it can be read by a screen reader.
• Scanned documents or book pages that have not been processed by OCR are not accessible and should not be used.
• All images need to have ALT text.
• The document reading order needs to be set– this ensures that a screen reader reads the page in the order it was intended.

Tables

• All tables are used to organize data and NOT to define a layout on a page
• The scope attribute is set for all table headings (i.e. scope="col" scope="row" <th scope="row">
• All tables have titles that are specified with a caption tag inside the opening table tag.
• Tables must have headers.
• Avoid spanned cells.
• Use proportional sizing rather than absolute (% rather than a pixel dimension).

Text content

• Page titles are straight forward.
• Content does not include jargon, abbreviations, acronyms, etc.
• Alert messages, announcements, etc. do not rely on color to add meaning (i.e. A red error message should include a large red X as well. By adding the symbol, you will convey to users that there's a problem in a way that doesn't solely rely on color.)
• Italicized words use <em> tags instead of <i> tags.
• Bolded words use <strong> tags instead of <b> tags.
• ALL CAPS is not used.

Video content

• All video content that is either for instructional purposes, internally shared or publically available on the web needs to be captioned.
• Captions need to be 95% accurate or better; auto-generated captions are not sufficient (i.e. those generated by YouTube).
• Video content that has no spoken audio (i.e. only background music) is an exception and does not need to be captioned.
• Transcripts are not sufficient in most cases. Transcripts with timestamps are a step in the right direction but not a substitute for captions. Transcripts without timestamps are insufficient.
• Videos using an iframe to embed must include a title (i.e. <iframe title="insert title here">).

Resources

Below are some accessibility resources that are available on the web and campus resources if you need assistance or have questions.

Tools to check your content:

• – This is a free plugin for the Chrome web browser that will check your webpage for accessibility issues.
• – This tool will check your colors to ensure that you have sufficient contrast.
• – This software includes functionality for checking PDFs for accessibility.
• – This is a free screen reader application that allows you to experience your web pages the same way a visually impaired user would. 

Resources for assistance at the University

• The University's accessibility website
• Teaching & Learning Technologies
• The Disability Resource Center

Other resources

Tips for creating accessible print materials

Content

• Ensure your message is clear, including for people:
  • Outside of your field
  • Of varying education levels
  • Of varying cognitive abilities
  • Under stress (Example: during an evacuation from wildfire)
• Ensure your content is well written
  • Use plain language
  • Use common words
  • Define any words that may be unfamiliar
  • Avoid acronyms, abbreviations, jargons, idioms
  • Convey one idea at a time
  • Avoid if/then sentences
  • Use short sentences
  • Use active voice
• Ensure your content is well organized
  • Place the most important info first
  • Use headings
    • Use headings in order
    • Use a unique style for each level
    • Ensure each level’s style is consistent
  • Use short bulleted/numbered lists where possible/appropriate
  • Accompany text with visuals and visuals with text

Design

• Ensure design is clean, attractive, organized
  • Use white space
  • Justify text left
  • Use columns (~8-15 words wide)
  • Use headings
    • Use headings in order
    • Use a unique style for each level
    • Ensure each level’s style is consistent
  • Avoid awkward hyphenations
  • Draw attention to key takeaways
  • Clearly distinguish need-to-know vs. nice-to-know info

Colors

• Use good color contrast
  • Among and between all of the colors in any visuals
  • Between visuals and the background color
  • Between the font and background color
    • Consider the font size
    • Consider the paper color, texture and weight
  • Most readable
    • Black text on white background/paper
  • Tip: Use a checker, such as Colour Contrast Analyser, and print the document in black and white to test contrast
• When color conveys meaning, include a secondary indicator (texture, etc.)
• Limit colored text to titles, headlines, brief passages

Visuals

• Avoid text on images
• Use high-resolution visuals
• Reference and explain visuals in the text
• Locate visuals near their text reference/explanation
• Accompany visuals with explanatory labels/captions/legends/keys, etc.

Fonts

• Stay away from all caps
• Balance leading/tracking with font size/weight
• Use bold or heavy, not italics or caps, for emphasis
• Make body copy 12-18 point, depending on the font
• Use brand fonts (Myriad Pro (headings and body copy), Minion Pro (body copy), Arial)
  • Sans-Serif fonts (Myriad Pro) can be easier to read
  • Serif fonts (Minion Pro) can be harder to read
• Don’t use
  • Fonts with light/thin letters
  • Complicated, decorative or script fonts
  • Fonts that have large changes in line stroke width
  • Extra black, italic or condensed fonts
    • Or, use only with larger fonts/in bigger font sizes

Printing

• Use
  • Matte paper
  • Wide binding margins
  • Spiral bindings if possible
  • Heavier weight paper when printing double-sided