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
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:
💡 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:
- Use a Page Title Banner for your page title
- 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:
💡 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:
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:
- Siteimprove: Do these links (in the same context) go to the same page?
- Siteimprove: Are these links identical?
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:
💡 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
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
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:
💡 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
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.
💡 Learn about making embeds accessible
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:
💡 To learn about iframe titles
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
Go to alternative text for images and other media.
See ODA's guidance on Captions and 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:
💡 Learn about creating accessible IDs
Go to Create Jump Links Using ID Tags
Also see ODA guidance When Working with Element IDs, Make Them Unique
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?