Having an accessible website helps ensure our site can reach more people, including individuals with disabilities. This page shares best practices for creating and maintaining accessible webpages.
To prepare for Title II regulations, all web content must meet WCAG 2.1 Level AA standards.
Headings
Headings are used to organize sections of information on webpages.
Organization is achieved through the use of six heading levels, of which must follow a heading hierarchy. Proper heading order is particularly important to users of screen readers, who often browse webpages by moving through a list of available headings. When headings are used in a proper and semantic order, it makes finding information faster.
- Provide headings on your webpages for easier navigation
- Ensure proper heading order is followed
- Treat each heading level as a unique section or subsection
Review the next section to see what not to do
- Do NOT skip heading levels
- Do NOT pick headings because you like the way it looks
- Do NOT use headings to draw attention to an area or section
- Headings are important because they serve as landmarks on a webpage for users of screen readers.
- Unlike visual-users who scan webpages from top to bottom and side to side, screen reader users browse webpages by a list of available headings.
Do NOT skip heading levels
When you skip heading levels and break the heading hierarchy, it creates unnecessary confusion to users of screen readers.
The table below outlines the ideal use-case for each heading level and recommendations for when to use each level.
| Level | Purpose |
|---|---|
| Heading 1 |
Title of your webpage
|
| Heading 2 |
Major Section Heading - Start Here
|
| Heading 3 |
Subheading to Heading 2
|
| Heading 4 |
Subheading to Heading 3
|
| Heading 5 |
Subheading to Heading 4
|
| Heading 6 |
Subheading to Heading 5
|
- WCAI on Heading Structure
- Scope.org.uk: HTML Heading Structure
- UNC Student Affairs: Headings and Hierarchy
- UNC Digital Accessibility: Headings
Fun Fact
Headings are also referred to as "H tags" in other facets of accessibility. H2 for example, is an abbreviation for Heading 2.
Link Formatting
How you format a link can impact both sighted users and visually-impaired users. This section outlines considerations when providing links on your webpages.
- When sharing links, use wording that helps readers understand where the link will go or what the link does
- Check the wording on your hyperlinks before sharing them on a webpage
- Do NOT provide the web address or URL on a webpage
- Screen readers will read all hyperlinked objects exactly as presented - an entire URL is not helpful
- Visual users are less inclined to click on full page URLs
- Do NOT use short phrases
- Avoid using "Click Here" or similar short phrases because when read by screen readers, these links do not provide sufficient context about where they go or what they do
- "Click here" is out of date
When links are encountered by a screen reader, they are read aloud exactly as presented on the webpage. Because they are being read aloud, its important to carefully phrase the link in a way that provides context about where the link goes or what the link does.
Screen readers will announce: "Link" (followed by the wording used on your link).
Examples:
- "Link". "Enrollment Services website".
- "Link". "Event Registration Form".
- "Link". "myStanState Student Portal".
Some hyperlinks are meant to drive a specific action. These are sometimes called "call-to-action links". When using a call-to-action link, using a verb at the beginning helps motivate users to use the link.
Examples
These call-to-action examples are phrased in a way where users can articulate their purpose.
- Register For Conference
- Link takes users to a conference registration page
- Attend Workshop
- Link takes users to a workshop registration page
- Submit Form
- Link takes users to a form submission page
- Schedule Appointment
- Link takes users to an appointment scheduling page
If your link is will send users to a specific reference page or another website, simply hyperlink the name of the resource.
In these examples both visual users and visually-impaired users would both understand where these links go.
Visual Formatting
This section outlines considerations for common webpage formatting elements. Certain visual elements can bring implications if not used properly.
Did you know?
Most screen readers cannot determine whether text appears bold, underlined, highlighted or italicized!.
Colors
A number of limitations can arise through the use of color. Special considerations must be taken to ensure the use color does not pose as a barrier especially, visual users who may be colorblind.
Did you know?
According to We Are Color Blind.com, about 4% of the population has some form of color blindness - most are male.
- Color-coding information should be avoided as it can be a barrier to visual users who may be color blind.
- If you must use color, ensure that you are not assigning meaning to color
- For example, avoid marking important information with red.
- Ensure good color contrast in any areas where there may be bright or dark backgrounds
- Use keywords that convey importance or attention or urgency rather than color
- Important!
- Note!
- Update!
- Do NOT assign meaning to color
- For example, do not mark important information with the color red.
- Why? Some visual users may be color blind so they could miss out on crucial information when you're choosing to mark important areas through the color red.
- Why? Some visual users may be color blind so they could miss out on crucial information when you're choosing to mark important areas through the color red.
- For example, do not mark important information with the color red.
- Ensure good color contrast and avoid placing dark font colors on dark backgrounds. Vice versa, avoid placing bright fonts on bright backgrounds.
Color can be used to enhance the appearance of a webpage.
However, color must be used in a way where they do not create a barrier for users to get information found on your webpages.
- Always check your color contrast
- Are your links difficult to read because of the color?
- Is any colored text on an image difficult for you to read?
- Did you assign meanings to any color? If so, use text to relay that information instead.
Text Alignment
A notable distinction across our website is the use of left-aligned webpage text. Research shows left-aligned text is the easiest to read, natural and the most accessible option for visual users.
Did you know?
Users with cognitive disabilities such as dyslexia, can become disoriented when text is shifted towards the center or right-aligned.
Left-aligned text is an easier reading experience for visual users as it helps us understand where each line of text begins and ends.
This format is most helpful for people with cognitive disabilities and users with visual processing challenges.
- Do NOT center paragraph text
- Including: headings, hyperlinks, images
- The alignment of text can impact accessibility - but only when it's modified to other formats beside left-aligned
- Certain website features such as our accordions do alter text alignment, however it's narrowed only to the main section headings
Underlining
The use of underlining is a visual element available only to visual users and should be used sparingly. Please note the possible limitations you can encounter when using underlined text.
Did you know?
Modern web design often underlines hyperlinks for visual users. When you underline text, visual users can mistake your underlined words for hyperlinked objects.
- Limit underlining from 1 to 2 words max per page
- Avoid using underlining to draw attention
- Do NOT underline more than 1 to 2 words
- Do NOT underline text to draw attention
- For example, "IMPORTANT:"
- Do NOT assign meaning to underlined words
- For example, "All underlined dates are important".
Underlined text does not inherently create accessibility issues. Issues arise mainly when underlining is overused or used for the wrong reasons.
The following limitations are encountered when using underlines:
- Screen readers DO NOT announce when text is underlined
- Sighted users can possibly mistake your underlined word or phrases to be hyperlinked objects since modern web design often underlines hyperlinks
Fun Fact:
By default, most screen readers do not announce bold or italic text, meaning crucial information should be conveyed through context, not just font weight.
Bold Text
The use of bold text is great for visual emphasis, however, it's a visual element available only to visual users. It should be used sparingly. Please note the possible limitations you may encounter when using bold text on webpages.
Did you know?
Most screen readers will not announce that text appears bold.
- Limit the use of bold text, when possible
- Bold text does not turn text into a heading, instead use real headings
- If you must use bold text, limit the bold text styling to a few words on any particular section of information
- Be cautious not to overuse the bold text style as it can hurt page readability for visual users
- Do NOT use bold text as a replacement/substitute for a heading
- Bold text will not register as a heading for screen readers - use real headings instead
- Do NOT assign meaning to bold text
- For example, "All Deadlines are marked in bold".
- This would only be information available to visual users and not available to visually-impaired users
- For example, "All Deadlines are marked in bold".
Using bold text does not inherently create accessibility issues, however, there are notable limitations with bold text.
- Screen readers will not announce that text is bold
- When bold text is used excessively, you can make the webpage much more difficult for visual users to read
Fun Fact:
By default, most screen readers do not announce bold or italic text, meaning crucial information should be conveyed through context, not just bold text.
Italicized Text
Italicized text is a visual element, however, it should be used sparingly. This section highlights considerations for visual users and visually-impaired users.
Did you know?
Most screen readers do not mention whether text is italicized.
- The overuse of italicized text can hurt your page readability to visual users
- It should be noted that most screen readers do not recognize that text is italicized
- Do NOT assign meaning to italicized text
- For example, "All italicized dates are important"
- For example, "All italicized dates are important"
- Avoid overuse of italicized text - this hurts page readability for visual users
Italicized text does not create an accessibility issue, however it can become an issue in the following circumstances
- Overused throughout a page, which make the page increasingly difficult to read for visual users
- When meaning has been assigned to italicized text
Note:
It should noted that dyslexic users can have increased difficulties reading through italicized text, particularly if its more spanning more than a sentence long in length.
Evaluating Web Content
You can check your webpage accessibility with the WAVE (web accessibility evaluation tool) browser extension from WebAIM.
- Available for free on Chrome, Edge and Firefox
Updated: February 23, 2026