fix(curriculum): small fixes in accessibility review (#57643)

This commit is contained in:
Dario-DC
2024-12-21 02:30:50 +01:00
committed by GitHub
parent cb28ae850c
commit ec95573cb0

View File

@@ -15,11 +15,11 @@ Review the concepts below to prepare for the upcoming quiz.
## Assistive Technology for Accessibility
- **Screen readers**: software programs that read the content of a computer screen out loud. They are used by people who are blind or visually impaired to access the web.
- **Large text or braille keyboards**: used by people with visual impairments to access the web.
- **Screen magnifiers**: software programs that enlarge the content of a computer screen. They are used by people with low vision to access the web.
- **Alternative pointing devices**: used by people with mobility impairments to access the web. This includes devices such as joysticks, trackballs, and touchpads.
- **Voice recognition**: used by people with mobility impairments to access the web. It allows users to control a computer using their voice.
- **Screen readers**: Software programs that read the content of a computer screen out loud. They are used by people who are blind or visually impaired to access the web.
- **Large text or braille keyboards**: Used by people with visual impairments to access the web.
- **Screen magnifiers**: Software programs that enlarge the content of a computer screen. They are used by people with low vision to access the web.
- **Alternative pointing devices**: Used by people with mobility impairments to access the web. This includes devices such as joysticks, trackballs, and touchpads.
- **Voice recognition**: Used by people with mobility impairments to access the web. It allows users to control a computer using their voice.
## Accessibility Auditing Tools
@@ -27,26 +27,26 @@ Review the concepts below to prepare for the upcoming quiz.
## Accessibility Best Practices
- **Proper heading level structure**: You should use proper heading levels to create a logical structure for your content. This helps people using screen readers and other assistive technologies understand the content of your website.
- **Accessibility and Tables**: When using tables, you should use the `<th>` element to define header cells and the `<td>` element to define data cells. This helps people using screen readers and other assistive technologies understand the structure of the table.
- **Importance for inputs to have an associated label**: You should use the `<label>` element to associate labels with form inputs. This helps people using screen readers and other assistive technologies understand the purpose of the input.
- **Importance of good `alt` text**: You should use the `alt` attribute to provide a text alternative for images. This helps people using screen readers and other assistive technologies understand the content of the image.
- **Importance of good link text**: You should use descriptive link text to help users understand the purpose of the link. This helps people using screen readers and other assistive technologies understand the purpose of the link.
- **Proper heading level structure**: You should use proper heading levels to create a logical structure for your content. This helps people using assistive technologies understand the content of your website.
- **Accessibility and Tables**: When using tables, you should use the `<th>` element to define header cells and the `<td>` element to define data cells. This helps people using assistive technologies understand the structure of the table.
- **Importance for inputs to have an associated label**: You should use the `<label>` element to associate labels with form inputs. This helps people using assistive technologies understand the purpose of the input.
- **Importance of good `alt` text**: You should use the `alt` attribute to provide a text alternative for images. This helps people using assistive technologies understand the content of the image.
- **Importance of good link text**: You should use descriptive link text to help users understand the purpose of the link. This helps people using assistive technologies understand the purpose of the link.
- **Best practices for making audio and video content accessible**: You should provide captions and transcripts for audio and video content to make it accessible to people with hearing impairments. You should also provide audio descriptions for video content to make it accessible to people with visual impairments.
- **`tabindex` attribute**: used to make elements focusable and define the relative order in which they should be navigated using the keyboard. It is important to never use the `tabindex` attribute with a value greater than 0. Instead, you should either use a value of 0 or -1. For more information, review the prior lecture video on keyboard accessibility.
- **`accesskey` attribute**: used to define a keyboard shortcut for an element. This can help users with mobility impairments navigate the website more easily.
- **`tabindex` attribute**: Used to make elements focusable and define the relative order in which they should be navigated using the keyboard. It is important to never use the `tabindex` attribute with a value greater than 0. Instead, you should either use a value of 0 or -1. For more information, review the prior lecture video on keyboard accessibility.
- **`accesskey` attribute**: Used to define a keyboard shortcut for an element. This can help users with mobility impairments navigate the website more easily.
## WAI-ARIA, Roles, and Attributes
- **WAI-ARIA**: a set of attributes that can be added to HTML elements to improve accessibility. It provides additional information to assistive technologies about the purpose and structure of the content.
- **Aria roles**: a set of predefined roles that can be added to HTML elements to define their purpose. This helps people using screen readers and other assistive technologies understand the content of the website. Examples include `role="tab"`, `role="menu"`, and `role="alert"`.
- **WAI-ARIA**: It stands for Web Accessibility Initiative - Accessible Rich Internet Applications. It is a set of attributes that can be added to HTML elements to improve accessibility. It provides additional information to assistive technologies about the purpose and structure of the content.
- **Aria roles**: A set of predefined roles that can be added to HTML elements to define their purpose. This helps people using assistive technologies understand the content of the website. Examples include `role="tab"`, `role="menu"`, and `role="alert"`.
- **`aria-label` and `aria-labelledby` attributes**: These attributes are used to give an element a programmatic (or accessible) name, which helps people using assistive technology (such as screen readers) understand the purpose of the element. They are often used when the visual label for an element is an image or symbol rather than text. `aria-label` allows you to define the name directly in the attribute while `aria-labelledby` allows you to reference existing text on the page.
- **`aria-hidden` attribute**: Used to hide an element from people using assistive technology such as screen readers. For example, this can be used to hide decorative images that do not provide any meaningful content.
- **`aria-expanded` attribute**: used to convey the state of a toggle (or disclosure) feature to screen reader users.
- **`aria-live` attribute**: used to indicate that an element's content is important enough to require that any changes to the content should be announced immediately to screen reader users. This can include status messages like updating the number of results returned from a search, or an error message displayed after an unsuccessful form submission.
- **Common Aria states**: Common Aria states include `aria-haspopup`, `aria-checked`, `aria-disabled`, and `aria-selected`. These attributes can be used to indicate the state of an element and help people using screen readers and other assistive technologies understand the content of the website.
- **`aria-controls` attribute**: used to associate an element with another element that it controls. This helps people using screen readers and other assistive technologies understand the relationship between the elements.
- **`aria-describedby` attribute**: used to provide additional information about an element by associating it with another element that contains the information. This gives people using screen readers immediate access to the additional information when they navigate to the element. Common usage would include associating formatting instructions to a text input or an error message to an input after an invalid form submission.
- **`aria-expanded` attribute**: Used to convey the state of a toggle (or disclosure) feature to screen reader users.
- **`aria-live` attribute**: Used to indicate that an element's content is important enough to require that any changes to the content should be announced immediately to screen reader users. This can include status messages like updating the number of results returned from a search, or an error message displayed after an unsuccessful form submission.
- **Common Aria states**: Common Aria states include `aria-haspopup`, `aria-checked`, `aria-disabled`, and `aria-selected`. These attributes can be used to indicate the state of an element and help people using assistive technologies understand the content of the website.
- **`aria-controls` attribute**: Used to associate an element with another element that it controls. This helps people using assistive technologies understand the relationship between the elements.
- **`aria-describedby` attribute**: Used to provide additional information about an element by associating it with another element that contains the information. This gives people using screen readers immediate access to the additional information when they navigate to the element. Common usage would include associating formatting instructions to a text input or an error message to an input after an invalid form submission.
# --assignment--