chore(curriculum): remove video from ARIA and Accessible Media Elements lectures (#61587)

This commit is contained in:
Supravisor
2025-07-30 15:53:09 +12:00
committed by GitHub
parent e87517fdff
commit e54fd8b1ef
13 changed files with 12 additions and 99 deletions
@@ -1,19 +1,12 @@
---
id: 672a55b5c0c14493328fe36e
title: When Is the alt Attribute Needed, and What Are Some Examples of Good Alt Text?
challengeType: 11
videoId: _yKzvDikHOI
challengeType: 19
dashedName: when-is-the-alt-attribute-needed
---
# --description--
Watch the video or read the transcript and answer the questions below.
# --transcript--
When is the `alt` attribute needed, and what are some examples of good `alt` text?
Alternative text, often abbreviated as `alt` text, is a brief text description of an image. It provides essential information about the image for users who cannot see it, such as people who use screen readers and other assistive technologies.
It's essential for making websites accessible to people with visual disabilities.
@@ -1,19 +1,12 @@
---
id: 672a55dd1d86bc939606e204
title: What Are the Accessibility Benefits for Good Link Text, and What Are Examples of Good Link Text?
challengeType: 11
videoId: JI_yg4ZivfM
challengeType: 19
dashedName: what-are-the-accessibility-benefits-for-good-link-text
---
# --description--
Watch the video or read the transcript and answer the questions below.
# --transcript--
What are the accessibility benefits for good link text, and what are examples of good link text?
Let's take a look at the benefits of writing good link texts in the context of accessibility, and some examples of good link texts.
The first visible benefit of a good link text is that it makes it easier for everyone to find information quickly. Descriptive links help users know where they're headed and what they'll access. This ensures the user doesn't feel lost and improves the overall user experience.
@@ -1,20 +1,12 @@
---
id: 672a55eb7791559421ff0cd3
title: What Are Good Ways to Make Audio and Video Content Accessible?
# change back to 11 when video is updated
challengeType: 19
# videoId: new-id-goes-here-when-ready
dashedName: what-are-good-ways-to-make-audio-and-video-content-accessible
---
# --description--
Read the transcript and answer the questions below.
# --transcript--
What are good ways to make audio and video content accessible?
Multimedia, especially video, has become the go-to format for sharing information online.
With this surge in content, there's a growing need to ensure everyone can access and enjoy video and audio content online, irrespective of their abilities or environment.
@@ -7,8 +7,6 @@ dashedName: what-are-some-ways-to-make-web-applications-keyboard-accessible
# --description--
What are some ways to make web applications keyboard accessible?
Many users rely on keyboards instead of mice due to physical disabilities, repetitive strain injuries, or personal preference. This includes users of screen readers and those who may not have a working mouse.
Keyboard accessibility ensures these users can navigate web applications effectively without barriers.
@@ -1,19 +1,12 @@
---
id: 672a53cf67140d8cd85d4b0f
title: What Is the Purpose of WAI-ARIA, and How Does It Work?
challengeType: 11
videoId: LNv_JZogKy0
challengeType: 19
dashedName: what-is-the-purpose-of-wai-aria
---
# --description--
Watch the video or read the transcript and answer the questions below.
# --transcript--
What is the purpose of WAI-ARIA, and how does it work?
Making static content accessible can be relatively straightforward, but dynamic content can be more challenging. This is where WAI-ARIA comes in.
Let's look at what WAI-ARIA is, its purpose, how it works, and some examples.
@@ -1,19 +1,12 @@
---
id: 672a549231b8728f7171ed9d
title: What Are ARIA Roles?
challengeType: 11
videoId: 9rEXBdjn5ZQ
challengeType: 19
dashedName: what-are-aria-roles
---
# --description--
Watch the video or read the transcript and answer the questions below.
# --transcript--
What are ARIA roles?
ARIA stands for Accessible Rich Internet Applications.
ARIA roles specify the semantic meaning of HTML elements. They're essential for making web content accessible to people who use assistive technologies, like screen readers.
@@ -1,19 +1,12 @@
---
id: 672a54a6675c168faa84252d
title: What Are the Roles of the aria-label and aria-labelledby Attributes?
challengeType: 11
videoId: WLb6vAfd_eE
challengeType: 19
dashedName: what-are-the-roles-of-the-aria-label-and-aria-labelledby-attributes
---
# --description--
Watch the video or read the transcript and answer the questions below.
# --transcript--
What are the roles of the `aria-label` and `aria-labelledby` attributes?
It is important to make sure that all users, including those living with disabilities, can access websites without issues.
For people using screen readers, the `aria-label` and `aria-labelledby` attributes provide crucial information about page elements that might be unclear or invisible.
@@ -1,19 +1,12 @@
---
id: 672a54bc58319c8fe6f78ad4
title: What Is the aria-hidden Attribute, and How Does It Work?
challengeType: 11
videoId: QedOQkZOBYc
challengeType: 19
dashedName: what-is-the-aria-hidden-attribute
---
# --description--
Watch the video or read the transcript and answer the questions below.
# --transcript--
What is the `aria-hidden` attribute, and how does it work?
If you ever need to display content while at the same time hiding it from people who use assistive technology, like screen readers, you can use the `aria-hidden` attribute.
You just need to add it to the HTML element that you want to hide and set its value to `true`, like you can see over here: `aria-hidden="true"`.
@@ -1,19 +1,12 @@
---
id: 672a54ce90c19e9038f481d7
title: What Is the aria-expanded Attribute, and How Does It Work?
challengeType: 11
videoId: EhZHqC1ZE_Q
challengeType: 19
dashedName: what-is-the-aria-expanded-attribute
---
# --description--
Watch the video or read the transcript and answer the questions below.
# --transcript--
What is the `aria-expanded` attribute, and how does it work?
The `aria-expanded` attribute is used for accessibility purposes to indicate if a control is expanded or collapsed. It's used in conjunction with collapsible widgets like menus, accordions and other disclosure widgets that control the visibility of content. The `aria-expanded` attribute is set to `true` if the control is expanded, or `false` if it is collapsed.
The information provided by `aria-expanded` allows people using screen readers to understand the current state of the control (whether it is expanded or collapsed).
@@ -1,19 +1,12 @@
---
id: 672a54dff9dc439089f1a219
title: What Is the aria-live Attribute, and How Does It Work?
challengeType: 11
videoId: LGkl102m2-s
challengeType: 19
dashedName: what-is-the-aria-live-attribute
---
# --description--
Watch the video or read the transcript and answer the questions below.
# --transcript--
What is the `aria-live` attribute and how does it work?
The `aria-live` attribute creates a live region on your page which can be used to notify screen reader users of dynamic content changes in the live region as they occur.
Common uses of live regions include messages that are displayed after an action has been taken (such as an error message or confirmation), content that updates periodically (such as a ticker, marquee, or countdown timer), or general status messages (such as updates about a process).
@@ -1,26 +1,19 @@
---
id: 672a54f29d783890d1f94740
title: What Are Some Common ARIA States Used on Custom Control Elements?
challengeType: 11
videoId: tzoL0L63V5g
challengeType: 19
dashedName: what-are-some-common-aria-states-used-on-custom-control-elements
---
# --description--
Watch the video or read the transcript and answer the questions below.
# --transcript--
What are some common ARIA states used on custom control elements?
Semantic form control elements like `input`, `select`, `textarea`, `button`, and `fieldset` have built-in states that are conveyed to assistive technologies.
For example, you could use the `disabled` attribute to disable a button or the `checked` attribute to indicate that a checkbox is checked.
But if you are creating a custom control element, you need to use ARIA attributes to convey the state of the control to assistive technologies.
In this lecture video, we will discuss a few common ARIA states that you can use on custom control elements.
In this lecture, we will discuss a few common ARIA states that you can use on custom control elements.
The first ARIA state we will discuss is `aria-selected`. This state is used to indicate that an element is selected. You can use this state on custom controls like a tabbed interface, a listbox, or a grid.
@@ -1,19 +1,12 @@
---
id: 672a5507d857a891139abc7f
title: What Is the aria-controls Attribute, and How Does It Work?
challengeType: 11
videoId: CIjzHpQHKFo
challengeType: 19
dashedName: what-is-the-aria-controls-attribute
---
# --description--
Watch the video or read the transcript and answer the questions below.
# --transcript--
What is the `aria-controls` attribute, and how does it work?
The `aria-controls` attribute is used to create a programmatic relationship between an element that controls the presence of another element on the page, and the element it controls. This relationship can help screen reader users better understand how the control works. Common uses include a set of tabs that control the visibility of different sections of content, or a button that toggles the visibility of a menu.
Let's take a look at an example to see how this works.
@@ -1,19 +1,12 @@
---
id: 672a551975938a916c74802c
title: What Is the aria-describedby Attribute, and How Does It Work?
challengeType: 11
videoId: IuYRdE-f28M
challengeType: 19
dashedName: what-is-the-aria-describedby-attribute
---
# --description--
Watch the video or read the transcript and answer the questions below.
# --transcript--
What is the `aria-describedby` attribute, and how does it work?
The `aria-describedby` attribute is used to provide additional information about an element to screen reader users by referencing existing content on the page. It creates a programmatic association between the element and the content (technically referred to as an accessible description), which screen readers can use to inform users of the additional information when they interact with the element.
The most common use for `aria-describedby` is to associate instructions and error messages with form inputs. Due to the various methods screen reader users have for navigating a page, they may miss these messages when navigating between inputs. Using `aria-describedby` helps ensure that they will hear them.