Skip to Main Content

Accessibility Workshop for CCNY: Headings

Accessibility Information on Headings

General Information:

Organizing a web page, word document or pdf with headings helps all users get an idea of the page’s structure and organization.

Why headings are important?

  • Headings provide structure to your documents.
  • When people can follow a site or document’s organization and structure, it is easier for them to comprehend the content.
  • Headings become a navigation tool for both those who can see visually and those who use screen readers.
  • Assistive technology allows users to pull up a list of headings.
  • Screen readers read aloud heading text only if it is coded as a header.
    • If you only change an item's text color, size or weight, only sighted users will be aware.
  •  

For those who use screen readers

  • The use of headings allows them know an item is a heading.
  • They can listen to a list of all the headings and skip to the desired area on the page or document.

For those who can see

  • Use of visually apparent headings allows people to quickly visually scan site to get overall idea of meaning of site. 
  • Headings also help those with cognitive disabilities understand and navigate.
  • Headings helps users perceive and understand, POUR principles.

Demonstration/Comparison

Here is a video showing the difference between how a screen reader reads aloud a web page which has inaccessible headers versus one with accessible headers.


Attribution: Normandale Community College [2012, Mar.19] Accessible vs. Inaccessible - Can you Hear the Difference? - Normandale Community College. Retrieved from https://youtu.be/5TNU_t-9w1A

How to create headings?

  • Make heading text brief, clear, informative, and unique.
  • There should only be one Heading 1 <h1> per page, however there can be more than one <h2> to <h6> per page.
  • Each level of heading, indicates the relationship from one part of the content to the other parts.
  • The sub-sections under a heading relates logically to a heading above it.
  • Duplicate headings can exist on separate pages, but each heading should be unique within the same page, if at all possible.

Specific Platform Instructions for adding Headings

  1. Select the plus sign to add a new block
  2. Select Heading
  3. Select Heading Level

screengrab showing where to add new blocks.

headings start image. 

  • Headings help in organizing a web page or post.
  • When creating headings in WordPress classic editor make sure to use the actual heading option and don't just make them visually look different by changing font or color.
  • When selecting headings, don't use <h1>.  Your page or post title is already an <h1> and there should only be one <h1> per page.

Screen grab of wordpress classic editor showing where to select headings

The built in headers in tools such as items, announcements, and discussion boards allow a student using a screen reader to skip between titles and easily navigate the page. To facilitate this, give elements meaningful names that allow students using a screen reader to know what the content is so they can decide whether or not they want to read further or skip down to the next heading for now. So you might, for instance, want to give more meaningful titles to your announcement than simply “Announcement,” or the date/ week.

 

  • When creating headings in LibGuides make sure to use the actual heading option and don't just make them visually look different.

Screen grab showing how to select headings from the drop down menu in the Rich Text/HTML

When typing a word documents use the built in styles to select the proper headers for your text.

Word 2016 home ribbon to show where to select headings.

Depending upon your version of word, there are somewhat different instructions on how to put in headers.