Greater Lowell Technical High School

Accessibility Quick Guides

Printable 8.5 x 11 Guide

Quick Start Accessibility by Content Type

Web Content

Use semantic HTML, one clear H1, descriptive titles and links, keyboard support, alt text, strong contrast, and landmarks.

Quick Focus

  • Use semantic HTML for headings, lists, links, forms, landmarks, and buttons.
  • Keep one clear H1, a descriptive page title, and meaningful link text.
  • Make sure every interactive element works with keyboard focus and visible states.

Core Guidance

Do This First

  1. Structure the page semantically. Set the page title, language, skip link, landmarks, and heading hierarchy before styling the page.
  2. Check content and interaction. Add alt text, descriptive links, form labels, and keyboard support for every interactive control.
  3. Audit before publishing. Run an automated check, then verify keyboard order, focus visibility, zoom, and screen-reader basics manually.

Structure

  • Use one descriptive H1 per page and organize subsections with H2 to H6 in a logical outline.
  • Create lists with ul, ol, and dl, and use table markup only for real tabular data.
  • Include main, nav, header, and footer landmarks so screen reader users can move around quickly.

Interaction

  • Make sure all buttons, links, menus, and forms work with keyboard navigation alone.
  • Keep focus visible and avoid custom controls that hide or trap keyboard focus.
  • Use native HTML first and add ARIA only when native semantics are not enough.

Content Quality

  • Write concise alt text for images and describe complex visuals in nearby text.
  • Use descriptive hyperlinks such as 'Automotive Program Course Catalog' instead of vague link phrases.
  • Keep reading order logical from top to bottom and left to right across responsive layouts.

Common Problems to Catch

  • Using generic link text such as 'click here' or 'more.'
  • Styling div or span elements to act like buttons without keyboard support.
  • Skipping the page title, skip link, or main landmark.
  • Using heading levels for visual size instead of document structure.

Key WCAG 2.1 AA Checkpoints

  • SC 1.1.1 Non-text Content Images and icons that matter need meaningful alt text.
  • SC 1.3.1 Info and Relationships Headings, lists, forms, and tables need correct semantic markup.
  • SC 2.1.1 Keyboard All page functionality should be available without a mouse.
  • SC 2.4.1 Bypass Blocks Provide a skip link or another way to bypass repeated navigation.
  • SC 2.4.2 Page Titled Each page needs a descriptive, unique title.
  • SC 2.4.4 Link Purpose (In Context) Link text should tell users where the link goes or what it does.
  • SC 2.4.6 Headings and Labels Headings and form labels should describe their content clearly.
  • SC 4.1.2 Name, Role, Value Interactive elements need accessible names, roles, and states.

Resources