Web Design: Landmarks, Headings, Page Titles and Navigation

The usability of a website is closely related to the visual layout and organization of the information on each web page.  For website to be accessible to people with disabilities the layout, organization and structure must be represented through the proper use ARIA landmarks and HTML headings.  Participants will learn about how to represent the visual layout and semantic structure of a web page with the use of ARIA Landmarks and HMTL Headings (H1-H6) to meet Section 508 and W3C Web Content Accessibility Guidelines (WCAG) 2.0.  The course will cover accessible web page titling strategies to identify both website and sub-page information and the different ways to provide a means to skip over repetitive navigation links to get to the main content of a web page.  The course will help participants understand the Section 508 and W3C Web Content Accessibility Guidelines (WCAG) 2.0 requirements that apply to titling, use of headings and landmarks.  The course will also cover the techniques to meet the WCAG 2.0 website navigation requirements.

Click here to enroll in this course

Instructor

Jon Gunderson, Ph.D.
Disability Resources and Education Services
University of Illinois at Urbana-Champaign

Audience

  • User interface and Interaction Designers
  • Web developers
  • Quality assurance testers

What you will learn

  • ARIA Landmarks
  • Use of HTML headings (H1-H6)
  • Accessible titling strategies
  • Skip to main content strategies
  • Navigation requirements of WCAG 2.0
  • Use of AInspector Sidebar to identify proper use of landmarks and headings
  • Use of Accessibility Bookmarklets to visualize document structure and layout semantics
  • How people using screen reader experience the proper use of landmarks, headings and titles

Objectives

  • Understand how to use banner, contentinfo, main, navigation, complementary and region landmarks to understand the visual grouping of content on a web page.
  • Understand how HTML5 sectioning elements create ARIA landmarks.
  • The use to use headers to label landmarks.
  • The use of headers to identify the document structure on the page.
  • The use of the title and h1 elements to identify the website and sub pages.
  • The use of links and Javascript utilities to provide a means to skip over repetitive. navigations links to get to the main content of the pages.
  • The consistent use of landmarks and headings for meeting website requirements of Section 508 and WCAG 2.0.

Student Participation

  • Interactive synchronous lecture with instructor using Blackboard Collaborate.
  • In class activities where students will need to identify and critique structure on live websites.
  • In class activities to build and test the the use of ARIA landmark roles and headings in a demonstration website.
  • Badging exam related to either submit website the student designed or identify structure of several example websites provided by the instructor.

Prerequisites

  • Knowledge of HTML and basic CSS
  • Optionally knowledge of Javascript and DOM is required

Badging Requirements

  • Submit multi-page website designed by the participant with proper ARIA landmarks, headings, titling and “skip to main” content technique, or
  • Identify the proper ARIA landmarks, headings and titling for a set of web pages provided by the instructor