universal-design-center

  • semantic structure

Web Accessibility Criteria - Semantic Requirements

  Description

Semantic Requirements include all HTML elements that influence organization and structure to your content. Included elements and features are headers, resizable text, page titles, and lists.

Headers

Headers visually and structurally organize the webpage. Headers should be arranged from the level of importance from most important to least significant using header levels (H1 – H6). Not only should headers be organized structurally they should also be organized visually. Each heading level should have different text styles; usually font size helps distinguish between different header levels. For example, a heading level one (<H1>) would have the font size of 18, heading level two (<H2>) would have the font size of 16, and so forth. Using color to distinguish between different header levels is allowed, as long that it is not the only text style used. 

Resizable Text

Text should be resizable up to 200% without having content truncated or lose its functionality. 

Page titles

Page titles should be descriptive and should introduce the context of the webpage.

Lists

All list elements must be coded using HTML. A list requires a list tags (<li>) to be a proper HTML list.  Adding bullet points or numbers in front of your lists does not pragmatically make it a list. For example,  regular text with numbers next to it (e.g., 1. Milk 2. Eggs 3. Cereal) will not be considered a list unless it has the <li> tag.

There are two types of lists: unordered lists and numbered lists.

    • Unordered lists <ul> usually consist of bullet points.
    • Ordered lists <ol> are organized in descending order with the use of 1, 2, 3 or a, b, c. 
back to top

 

  Why is semantic structure important?

  • Headers visually and structurally organize the webpage. Having a correct heading structure allows assistive technology users to navigate via headers and helps them go directly to the content that is most relevant to their search.
  • A descriptive title allows all users to know the purpose of the webpage they are visiting.
  • Proper text resizing increase readability of your page. If done incorrectly, it can overlap elements on the page and cause accessibility issues.
  • Although visual users will be able to identify lists, if a list is not coded with the <li> tag, assistive technology users will not be aware of the list items. 
back to top

 

Section 508/ WCAG 2.0 Summary of Requirement

Webpages require a semantic organization for proper structure and order without requiring an associated style sheet.

Best Practices

Consider the following best practices for structure:

  • Use headings to provide structure to your page!
  • Do not use styles to give the appearance of headings, without using the proper header tag. For example, do not use color, underline, bold or italics, etc. to emphasize text importance.
  • Do not skip heading levels. Proper header levels ascend from H1-H6.
  • Headings should not be used to emphasize the importance of content instead, use underline or bold text.
  • Your webpage content should remain consistent and readable when text is resized up to 200%
  • Always provide a descriptive page title!
  • Do not use lists for layout purposes
  • Proper HTML markup (<li>,<ol>,<ul>) should be used to provide list items 

Examples

Page titles:

        Descriptive page title

"Company History"

The descriptive page title gives user's information about the content that will be presented on the page. The user will not what kind of information to expect based on the page title.

          Non-descriptive page title

"Learn More"

The non-descriptive page title does not give users any information about the content of the page. The phrase "learn more" is vague and can refer to any topic on the website. For example, if a website about growing crops contains a page with the title "Learn More." Users will not know what content the page "Learn More" will contain. A descriptive page title would be "Farming Techniques." That page title is descriptive and summarizes the content on the page.

back to top

Headings:

Chart of heading level structures. Ascending order of heading level 1 through 3

back to top

Lists:

An unordered list <ul>usually consistent of bullet points. For example:

    • CSU Northridge
    • CSU Fullerton
    • CSU Long Beach
    • CSU San Diego

Ordered lists <ol> are organized in a descending order with the use of 1, 2, 3 or a, b, c. For example:

    1. Milk
    2. Eggs
    3. Cereal
    4. Bread
back to top

Resize Text:

Good Example:

The image below shows a website that has resizable text without any of the content being disturbed. 

Text Resize Good Example

Bad Example:

The image below shows the Universal Design Center Web Accessibility Problems Overview website with the font sized increased. The text below the website's banner is cut off. 

Text Resize Bad Example

back to top

How to Test

Manual Testing

Page title: Open the website on your web browser. View the title page and verify that the page title is descriptive and accurately describes the page. Then review the source code to verify the title tag.

Resize text: To resize your text on your browser download browser extensions or use your browser features.

  • Firefox: To resize your text up to 200% use the Firefox “Zoom Text Only” feature.
  • Google Chrome: Using the “Zoom Text Only” add on will allow you to increase the text size of the page. For further information on how to install the toolbar, please refer to our Document Accessibility Tools  page

Automated Testing Tools

Web Developer Toolbar

    • Headings: Using the Web Accessibility Toolbar, navigate to the website on your web browser. Activate the Web accessibility toolbar, then select Structure menu and select Headings, then verify that headers are present and organized correctly.  

WebAIM WAVE tool

    • Headings: To view the headings using the Wave Toolbar, activate the toolbar. Then in the Styles page, navigate to Outline to view the heading structure of the page.
    • Lists: Using the Web Accessibility Toolbar, navigate to the website on your web browser. Select Structure menu and select List Items, then verify if the all list items have the HTMl list element.
    • Ordered lists: Should have the <ol> tag and unordered lists should have the <ul> tag.

Compliance Sheriff

In Compliance Sheriff, the checkpoint group  CSU ATI Semantic Requirements will review all semantic and header structures.  For more information regarding the checkpoints visit the CSU ATI Accessibility Requirements page. 

back to top

Resources