From 82a4c44f6397042fcf35e8742888f0c85cd15ec2 Mon Sep 17 00:00:00 2001 From: Jessica Wilkins <67210629+jdwilkin4@users.noreply.github.com> Date: Wed, 28 May 2025 08:13:18 -0700 Subject: [PATCH] chore(curriculum): break up A11y lectures into smaller blocks (#60532) --- client/i18n/locales/english/intro.json | 18 ++++++ .../index.md | 9 +++ .../lecture-accessible-tables-forms/index.md | 9 +++ .../lecture-introduction-to-aria/index.md | 9 +++ .../meta.json | 27 +++++++++ .../lecture-accessible-tables-forms/meta.json | 19 ++++++ .../meta.json | 60 ------------------- .../lecture-introduction-to-aria/meta.json | 47 +++++++++++++++ .../672a55b5c0c14493328fe36e.md | 0 .../672a55dd1d86bc939606e204.md | 0 .../672a55eb7791559421ff0cd3.md | 0 .../672a55fbc2d95a9453151caf.md | 0 .../672a539b887ec68c593cdc4b.md | 0 .../672a53ae8f1ad28c8a1ed0f0.md | 0 .../672a53cf67140d8cd85d4b0f.md | 0 .../672a549231b8728f7171ed9d.md | 0 .../672a54a6675c168faa84252d.md | 0 .../672a54bc58319c8fe6f78ad4.md | 0 .../672a54ce90c19e9038f481d7.md | 0 .../672a54dff9dc439089f1a219.md | 0 .../672a54f29d783890d1f94740.md | 0 .../672a5507d857a891139abc7f.md | 0 .../672a551975938a916c74802c.md | 0 .../superblock-structure/full-stack.json | 3 + 24 files changed, 141 insertions(+), 60 deletions(-) create mode 100644 client/src/pages/learn/full-stack-developer/lecture-accessible-media-elements/index.md create mode 100644 client/src/pages/learn/full-stack-developer/lecture-accessible-tables-forms/index.md create mode 100644 client/src/pages/learn/full-stack-developer/lecture-introduction-to-aria/index.md create mode 100644 curriculum/challenges/_meta/lecture-accessible-media-elements/meta.json create mode 100644 curriculum/challenges/_meta/lecture-accessible-tables-forms/meta.json create mode 100644 curriculum/challenges/_meta/lecture-introduction-to-aria/meta.json rename curriculum/challenges/english/25-front-end-development/{lecture-importance-of-accessibility-and-good-html-structure => lecture-accessible-media-elements}/672a55b5c0c14493328fe36e.md (100%) rename curriculum/challenges/english/25-front-end-development/{lecture-importance-of-accessibility-and-good-html-structure => lecture-accessible-media-elements}/672a55dd1d86bc939606e204.md (100%) rename curriculum/challenges/english/25-front-end-development/{lecture-importance-of-accessibility-and-good-html-structure => lecture-accessible-media-elements}/672a55eb7791559421ff0cd3.md (100%) rename curriculum/challenges/english/25-front-end-development/{lecture-importance-of-accessibility-and-good-html-structure => lecture-accessible-media-elements}/672a55fbc2d95a9453151caf.md (100%) rename curriculum/challenges/english/25-front-end-development/{lecture-importance-of-accessibility-and-good-html-structure => lecture-accessible-tables-forms}/672a539b887ec68c593cdc4b.md (100%) rename curriculum/challenges/english/25-front-end-development/{lecture-importance-of-accessibility-and-good-html-structure => lecture-accessible-tables-forms}/672a53ae8f1ad28c8a1ed0f0.md (100%) rename curriculum/challenges/english/25-front-end-development/{lecture-importance-of-accessibility-and-good-html-structure => lecture-introduction-to-aria}/672a53cf67140d8cd85d4b0f.md (100%) rename curriculum/challenges/english/25-front-end-development/{lecture-importance-of-accessibility-and-good-html-structure => lecture-introduction-to-aria}/672a549231b8728f7171ed9d.md (100%) rename curriculum/challenges/english/25-front-end-development/{lecture-importance-of-accessibility-and-good-html-structure => lecture-introduction-to-aria}/672a54a6675c168faa84252d.md (100%) rename curriculum/challenges/english/25-front-end-development/{lecture-importance-of-accessibility-and-good-html-structure => lecture-introduction-to-aria}/672a54bc58319c8fe6f78ad4.md (100%) rename curriculum/challenges/english/25-front-end-development/{lecture-importance-of-accessibility-and-good-html-structure => lecture-introduction-to-aria}/672a54ce90c19e9038f481d7.md (100%) rename curriculum/challenges/english/25-front-end-development/{lecture-importance-of-accessibility-and-good-html-structure => lecture-introduction-to-aria}/672a54dff9dc439089f1a219.md (100%) rename curriculum/challenges/english/25-front-end-development/{lecture-importance-of-accessibility-and-good-html-structure => lecture-introduction-to-aria}/672a54f29d783890d1f94740.md (100%) rename curriculum/challenges/english/25-front-end-development/{lecture-importance-of-accessibility-and-good-html-structure => lecture-introduction-to-aria}/672a5507d857a891139abc7f.md (100%) rename curriculum/challenges/english/25-front-end-development/{lecture-importance-of-accessibility-and-good-html-structure => lecture-introduction-to-aria}/672a551975938a916c74802c.md (100%) diff --git a/client/i18n/locales/english/intro.json b/client/i18n/locales/english/intro.json index d2fb4026586..5045108e165 100644 --- a/client/i18n/locales/english/intro.json +++ b/client/i18n/locales/english/intro.json @@ -2017,6 +2017,24 @@ "In these lecture videos, you will learn about accessibility and its importance, assistive tools for people with disabilities, HTML attributes that let you create inclusive websites, accessibility best practices, and much more." ] }, + "lecture-accessible-tables-forms": { + "title": "Working with Accessible Tables and Forms", + "intro": [ + "In these lecture videos, you will learn about how to create accessible tables and forms." + ] + }, + "lecture-introduction-to-aria": { + "title": "Introduction to ARIA", + "intro": [ + "In these lecture videos, you will learn about working with ARIA roles." + ] + }, + "lecture-accessible-media-elements": { + "title": "Working with Accessible Media Elements", + "intro": [ + "In these lecture videos, you will learn about how to create accessible links, audio and video content." + ] + }, "lab-checkout-page": { "title": "Build a Checkout Page", "intro": [ diff --git a/client/src/pages/learn/full-stack-developer/lecture-accessible-media-elements/index.md b/client/src/pages/learn/full-stack-developer/lecture-accessible-media-elements/index.md new file mode 100644 index 00000000000..8456300e04d --- /dev/null +++ b/client/src/pages/learn/full-stack-developer/lecture-accessible-media-elements/index.md @@ -0,0 +1,9 @@ +--- +title: Introduction to the Working with Accessible Media Elements +block: lecture-accessible-media-elements +superBlock: full-stack-developer +--- + +## Introduction to the Working with Accessible Media Elements + +In these lecture videos, you will learn about how to create accessible links, audio and video content. diff --git a/client/src/pages/learn/full-stack-developer/lecture-accessible-tables-forms/index.md b/client/src/pages/learn/full-stack-developer/lecture-accessible-tables-forms/index.md new file mode 100644 index 00000000000..67f3153c0db --- /dev/null +++ b/client/src/pages/learn/full-stack-developer/lecture-accessible-tables-forms/index.md @@ -0,0 +1,9 @@ +--- +title: Introduction to the Working with Accessible Tables and Forms +block: lecture-accessible-tables-forms +superBlock: full-stack-developer +--- + +## Introduction to the Working with Accessible Tables and Forms + +In these lecture videos, you will learn about how to create accessible tables and forms. diff --git a/client/src/pages/learn/full-stack-developer/lecture-introduction-to-aria/index.md b/client/src/pages/learn/full-stack-developer/lecture-introduction-to-aria/index.md new file mode 100644 index 00000000000..85de28a720a --- /dev/null +++ b/client/src/pages/learn/full-stack-developer/lecture-introduction-to-aria/index.md @@ -0,0 +1,9 @@ +--- +title: Introduction to the Introduction to ARIA +block: lecture-introduction-to-aria +superBlock: full-stack-developer +--- + +## Introduction to the Introduction to ARIA + +In these lecture videos, you will learn about working with ARIA roles. diff --git a/curriculum/challenges/_meta/lecture-accessible-media-elements/meta.json b/curriculum/challenges/_meta/lecture-accessible-media-elements/meta.json new file mode 100644 index 00000000000..51355fbff27 --- /dev/null +++ b/curriculum/challenges/_meta/lecture-accessible-media-elements/meta.json @@ -0,0 +1,27 @@ +{ + "name": "Working with Accessible Media Elements", + "isUpcomingChange": false, + "blockType": "lecture", + "blockLayout": "challenge-list", + "dashedName": "lecture-accessible-media-elements", + "superBlock": "full-stack-developer", + "challengeOrder": [ + { + "id": "672a55b5c0c14493328fe36e", + "title": "When Is the alt Attribute Needed, and What Are Some Examples of Good Alt Text?" + }, + { + "id": "672a55dd1d86bc939606e204", + "title": "What Are the Accessibility Benefits for Good Link Text, and What Are Examples of Good Link Text?" + }, + { + "id": "672a55eb7791559421ff0cd3", + "title": "What Are Good Ways to Make Audio and Video Content Accessible?" + }, + { + "id": "672a55fbc2d95a9453151caf", + "title": "What Are Some Ways to Make Web Applications Keyboard Accessible?" + } + ], + "helpCategory": "HTML-CSS" +} diff --git a/curriculum/challenges/_meta/lecture-accessible-tables-forms/meta.json b/curriculum/challenges/_meta/lecture-accessible-tables-forms/meta.json new file mode 100644 index 00000000000..073ec212384 --- /dev/null +++ b/curriculum/challenges/_meta/lecture-accessible-tables-forms/meta.json @@ -0,0 +1,19 @@ +{ + "name": "Working with Accessible Tables and Forms", + "isUpcomingChange": false, + "blockType": "lecture", + "blockLayout": "challenge-list", + "dashedName": "lecture-accessible-tables-forms", + "superBlock": "full-stack-developer", + "challengeOrder": [ + { + "id": "672a539b887ec68c593cdc4b", + "title": "What Are Best Practices for Tables and Accessibility?" + }, + { + "id": "672a53ae8f1ad28c8a1ed0f0", + "title": "Why Is It Important for Inputs to Have an Associated Label?" + } + ], + "helpCategory": "HTML-CSS" +} diff --git a/curriculum/challenges/_meta/lecture-importance-of-accessibility-and-good-html-structure/meta.json b/curriculum/challenges/_meta/lecture-importance-of-accessibility-and-good-html-structure/meta.json index 01ef97e83d1..26d489cca86 100644 --- a/curriculum/challenges/_meta/lecture-importance-of-accessibility-and-good-html-structure/meta.json +++ b/curriculum/challenges/_meta/lecture-importance-of-accessibility-and-good-html-structure/meta.json @@ -37,66 +37,6 @@ { "id": "672a538c029f9e8c1687460e", "title": "How Does Proper Heading Level Structure Affect Accessibility?" - }, - { - "id": "672a539b887ec68c593cdc4b", - "title": "What Are Best Practices for Tables and Accessibility?" - }, - { - "id": "672a53ae8f1ad28c8a1ed0f0", - "title": "Why Is It Important for Inputs to Have an Associated Label?" - }, - { - "id": "672a53cf67140d8cd85d4b0f", - "title": "What Is the Purpose of WAI-ARIA, and How Does It Work?" - }, - { - "id": "672a549231b8728f7171ed9d", - "title": "What Are ARIA Roles?" - }, - { - "id": "672a54a6675c168faa84252d", - "title": "What Are the Roles of the aria-label and aria-labelledby Attributes?" - }, - { - "id": "672a54bc58319c8fe6f78ad4", - "title": "What Is the aria-hidden Attribute, and How Does It Work?" - }, - { - "id": "672a54ce90c19e9038f481d7", - "title": "What Is the aria-expanded Attribute, and How Does It Work?" - }, - { - "id": "672a54dff9dc439089f1a219", - "title": "What Is the aria-live Attribute, and How Does It Work?" - }, - { - "id": "672a54f29d783890d1f94740", - "title": "What Are Some Common ARIA States Used on Custom Control Elements?" - }, - { - "id": "672a5507d857a891139abc7f", - "title": "What Is the aria-controls Attribute, and How Does It Work?" - }, - { - "id": "672a551975938a916c74802c", - "title": "What Is the aria-describedby Attribute, and How Does It Work?" - }, - { - "id": "672a55b5c0c14493328fe36e", - "title": "When Is the alt Attribute Needed, and What Are Some Examples of Good Alt Text?" - }, - { - "id": "672a55dd1d86bc939606e204", - "title": "What Are the Accessibility Benefits for Good Link Text, and What Are Examples of Good Link Text?" - }, - { - "id": "672a55eb7791559421ff0cd3", - "title": "What Are Good Ways to Make Audio and Video Content Accessible?" - }, - { - "id": "672a55fbc2d95a9453151caf", - "title": "What Are Some Ways to Make Web Applications Keyboard Accessible?" } ], "helpCategory": "HTML-CSS" diff --git a/curriculum/challenges/_meta/lecture-introduction-to-aria/meta.json b/curriculum/challenges/_meta/lecture-introduction-to-aria/meta.json new file mode 100644 index 00000000000..5afb62e9910 --- /dev/null +++ b/curriculum/challenges/_meta/lecture-introduction-to-aria/meta.json @@ -0,0 +1,47 @@ +{ + "name": "Introduction to ARIA", + "isUpcomingChange": false, + "blockType": "lecture", + "blockLayout": "challenge-list", + "dashedName": "lecture-introduction-to-aria", + "superBlock": "full-stack-developer", + "challengeOrder": [ + { + "id": "672a53cf67140d8cd85d4b0f", + "title": "What Is the Purpose of WAI-ARIA, and How Does It Work?" + }, + { + "id": "672a549231b8728f7171ed9d", + "title": "What Are ARIA Roles?" + }, + { + "id": "672a54a6675c168faa84252d", + "title": "What Are the Roles of the aria-label and aria-labelledby Attributes?" + }, + { + "id": "672a54bc58319c8fe6f78ad4", + "title": "What Is the aria-hidden Attribute, and How Does It Work?" + }, + { + "id": "672a54ce90c19e9038f481d7", + "title": "What Is the aria-expanded Attribute, and How Does It Work?" + }, + { + "id": "672a54dff9dc439089f1a219", + "title": "What Is the aria-live Attribute, and How Does It Work?" + }, + { + "id": "672a54f29d783890d1f94740", + "title": "What Are Some Common ARIA States Used on Custom Control Elements?" + }, + { + "id": "672a5507d857a891139abc7f", + "title": "What Is the aria-controls Attribute, and How Does It Work?" + }, + { + "id": "672a551975938a916c74802c", + "title": "What Is the aria-describedby Attribute, and How Does It Work?" + } + ], + "helpCategory": "HTML-CSS" +} diff --git a/curriculum/challenges/english/25-front-end-development/lecture-importance-of-accessibility-and-good-html-structure/672a55b5c0c14493328fe36e.md b/curriculum/challenges/english/25-front-end-development/lecture-accessible-media-elements/672a55b5c0c14493328fe36e.md similarity index 100% rename from curriculum/challenges/english/25-front-end-development/lecture-importance-of-accessibility-and-good-html-structure/672a55b5c0c14493328fe36e.md rename to curriculum/challenges/english/25-front-end-development/lecture-accessible-media-elements/672a55b5c0c14493328fe36e.md diff --git a/curriculum/challenges/english/25-front-end-development/lecture-importance-of-accessibility-and-good-html-structure/672a55dd1d86bc939606e204.md b/curriculum/challenges/english/25-front-end-development/lecture-accessible-media-elements/672a55dd1d86bc939606e204.md similarity index 100% rename from curriculum/challenges/english/25-front-end-development/lecture-importance-of-accessibility-and-good-html-structure/672a55dd1d86bc939606e204.md rename to curriculum/challenges/english/25-front-end-development/lecture-accessible-media-elements/672a55dd1d86bc939606e204.md diff --git a/curriculum/challenges/english/25-front-end-development/lecture-importance-of-accessibility-and-good-html-structure/672a55eb7791559421ff0cd3.md b/curriculum/challenges/english/25-front-end-development/lecture-accessible-media-elements/672a55eb7791559421ff0cd3.md similarity index 100% rename from curriculum/challenges/english/25-front-end-development/lecture-importance-of-accessibility-and-good-html-structure/672a55eb7791559421ff0cd3.md rename to curriculum/challenges/english/25-front-end-development/lecture-accessible-media-elements/672a55eb7791559421ff0cd3.md diff --git a/curriculum/challenges/english/25-front-end-development/lecture-importance-of-accessibility-and-good-html-structure/672a55fbc2d95a9453151caf.md b/curriculum/challenges/english/25-front-end-development/lecture-accessible-media-elements/672a55fbc2d95a9453151caf.md similarity index 100% rename from curriculum/challenges/english/25-front-end-development/lecture-importance-of-accessibility-and-good-html-structure/672a55fbc2d95a9453151caf.md rename to curriculum/challenges/english/25-front-end-development/lecture-accessible-media-elements/672a55fbc2d95a9453151caf.md diff --git a/curriculum/challenges/english/25-front-end-development/lecture-importance-of-accessibility-and-good-html-structure/672a539b887ec68c593cdc4b.md b/curriculum/challenges/english/25-front-end-development/lecture-accessible-tables-forms/672a539b887ec68c593cdc4b.md similarity index 100% rename from curriculum/challenges/english/25-front-end-development/lecture-importance-of-accessibility-and-good-html-structure/672a539b887ec68c593cdc4b.md rename to curriculum/challenges/english/25-front-end-development/lecture-accessible-tables-forms/672a539b887ec68c593cdc4b.md diff --git a/curriculum/challenges/english/25-front-end-development/lecture-importance-of-accessibility-and-good-html-structure/672a53ae8f1ad28c8a1ed0f0.md b/curriculum/challenges/english/25-front-end-development/lecture-accessible-tables-forms/672a53ae8f1ad28c8a1ed0f0.md similarity index 100% rename from curriculum/challenges/english/25-front-end-development/lecture-importance-of-accessibility-and-good-html-structure/672a53ae8f1ad28c8a1ed0f0.md rename to curriculum/challenges/english/25-front-end-development/lecture-accessible-tables-forms/672a53ae8f1ad28c8a1ed0f0.md diff --git a/curriculum/challenges/english/25-front-end-development/lecture-importance-of-accessibility-and-good-html-structure/672a53cf67140d8cd85d4b0f.md b/curriculum/challenges/english/25-front-end-development/lecture-introduction-to-aria/672a53cf67140d8cd85d4b0f.md similarity index 100% rename from curriculum/challenges/english/25-front-end-development/lecture-importance-of-accessibility-and-good-html-structure/672a53cf67140d8cd85d4b0f.md rename to curriculum/challenges/english/25-front-end-development/lecture-introduction-to-aria/672a53cf67140d8cd85d4b0f.md diff --git a/curriculum/challenges/english/25-front-end-development/lecture-importance-of-accessibility-and-good-html-structure/672a549231b8728f7171ed9d.md b/curriculum/challenges/english/25-front-end-development/lecture-introduction-to-aria/672a549231b8728f7171ed9d.md similarity index 100% rename from curriculum/challenges/english/25-front-end-development/lecture-importance-of-accessibility-and-good-html-structure/672a549231b8728f7171ed9d.md rename to curriculum/challenges/english/25-front-end-development/lecture-introduction-to-aria/672a549231b8728f7171ed9d.md diff --git a/curriculum/challenges/english/25-front-end-development/lecture-importance-of-accessibility-and-good-html-structure/672a54a6675c168faa84252d.md b/curriculum/challenges/english/25-front-end-development/lecture-introduction-to-aria/672a54a6675c168faa84252d.md similarity index 100% rename from curriculum/challenges/english/25-front-end-development/lecture-importance-of-accessibility-and-good-html-structure/672a54a6675c168faa84252d.md rename to curriculum/challenges/english/25-front-end-development/lecture-introduction-to-aria/672a54a6675c168faa84252d.md diff --git a/curriculum/challenges/english/25-front-end-development/lecture-importance-of-accessibility-and-good-html-structure/672a54bc58319c8fe6f78ad4.md b/curriculum/challenges/english/25-front-end-development/lecture-introduction-to-aria/672a54bc58319c8fe6f78ad4.md similarity index 100% rename from curriculum/challenges/english/25-front-end-development/lecture-importance-of-accessibility-and-good-html-structure/672a54bc58319c8fe6f78ad4.md rename to curriculum/challenges/english/25-front-end-development/lecture-introduction-to-aria/672a54bc58319c8fe6f78ad4.md diff --git a/curriculum/challenges/english/25-front-end-development/lecture-importance-of-accessibility-and-good-html-structure/672a54ce90c19e9038f481d7.md b/curriculum/challenges/english/25-front-end-development/lecture-introduction-to-aria/672a54ce90c19e9038f481d7.md similarity index 100% rename from curriculum/challenges/english/25-front-end-development/lecture-importance-of-accessibility-and-good-html-structure/672a54ce90c19e9038f481d7.md rename to curriculum/challenges/english/25-front-end-development/lecture-introduction-to-aria/672a54ce90c19e9038f481d7.md diff --git a/curriculum/challenges/english/25-front-end-development/lecture-importance-of-accessibility-and-good-html-structure/672a54dff9dc439089f1a219.md b/curriculum/challenges/english/25-front-end-development/lecture-introduction-to-aria/672a54dff9dc439089f1a219.md similarity index 100% rename from curriculum/challenges/english/25-front-end-development/lecture-importance-of-accessibility-and-good-html-structure/672a54dff9dc439089f1a219.md rename to curriculum/challenges/english/25-front-end-development/lecture-introduction-to-aria/672a54dff9dc439089f1a219.md diff --git a/curriculum/challenges/english/25-front-end-development/lecture-importance-of-accessibility-and-good-html-structure/672a54f29d783890d1f94740.md b/curriculum/challenges/english/25-front-end-development/lecture-introduction-to-aria/672a54f29d783890d1f94740.md similarity index 100% rename from curriculum/challenges/english/25-front-end-development/lecture-importance-of-accessibility-and-good-html-structure/672a54f29d783890d1f94740.md rename to curriculum/challenges/english/25-front-end-development/lecture-introduction-to-aria/672a54f29d783890d1f94740.md diff --git a/curriculum/challenges/english/25-front-end-development/lecture-importance-of-accessibility-and-good-html-structure/672a5507d857a891139abc7f.md b/curriculum/challenges/english/25-front-end-development/lecture-introduction-to-aria/672a5507d857a891139abc7f.md similarity index 100% rename from curriculum/challenges/english/25-front-end-development/lecture-importance-of-accessibility-and-good-html-structure/672a5507d857a891139abc7f.md rename to curriculum/challenges/english/25-front-end-development/lecture-introduction-to-aria/672a5507d857a891139abc7f.md diff --git a/curriculum/challenges/english/25-front-end-development/lecture-importance-of-accessibility-and-good-html-structure/672a551975938a916c74802c.md b/curriculum/challenges/english/25-front-end-development/lecture-introduction-to-aria/672a551975938a916c74802c.md similarity index 100% rename from curriculum/challenges/english/25-front-end-development/lecture-importance-of-accessibility-and-good-html-structure/672a551975938a916c74802c.md rename to curriculum/challenges/english/25-front-end-development/lecture-introduction-to-aria/672a551975938a916c74802c.md diff --git a/curriculum/superblock-structure/full-stack.json b/curriculum/superblock-structure/full-stack.json index 7771530757b..f6a6941cfec 100644 --- a/curriculum/superblock-structure/full-stack.json +++ b/curriculum/superblock-structure/full-stack.json @@ -105,6 +105,9 @@ { "dashedName": "lecture-importance-of-accessibility-and-good-html-structure" }, + { "dashedName": "lecture-accessible-tables-forms" }, + { "dashedName": "lecture-introduction-to-aria" }, + { "dashedName": "lecture-accessible-media-elements" }, { "dashedName": "lab-checkout-page" }, { "dashedName": "lab-movie-review-page" }, { "dashedName": "lab-multimedia-player" },