Organizing a 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 users parse it as well. Headings allow users to move from one part of a document to another without using a mouse. Additionally, screen readers will interpret headings for those who use them.
For this reason, headings should not be used for typographical effects. To increase or decrease the font size of large blocks of text, 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. Page titles will be imperative this when 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, then adding headings will convey its structure. Use short title headings that describe the content that follows.
Nest headings appropriately:
- Heading 1 > Heading 2
- In a section containing three sub-sections, it might look like this: Heading 2 > Heading 3, Heading 3, Heading 3
- In most cases, start with Heading 1.
Steps to Add Headings
- Headings are available from the Paragraph Format menu. By default, this menu will say Normal.
- When the cursor is positioned in the text box, the name of this menu will change to match the Paragraph Format of the text. In a blank document, it will say Normal.
- Select 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. To increase or decrease the font size of large blocks of text, 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
- Computer Code - 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 - Defines keyboard input.
- Sample Text
- Variable - 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 - 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.
To preview what these styles 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.