Accessibility Procedures

Web Accessibility Procedures

Basic Accessibility Compliance

(Adapted from SiteImproves’s Must Have Accessibility Handbook 2017 Edition)

For more information on the impact and benefits of Web Accessibility, see the W3C Accessibility Perspectives Website.

Images

When you add images consider the fact that some users cannot see images. They need a text alternative.

  • Do not post image of your event “SPAM”-—post an image and the event text separately.
  • Avoid images of or with text where possible. Where not possible to avoid, make sure that text alternatives are equivalent.
  • All images require an alt-tag (or coding) and most require alternative text (descriptive text that conveys what’s happening in the image). Whether the image should have an alternative text depends on the context and purpose of the image. Ask yourself these questions:
    • Do I use the image as a decoration to create a visual context?  If this is the case, the image need not have an alternative text (the code alt=””)
    • Do I use the image to provide information? Then you need to describe what a visually impaired user can’t see on the image (and this is not necessarily the same as describing what the image shows).
    • Does the image link? Then you need to describe the destination of the link in the alternative text. Generally images should not be used as links.

Links

When you add links on a page write link texts that make sense when read out of context.

  • Avoid ‘Click here,’ ‘Read more,’ ‘Learn more’ …
  • Link the relevant text to indicate what the destination page is about. For example the link should describe what the reader will find when they click on the link like “The Wellesley College Student Handbook contains student policies.” and not “For the Wellesley College Student Handbook, click here.”

Text

When writing text for web pages, consider the fact that some users cannot get an overview of a page visually, as opposed to structurally.

  • Use several levels of headings to structure your content (such as H3, H4, H5 available in Drupal)
  • Do not use blinking text.
  • Make sure not to give instructions based solely on a location or color of content, such as ‘In the box to your right’ or ‘the green circle’.
  • If you need to emphasize text, use bold or italics, not underlines. 
  • For longer pages, provide a navigable table of contents at the top.

Color

  • Do not use color alone to signify meaning or convey information.
  • Make sure there is a sufficient contrast between the background text color, so those with low vision can also read it. For example, avoid using different shades of the same color to make differentiations, e.g., dark blue bordering light blue. 
  • When using a Wellesley Drupal template, the approved colors will automatically appear. Do not change these colors.
  • For graphs, use a combination of color with texture or pattern, such as contrasting grids, dots or lines.

Forms

  • Use Google Forms when possible. If the form is hand-coded, include a label for each field.

Lists

  • Use the list bullet or numbered list feature in the Drupal editor. Do not make marks that looks like a list (such as asterisk, dash, etc.).

Tables

  • Tables should be used to organize data and information. Do not use them to style or layout your page.
  • Tables need to include header cells (do not leave any empty). These help identify the information in each row and column). Look under table settings to specify the header cells.
  • Tables need to include a caption or summary. These fields can also be found in the table settings.

Video

Audio

  • All audio should have a written transcript.
  • Rev.com can provide transcripts for $1.50/minute. 

IFrames

  • All iFrames, such as YouTube videos, Google forms, and Google Calendars, need a title. Look for the Advisory Title field in the iFrame settings.

Google Docs, PDFs, and PowerPoint 

Many of the same principles that apply to web content are relevant for documents.

  • Google Docs are preferred over PDFs. Follow all of the accessibility guidance on this page when creating a Doc, such as: avoid images with text baked in, use headings, be aware of color contrast, etc. Google also offers accessibility tips. 
  • PDFs should only be used for documents expected to be printed, all other content should be created in a web page or Google Doc. Include (PDF) to indicate to the web user that they will be taken to a PDF vs. a web page. All PDFs should be made accessible (see Making an Accessible PDF)
  • PowerPoints do not render in screen readers and should be avoided. You must offer an additional format if there is not an alternative (see Non-compliance).

Non-Compliance

  • A text-only page with equivalent information or functionality should be provided when compliance cannot be accomplished in any other way. The content of the text-only page needs to be updated whenever the primary page changes.

Making an Accessible PDF (Basics)

  • This a “tagged” PDF. You must tag common elements:
    • Headings
    • Lists
    • Tables
    • Columns
  • Provide alternative text for images and link text.
  • Save as a PDF—do not print as a PDF. Use The National Center on Disabilities Access to Education Cheatsheet for converting a Word Doc to a PDF.
  • See our documentation for making pdfs accessible.