Texas Tech University

Accessible Headings & Links

Quick Start: What You Need to Know

Headings create the structure of your page like a table of contents. Links need to tell users where they're going. Screen reader users navigate by jumping between headings and pulling up lists of links, so both need to be clear and properly coded.

Immediate Actions:

  • Use only ONE H1 per page (the main topic)
  • Don't skip heading levels (H1 → H2 → H3, not H1 → H4)
  • Never use "click here" or "read more" as link text
  • Include file type and size in download links (PDF, 2.5MB)
  • Tell users if a link opens in a new window
  • Make sure headings describe what follows them

Why This Matters

Screen reader users navigate websites completely differently than sighted users. They often:

  • Pull up a list of all headings to get an overview of the page (like a table of contents)
  • Jump from heading to heading to find the section they need
  • Pull up a list of all links to scan them quickly

If your headings skip levels or your links all say "click here," these navigation tools become useless. Proper heading structure and descriptive links give screen reader users the same efficiency that visual layout provides to sighted users.

What to Look For: Detailed Checklist

Heading Structure

Every page should have exactly one H1 element that describes the main topic or purpose of the page. Think of it as the title of a book chapter.

What to check:

  • Does your page have an H1?
  • Is there only ONE H1 on the page?
  • Does the H1 accurately describe what the page is about?

Use headings in sequential order to create an outline structure. Each heading level should be a subsection of the level above it.

The rule: Don't skip levels. Go from H1 to H2 to H3. Never jump from H2 to H4.

What to check:

  • Pull up the heading structure in your browser's developer tools or WAVE
  • Can you read the headings like an outline?
  • Are there any skipped levels?

Never use heading tags just because you like how they look. Headings convey structure and hierarchy, not visual design.

Wrong approach: "I'll use H4 here because H3 looks too big."

Right approach: Use the correct heading level for the structure, then style it with CSS to look how you want.

Each heading should clearly describe the content that follows. Avoid vague headings.

Vague headings to avoid:

  • "More Information"
  • "Details"
  • "Section 1"
  • "Click Here"

Better alternatives:

  • "Financial Aid Application Process"
  • "Campus Safety Resources"
  • "Contact Information for Student Services"

Link Accessibility

Link text should make sense when read out of context. Screen reader users often pull up a list of all links on a page to scan them quickly.

Ask yourself: If someone heard only the link text with no surrounding context, would they know where it goes?

Avoid:

  • "Click here"
  • "Read more"
  • "Learn more"
  • "Download"
  • "Link"

Instead use:

  • "Download the 2025 Course Catalog (PDF)"
  • "Apply for Financial Aid"
  • "View Campus Safety Guidelines"

When linking to downloadable files, always include the file format and size in the link text.

Why: Users need to know what they're about to download, especially those on limited data plans or using assistive technology.

Format: "Document Name (PDF, 2.5MB)"

Examples:

  • "2024 Annual Report (PDF, 1.8MB)"
  • "Registration Form (Word, 120KB)"
  • "Campus Map (PNG, 450KB)"

If a link opens in a new window or tab, tell users in the link text. Opening new windows unexpectedly can be disorienting, especially for screen reader users.

How to indicate: Add "(opens in new tab)" to the link text

Example: "Visit the Department of Education Website (opens in new tab)"

Technical note: Also include rel="noopener" for security when using target="_blank"

Links that go to the same place should use identical link text throughout your site. This creates consistency and helps users understand what to expect.

Example: If you link to the campus map in multiple places, always call it "Campus Map," not "Map," "View Map," and "Campus Map" in different locations.

Link text must have sufficient color contrast with its background: minimum 4.5:1 for normal text, 3:1 for large text.

Also important: Links shouldn't rely on color alone to be identifiable. Use underlines or another visual indicator in addition to color.

Test it: Use the WebAIM Contrast Checker

Code Examples & Best Practices

Heading Structure

Bad Example: Skipping heading levels

<h1>Texas Tech University</h1>
<h4>About Our Campus</h4>  <!-- Skipped h2 and h3 -->
<h2>Student Life</h2>  <!-- Going backwards in hierarchy -->
This breaks the logical hierarchy. Screen reader users who navigate by headings will be confused by the structure.

Good Example: Proper heading hierarchy

<h1>Texas Tech University</h1>
<h2>About Our Campus</h2>
  <h3>History</h3>
  <h3>Location</h3>
<h2>Student Life</h2>
  <h3>Housing Options</h3>
  <h3>Dining Services</h3>
This creates a clear, logical outline. Each heading level represents a subsection of its parent.

Descriptive Links

Bad Example: Vague link text

<p>Texas Tech offers many degree programs. <a href="programs.html">Click here</a> 
to learn more.</p>

