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.  Assistive technology (opens new window) includes any piece of equipment, product or system that is used to improve the functional capacities of people with disabilities.  Keyboards, screen readers, text-to-speech software, and screen magnifiers are commonly used forms of assistive technology.

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.  Structuring complex content will help all users parse it as well.

Screen readers and text-to-speech software also need the correct language to be set for text in your document so they can read it. This is especially important for foreign language course sites, where students may not know the language well enough for the instructor to set the UVACollab site's language in it, but most of the course content will be in a different language than the default of English.

This article describes how to structure a document as follows:

Important: Headings are not appropriate for typographical effects.  To increase or decrease the font size of text or modify its style, please use the Size or Styles menus as described below to make these changes.

Use unique and descriptive page titles.

Assistive technology users rely on page titles.  Use unique and descriptive titles so users know what content they will encounter on the page.

Descriptive titles are important for tools and documents in UVACollab sites.  You will run across the need to specify a title when you are creating a page in the Lessons tool, a Web Content link to a website, or an HTML page in the Resources tool.  The title will be displayed on the Tool Menu or the list of items in Resources.

Pictured above is a Tool Menu with examples of lesson pages that have unique titles, Importance of Accessibility and Accessibility Basics.

Do not use color or spatial position to convey information.

Using color or spatial position alone to convey important information can be problematic.

For example, if you were to say, "Select the green button on the left," colorblind users may not be able to distinguish the button from other buttons on the page.  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.

The best solution is to quote the exact text of a target item.  For example, you might say: "Select Start Assignment," or "Select the Save button."  If information about the color or location of an item on the page could help some users access the content they need, you might include this information as well; for example, "Select the green Start Assignment button at the bottom of the page."

Add structure with headings.

If a document can be outlined or you have an outline in mind when writing it, adding headings will convey its structure.  Keyboard and screen reader users need headings to navigate a page.  Structuring your page with headings will help all users access important information more easily.

Use short title-like headings that describe content which follows.

What heading structure should I use?

In general, a document should have exactly one Heading 1 that describes the document's purpose, for example the title of a page.  Lower-level headings, Heading 2, Heading 3, etc., should follow in numerical order.  A document can have multiple lower-level headings.

For example, if there are two sections in the document, each section would be identified with a Heading 2.  If a section contains three sub-sections, the section would have a Heading 2 and each sub-section would be identified with a Heading 3.

Example of document headings

The list below shows how this Help article is structured using headings.

  • Heading 1 - How can I structure my document to make it more accessible?
    • Heading 2 - Use unique and descriptive page titles.
    • Heading 2 - Do not use color or spatial position to convey information.
    • Heading 2 - Add structure with headings.
      • Heading 3 - What heading structure should I use?
        • Heading 4 - Example of document headings
      • Heading 3 - How do I add headings?
    • Heading 2 - Format text with styles.
      • Heading 3 - What styles can I use?
      • Heading 3 - How do I apply a style?
        • Heading 4 - Select the text.
        • Heading 4 - Select the style.
        • Heading 4 - View applied style.

How do I 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. From the Paragraph Format menu, select the appropriate Heading.
  4. If the default font size of a heading is too large or small, select the heading text, then select the Size menu to change the font size.

Important:  Headings are not appropriate for typographical effects; users of assistive technologies navigate through a document by jumping from heading to heading.  To include large text in the body of your document, use the Normal paragraph format and change the font size.

Note: The size of the headings can always be adjusted with the Size menu.  The default size of some of the lower-level headings (the ones with small font sizes, e.g. Heading 5-Heading 6) may need adjustment.

Format text with styles.

Using the right style to format a bit of text can be helpful as it "codes" the text appropriately.

See below for the styles available in the Rich-Text Editor and how to apply a style.

What styles can I use?

The following types of formatting are available in the Rich-Text Editor's Styles menu:

  • Italic Title - Makes selected text an italicized Heading 2.  For more information about the correct use of headings, see above, Add structure with headings.
  • Subtitle - Makes selected text an italicized Heading 3, colored pale gray.  For more information about the correct use of headings, see above, Add structure with headings.  Note: When using the Subtitle style, the color of the text will need to be edited using the Text Color menu so it has adequate contrast with its background, which is white by default.  For more information, see How can choices in background and text color affect accessibility?
  • Container - Inserts a block of text (a <div> HTML element) which can be used to group together several items in a document and/or format them with background color or borders.  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.
  • Small - Without setting a specific font size, this style makes selected text slightly smaller than the text that surrounds it.
  • Computer Code - Identifies a block of text as computer code; for example, a list of HTML tags to indicate how to code in HTML.
  • Keyboard Phrase - This style can be used to identify keyboard input.  For example, in the statement "type Ctrl+C to copy", you might mark Ctrl+C with the Keyboard Phrase style.
  • Sample Text - Indicates that the text is sample output from a computer program.
  • Variable - Identifies variables in a mathematical formula.  For example, in the equation x = 5 + y, you might use the Variable style to mark x and y as variables.
  • Deleted Text - This puts a strikethrough through selected text (a line through the middle of the text to cross it out).
  • Inserted Text - This underlines text, indicating that it has been inserted in editing.
  • Cited Work - Identifies the title or URL of a cited work, such as a book, film, or web page.
  • "Inline Quotation" - This style defines a short quotation.
  • Language: RTL - Indicates that the language reads from right to left.  Some examples of RTL languages include Hebrew and Arabic.
  • Language: LTR - 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 styles do, add one to some text and select the Source button.  An inline quotation will use <q> to signify the opening of the quotation and </q> to end the quotation; when the document is published, quotation marks will be displayed.  Cited Work will present itself as such with a <cite> element.

Conversely, avoid using these special formats to achieve a typographical effect.  For example, Cited Work produces italic text, but it could be confusing to a screen reader user if you used it just for that reason.

How do I apply a style?

Select the text.

In the editor, select the text to style.

Select the style.

  1. Select the Styles menu.
  2. Select the appropriate style for the text.

View applied style.

The text will display with the selected style.

In the example pictured above, the "Inline Quotation" style has been applied, so quote marks display around the text.

Set the correct language for text.

Screen readers and text-to-speech software will try to read text in the language that is set for it. If you do not specify a language for your text, the UVACollab site's language will be used. The default language is English.

In foreign language course sites where the site language is not the same as most of the course content, it is especially important to set the correct language so students who use assistive technology can read it.

Tip: For steps to change your UVACollab site's language, see How do I edit the site information?

How do I set the language?

Select the text.

In the editor, select the text that is in a different language from your UVACollab site's language.

Select the language.

  1. Select the Set language icon. The icon displays a Chinese symbol.
  2. Select the appropriate language for the text.