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