Jump to HeaderJump to Main ContentJump to Footer
Michigan State University
Michigan State University
Digital Accessibility
  • Basic Accessibility Checklist
  • Report Inaccessible Digital Content

Digital Accessibility

  • Home
  • |
  • Accessibility at MSU
  • |
  • Create Accessible Content
    • Accessibility Basics
    • Course Accessibility
    • Document Accessibility
    • Evaluation & Validation
    • Video Accessibility
    • Website Accessibility
  • |
  • Get Training
  • |
  • Tools
  • |
  • Liaisons
  • |
  • Policy
Digital Accessibility
  • Home
  • Accessibility at MSU
  • Create Accessible Content
  • Get Training
  • Tools
  • Liaisons
  • Policy

< Home

< Accessibility at MSU

< Create Accessible Content

  • Accessibility Basics
  • Course Accessibility
  • Document Accessibility
  • Evaluation & Validation
  • Video Accessibility
  • Website Accessibility

< Get Training

< Tools

< Liaisons

< Policy

  • Basic Accessibility Checklist
  • Report Inaccessible Digital Content
Digital Accessibility > Create Accessible Content > Website Accessibility >

Semantic Labels for Webpage Regions

Semantic Labels for Webpage Regions

Accessibility Services

  • Accessibility Requests
  • Resource Center for Persons with Disabilities
  • MSU Tower Guard
  • Library AccessibilityServices

Campus Services

  • MSU Police and Public Safety
  • Olin Health Center
  • Counseling & Psychiatric Services (CAPS)
  • University Health and Wellbeing

Compliance

  • Office of the ADA Coordinator
  • President's Advisory Committee on Disability Issues
  • Accommodating Technology Committee

Contact us

(517) 355-3960

Address

408 W. Circle Drive Olds Hall, Suite 105 East Lansing, MI 48824

Follow Us

  • Visit our Facebook page
  • Visit our page on X
  • Visit our Instagram page
  • Visit our LinkedIn page
  • Visit our YouTube page

If you're having accessibility issues, please let us know.

Know MoreTransparency Reporting: Budget & Salary/Compensation
  • Contact Information|
  • Site Map|
  • Privacy Statement|
  • Site Accessibility|
  • Call MSU: (517) 355-1855|
  • Visit: msu.edu|
  • Notice of Nondiscrimination|

SPARTANS WILL|© Michigan State University|

Labeling Recommendations

Header

We recommend the <header> tag be used to designate the region at the top of the page that contains site-wide information, such as website logo, search, and navigation.

Another method that can be used in conjunction with HTML elements is WAI-ARIA roles. For the header, we recommend utilizing role="banner."

Header code example

  1. <header role="banner">
  2. …
  3. <img src="/images/example/MSU-Wordmark_White.png" alt="Michigan State University Wordmark">
  4. …
  5. </header>

Navigation

We recommend the <nav> tag be used to identify a navigation menu. Additionally, role="navigation" can be used to denote a navigation.

If a page has multiple navigation menus, we recommend using labels to differentiate between them. Labels should be short but descriptive. Headings, aria-label, or aria-labelledby can be used to provide a label.

Navigation code example

  1. <nav role=”navigation” aria-labelledby="mainmenulabel">
  2. <h2 id="mainmenulabel" class="visuallyhidden">Main Menu</h2>
  3. </nav>

Main

We recommend the <main> element to identify the main content region of a web page. Additionally, role="main" can be used.

Main code example

  1. <main role="main">
  2. <h1>The Arts & Humanities in Action</h1>
  3. …
  4. </main>

Complementary content

We recommend the <aside> element be used to identify regions that support the main content, yet are separate and meaningful sections on their own. Additionally, role="complementary" can be used.

Complementary content code example

  1. <aside role="complementary">
  2. <h3>Related Articles</h3>
  3. …
  4. </aside>

Section

We recommend the use of <section> to denote subsections of the main content. The section element should be accompanied by an aria-label describing the section.

Section code example

  1. <section aria-label="name of the section">
  2. …
  3. </section>

Footer

We recommend that <footer> be used to designate the region at the bottom of every page that contains site-wide information, such as copyright information, privacy statements, or disclaimers. Additionally, role="contentinfo" can be used.

Footer code example

  1. <footer role="contentinfo">
  2. …
  3. <p>© Michigan State University</p>
  4. …
  5. </footer>

Best practices to keep in mind

  • All text should be contained within a landmark region.
  • Multiple instances of the same type of landmark should be distinguished by different labels (aria-label or aria-labelledby).
  • A webpage should contain no more than one banner, one main, and one contentinfo landmark.
  • The number of landmarks should be limited to the minimum size appropriate for the content.

Additional resources

  • W3C: Page Regions
  • W3C: Menu Structure
  • Mozilla Web Docs- ARIA: region role
  • Mozilla Web Docs – ARIA: landmark role
  • W3C: ARIA Landmarks Example