Skip to main content Skip to secondary navigation

Make content accessible

Main content start

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.  

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:


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.

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.

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

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


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:

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:

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

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:

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


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


Ensure images are accessible

Include alt text

All images have must have alternative text. 

Describe complex images

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

Make GIFs accessible

Make sure GIFs meet accessibility requirements and stop after 5 seconds or provide a way to pause, stop, or hide the GIF. See WCAG 2.2.2


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. 

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:

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:


Ensure files and media are accessible

Ensure PDFs are accessible

All PDFs associated with your site must meet accessibility standards. 

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. 


Create valid HTML

Use unique ID attributes

Within the HTML of a span, heading, or other element on your page, you can add an ID attribute to make it a jump link target. The value for this attribute must be unique on the page. 

If the ID is not unique, you will see the following issue from Siteimprove:


Address other Siteimprove issues

Address Siteimprove issues for Policy content type

Siteimprove flags some potential issues for the Policy content type that can be dismissed such as:

Siteimprove: Do page sections with the same name serve the same purpose?