Accessibility Blog Series for Content Editors

When people hear “accessibility audit,” they often think of a single website, a checklist, or a list of technical issues. An institutional accessibility gap analysis is different. It steps back and asks a bigger question:

Where are we, as an organization, falling short of providing accessible digital experiences and why?

This type of analysis doesn’t just look at content. It looks at systems, processes, policies, and culture. And that’s exactly why it’s so powerful.

What Is an Institutional Accessibility Gap Analysis?

An institutional accessibility gap analysis evaluates how well accessibility is embedded across the organization, not just in individual products or pages.

It compares:

• Current practices (what’s actually happening)
• Expected standards (what should be happening)
• Reality on the ground (what teams are able to do)

The goal is not to point fingers. The goal is to identify patterns, gaps, and opportunities for improvement that affect many people at once.

Why This Matters

Accessibility issues rarely exist because people don’t care. They exist because:

• Responsibilities are unclear
• Training is inconsistent or missing
• Tools and templates aren’t accessible by default
• Accessibility is added too late, if at all

A gap analysis helps leadership understand that accessibility challenges are often systemic, not individual failures. That shift in perspective changes everything.

Step 1: Define the Scope Broadly

At the institutional level, accessibility touches almost everything:

• Websites and microsites
• Learning platforms and internal portals
• Digital documents and forms
• Third-party tools and software
• Content workflows and publishing practices
• Procurement and vendor selection
• Training and onboarding

Trying to evaluate everything at once can feel overwhelming. A good approach is to focus first on high-impact systems that are used most often or are critical for access.

Step 2: Establish Clear Standards

You can’t measure gaps without a benchmark.

Most institutions align with:

• WCAG 2.2 AA for web and digital content
• Section 508 or similar legal requirements
• Internal accessibility policies or guidelines

At this stage, it’s important to clarify what “meeting the standard” actually means in practice, not just on paper.

Step 3: Gather Data From Multiple Sources

This is where the analysis becomes real.

Effective gap analysis pulls from several inputs:

• Automated testing to identify common technical issues
• Manual testing to uncover real user barriers
• Reviews of policies, templates, and workflows
• Surveys or conversations with content creators, developers, and designers
• Feedback from users who rely on assistive technology

Often, the most valuable insights come from listening to staff explain what gets in the way of doing accessibility well.

Step 4: Identify the Gaps

Once data is collected, patterns start to emerge.

Common institutional gaps include:

• Accessibility checks happening after content is published
• No clear ownership of accessibility responsibilities
• Inconsistent training across roles and departments
• Procurement processes that don’t require accessibility review
• Lack of accessible templates or guidance for non-technical users

These gaps usually repeat across teams, which is a strong signal that the issue is structural.

Step 5: Prioritize What Matters Most

Not every gap needs to be fixed at once.

Prioritization should focus on:

• Systems used by the largest number of people
• Barriers that block essential tasks
• Areas with legal or compliance risk
• Issues that can be prevented through process changes rather than remediation

This step helps leadership see where investments will have the greatest impact.

Step 6: Translate Findings Into Actionable Recommendations

A gap analysis should never end with a list of problems.

Strong recommendations connect gaps to solutions, such as:

• Standardized, accessible templates
• Required accessibility training by role
• Accessibility checkpoints built into workflows
• Clear guidance for content editors and developers
• Ongoing monitoring and reporting

This is also where accessibility becomes a time and resource saver, not a burden. Preventing issues early costs far less than fixing them later.

Step 7: Report Progress and Keep Momentum

Accessibility is not a one-time project.

Institutions benefit from:

• Clear reporting for leadership
• Shared accountability across teams
• Periodic reassessment to track progress
• Continuous improvement rather than “pass/fail” thinking

Over time, this creates a culture where accessibility is expected, supported, and sustainable.

The Bigger Picture

An institutional accessibility gap analysis does more than identify compliance risks. It creates shared understanding, aligns teams, and helps leadership make informed decisions.

Most importantly, it shifts accessibility from being reactive to being intentional.

And when accessibility is built into systems, not bolted on later, everyone benefits.

