Make content accessible

Create well-structured and informative content that follows basic guidelines to ensure that your website is well-organized, clearly understandable, and accessible to all visitors.

Accessibility tips on this page

These tips include how to fix issues from Siteimprove and Editoria11y.

Write accessible content

Ensure icons are accessible

Icons can make your content easier for your sighted visitors to scan and understand. To make your icons available to all visitors, you can describe the icon in adjacent text or through the HTML.

💡 To learn about accessibility for icons

Go to Accessibility for icons

Avoid adding empty content

When using the text editor, you can add headings or other HTML with no content. Although you can't see it, assistive technology such as screen readers will detect it.

You will see the following issues from Siteimprove:

💡 To learn about fixing empty content

Go to Container Element is Empty

Create accessible headings

Use headings appropriately

It’s tempting to select a heading based on how it is styled. However, using proper heading structure will make it easier to understand your content. Consider making the text bold or use one of the available text styles.

💡 To learn proper use of headings

Go to Use headings appropriately.

Use headings hierarchically

Following the title, or H1, the first heading should be a Heading 2 (H2) and if there's more detail needed the next heading should be a Heading (H3).

If you don't use headings hierarchically, SiteImprove may flag the following issue:

Siteimprove issue: Headings are not structured

💡 To address heading structure

Stanford Sites provides support for providing hierarchical headings for most content types and paragraphs.

For the text in a Top banner you have options:
1. Use a Page Title Banner for your page title
2. Use the Splash Text style for the text in the banner. See Styles/Behaviors for Image Banner Paragraph
In a text area see Use headings hierarchically
For heading levels on Card Paragraphs see Styles/behaviors for cards
For the heading level on a Banner see Styles/Behaviors for Image Banner Paragraph
For heading levels on Lists Paragraphs see Manage the Lists Paragraph Headline display
For heading levels on Teaser Paragraphs see Styles/behaviors for teasers

Don't use a heading if there's no following content

When you have a heading such as a Heading 2, it is expected that there is content associated with it. If there is no content, it can be confusing and may lead screen reader users to wonder if they are missing content.

If you use a heading without following content, SiteImprove will flag the following issue:

Siteimprove issue: Content missing after heading

💡 To address "Content missing after heading"

See Use headings appropriately.
For Basic Page List Paragraphs also see Add Metadata
For a Card Paragraph also see Styles/Behaviors.

Avoid empty headings. Use a new paragraph to create space

When adding visual space within your text, take care to use paragraphs (<p>) and not headings (i.e. <h2>). If you use a heading without content, SiteImprove will flag the following issue:

Siteimprove issue: Empty heading

Create accessible links

If you have multiple links on your page and the links go to the same place, the link text must be the same. If links go to different places, the link text must be unique.

For the same destination, use the same link text

If you have multiple links on a page that go to the same place, the link text must be the same. Make sure the destination URLs are exactly the same.

Depending on the context, you will see the following issues from Siteimprove:

Use unique link text

It's been a common practice to introduce something, such as a news item, and provide a link to the full story with generic link text that says "Read more." However, with multiple links on a page that all say "Read More", it becomes problematic for people using assistive technology.

Depending on the context, you will see the following Siteimprove issues:

💡 To learn more about link text

Go to Write accessible link text.

Add alt text to linked images

When using image such as a logo, it's common to wrap a link it. When linking an image, provide alt text that explains what happens when a visitor clicks the link.

If there's no alt text, Siteimprove will flag the following level A issue:

Siteimprove: Link missing a text alternative

💡 To learn about adding alt text to linked images

Go to Add link to image

Avoid creating really short links

It is possible to create a link that is too small to activate with either the mouse or by touch. Often these are created unintentionally.

If a link is too small, you may see the following issue from Siteimprove:

💡 To learn about these short links

Go to Interactive element does not meet minimum size nor spacing

Use a list instead of <br> for multiple links

It is possible to reduce the spacing between two lines of text by using shift+enter instead of using enter alone. Using shift+enter the text editor inserts a break (<br>) element; using enter alone, the text editor inserts a paragraph element (<p>). When using a break to separate links, the reduced amount of spacing also creates a smaller touch target, and Siteimprove will report:

Siteimprove: Interactive element does not meet minimum size nor spacing

💡 To learn about using a lists with links

Go to Use a list with multiple links

Create accessible tables

At one time, tables were used for page layout. This approach doesn’t work well on smaller screen sizes and is problematic for accessibility. Current sites have built in approaches to creating accessible page layouts. Tables should be solely used to display data.

Provide table headers for all table cells

Each cell in a table needs at least one header to explain how that the data in that cell is associated with the table. It is best if the table has both row and column headers.

If you don’t have table headers, Siteimprove will flag the following level A issue:

Siteimprove: Table cell missing context

Use table headers, not headings

A table header (<th>) defines the type of content for the cells in a column or row with table cells as the subsequent content. A heading (<h1>, <h2>, etc.) defines the start of a page section with more content following. Using headings (<h1>, <h2>, etc.) instead of table headers (<th>) as a table headers creates a confusing experience for a screen reader.

If you use heading instead of table headers in a table, Siteimprove may report:

Siteimprove: Content missing after heading

💡 Learn about accessible tables

Go to tables
See UIT Office of Digital Accessibility (ODA) guidance on Accessible Data Tables

Ensure images are accessible

Include alt text

All images have must have alternative text.

💡 Learn about alt text

Go to Alternative text (alt text) for images and other media

Also see UIT Office of Digital Accessibility (ODA) guidance on

Describe complex images

If there is text or a graph in an image, the same information must be available in the content.

💡 To learn about making complex images accessible

Go to Describe complex images

Ensure embeds are accessible

Use alternative text

If there are accessibility issues with your embed, you must provide an accessible alternative for the content. For example, if you're embedding a podcast or other media, add alternative text such as transcripts or an additional description.

💡 Learn about making embeds accessible

Go to alternative text for images and other media.

Ensure inline frames (iframes) are accessible

Just like an image, iframes insert content that needs a unique text alternative that summarizes the content. Iframes require a title that summarizes the visual content and will help screen reader users to understand the iframe's purpose on the page. To add or change the title requires editing the code. If you don’t have direct access to iframe or other embed code, you’ll need to work with the content provider to provide unique text alternatives

Include a descriptive title

If you are embedding an <iframe> embed code, make sure the title attribute exists and is accurate. If this is missing, you will see the following issue from Siteimprove:

Siteimprove: Inline frame missing a text alternative

Use unique alternative text

If you have multiple, different iframes on a page each unique iframe needs to have a unique alternative text (title). If the alternative text is not unique, you will see the following issue in Siteimprove:

Siteimprove: Are these inline frames identical?

💡 To learn about iframe titles

Go to Ensure iframes have title attributes

Ensure files and media are accessible

Ensure PDFs are accessible

All PDFs associated with your site must meet accessibility standards.

💡 Learn about PDF accessibility

See ODA guidance on PDF Accessibility

Ensure videos and podcasts are accessible

All videos and audio files associated with your site must be accessible with captions, and if appropriate, audio descriptions.

💡 Learn about video and audio accessibility