Headings

Skip to page content

Styles Tool

Learn to use the Styles Tool to add headings, bulleted list and hyperlinks.  Screen reader and assistive technology (AT) users browse "sections" of a document using headings (h1, h2, h3, h4, etc.) and lists. Proper use of these types of elements creates semantic structure and provides an essential organization for navigation. Without semantic structure, pages are presented as one long paragraph to screen reader users. Additionally, constructing content using headings and other semantic elements such as bulleted lists, allows all learners to more readily locate, identify, and understand logical units of information.  Applying these elements using the Styles Tool ensure proper document structure and exportation to Adobe Acrobat.

Overview

Note about using Headings

  • Use heading tags to structure all pages and documents based on main topics and subtopics, e.g. "Module 1," "Readings," "Required,” etc.
  • Adhere to the correct order of headings and do not skip heading levels (e.g., don't go from an h2 to an h4), as screen reader users will wonder if content is missing.
  • Use headings to divide blocks of text into manageable sections. By breaking up page content into smaller chunks, the material becomes more easily interpretable.
  • Do not pick a heading style based on aesthetics or because you like the font color, size, etc.
  • Use headings to communicate structure and semantics.
  • Each heading name should be unique. 

Styles Tool

  1. Make the Styles tool visible prior to remediating the page. To do so, select the Home option from the Ribbon then locate the "Editing" icon.Editing icon.png
  2. After selecting the "Editing" icon, the Styles tool appears.  Select "Options" from the Styles tool then select "All Styles."

Select options then All styles and then OK.

Add Headings

  1. Select the first visible heading in the document - the phrase "Accessibility Quick Start Guide."
  2. From the Styles window, select the triangle from the "Heading 1" field.
  3. Select "Update Heading 1 to Match Selection."  In this way we maintain the original look of the document but we are now beginning to assign heading levels.  Select the first visible heading in the document, then select the triangle from the Heading 1 field. Select Update Heading 1 to Match Selection.
  4. Repeat this process for the subsequent visible headings in the document.  After selecting Headings from the document, select the triangle from the Heading 1 field of the styles tool. Then select Update Heading 2 to Match Selection.
  5. Locate Heading 3, "Overview"Select the third level heading, Overview then select Heading 3 in the Styles tool and from the drop down option select Update Heading 3 to Match Selection.
  6. Go through the rest of the document and add the proper heading levels.

Bulleted Lists

  1. Locate the first Bulleted List in the document.  Highlight the first bulleted item below the phrase, "Best Practices."  Find the first "List Bullet" entry in the Styles tool and choose, "Update List Bullet to Match Selection."Locate List Bullet from the style tool. Select the first bulleted list below Best Practices then select Update List Bullet to Match Selection from the Style tool.
  2. Highlight the rest of the bulleted list beneath "Best Practices"  and then select "List Bullet" from the Styles tool.Highlight the remaining items in the bulleted list beneath Best Practices and then select List Bullet from the Styles tool.
  3. Proceed to select and assign the "List Bullet" style to the rest of the bulleted lists in this document.

Hyperlinks

  1. Locate and highlight the "WebAIM" link beneath the Alternative Text heading.  Select the word WebAIM from the Sources line beneath the Alternative Text heading and then select Hyperlink from the Styles tool.
  2. Locate all of the subsequent links within the Sources sections and apply the Hyperlink tag.  Select Penn State Accessibility from the Sources line and then select Hyperlink from the Styles tool
  3. Proceed to select and assign the "Hyperlink" style to the rest of the links in this document.

 

Body Text

After adding headings and hyperlinks tags to the entire document, proceed with the following.  

  1. From the Home Ribbon right click on the "Normal" style.Right click on the Normal style from the Ribbon. This will open a drop down menu
  2. Choose the option, "Select All Instances."  This highlights all instances of the style "Normal."Choose all instances of Normal from the drop down menu.
  3. Once you've highlighted all instances of the "Normal" style, select "Body Text" from the Styles tool.  This prevents future difficulties associated with editing the "Normal" style, which often impacts subsequent heading levels styles.

With all Normal styles highlighted, select Body Text from the Styles tool

Reading Check

Use the discussion button below to start or view discussions related to this workshop.

Reading Check