Bottom pop-up drawers are everywhere. Cookie notices. Chat widgets. “Need help?” prompts. They slide up from the bottom of the page and seem harmless enough.

Until they’re not.

If your drawer appears on scroll, covers part of the footer, and forces users to close it before they can continue, you may be violating several WCAG requirements — even if keyboard focus technically behaves “correctly.”

Let’s unpack why.

The Scenario

Here’s the behavior we’re looking at:

• A drawer appears automatically when the user scrolls.
• It attaches to the bottom of the page.
• It covers part of the footer until closed.
• Keyboard focus moves into the drawer.
• Focus returns to the next logical element when the drawer is closed.

On paper, that might sound reasonable. In practice, it can still create real accessibility barriers.

The Biggest Issue: Focus That Gets Hidden

WCAG 2.4.11 — Focus Not Obscured (Minimum) (Level AA)

This is the most direct and serious problem.

WCAG requires that when something receives keyboard focus, users must be able to see it. If a bottom drawer covers footer links or buttons, those elements may still receive focus — but users can’t see where they landed.

For a keyboard user, this feels like the page suddenly stops making sense. Focus moves, but there’s no visible cue telling them where they are.

If your drawer hides even part of a focused element, that’s a failure of 2.4.11. If it completely hides it, it also fails the enhanced version, 2.4.12 (Level AAA).

Key takeaway:
If focus can land behind your drawer, the drawer is too intrusive.

Automatic UI That Gets in the Way

WCAG 1.4.13 — Content on Hover or Focus (Level AA)

This success criterion isn’t just about hover tooltips. It also applies to content that appears automatically and blocks other content.

When a drawer appears on scroll without a clear user request, it becomes a problem if:

• It obscures existing content.
• Users must dismiss it before continuing.
• It interrupts normal interaction with the page.

WCAG expects this kind of content to be dismissible, persistent while interacting, and non-blocking. A drawer that forces itself into the experience and covers the footer struggles to meet those expectations.

Unexpected Changes in Context

WCAG 3.2.1 — On Focus (Level A)

Users should not experience major changes just because focus moved.

If the drawer appears and steals focus without a clear user action, that’s a context change the user didn’t ask for. Even if focus handling is technically correct, the timing matters.

Good rule of thumb:
If a component feels surprising to a sighted keyboard user, it’s probably violating 3.2.1.

Focus Order Can Still Be Fragile

WCAG 2.4.3 — Focus Order (Level A)

You mentioned that focus returns to the next logical element after closing the drawer, which is good. But bottom drawers often introduce subtle focus order problems:

• The drawer appears late visually but early in the DOM.
• Focus jumps in a way that doesn’t match reading order.
• Focus skips content that was visually below the drawer.

Even small inconsistencies here can disorient users relying on keyboards or screen readers.

Reflow and Zoom Issues Are Often Overlooked

WCAG 1.4.10 — Reflow (Level AA)

This one shows up during testing at 200–400% zoom.

A drawer that barely covers the footer at normal zoom may completely block it when zoomed in or viewed on a small screen. If users can’t access footer content without dismissing the drawer, that’s a reflow failure.

Reminder:
Reflow is not just about layout — it’s about access.

Supporting Criteria That Often Get Missed

Depending on implementation, these may also apply:

• 2.4.7 — Focus Visible (AA)
  Focus indicators must remain visible inside the drawer and on the page behind it.
• 2.1.1 — Keyboard (A)
  All drawer actions must be keyboard accessible, including closing it. Bonus points for supporting the Escape key.
• 1.1.1 — Non-text Content (A)
  If the close button is just an “X” icon, it still needs an accessible name like “Close drawer.”
• 4.1.2 — Name, Role, Value (A)
  Screen readers need to understand what the drawer is. Is it a dialog? A complementary region? That choice matters.

The Core Problem Isn’t the Drawer — It’s the Overlay

Bottom drawers aren’t inherently inaccessible. The problem usually comes down to this:

They cover content instead of making room for it.

Accessible drawers tend to:

• Be opened by an explicit user action.
• Push page content up instead of sitting on top of it.
• Never hide focused elements.
• Clearly announce themselves without hijacking the experience.

