Use of Headings

In web accessibility, six heading levels are used to organize webpage content. 

  • It is crucial to note that each heading level follows a numerical order, which is referred to as the heading hierarchy.
  • Heading order is particularly important to users of screen readers, who use headings to navigate a webpage. Therefore, if a webpage's headings are out of order, it can make the content difficult to follow via screen readers.
Heading 1 through Heading 6 are depicted in a numerical order

Headings act like waypoints, particularly for users of screen readers. Many users do not browse an entire page from top to bottom — rather, they pull up a list of headings and will use the list to jump directly to the section they need. 

If heading levels are skipped, it creates unnecessary confusion to users of screen readers.

Best Practices

  • Treat each heading level as a section or subsection of content
  • Do not skip heading levels
  • Do not pick headings based purely on aesthetic choice or misuse a heading to call attention to content

The table below highlights the purpose of each heading level and when to use it. 

Level Purpose
Heading 1

Title of your webpage

  • Only used once on a webpage
Heading 2

Major Section Heading

  • Can be used multiple times and if so, it restarts the heading order*
Heading 3

First Subheading

  • Used after Heading 3
Heading 4

Second Subheading

  • Used after Heading 5
Heading 5

Third Subheading

  • Used after Heading 4
Heading 6

Fourth Subheading

  • Used after Heading 6

*Note that Heading 2 is a major section heading that is used to introduce new (often unrelated) sections of information or concepts. If you need to introduce a new idea or unrelated concept, use Heading 2.

Page Formatting

This section takes into account some considerations that should be taken into account when implementing
certain visual formatting elements 

Keep the use of underlined text to an absolute minimum in a single webpage.

  • Why? Visual users may mistake an underlined word or phrase to be a hyperlinked object.
  • Avoid using underlines to draw attention/emphasis to something.
  • Communicate importance through text rather than underlining.
  • Screen readers typically do not announce that text is underlined.

Bolded text is permitted, keep in mind however, that it is only available to visual users.

  • Avoid assigning meaning, importance or emphasis through bolded text.
  • Bolded text is typically not announced to users with visual impairments.
  • If something is important, use text to relay the importance instead.

Avoid assigning meaning to colors 

  • Why? There are a number of visual users who can have difficulties seeing the full color spectrum
  • The use of color-coded information should be avoided as much as possible
  • Rather than using color, use text to convey meaning or importance

How to use Text to Convey Importance

Rather than marking information with color, use text to convey meaning or importance.

Rather than using red text for importance, you can use key words such as:

  • Important
  • Please note
  • Be advised
  • Critical

The practice of using text to convey meaning, rather than through colors, ensures that all users can still understand the information.

P1, P2, P4, and P4 Prospectus are available as alternative font styles.*

  • Limit the use of P1 & P4 only to small bodies of text. A webpage cannot be styled with P1 or P4 as its default font style throughtout the page*.
  • P1 & P4 are not true headings and will not appear as available headings to users of screen readers.

 

 

Links


When it comes to links, they should be phrased in a way where all users can understand their purpose or destination. This is referred to as link text. Link text can impact both sighted users and visually-impaired users.

For sighted users:

  • The longer a link appears, the more likely it is to be avoided
  • Longer links often do not get used by sighted users

Why does link text matter?

For accessibility, realize that users of screen reader technologies can browse webpages by a list of available links.  When encountered by a screen reader, links are then read aloud.

Typically a screen reader device will read a link aloud as:

  • "Link. [Name of hyperlinked item]".
  • "Link. Enrollment Services homepage"
  • "Link. Financial Aid webpage".

Tip: To check if your link text is effective, consider reading your hyperlinked object aloud and then ask yourself:

  • Is it clear where my link will take a user?
  • OR Is the purpose of my link clear?

If you can understand your link when read, then it's very likely its has effective link text.

Text Alignment

Left-aligned text is considered to be the most readable, natural and accessible option for visual users.  With left-aligned text, it's easier to identify where lines of text begin and end, which is especially helpful for people with visual processing challenges or cognitive disabilities. Keeping text aligned left lends to an easier reading experience.

Why does it matter?

For web accessibility, users with cognitive disabilities such as dyslexia can become disoriented when text is shifted towards the center or right-aligned. This in turn, creates an obstacle for users with cognitive disabilities.

Resources

We are dedicated to cultivating a welcoming and supportive environment that enhances success and advancement for all students, faculty, and staff regardless of personal experiences, values, and world views that arise from differences of culture and circumstance, including, but not limited to, race, ethnicity, gender, sexual orientation, age, language, socioeconomic status, geographical context, and abilities/disabilities. We also provide the leadership and structure for the campus to assess issues of access, representation and belonging, as well as increase the effectiveness of existing programs and services, develop new programs and services and build consensus and support.

CSU Accessibility Tools

W3 Web Accessibility Initiative

 

Updated: June 26, 2025