Skip to content
a11y-examples

Shauna Keating

HCI 530 Advanced Accessibility

April 19, 2026

For a better experience, visit: https://shkeating.github.io/a11y-examples/links-lists-iframes/

Links, Lists, and iFrames

Building accessible web pages requires careful attention to the structural and interactive elements we use every day. Below are examples of how to properly (and improperly) implement links, lists, and iFrames to ensure an inclusive experience for all users.

Section titled “Links”

Good Example

Section titled “Good Example”

For more details on our auditing process, review the Comprehensive Accessibility Guide.

This link provides meaningful context entirely through its anchor text. Many people who use screen readers navigate a page by pulling up an isolated menu of all available links. Because the link text explicitly describes its destination, a user listening to this out of context will know exactly what the link is about.

WCAG Reference: G91: Providing link text that describes the purpose of a link

Common Mistake

Section titled “Common Mistake”

To view the syllabus for the Advanced Accessibility course, click here.

Using ambiguous phrases like “click here” or “read more” is a barrier to accessibility. If a user navigates from link to link without the surrounding paragraph text, they will only hear “click here,” which gives them no indication of what will happen if they activate the link.

WCAG Reference: F63: Failure of Success Criterion 2.4.4 due to providing link context only in content that is not related to the link

Lists

Section titled “Lists”

Good Example

Section titled “Good Example”

Key Accessibility Principles

  • Perceivable
  • Operable
  • Understandable
  • Robust

By using the appropriate semantic HTML tags (in this case, the <ul> and <li> elements), assistive technologies can correctly interpret the content’s structure. When a screen reader encounters this markup, it will announce that the user has reached a list and will state exactly how many items the list contains. This semantic data gives non-sighted users the same structural awareness that sighted users get visually.

WCAG Reference: H48: Using ol, ul and dl for lists or groups of links

iFrames

Section titled “iFrames”

Good Example

Section titled “Good Example”

Including an accurate and descriptive title attribute is the most critical step for making embedded content accessible. When a screen reader encounters an iFrame, it reads the title attribute to inform the user about the embedded document’s purpose before they navigate into it. Proper labeling here successfully fulfills both the Bypass Blocks and Name, Role, Value guidelines.

WCAG Reference: H64: Using the title attribute of the frame and iframe elements