Inaccessible drawers tend to:

• Appear automatically.
• Cover footers and navigation.
• Force users to dismiss them before continuing.
• Hide focus and confuse keyboard users.

Final Thought

If someone has to close your UI just to use the page, that UI needs another look.

A good accessibility test is simple:
Can a keyboard user reach and see everything on the page without fighting your design?

If the answer is no, WCAG agrees with them.

Publication Date: 10/19/2024

Tables can be your best friend or your worst enemy when it comes to accessibility. When done right, they organize complex information clearly for everyone. When done wrong, they create confusion for screen reader users and frustration for people trying to understand your data. The difference lies in proper structure and thoughtful headers.

When to Use Tables (And When Not To)

Use tables for:

• Comparing data across categories
• Showing relationships between items
• Displaying structured information like schedules, prices, or statistics

Don’t use tables for:

• Page layout (use CSS instead)
• Simple lists (use actual lists)
• Side-by-side content that’s not related data

The Foundation: Proper Table Structure

Every accessible table needs:

1. Table headers (<th> elements)
2. Clear relationships between headers and data
3. A descriptive caption when helpful

Basic Table Anatomy

<table>

  <caption>Fall 2024 Course Schedule</caption>

  <thead>

    <tr>

      <th>Course</th>

      <th>Time</th>

      <th>Location</th>

    </tr>

  </thead>

  <tbody>

    <tr>

      <td>Biology 101</td>

      <td>9:00 AM</td>

      <td>Science Hall 204</td>

    </tr>

  </tbody>

</table>

Writing Effective Table Headers

Be specific and descriptive:

• Instead of “Name” → “Student Name” or “Course Name”
• Instead of “Date” → “Registration Deadline” or “Event Date”
• Instead of “Info” → “Contact Information”

Example: Tuition Table

Bad Headers: Type | Cost

Good Headers: Degree Program | Annual Tuition

Complex Tables: When You Need More Structure

Some tables have headers that span multiple columns or rows. Here’s how to handle them:

Column Groups Example:

           Fall Semester    Spring Semester

Course     Credits  Cost    Credits  Cost

Math 101   3        $450    3        $450

Eng 102    4        $600    4        $600

For complex tables, use scope attributes:

• scope="col" for column headers
• scope="row" for row headers
• scope="colgroup" for headers spanning multiple columns

Table Captions: When and How

Use captions when:

• The table’s purpose isn’t obvious from surrounding content
• You have multiple tables on a page
• The table contains complex information

Caption Examples:

• “Student Enrollment by Major, Fall 2024”
• “Comparison of Meal Plan Options and Prices”
• “Library Hours During Finals Week”

Common Table Mistakes

1. Using Tables for Layout

<!-- DON'T DO THIS -->

<table>

  <tr>

    <td>Navigation menu</td>

    <td>Main content</td>

    <td>Sidebar</td>

  </tr>

</table>

2. Missing Headers Every column and row of data should relate to a clear header.

3. Merged Cells Without Proper Markup If you merge cells, use colspan and rowspan attributes correctly.

4. Empty Header Cells Don’t leave <th> elements empty – they confuse screen readers.

Styling Tables for Readability

Visual techniques that help everyone:

• Alternate row colors (zebra striping)
• Clear borders or spacing between cells
• Adequate padding within cells
• Responsive design for mobile viewing

CSS Example:

table {

  border-collapse: collapse;

  width: 100%;

}

th, td {

  padding: 12px;

  text-align: left;

  border-bottom: 1px solid #ddd;

}

tr:nth-child(even) {

  background-color: #f9f9f9;

}

Mobile-Friendly Tables

Large tables don’t work well on small screens. Consider:

Option 1: Horizontal Scrolling Allow the table to scroll horizontally while keeping headers visible.

Option 2: Responsive Transformation Convert table rows into card-like layouts on mobile.

Option 3: Priority Columns Show only the most important columns on mobile, with an option to view all data.

Testing Your Tables

Screen Reader Test: Navigate your table using only keyboard. Can you understand the relationships between headers and data?

The Explanation Test: Can you explain what each cell represents without looking at the visual layout?

