General Content Accessibility Guidelines

The general guidelines below apply to most types of digital content, including but not limited to: web pages, digital documents (PDFs, Word Documents, Google Docs, Powerpoint presentations). Because these best-practices are so widely applicable, we have compiled them all in one place for convenience.

Accessible content, regardless of the platform, should be: perceivable, operable, understandable, and robust (POUR) to all users, including those with disabilities. These are the four essential principles of accessibility as set by the current version (version 2.1) of the Web Content Accessibility Guidelines (WCAG 2.1) created by the World Wide Web Consortium (W3C). How does this apply to digital content?

Semantic Headings

In this section we review the appropriate usage of headings in digital content, and how this usage helps make the content perceivable, operable, understandable, and robust. For further reading about the proper usage of semantic headings in digital content, consult the W3C Headings page or the SBCTC Headings Canvas Page.

Headings should be used hierarchically to organize your content into sections. Screen readers (a type of software the assists blind and low-vision users) read only the headings at the first level initially, allowing the user to decide which topic to read more about. Headings are a semantic element in document editors (and HTML webpages), meaning that they explicitly delineate content when they are used. Changing the font, font size or font weight (boldness) of text may communicate this delineation to sighted users, but this is considered implicit delineation. The issue with this type of organization is that it appears differently to sighted users than it does to users assisted by screen readers. To communicate this delineation to all users, use the document or web page editor's Heading (or Text Style) tool.

Google Docs Example

Microsoft Word Example

Principles

Perceivable

Use of semantic headings ensures that delineation of page or document content is perceivable to users assisted by screen readers because they clearly indicate where a section begins and where its subsections begin in a way that screen readers will communicate to their users.

Operable

Semantic headings are structural landmarks, meaning that correct usage will ensure ease of operability for users tabbing through a page (using keyboard navigation).

Understandable

Using headings properly encourages organization, improving overall readability, which helps those with and without disabilities. Ensuring that the semantic structure of a page or document matches its visual layout also ensures that all users have an equitable experience, so if it is understandable for your sighted users, it will be for your blind and low-vision users as well.

Robust

Semantic heading usage is a convention agreed upon by most, if not all, screen reader software. This means that as these softwares develop, heading usage will continue to function the same way, and that content which uses accessible heading structure will stand the test of time.

Alternative Text

In this section we review the appropriate usage of alternative text in digital content, and how this usage helps make the content perceivable, operable, understandable, and robust. For further reading about the proper usage of alternative text in digital content, consult the Microsoft Alt Text Tutorial or the W3C Image Alt Text Decision Tree. The State Board also provides a Canvas page on Alt Text

Titles and descriptions provide alternative, text-based representations of the information contained in tables, diagrams, images, and other objects. This information is useful for people with vision or cognitive impairments who may not be able to see or understand the object. A title can be read to a person with a disability and is used to determine whether they wish to hear the description of the content.

Microsoft Word Example

Microsoft Word: Image Alt Text Pane

In Microsoft Word, you can add alt text to an image or mark it as decorative by following these steps:

Right click the image to bring up the context menu.
Choose the "View Alt Text..." menu item. The Alt Text pane will open up in the right sidebar.
In this pane, insert your alternative text into the description textbox, or check the "Mark as decorative" checkbox.

A screenshot of the image Alt Text pane on Microsoft Word. There are two fields with red arrows pointing to them: Description, and Mark as descorative.

Microsoft Word: Table Properties Alt Text tab

In Microsoft Word, you can add alt text to a table by following these steps:

Right click the table to bring up the context menu.
Choose the "Table Properties" menu item. A Table Properties dialog will pop up.
Choose the "Alt Text" tab of the dialog.
Insert a short title for the table in the title field and a longer description for it in the description field

A screenshot of the Table Properties dialog in Microsoft Word opened to the Alt Text tab. A red arrow points to the active tab. There are two fields with red arrows pointing to them: Title and Description.

Google Docs Example

Google Docs: Image Alt Text Pane

In Google Docs, you can add alt text to an image by following these steps:

Right click the image to bring up the context menu.
Choose the "Alt Text" menu item. The Format Options pane will open up in the right sidebar and the Alt Text dropdown will be expanded.
In this pane, insert your alternative text into the description textbox.
To add a title, click "Advanced Options" below the description field to reveal the title field.

A screenshot of the Alt Text panel in Google Docs. A red arrow points to the Description and Title fields. The title field is part of the Advanced Options dropdown.

Omni CMS Example

Omni CMS: Insert/Edit Image dialog

In Omni CMS, you can add alt text and a title to an image by following these steps (from edit mode):

Click the image to focus it, or go to step 2 if inserting an image.
Click the Insert/edit image button in the toolbar. The dialog will open.
In this pane, insert your alt text into the Alternative description textbox.
Before adding a title, see Best Practices for link titles

A screenshot of the Omni CMS Insert/Edit Image dialog. Red arrows point to the following fields: Alternative description and Image Title.

Principles

Perceivable

Use of alt text provides users that can't see an image the opportunity to have its description read to them instead. This means they are able to perceive as much information as users that can see the image.

Operable

Alt text is a semantic property which means that screen readers know what tod do with it.

Understandable

Alt text communicates the intention of the image to a user that can't see it, meaning they can understand the page or document and the context that sighted users get for it from the image.

Robust

Alt text is a long-held standard that will continue to be used by major screen readers and browsers. Using this field improves usability in a standardized way.

