Styles Tool

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 select "Styles Pane".
    From the Home Ribbon, select the Styles Pane

  2. In the Styles Pane, open the pull-down list.Within the Styles Pane, select the pull down for List

  3. Select All Styles.
    Select All Styles

 

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 to Match Selection."  In this way we maintain the original look of the document but we are now beginning to assign heading levels.
    Select Update to Match selection from the Heading 1 style

  4. Go through the rest of the document and add the proper heading levels.
  5. Find "Headings" in the document and assign it a level 2 heading.  Be sure to select Update to Match Selection from the pull down menu.
    Highlight the word "Headings" then select Update to Match Selection from the Heading 2 pull down menu in the Styles Pane

  6. Find "Overview" and assign it a level 3 heading.  Be sure to select Update to Match Selection from the Heading 3 pull down menu.
    Highlight the word Overview then select Update to Match Selection from the Heading 3 pull down menu

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 to Match Selection."Highlight the first bulleted list beneath Best Practices then select Update to Match Selection in the Bulleted List pull down menu.

  2. Highlight the rest of the bulleted list beneath "Best Practices"  and then select "List Bullet" from the Styles tool.Highlight the other bulleted list items and then select Bulleted List from the Styles Pane

  3. Proceed to select and assign the "List Bullet" style to the rest of the bulleted lists 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.From the Home Ribbon, right click on the Normal style.

  2. Choose the option, "Select All Instances."  This highlights all instances of the style "Normal."Select All Instances of the Normal Style from the Normal option on the Home Ribbon

  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.After selecting all Normal styles, select Body Text from the Styles Pane

Hyperlinks

  1. Locate and highlight the "WebAIM" link beneath the Alternative Text heading.Highlight WebAim then select Hyperlink from the Styles Pane

  2. Locate all of the subsequent links within the Sources sections and apply the Hyperlink tag.Highlight Penn State Accessibility then select Hyperlink from the styles pane

  3. Proceed to select and assign the "Hyperlink" style to the rest of the links in this document.

Reading Check

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

Reading Check