Mobile Test: View your table on a phone. Is it still usable?

Real-World Examples

Good: University Tuition Table

Degree Level    | In-State Tuition | Out-of-State Tuition

Undergraduate   | $12,000          | $28,000

Graduate        | $15,000          | $32,000

Good: Event Schedule

Time     | Event                    | Location

9:00 AM  | Registration Opens       | Main Lobby

10:00 AM | Welcome Session          | Auditorium A

11:30 AM | Breakout Sessions        | Various Rooms

Content Management Tips

For WordPress/CMS users:

• Use your CMS’s table editor properly
• Don’t skip the “header row” option
• Add table captions through your editor’s advanced options

For Manual HTML:

• Always include <thead>, <tbody>, and proper <th> elements
• Test with a screen reader or accessibility checker
• Validate your HTML for proper table structure

Quick Fixes for Existing Tables

1. Add missing headers – Convert the first row/column to <th> elements
2. Include table captions for complex tables
3. Check mobile display – ensure tables work on small screens
4. Improve visual design – add borders, spacing, and contrast

Content Editor Action Items

• [ ] Audit your five most recent posts with tables
• [ ] Ensure all tables have proper headers
• [ ] Add captions where helpful
• [ ] Test table readability on mobile devices
• [ ] Document table standards for your team

Remember: Tables are powerful tools for presenting structured information, but they require careful attention to accessibility. When you build tables thoughtfully, you make complex data understandable for everyone – and that’s when tables truly shine.

Publication Date: 09/23/2024

“Click here.” “Read more.” “Learn more.” These phrases appear millions of times across the web, and they’re all accessibility barriers in disguise. For screen reader users who navigate by jumping from link to link, these generic phrases provide no useful information. Good link text is like good signage – it tells you exactly where you’re going before you get there.

How Screen Reader Users Navigate Links

Screen reader users often:

• Tab through all links on a page
• Pull up a list of all links to scan quickly
• Search for specific link text

When your links say “click here,” a screen reader user might hear: “Click here, click here, read more, learn more, click here…”

That’s not navigation – that’s frustration.

The Anatomy of Good Link Text

Good link text should:

• Describe the destination or action
• Make sense out of context
• Be concise but specific
• Avoid generic phrases

Before and After Examples

Generic Links (Bad):

• “For more information about financial aid, click here.”
• “Read more about our admissions process.”
• “Download the form here.”

Descriptive Links (Good):

• “For more information about financial aid, visit our [Financial Aid Requirements page].”
• “Read more about our [undergraduate admissions process].”
• “Download the [2024 course registration form].”

Link Context Matters

Sometimes you can write link text that flows naturally in sentences:

Example 1: “Students can [apply for graduation] online through the student portal.”

Example 2: “The [Spring 2024 course catalog] includes over 200 new electives.”

Example 3: “Contact the [Office of Student Affairs] for housing questions.”

Special Cases and Solutions

PDF Downloads: Don’t just link to “application form” Try: “2024 Graduate School Application (PDF, 2 pages)”

External Links: Let users know they’re leaving your site: “Visit [Harvard University’s website] (external link)”

Email Links: Be specific about the purpose: “Email [Dr. Smith about research opportunities]” Not: “Contact Dr. Smith”

Phone Numbers: Include context: “Call the admissions office at [555-123-4567]” Not just: “555-123-4567”

Common Mistakes to Avoid

1. URLs as Link Text Never use the raw URL: www.university.edu/admissions/requirements Use: “admissions requirements page”

2. “New Window” Links Without Warning If a link opens in a new window, mention it: “View [campus map] (opens in new window)”

3. Ambiguous Pronouns “The policy was updated last month. You can read it here.” Better: “The policy was updated last month. Read the [updated parking policy].”

4. Identical Link Text for Different Destinations If you have multiple “Learn more” links, make them specific:

• “Learn more about [undergraduate programs]”
• “Learn more about [graduate programs]”
• “Learn more about [online learning]”

Testing Your Links

The List Test: Imagine all your page’s links in a bulleted list with no surrounding context. Does each link make sense on its own?

The Scanning Test: Can someone understand your page’s key actions and destinations just by reading the links?

