Logo of the Hanover Hornets featuring a stylized hornet in vibrant colors.

HANOVER SCHOOL DISTRICT 28

WEATHER STATUS:

NORMAL

WEATHER STATUS:

NORMAL

ADA Compliant Text and Headings Guide

ADA Compliant Text & Headings Guide

Hanover School District 28 • Ensuring Equal Access to Education

Why Text and Heading Accessibility Matter

Accessible text and proper heading structure are fundamental to creating inclusive digital content. They enable screen readers to navigate content effectively, help users with cognitive disabilities understand information hierarchy, and ensure all users can access and comprehend your content regardless of their abilities.

Proper Heading Structure

Headings should follow a logical hierarchy, like an outline. Never skip heading levels or use headings just for styling.

H1

Page title - only one per page

H2

Major section headings

H3

Subsection headings

H4

Sub-subsection headings
1

Use Semantic HTML Headings

Always use proper HTML heading tags (H1-H6) rather than styling regular text to look like headings. Screen readers depend on semantic markup to understand content structure.

Good Example
<h1>School Calendar</h1> <h2>Fall Semester</h2> <h3>Important Dates</h3> <h3>Holiday Schedule</h3>
Proper semantic structure that screen readers can navigate
Avoid This
<div class="big-text">School Calendar</div> <span style="font-size:18px; font-weight:bold">Fall Semester</span> <p><strong>Important Dates</strong></p>
Visual styling without semantic meaning
2

Maintain Proper Heading Hierarchy

Headings should follow sequential order (H1, then H2, then H3, etc.) and never skip levels. This creates a logical document outline.

Good Example
<h1>Student Services</h1> <h2>Academic Support</h2> <h3>Tutoring Programs</h3> <h3>Study Groups</h3> <h2>Counseling Services</h2>
Sequential hierarchy that makes logical sense
Avoid This
<h1>Student Services</h1> <h4>Academic Support</h4> <h2>Tutoring Programs</h2> <h5>Study Groups</h5>
Skipped levels confuse navigation and structure
3

Ensure Sufficient Color Contrast

Text must have a contrast ratio of at least 4.5:1 against its background (3:1 for large text 18pt+ or bold 14pt+) to meet WCAG AA standards.

Good Contrast (4.5:1+)

This dark text on white background provides excellent readability for all users, including those with visual impairments.

Poor Contrast (2.1:1)

This light gray text is difficult to read and fails accessibility standards. Many users cannot distinguish this text clearly.

4

Use Appropriate Font Sizes

Maintain readable font sizes with a minimum of 16px for body text. Allow users to zoom up to 200% without horizontal scrolling.

Too Small (12px)

This text is too small and difficult to read, especially for users with visual impairments.

Good Size (16px)

This text size is readable and accessible for most users while remaining efficient.

Large Text (18px+)

Larger text is even more accessible and requires lower contrast ratios.

5

Write Clear and Simple Language

Use plain language, short sentences, and familiar words. Explain technical terms and avoid jargon to ensure content is understandable for all reading levels.

Good Example

School Lunch Program

Students can buy lunch at school. Meals cost $3.50. Free meals are available for families who qualify based on income.

Avoid This

Nutritional Services Initiative

The district facilitates comprehensive alimentary provisions via institutional procurement protocols. Economic assistance parameters are determined through socioeconomic eligibility assessments.

6

Structure Content with Lists and Paragraphs

Break up long blocks of text with proper HTML elements. Use lists for related items and keep paragraphs to one main idea.

Good Example
<h2>Registration Requirements</h2> <p>To register your child, you'll need:</p> <ul> <li>Birth certificate</li> <li>Immunization records</li> <li>Proof of address</li> </ul>
Avoid This
<p>Registration Requirements: To register your child you'll need birth certificate, immunization records, proof of address, and you should also bring any previous school records and make sure everything is up to date and copied properly.</p>

Advanced Text Accessibility Features

Language Declaration

Specify the document language using the HTML lang attribute to help screen readers pronounce text correctly.

Focus Indicators

Ensure all interactive text elements have visible focus indicators for keyboard navigation users.

Line Spacing

Use adequate line spacing (1.5x) to improve readability for users with dyslexia and other reading difficulties.

Text Spacing

Allow users to adjust spacing between letters, words, lines, and paragraphs up to specified amounts without content overlap.

Responsive Text

Ensure text reflows properly when users zoom in or change their preferred font sizes.

Reading Order

Structure content so it makes sense when read linearly by screen readers, following visual layout.

Additional Text Accessibility Tips

  • Test your content with screen readers to ensure proper reading flow
  • Use ARIA labels and descriptions for complex text relationships
  • Avoid using color alone to convey meaning in text
  • Provide glossaries or definitions for technical terms when necessary
  • Use descriptive link text that makes sense out of context
  • Ensure error messages are clearly associated with relevant form fields
  • Consider providing content in multiple formats (audio, video, simplified text)
  • Use consistent navigation and layout patterns throughout your site

ADA Compliance Contact

Lori Underwood

Email: [email protected]

Phone: (719) 426-8002

Hanover School District 28

WCAG 2.1 AA Compliant