Semantic styles are essential to creating content that is accessible across multiple platforms. These styles encode your layout and document structure into a machine-readable format that assistive technology and mobile devices use when adapting the content for alternative display types. Semantic styles are meaningful styles, as opposed to styles which are purely visual, like making text larger or indented.
Semantic Style Choices for Creating Text Content
- Headings should be applied hierarchically, like a formal outline. (ex. Heading 1-Title, Heading 2-Section titles, Heading 3-Subsection titles, Normal-Body text)
- Bold or Strong
- Italic or Emphasis
- Underline (but don't use underlining—underlining should be reserved exclusively for link text)
- Bulleted lists
- Numbered lists
Inaccessible Style Choices for Text
You can use these style options, but not on their own. If you're trying to communicate specific meaning exclusively through one of these styles, consistently pair it with a semantic style. For example, if you want to emphasize information by making the text red, pair it with a bold style, as well. The bold will be visible to someone who is red colorblind, and it will be machine-readable for assistive technology, as well.
- Font size
- Font color
- Background color (highlighting)
- Indentation
- Alignment (left, right, center)
Format text with built-in heading styles to provide hierarchical structure and meaning.
Headings provide structure and order to your document. Use recommended Word and Canvas styles instead of modifying text by using font size, bold, or italics. To provide a semantic structure to your document, use your document preset “Styles” to structure the headings.
By general convention, for headings, Level 1 is the highest and works down through the levels to Level 6. A general rule is the lower numbers are for smaller and more detailed sections. In addition, use the built-in styles, such as “strong” or “emphasis” instead of changing text to bold or italics.
Use defined list styles (bulleted and numbered) to ensure readability.
Use your built-in software functionalities to create lists that are recognized and read accurately by screen readers. Use bulleted or numbered lists. Use a bulleted list when the order of the content doesn't matter and a numbered list when the order does matter. If a numbered list (e.g. an outline) has multiple levels, make sure each level uses a different numbering scheme.
Ensure text readability (logical structure, avoid overly complex sentences).
Content chunking is the strategy of breaking up content into shorter, bite-size pieces that are more manageable and easier to remember. Avoid overly complex sentences which may be difficult to understand when read by screen readers. This design technique is beneficial for students with cognitive or learning disabilities, and makes learning easier for everyone.
- Avoid overuse of all CAPS, bold, or italics.
- Spell out uncommon abbreviations and acronyms to avoid ambiguity.
- Avoid animated gifs, emoticons and unpronounceable symbols.
Use standard and accessible fonts in meaningful formats (style, size, emphasis).
Use sans serif font at 12 points. Good fonts for easy readability on computer and mobile devices are Helvetica, Courier, Arial, Verdana, and Calibri.
Provide alternatives for PDFs such as Word, HTML or text. PDFs can be made accessible, but the process is very complex, so it is often quicker to provide content in an alternative form.
Use indent and alignment buttons rather than tabs or spaces to create alignment.
Do not use the TAB key, the spacebar, or repeated use of the Enter key to create desired spacing and alignment because they do not actually create structure. They simply create the visual appearance of structure. Using the TAB key, the space bar, or repeatedly hitting the Enter key causes recognition problems for screen readers as the reader will read "Tab, tab, tab, tab" if you tab four times, for example.
Instead, use styles to format text.
When designing your Word document, be sure to show paragraph marks and other hidden formatting symbols to help identify potential structure problems.