Writing Effective Call-to-Action Links

Weak CTAs:

• “Click here to apply”
• “Get started today”
• “Learn more now”

Strong CTAs:

• “Apply for admission”
• “Start your application”
• “View degree programs”

Link Length Guidelines

Too short: “Info” (not descriptive enough) Too long: “Click here to access the comprehensive guide to understanding financial aid policies and procedures for undergraduate and graduate students” (overwhelming) Just right: “Financial aid guide for students”

Handling Repetitive Links

If you need multiple links to the same destination:

• Use the same link text consistently
• Or provide different context for each

Example: In navigation: “Course Catalog” In body text: “Browse available courses in the course catalog” Both link to the same place, but the context makes the difference clear.

Quick Fixes for Existing Content

1. Search your content for “click here,” “read more,” “learn more”
2. Rewrite each generic link to describe its destination
3. Check PDF links – add file type and size information
4. Review call-to-action buttons – make them action-specific

Content Editor Checklist

Before publishing:

• [ ] All links describe their destination or action
• [ ] No “click here” or “read more” without context
• [ ] PDF links include file type
• [ ] External links are marked as such
• [ ] Links make sense when read out of context

The User Experience Impact

Good link text helps everyone:

• Screen reader users can navigate efficiently
• All users know what to expect when they click
• Mobile users can make informed choices about which links to tap
• Search engines better understand your content structure

Remember

Every link is a promise about what comes next. Make sure you’re making promises you can keep, and that those promises are clear to everyone who encounters them.

Good link text isn’t just about accessibility compliance – it’s about respect for your users’ time and cognitive energy. When you write descriptive links, you’re helping everyone navigate more confidently and efficiently.

Publication Date: 08/21/2024

Clear writing isn’t just good communication – it’s an accessibility feature. When you write clearly, you help people with cognitive disabilities, learning differences, attention disorders, and those for whom English isn’t their first language. You also help everyone else who’s scanning quickly, reading on mobile, or multitasking.

Why Simple Language Matters

1 in 6 adults has difficulty with literacy. Additionally:

• People with dyslexia process complex sentences differently
• ADHD can make long paragraphs hard to follow
• Autism may affect how abstract language is understood
• Anxiety can reduce reading comprehension under stress

The PLAIN Language Principles

Purposeful – Every word serves a purpose Logical – Information flows in a sensible order Accessible – Language everyone can understand Interesting – Engaging without being complex Necessary – No fluff or filler

Simple Swaps for Complex Language

Instead of academic language:

• “Utilize” → “Use”
• “Facilitate” → “Help” or “Make easier”
• “Subsequently” → “Then” or “Next”
• “In order to” → “To”
• “Due to the fact that” → “Because”

Instead of business jargon:

• “Leverage” → “Use”
• “Implement” → “Start” or “Do”
• “Interface with” → “Work with”
• “Best practices” → “What works well”

Sentence Structure That Works

Keep sentences under 20 words when possible:

• Long: “Students who are interested in participating in the study abroad program that takes place during the summer semester should submit their applications by March 15th.”
• Better: “Summer study abroad applications are due March 15th.”

Use active voice:

• Passive: “The form must be completed by all students.”
• Active: “All students must complete the form.”

One idea per sentence:

• Complex: “The library will be closed for renovations starting Monday, but the computer lab in the basement will remain open for student use, though with limited hours.”
• Clearer: “The library closes Monday for renovations. The basement computer lab will stay open with limited hours.”

Organizing Information Clearly

Lead with the most important information: Instead of: “After careful consideration of various factors and consultation with multiple departments, we have decided to extend the deadline for course registration, which will now be available until Friday at 5 PM instead of the originally planned Wednesday deadline.”

Try: “Course registration deadline extended to Friday, 5 PM. The original deadline was Wednesday.”

Use lists for multiple items: Don’t bury important information in paragraphs. Break it out:

• Admission requirements
• Important dates
• Steps in a process
• Available options

Visual Organization Helps Reading

Short paragraphs – Aim for 2-3 sentences maximum White space – Let content breathe Descriptive headings – Help readers scan and navigate Bullet points – Break up dense information