<p>Download our catalog. <a href="catalog.pdf">PDF</a></p>
"Click here" and "PDF" don't describe the destination. A screen reader user reviewing all links on the page would hear multiple "click here" links with no way to distinguish them.

Good Example: Descriptive link text

<p>Texas Tech offers many degree programs. 
<a href="programs.html">Explore our degree programs</a>.</p>

<p><a href="catalog.pdf">Download the 2025 Course Catalog (PDF, 3.2MB)</a></p>
Each link clearly describes where it leads and includes file type/size information when relevant.

Link Opening in New Window

Bad Example: No warning about new window

<a href="https://external-site.com" target="_blank">Visit Partner Site</a>
Users aren't warned that the link opens in a new window, which can be disorienting.

Good Example: Clear indication of new window

<a href="https://external-site.com" target="_blank" rel="noopener">
  Visit Partner Site (opens in new tab)
</a>
Users are informed about the new window, and rel="noopener" is included for security.

WCAG 2.1 Success Criteria Summary

The following WCAG 2.1 Level A and AA success criteria apply to headings and links:

1.3.1 Info and Relationships Level A

Information, structure, and relationships conveyed through presentation can be programmatically determined or are available in text. Headings that look like headings must be marked up as semantic headings using proper HTML heading tags (h1-h6).

1.4.5 Images of Text Level AA

If text is presented as an image, the visual presentation can be achieved using text instead, except when the image of text is essential (like logos). Don't create heading graphics—use actual HTML headings styled with CSS.

2.4.4 Link Purpose (In Context) Level A

The purpose of each link can be determined from the link text alone or from the link text together with its programmatically determined link context. Users should be able to understand where a link will take them.

2.4.6 Headings and Labels Level AA

Headings and labels must describe the topic or purpose. Headings should be clear, concise, and accurately describe the content that follows.

Real-World Impact: Why This Matters

Screen Reader Navigation
How proper heading structure changed everything

A junior at Texas Tech studying Computer Science has been blind since birth and uses a screen reader called JAWS to navigate the web. When he visits a new webpage, the first thing he does is pull up the list of headings. Headings allow screen reader users to quickly scan a website, much like sighted users visually navigating a page. For a screen reader user, pulling up the list of headings on a new webpage is like getting a table of contents, providing an instant overview of the content.

Last semester, he needed to register for courses. When he visited the course registration page, his screen reader showed a logical hierarchy: "H1: Course Registration" followed by "H2: Fall 2025 Courses," then "H3: Computer Science Department," and so on. He could jump directly to the section he needed in seconds.

But when he tried to find information on a different department's site, he encountered chaos. The page had three H1 headings, several H4s with no H2s or H3s above them, and text that looked like headings but wasn't marked up properly. What should have taken 30 seconds took 10 minutes as he had to listen to the entire page to find what he needed.

The difference? One site used semantic headings properly. The other just styled text to look like headings without using proper HTML. Good heading structure empowers users, allowing them to navigate content independently and avoid frustration.

The "Click Here" Nightmare
When all links sound the same

A graduate student is researching accessibility policies at different universities. She uses NVDA screen reader due to low vision. One of her most efficient navigation techniques is pulling up a list of all links on a page so her screen reader can show her every single link at once and she can jump directly where she needs to go.

When researching a competitor university's policies, she pulled up the links list and saw:

  • "Click here"
  • "Click here"
  • "More information"
  • "Click here"
  • "Learn more"
  • "Read more"

She had no idea which link led where and had to go back to the page and listen to the context around each link. A process that took 15 frustrating minutes.

Then she visited Texas Tech's site and saw descriptive links:

  • "Download Accessibility Policy (PDF)"
  • "View Accommodation Request Form"
  • "Contact Student Disability Services"
  • "Read ADA Compliance Statement"

She found exactly what she needed in under a minute. Descriptive link text gave her independence and saved her time.

The Unexpected Benefits
How accessibility helps everyone

The SEO Benefit: The same practices that make websites accessible also make them easier for search engines to index. Proper heading structure helps Google understand your content hierarchy. Descriptive link text tells search engines what pages are about. A site built for accessibility often ranks better in search results, bringing more prospective students to Texas Tech.

The Voice Assistant Factor: As more people use Alexa, Siri, and Google Assistant to browse the web, semantic HTML becomes crucial. These tools rely on proper heading structure and clear content to extract and read information. Building accessibly means building for the future of how people access information.

Additional Resources

WCAG Guidelines and Understanding Documents

Testing Tools

Resources

Student Disability Services

Support and Accommodations

Human Resources (ADA)

Workplace accommodations and compliance

Contact Us

Reach out to our accessibility team

Report a Barrier

Encountered an issue? Let us know!

Digital Accessibility

© 2025  Texas Tech University Nov 25, 2025 11:33 AM