Use of Headings
Headings provide structure to a webpage by organizing information into sections. For web accessibility, headings should be utilized for the purpose of creating structure on a webpage not aesthetics.
There are six heading levels that are utilized to create structure within webpages.
These include:
- Heading 1 (H1)
- Heading 2 (H2)
- Heading 3 (H3)
- Heading 4 (H4)
- Heading 5 (H5)
- Heading 6 (H6)
For accessibility, headings are required to follow a chronological order of importance. This is often referred to as the heading hierarchy.
- H1 is the most important (title of webpage) and H6 is the least important
- H1 cannot be utilized more than once per webpage
- H2 can be utilized more than once and restarts the hierarchy
Why do heading levels matter?
Users with visual-impairments rely on headings to browse webpages via screen reader. If for instance, a webpage contains headings that are not in proper order - it creates confusion to the user utilizing screen readers.
This table breaks down the purpose of each heading level. It is best to begin at Heading 2, then work your way down the hierarchy and applying proper heading levels. Recall, H2 can be utilized multiple times and the heading order restarts if H2 is used again.
Heading Levels
| Heading Level | Purpose | Notes |
|---|---|---|
| Heading 1 (H1) |
Title of your webpage |
|
| Heading 2 (H2) |
Section / Topic Heading |
|
| Heading 3 (H3) |
Sub-topic of H2 |
|
| Heading 4 (H3) |
Sub-topic of H3 |
|
| Heading 5 (H5) | Sub-topic to H4 |
|
| Heading 6 (H6) | Sub-topic to H5 |
|
Page Formatting
This section highlights special considerations that should be taken for certain visual formatting.
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? Some visual users 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.
For example, rather than using red text for importance, you can use 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.
Updated: June 17, 2025