From 16381a180493ed08f5effec2eaec24d00c0e283a Mon Sep 17 00:00:00 2001
From: Rizky Mirzaviandy Priambodo <142987522+Xavrir@users.noreply.github.com>
Date: Wed, 18 Mar 2026 07:36:46 +0700
Subject: [PATCH] docs: add iframe accessible name guidance to style guide

---
 contributor_docs/documentation_style_guide.md | 22 +++++++++++++++++++
 1 file changed, 22 insertions(+)

diff --git a/contributor_docs/documentation_style_guide.md b/contributor_docs/documentation_style_guide.md
index d2299b27ab..29eac1c038 100644
--- a/contributor_docs/documentation_style_guide.md
+++ b/contributor_docs/documentation_style_guide.md
@@ -26,6 +26,7 @@ Our community is large and diverse. Many people learn to code using p5.js, and a
 - [Code Samples](#code-samples)
 - [Comments](#comments)
 - [Accessible Canvas Labels](#accessible-canvas-labels)
+- [Accessible Iframe Names](#accessible-iframe-names)
 - [Whitespace](#whitespace)
 - [Semicolons](#semicolons)
 - [Naming Conventions](#naming-conventions)
@@ -273,6 +274,27 @@ The above examples and suggestions are based on the [Writing Accessible Canvas D
 To understand the structure of p5.js’ web accessibility features for contributors, see the [Web Accessibility Contributor Doc](./web_accessibility.md#user-generated-accessible-canvas-descriptions).
 
 
+**[⬆ back to top](#table-of-contents)**
+
+## Accessible Iframe Names
+
+- When embedding content with `<iframe>`, always include a `title` attribute that describes the embedded content.
+
+> 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. -->
+<iframe src="https://www.youtube.com/embed/example"></iframe>
+
+<!-- Good. -->
+<iframe src="https://www.youtube.com/embed/example" title="Video: Getting Started with p5.js"></iframe>
+```
+
+- Use a `title` that describes what the iframe contains, not just "iframe" or "embedded content."
+
+- If the iframe is purely decorative and carries no meaningful content, use `aria-hidden="true"` instead.
+
+
 **[⬆ back to top](#table-of-contents)**
 
 ## Whitespace