Skip to content

docs: add iframe accessible name guidance to style guide#8653

Merged
perminder-17 merged 3 commits into
processing:dev-2.0from
Xavrir:add-iframe-accessible-name-guide
May 13, 2026
Merged

docs: add iframe accessible name guidance to style guide#8653
perminder-17 merged 3 commits into
processing:dev-2.0from
Xavrir:add-iframe-accessible-name-guide

Conversation

@Xavrir
Copy link
Copy Markdown

@Xavrir Xavrir commented Mar 18, 2026

Resolves #8457

Changes:

Adds an "Accessible Iframe Names" section to the documentation style guide, placed after the existing "Accessible Canvas Labels" section. The new section covers:

  • Using the title attribute on <iframe> elements so screen readers can identify embedded content
  • A code example showing the wrong and right way to embed an iframe
  • A note about using aria-hidden="true" for purely decorative iframes
  • A reference to WCAG 4.1.2 (Name, Role, Value)

Also adds the new section to the table of contents.

This follows the suggestion in the parent issue (processing/p5.js-website#1115) to add a short, clear section near "Accessible Canvas Labels."

Screenshots of the change:

Not applicable — documentation-only change.

PR Checklist

@p5-bot
Copy link
Copy Markdown

p5-bot Bot commented May 13, 2026

Continuous Release

CDN link

Published Packages

Commit hash: ad87cfd

Previous deployments

4e25cc9


This is an automated message.

Copy link
Copy Markdown
Collaborator

@perminder-17 perminder-17 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks good to me!

> Why? Screen reader users rely on frame titles to identify and navigate between embedded content. A missing title violates [WCAG 4.1.2 (Name, Role, Value)](https://www.w3.org/WAI/WCAG21/Understanding/name-role-value.html), which requires all interface components to have a programmatically determined name.

```html
<!-- Bad. -->
Copy link
Copy Markdown
Collaborator

@perminder-17 perminder-17 May 13, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I tested it locally and it looks good. Just got to know that we have a function convertMarkdownCommentsToMDX in our code (p5.js-website) which will convert the html comments <!-- Bad. --> to mdx style, i.e. {/* ... */}

@perminder-17 perminder-17 merged commit b2b402e into processing:dev-2.0 May 13, 2026
5 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants