Stanford
Stanford Sites User Guide

Creating accessible content

Well-structured and informative content that follows basic formatting guidelines ensures that your website is well-organized, clearly understandable to readers, and accessible to people with disabilities.

Such guidelines provide the added benefit of making your site more findable and promotable since Google and other search engines "see" pages that are well-formatted better than those that aren't. Creating well-structured content requires the usage of some basic patterns and strategies.

Related Topic: Writing for the Web
 

Use Headings and Page Titles

Headings are HTML tags that are used to divide sections of a page. The number in each heading indicates its level in the content’s hierarchy. By default, your page titles will be formatted as a Heading 1. The following header should be an H2, followed by an h3 if needed. The content within the hierarchy of the heading sections should be related.

Heading Examples:

  • Heading 1: Page title
  • Heading 2: Sub-head (added in content)
  • Heading 3: Grouping or title within Sub-head (added in content)
  • Heading 4: Grouping or title within grouping (added in content)

Basic Patterns and Strategies:

  • Keep headings short: skip unneeded words like “How do I...” or “Read how to...”
  • But not too short: include keywords to ensure people will understand the context of this page and facilitate searching by headers.
  • Keep it simple: avoid jargon and technical terms if possible.
  • Use sentence case for readability. (Page titles can be in title case if desired.)
  • Ensure all page titles in your site are unique.

Read more: How-to Headings Guide

Use Structured Content: Paragraphs and Lists

Basic Patterns and Strategies:

  • Keep it short: cut out all superfluous text and words
  • Write your content in small chunks and mini-paragraphs with headings: avoid the “Wall of Text”
  • Use HTML bulleted or numbered lists for steps in a task and item lists

Summarize your message

Beginning each section with a short summary that introduces and explains the topic will help your reader better understand the content and to decide whether to read in more detail or to move on to the next section. 

Use call-to-action links

Links are used to guide people through your website or to content hosted elsewhere, and encourage your users to take specific actions.

Basic Patterns and Strategies:

  • Give a little detail: Avoid making link text too short. “Read more” or “Click Here” can cause accessibility problems.
  • Start with a verb: The most important part of a Call to Action is the leading verb. People are far less likely to click on a link that is a noun, they want to be led through your site. Rather than “About Us,” try “Read about our team.”

Tables

Only use tables for communicating tabular data (like charts of statistics), not for page layout. The content in tables can appear awkwardly on tablet and mobile browsing. 

When creating a table, it is required for accessibility to include table headers that properly label the information its relative column and row contains. As stated within the Web Accessibility Tutorials — Table Concepts:

Header cells must be marked up with <th>, and data cells with <td> to make tables accessible. For more complex tables, explicit associations may be needed using scope, id, and headers attributes.

The lack of table headers violates the WCAG 2.1 1.3.1 Info and Relationships standard.

For more information regarding Table Accessibility, please check out the following:

Explain acronyms

Be sure to provide an expansion or explanation of an abbreviation the first time it is used on a content page, so all readers understand its full meaning before subsequent use of an abbreviation or acronym. See more guidance on acronyms at:

Call out abbreviations

You can use the abbreviation element <abbr> in your HTML to represent an abbreviation or acronym. Some browsers will call out these with elements with special styling. If you cannot provide an expansion or explanation of the abbreviation in the content, you can add a title attribute with the expansion or definition. 

If you want to display this:

You can use CSS to style your HTML.

The HTML would be:

<p>You can use <abbr title="Cascading Style Sheets">CSS</abbr> to style your <abbr title="HyperText Markup Language">HTML</abbr>.</p>

Using inspect through the browser, you can see the <abbr> element and title attribute in action. 

To add an <abbr> element in the WYSIWYG:

  1. click on the Source button
  2. find the abbreviation 
  3. Surround the acronym with <abbr> before and </abbr> after

Learn more about using <abbr>

Call out other languages

If the text in your website uses multiple languages, you'll want to indicate what language is being displayed. The lang attribute is used to identify chunks of text in a language that is different from the document’s primary language.

Given this text in French:

Sauf pour ce qui est écrit en mauvais français.

Using inspect through the browser, you can see the lang attribute in action. 

<p lang="fr">Sauf pour ce qui est écrit en mauvais français.</p>

To add the lang attribute in the WYSIWYG,

  1. click on the Source button
  2. find the non-English text, in this example it's French
  3. within the <p> tag add lang="fr"

This will work with other HTML tags as well.

Lang attribute resources

Here's more on the lang attribute

Other resources

The Stanford Office of Digital Accessibility provides guidance and resources for Stanford web designers, developers, and content creators who need to produce materials that are accessible to the broadest audience possible.