Testing Your Content

The Friend Test Ask someone unfamiliar with your topic to read your content. If they have questions, your writing might need simplification.

The Scanning Test Can someone understand your main points by reading only headings and the first sentence of each paragraph?

The Tired Test Read your content when you’re tired. If you struggle to follow it, simplify.

Common Content Editor Mistakes

1. Assuming Knowledge Don’t assume readers know your acronyms, internal processes, or industry terms.

2. Burying Important Information Put key details (dates, requirements, contact info) early and prominently.

3. Over-explaining Sometimes simple is better than comprehensive. Link to details rather than including everything.

Examples in Action

Before: “In accordance with university policy regarding the utilization of campus facilities, students are required to present valid identification prior to gaining access to the recreational center during evening hours, specifically after 6 PM on weekdays and after 2 PM on weekends.”

After: “Show your student ID to enter the rec center after:

• 6 PM on weekdays
• 2 PM on weekends”

Subject-Specific Tips

Academic Content:

• Define technical terms on first use
• Provide examples for abstract concepts
• Break complex processes into numbered steps

Administrative Information:

• Lead with deadlines and requirements
• Use familiar words for processes
• Provide clear next steps

Event Information:

• Start with date, time, location
• Explain registration process simply
• Include what to bring or expect

Your Action Plan

1. Pick one recent article and rewrite it using these principles
2. Create a word substitution list for your organization’s common jargon
3. Set a reading level goal (aim for 8th-9th grade level for general audiences)
4. Get feedback from people outside your department

The Bottom Line

Clear writing isn’t “dumbing down” content – it’s opening it up. When you write clearly, you respect your readers’ time and cognitive energy. You make your information accessible to more people, and you make everyone’s experience better.

Simple language is a superpower. Use it.

Publication Date: 07/27/2024

Color is powerful. It can evoke emotions, guide attention, and create beautiful designs. But when color becomes a barrier to reading your content, it stops being helpful and starts being exclusive. Understanding color contrast isn’t just about following rules – it’s about ensuring your message reaches everyone.

The Numbers That Matter

4.5:1 – The magic ratio for normal text 3:1 – The minimum ratio for large text (18pt+ or 14pt+ bold) 7:1 – The gold standard for enhanced contrast

These ratios represent the difference in brightness between your text and background colors. The higher the ratio, the easier it is to read.

Who Benefits from Good Contrast?

• 8% of men and 0.5% of women have some form of color blindness
• People with low vision may struggle with low contrast
• Aging users often experience decreased contrast sensitivity
• Everyone benefits in challenging viewing conditions (bright sunlight, dim lighting, older monitors)

Beyond Black and White

Good contrast doesn’t mean everything must be black text on white backgrounds. You can maintain your brand colors while ensuring readability.

High-Contrast Color Combinations:

