mirror of
https://github.com/freeCodeCamp/freeCodeCamp.git
synced 2026-05-28 18:26:54 +00:00
chore(curriculum): remove video from ARIA and Accessible Media Elements lectures (#61587)
This commit is contained in:
+1
-8
@@ -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
-8
@@ -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.
|
||||
|
||||
-8
@@ -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.
|
||||
|
||||
-2
@@ -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
-8
@@ -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
-8
@@ -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
-8
@@ -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
-8
@@ -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
-8
@@ -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
-8
@@ -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).
|
||||
|
||||
+2
-9
@@ -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
-8
@@ -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
-8
@@ -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.
|
||||
|
||||
Reference in New Issue
Block a user