Accessibility Guide

This documentation explains how to make web content more accessible to people with disabilities. Web “content” generally refers to the information on a web page or web application, including:

Headings and Sub-headings

  • Use heading tags instead of inline style formatting
  • Use Heading 2 for top-level headings
  • Use Heading 3 for sub-headings

In order to follow best practices for web accessibility, you must use headings to help the organization of the content on a page. Web browsers, plug-ins and assistive technologies such as screen readers use headings to help the user navigate the page.

Heading Ranks

Headings are organized according to rank, and size. The most important (and largest) heading has the rank 1 (<h1>), while the least important (and smallest) heading has the rank 6 (<h6>). 

Whenever you start a new section of the page, you should use a heading with a value that is the same or higher as the one before it. Skipping heading ranks, going directly from <h2> to <h4>, can be confusing to screen readers. If you are starting a new subsection within the higher-ranked section, you should use a heading with a lower rank.

* Drupal automatically sets the page title to <h1>, so the highest rank for your content is <h2>.

Heading h1 - Reserved for Page Title

Heading h2

Heading h3

Heading h4

Heading h5
Heading h6

You can learn more about headings at W3C.orgs information page.

Images, Maps, and Charts

Simple Images

  • Use alt tag
  • When embedding a decorative image (an image that does not present important content nor has a function), enter <none> in the Alternative Text field to signify the image should have an empty alt attribute value (e.g., alt="", sometimes call "null" alternative text). See WebAIM's article on Alternative Text for more information.

Complex Images

  • Describe image in a logical descriptive way.

Good alternative text is:

  • Discernible (screen readers can access the alternative text)
  • Meaningful (the alternative text accurately describes the image's purpose or author's intent in using the image).
  • Concise (the alternative text does not exceed about 150 characters, and preferably is much shorter than that)


A longer detailed description can be placed in the Caption field of an image when it is embedded on the page. If an image is decorative then we recommend using double quotes "" for the alternate text.

Tables

Data tables are used to organize data with a logical relationship in grids. Accessible tables need HTML markup that indicates header cells and data cells and defines their relationship. Assistive technologies use this information to provide context to users.

Tables must have captions so screen readers can read off the title. They read tables like Table caption number of rows number of columns. For example, a table with a caption of Spring Semester Courses would be read by a screen reader like Table Spring Semester Courses 5 rows and 5 columns.

View the tutorial on tables

Video and Audio

All videos should include closed captions and/or transcripts.

  • YouTube and Microsoft Stream automatically generate captions, but must be reviewed and edited for accuracy:
  • If you have a script for your video you can include that in an accordion
  • Use a script when creating new media that describes all elements of what's going on. 

    Links

    Using a meaningful link for your text makes pages more user-friendly for visitors and search engines. For link text to an external site the text should include (links to an external site). For example, visit our alumni website (link to an external site).

    View the tutorial on links

    Accessible PDFS

    How to create accessible Portable Document Format (PDF) documents that conform to the Revised 508 Standards.

    Accessible Documents

    Best practices and tips from Microsoft on how to easily make your emails, documents, spreadsheets, presentations, and other content accessible to everyone.

    Alternate Format Conversion Tool

    Follow the four easy steps outlined on the Alternate Format Conversion Tool page to have your document converted into an alternate format.

    Back to top