Skip to main content
University of California San Francisco Give to UCSF

UCSF IT Technology

Main navigation

  • Status
    • Security Announcements
  • Services
  • How To
  • News & Events
  • About Us
  • Log In
Open Close Search
Open menu
Give to UCSF

Breadcrumb

  1. Home
  2. How To
  3. Accessible Structure Best Practices

This content is viewable by Everyone

Accessible Structure Best Practices

Save

Log in via MyAccess to save.

  • Audience: Affiliate, Faculty, Non-UCSF, Staff, Technical Partner, Volunteer
  • Service Category: Web Services
  • Owner Team: Web Services
  • Service:
    Digital Accessibility Program

Accessible web content structure

Creating the accessible web is a lot like building a house. Once the knowledge foundation is in place, such as understanding the “who” and “why” of web accessibility, it's time to erect the frame for the information you want to provide. Using structured HTML to create your content and provide the semantic meaning it needs, help to reach anyone who encounters it. This could be on a laptop, via Braille display, or in ways we haven’t dreamed of yet. As a bonus, it’s also great for SEO as search engines can make better sense of it.

Using headers

Heading selections in Word
  • Structure the page with headers. Start with having the same words for the page title and the H1 and make it meaningful.
  • For each of the main sections of the page, label them as H2's and subsections as H3's and each subsection under that H4 and lower as needed.
  • One and only one H1 per page - it is the title of the page. H2-H6 are used to indicate hierarchy - never used for sizing text. 

People who use assistive technologies such as screen readers are able to browse through the "sections" of a website through the use of headings and sub-headings (H1-H6) that give a semantic structure to the page. Search engines also use the heading structure to rank content. Content well structured with headings rank higher and this improves your SEO.

Resources

  • Accessible Home Page-Before and After Demonstration
  • HTML 5 Doctor: Using ARIA
  • SIGAPP on Semantics
  • WAVE Chrome Extension – From the Chrome web store, the browser extension version of the popular WAVE tool. In addition to flagging errors and alerts, it also provides nifty tools like "Text only" and "Outline" modes.
  • WebAIM: Semantic Structure

Related Information

  • Accessible Color Best Practices
  • Accessible Documents Best Practices
  • Accessible Forms Best Practices
  • Accessible Images Best Practices
  • Accessible JavaScript Best Practices
  • Accessible PDF Best Practices
  • Accessible Videos Best Practices
  • Accessible Virtual Events Best Practices
Section Menu
Digital Accessibility Program
  • Digital Accessibility Awareness and Outreach
  • Introduction to Digital Accessibility at UCSF
  • Digital Accessibility Consultations for Online Content
  • Testing for Digital Accessibility
  • Accessible Color Best Practices
  • Accessible Documents Best Practices
  • Accessible Forms Best Practices
  • Accessible Images Best Practices
  • Accessible JavaScript Best Practices
  • Accessible PDF Best Practices
  • Accessible Structure Best Practices
  • Accessible Videos Best Practices
  • Accessible Virtual Events Best Practices
  • Software Purchasing Guidance for Accessibility
Home

Footer Col 1

  • Status
  • Services
  • How To
  • News & Events

Footer Col 2

  • About
  • IT Directory
  • Standards & Guidelines

Footer Col 3

  • Get Help
  • Recognize IT Staff
  • Submit a Support Inquiry

    For emergencies and high priority issues please call the IT Service Desk (415) 514-4100

    • Facebook
    • Twitter
    • YouTube
    • Instagram

    © 2023 The Regents of the University of California