Tables

In this section we review the do's and do not's of table usage, and how this usage helps make the content percievable, operable, understandable, and robust. For further reading about the proper usage of tables in digital content, consult the W3C Tables page or the SBCTC Tables Canvas Page.

Tables should be used for data, not for layout. Tables complicate user experience for screen reader users, so it is best to avoid them unless necessary (for compiling data). Column layouts are available on most web-page and document editors, and should be used for layout in place of tables. Table row/column headers and footers and alt text make navigation easier and quicker.

Platform Considerations

Google Docs doesn’t support row/column header and footer options, but Microsoft Word does. If your document requires the use of tables, your best option is to convert it to a Word document.
On Microsoft Word, tables have 2 fields for alt text, a title and description.
- The title is read by screen readers first. The user can then decide if they want to hear the table’s description, and if they want to read each individual cell.
- These fields are not available on Google Docs and web-pages.

Principles

Perceivable

Proper use of tables compiles related data in one place and indicates how it is related.

Operable

Tables are easily navigable using just a keyboard. This is especially true for those with appropriate alt text (title and description). The compilation of related data in one place also makes it easy to skip if it is not relevant to the user.

Understandable

With appropriate alt text (title and description), trends can be identified without individually tabbing through each table cell. A table with appropriately used headings can clearly communicate the relationship between each cell.

Robust

Tables, when used properly, provide structure to data that screen readers can parse easily and communicate easily to their users.

Ordered and Unordered Lists

In this section we cover ordered and unordered lists, that is numbered and bulleted lists, and how this usage helps make the content percievable, operable, understandable, and robust. For further reading about the proper usage of semantic lists in digital content, consult the W3C Content Structure page (Lists section).

Whether ordered or unordered, lists should be semantic. This means the list tool(s) should be explicitly used, and "fake" or implicit lists (those created by unformatted asterisks, dashes or numbers) should not be used. Most platforms convert these implicit lists automatically, but still others (like Omni CMS) do not.

Best Practice Do's

Use the list tool(s) to create explicit semantic lists.
Use bulleted lists only for unordered, related information.
Use numbered lists only for ordered information.
Keep nested lists to a maximum depth of 3.
- This is a nested list. It is created when you have a single level list and you hit Tab on one of the items.

Principles

Perceivable

When semantic lists are used, they function as content landmarks. This means they can be perceived as lists by screen reader users, whereas implicit lists can only be perceived visually.

Operable

When lists are semantic they are easily navigable because of their clear structure.

Understandable

Semantic lists clearly communicate that the contained information is related and if the list is ordered, that order is communicated as well.

Robust

There may be advanced screen readers that can parse plain-text lists (implicit lists), but semantic lists can be parsed by all screen readers.

Typography and Readability

Typography for accessibility refers to the design and use of text to make it easy and comfortable to read for people with different abilities and preferences.

Readability is about the overall reading experience and how well the information can be read and understood, while legibility is the ability to recognize characters in a typeface.

Font Type and Size

Best practices include:

16pt font minimum for web
12pt font minimum for print
Use sentence case font style, never use all caps
Use a typeface with clean, distinguishable letters
- no cursive, themed, or handwritten styles
- serif and san serif are both accessible
- ensure typeface letter spacing style is not too crammed
- run an I, l, and 1 test to ensure letter and number readability

Font Color and Contrast

Best practices include:

Use high contrast to make text stand out
Use 100% opacity on text
When text is on a photo, position over a clean area of the photo
- You can also add a solid color background behind the text
- Avoid backgrounds with patterns at all if you can!
Check your font weight against the color contrast
- If you have a light weight font this will already be difficult to see, do not add color background or text when this is the case
Use a color contrast checker for accessibility

Spacing and Alignment

Best practices include:

Use a 1.5 line height or larger
Use a 2.0 paragraph spacing when possible
Do not use double spacing after a period, it can increase the incident of eye fatigue and vertical distractions due to "rivers"
- Rivers are vertical lines of bending white space through the text that look like rivers
Avoid Align right and Justify, this can cause tracking issues and eye fatigue
Use align left as common practice and center only when necessary
Ensure the spacing of letters in a word with the chosen type face is large enough
- If the letters appear to connect or "mold" together this would be defined as a difficult font to read.

Use of Type Elements

Best practices include:

Do not underline your text unless it is a hyperlink
Avoid using the "Bold" feature in your toolbar. Chose a font that has a bold variation of the font designed already
Do not use strikethrough
Do not combine bold and italics
Do not create blocks of texts with italics
Avoid using standard hyperlink colors for text (like blue)

Readability vs Legibility

Readability is about the overall reading experience and how well the information can be read and understood. AS a content developing it should be a standard practice to keep the general reading level of information at a 9th grade reading level.

Legibility is the ability to recognize characters in a typeface. This is done by selecting an appropriate font that is easy to read and identify the individual letters and/or numbers.

General Content Accessibility Guidelines

Semantic Headings

Google Docs Example

Microsoft Word Example

Principles

Alternative Text

Microsoft Word: Image Alt Text Pane

Microsoft Word: Table Properties Alt Text tab

Google Docs: Image Alt Text Pane

Omni CMS: Insert/Edit Image dialog

Principles

Tables

Platform Considerations

Principles

Ordered and Unordered Lists

Best Practice Do's

Principles

Typography and Readability

Further Reading