For training that enhances your effectiveness and inspires your students.

Formatting Text (On webpage/LMS)

Text on a web page needs structural tags including header styles and list tags to allow screen reader users to easily navigate and decode chunks of information.


Standard

  • Guideline 2.4- Navigable: Provide ways to help users navigate, find content, and determine where they are:
    • 2.4.6 Headings and Labels (Level AA)
      Page headings and labels for form and interactive controls are informative. Avoid duplicating heading (e.g., “More Details”) or label text (e.g., “First Name”) unless the structure provides adequate differentiation between them.
    • 2.4.10 Section Headings (Level AAA)
      Beyond providing an overall document structure, individual sections of content are designated using headings, where appropriate.

Example of Standard in Action

Screen reader and other assistive technology users have the ability to navigate web pages by heading structure, if you have tagged your section titles instead of just making the titles big and/or bold. This means that the user can view a list of all of the headings on the page, or can read or jump by headings, or even navigate directly to top level headings (<h1>), next level headings (<h2>), third level headings (<h3>), and so on. Page content should be structured in a hierarchical manner, generally with one 1st degree headings (<h1>) being the most important (usually page titles or main content heading), then 2nd degree headings (<h2> – usually major section headings), down to 3rd degree headings (sub-sections of the <h2>), and so on. Technically, lower degree headings should be contained within headings of the next highest degree (i.e., one should not skip heading levels, such as from an <h2> to an <h4>, going down the document).

Most LMS editors allow you to select header styles for tagging page and section titles while editing your course pages.  Use these headers styles for structuring your content rather than simply making content bold or increasing the font size.

Example of Issue

When encountering a lengthy web page, sighted users often scroll the page quickly and look for big, bold text (headings) to get an idea of the structure and content of the page. Without the use of structural tags, screen reader and other assistive technology users will not be able to decode the structure.

Unstructured Text

Locating the Issue in Your Course

You will want to look at each page in your course.  In order to test whether your section titles have structural tags, you can either look at the HTML to make sure that each title has a heading tags such as <h1>, <h2>, <h3>, etc. otherwise you can use the Web Accessibility Evaluation Tool (WAVE) to test the web page:

  • Go to the Web Accessibility Evaluation Tool (WAVE)
  • Enter the URL of the page that you want to test
  • Look for symbols such as  header 1 header 2 next to your section titles in the generated report.  If the header symbols are missing then your section titles need to have header tags added to make them accessible.

Resources to Align With Standard

  • WebAIM (Web Accessibility in Mind) provides web accessibility solutions to individuals with disabilities. Links provided will give you information about the different types of visual impairments, such as blindness, colorblindness and low vision and how to make the web more accessible to users with visual disabilities.

Links to Related Articles

Leave a Reply