Web Accessibility Cheat Sheet
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 files (i.e. podcasts) need to have a transcript, ideally with timestamps.
- 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 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 only as they convey a hierarchy
- 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.
- Alt text should
- Graphs or diagrams do not rely on colors to add maning. Option: Use patterns or textures to differentiate bar/pie charts.
- Images do not contain text.
- 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:firstname.lastname@example.org">email@example.com</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 nomeaning 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, ADA Compliance for Online Course Design, by Sheryl Burgstahler)
- 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 OCR’ed so that it can be read by a screen reader.
- Scanned documents or book pages that are not OCR’ed are not accessible andshould 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.
- 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).
- Page titles are straight forward.
- Content does not include jargon, abbreviations, acronymns, 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.
- 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">).
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:
- WAVE – Web Accessibility Evaluation Tool – This is a free plugin for the Chrome web browser that will check your webpage for accessibility issues.
- WebAIM Color Contrast Checker – This tool will check your colors to ensure that you have sufficient contrast.
- PDF Accessibility Checker 2 (PAC2) –This is a free tool that can be used to check your PDFs for accessibility. (NOTE: Adobe Acrobat Pro, which you have access to as an employee of the University, also includes a PDF accessibility checker.)
- NVDA – 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 DisabilityResource Center