• Navy blue (#003366) on white
• Dark purple (#4A154B) on light gray (#F8F8F8)
• Forest green (#2D5A2D) on cream (#FFF8DC)

Common Contrast Mistakes

1. Light Gray Text Many designs use #999999 or #CCCCCC text, which fails contrast requirements.

2. Colored Text on Colored Backgrounds Blue links on purple backgrounds might look stylish but are often unreadable.

3. Text Over Images Overlaying text directly on photos without ensuring contrast.

Testing Your Color Choices

Free Online Tools:

• WebAIM Contrast Checker
• Colour Contrast Analyser
• Stark (browser extension)

Built-in Browser Tools: Chrome DevTools now includes contrast ratio information in the color picker.

Practical Solutions for Content Editors

1. Text Over Images Instead of placing text directly on photos:

• Add a semi-transparent dark overlay
• Use a solid colored box behind text
• Choose images with consistent, contrasting areas

2. Link Colors Ensure links are distinguishable from regular text through:

• Sufficient color contrast
• Underlines or other visual indicators
• Different contrast ratios when hovered/focused

3. Button Design Make sure button text contrasts well with button backgrounds, especially for call-to-action buttons.

Color-Blind Friendly Design

Don’t rely on color alone to convey information:

• Use icons alongside color coding
• Add patterns or textures to charts
• Include text labels for important color distinctions

Example: Instead of: “Click the green button to continue” Use: “Click the ‘Continue’ button below”

Real-World Examples

Good: University website with dark blue (#002855) navigation text on white background (contrast ratio: 8.2:1)

Bad: Light blue (#87CEEB) links on white background (contrast ratio: 1.8:1 – fails requirements)

Solution: Darker blue (#0066CC) links on white background (contrast ratio: 4.5:1 – passes!)

Emergency Content Fixes

If you discover contrast issues on live content:

Quick Fixes:

1. Darken light text colors
2. Lighten dark background colors
3. Add background boxes to text over images
4. Use border or shadow effects for subtle text enhancement

Content Editor Action Plan

1. Install a contrast checker browser extension
2. Test your most-viewed pages with the contrast tool
3. Create a color palette of pre-approved, accessible color combinations
4. Document your standards so all content creators know the approved colors

The Bigger Picture

Good contrast isn’t about making websites boring – it’s about making them inclusive. When you ensure sufficient contrast, you’re not just helping people with disabilities; you’re creating content that works better for everyone, in every situation.

Remember: If people can’t read your content, your message is lost. Contrast is the foundation that makes everything else possible.

Publication Date: 06/28/2024

Imagine trying to navigate a book with no chapter titles, section breaks, or table of contents. That’s what many users experience when websites lack proper heading structure. For the millions of people who use screen readers, headings aren’t just formatting – they’re the primary way to navigate and understand your content.

Why Heading Structure Matters

Screen reader users often navigate by headings, jumping from H1 to H2 to H3 like you might scan a newspaper. In fact, WebAIM’s screen reader survey found that 67% of users navigate by headings as their first strategy for finding information.

The Heading Hierarchy Rules

Think of headings like an outline:

H1: Your Main Topic (Only one per page)

• H2: Major Section 
• H3: Subsection 
• H4: Sub-subsection 
• H5: Minor subsection 
• H6: Smallest subsection

Common Mistakes Content Editors Make

1. Skipping Heading Levels

❌ Wrong:

H1: Welcome to Our Campus

H4: Dining Options  (Skipped H2 and H3!)

✅ Correct:

H1: Welcome to Our Campus

H2: Dining Options

2. Using Headings for Styling Don’t choose H3 because it “looks better.” Use CSS to style headings while maintaining logical structure.

3. Multiple H1s Each page should have exactly one H1 that describes the main content.

Practical Examples

Blog Post Structure:

H1: "10 Tips for First-Year Students"

H2: "Academic Success"

H3: "Time Management"

H3: "Study Strategies"

H2: "Campus Life"

H3: "Getting Involved"

H3: "Making Friends"

H2: "Health and Wellness"

Event Page Structure:

H1: "Spring Career Fair 2024"

H2: "Event Details"

H2: "Participating Employers"

H3: "Technology Companies"

H3: "Healthcare Organizations"

H3: "Non-Profit Organizations"

H2: "How to Prepare"

Testing Your Heading Structure

Method 1: Use Browser Tools Most browsers let you view heading structure:

1. Right-click → Inspect
2. Search for “h1”, “h2”, etc.
3. Check the logical flow

Method 2: The Squint Test If you squint at your page and can still follow the content flow through headings alone, you’re on the right track.

Method 3: Screen Reader Simulation Try navigating your page using only Tab key and screen reader shortcuts (H key in NVDA/JAWS jumps between headings).

Quick Fixes for Existing Content

1. Audit your H1s – Ensure each page has exactly one H1
2. Check for skipped levels – If you have H1 followed by H3, add an H2
3. Review heading text – Make sure headings are descriptive, not just “More Information”

Content Editor Checklist

Before publishing any page:

• [ ] Page has exactly one H1
• [ ] Headings follow logical order (no skipped levels)
• [ ] Headings accurately describe their sections
• [ ] I can understand the page structure from headings alone

The Business Case

Proper heading structure isn’t just about accessibility – it helps with SEO too. Search engines use heading structure to understand your content, and users scan headings to decide if they want to read your page.

Good heading structure creates a win-win: better accessibility, better SEO, and better user experience for everyone.