How can I structure my document to make it more accessible?

Organizing your page with helpful titles and headings creates an outline that helps your audience access the most important information more quickly and easily.

Assistive technology users rely heavily on page titles and headings to navigate complex content. Structuring complex content will help all users parse it as well. Headings allow users to jump from one part of a document to another without using a mouse. Screen readers will interpret headings for those who use them.

Note that for this reason, you should not use headings for typographical effects. If you need to increase or decrease the font size of large blocks of text, please use the Normal Paragraph Format and select a new Font size from the Size menu, or use Styles.

Use unique and descriptive page titles.

Assistive technology users rely on page titles. You will run across the need to specify this when you are creating a page in the Lessons tool or an HTML page in the Resources tool. The title of the new document will be the same as the name of the item as it appears on the left-hand tool menu or the list in Resources.

Do not use color or spatial position to convey information.

Using color or spatial position to convey important information can be problematic. For example, if you were to say, "click the green button on the left," color blind users may not be able to distinguish the button. Screen reader users may have difficulty interpreting "left" because a screen reader reads from the top of the page to the bottom, as well as left to right. Therefore, the best solution is to quote the target label: for example, "Click on Start Assignment," or "Click the Save button."

Add structure with headings.

If a document can be outlined or you have an outline in mind when writing it, then adding headings will convey its structure. Use short title-like headings that describe the content that follows.

Nest headings appropriately:

  • Heading 1 > Heading 2
  • If you have a section containing three sub-sections, it might look like this: Heading 2 > Heading 3, Heading 3, Heading 3
  • In most cases, you should start with a Heading 1.

Steps to Add Headings

  1. Headings are available from the Paragraph Format menu. By default, this menu will say Normal.
  2. When you position your cursor in the text box, the name of this menu will change to match the Paragraph Format of your text. In a blank document, it will say Normal.
  3. Click on the Paragraph Format menu (Normal, in a blank document) to select a Heading.

Notes:

  • The default size of the Headings can always be adjusted with the Size menu. The default size of some of the higher-level headings (the ones with small font sizes, e.g., Heading 5 and Heading 6) may need adjustment.
  • Conversely, do not use headings for typographical effects. Users of assistive technologies can navigate through a document by jumping from heading to heading. If you need to increase or decrease the font size of large blocks of text, please use the Normal Paragraph Format and select a new font size from the Size menu.

Use inline styles.

Using the right style to format a bit of text is very helpful as it "codes" it appropriately. The following types of formatting are all available in the Styles menu:

  • Italic Title - Makes selected text an italicized Heading 2.
  • Subtitle - Makes selected text an italicized Heading 3, colored pale gray.
  • Special Container - Inserts a block of text (a <div> HTML element) that can be used to group together several items in a document and/or format them with background colors or borders. As with paragraph breaks, using <div> containers to group items in meaningful ways can assist with navigation because keyboard users can skip from one group of elements to another.
  • Marker - This highlights text in bright yellow. 
  • Big - Without setting a specific font size, this style makes selected text slightly larger than the text that surrounds it.
  • Small - Without setting a specific font size, this style makes selected text slightly smaller than the text that surrounds it.
  • Typewriter - This style makes the text appear in a monospaced slab serif format, similar to a typewriter font such as Courier.
  • Computer Code - This indicates a block of text that has been identified as computer code (for example, a list of HTML tags to indicate how to code in HTML).
  • Keyboard Phrase - This style defines keyboard input.
  • Sample Text - This style makes the text appear in a sans serif format, similar to Arial font.
  • Variable - This indicates specific variables used in a mathematical expression. 
  • Deleted Text - This puts a strike through selected text (a line through the middle of the text to cross it out).
  • Inserted Text - This underlines text.
  • Cited Work - Visually, text is italicized.
  • "Inline Quotation" - This signifies inline quoted text. 
  • Language: RTL - This indicates that the language reads from right to left. Some examples of RTL languages include Hebrew and Arabic.
  • Language: LTR - This indicates that the language reads from left to right. English is an example of an LTR language.

If you are curious to see what these do, add one and switch to Source view. The Inline Quotation style will use <q>, which will signify the opening of an inline quotation. Cited Work will create an element that presents itself as such. Conversely, avoid using these special formats to achieve a typographical effect. For example, Cited Work produces italic text, but it would be confusing to a screen reader if you used it just to italicize text for emphasis.