fix(curriculum): ensure acronym Aria is in all caps (#59728)

2026-05-28 18:26:54 +00:00 · 2025-04-15 14:22:10 +01:00
parent 6d213cfb7a
commit d5d917f0bb
2 changed files with 18 additions and 18 deletions
@@ -33,13 +33,13 @@ Review the concepts below to prepare for the upcoming quiz.
 - **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.  
+- **`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.

 ```html
 <p tabindex="-1">Sorry, there was an error with your submission.</p>
 ```

- **`accesskey` attribute**: Used to define a keyboard shortcut for an element. This can help users with mobility impairments navigate the website more easily.  
+- **`accesskey` attribute**: Used to define a keyboard shortcut for an element. This can help users with mobility impairments navigate the website more easily.

 ```html
 <button accesskey="s">Save</button>
@@ -50,7 +50,7 @@ Review the concepts below to prepare for the upcoming quiz.
 ## WAI-ARIA, Roles, and Attributes

 - **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 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"`.

 There are six main categories of ARIA roles:

@@ -61,7 +61,7 @@ There are six main categories of ARIA roles:
 - **Window roles**: These roles define sub-windows, like pop up modal dialogues. These roles include `alertdialog` and `dialog`. 
 - **Abstract roles**: These roles help organize the document. They're only meant to be used internally by the browser, not by developers, so you should know that they exist but you shouldn't use them on your websites or web applications.

- **`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-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.

 ```html
 <button aria-label="Search">
@@ -74,7 +74,7 @@ There are six main categories of ARIA roles:
 <button type="button" id="search-btn">Search</button>
 ```

- **`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-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.

 ```html
 <button>
@@ -83,13 +83,13 @@ There are six main categories of ARIA roles:
 </button>
 ```

- **`aria-expanded` attribute**: Used to convey the state of a toggle (or disclosure) feature to screen reader users.  
+- **`aria-expanded` attribute**: Used to convey the state of a toggle (or disclosure) feature to screen reader users.

 ```html
 <button aria-expanded="true">Menu</button>
 ```

- **`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.  
+- **`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.

 ```html
 <div aria-live="assertive">
@@ -103,9 +103,9 @@ There are six main categories of ARIA roles:
 </div>
 ```

- **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-haspopup` attribute**: This state is used to indicate that an interactive element will trigger a pop-up element when activated. You can only use the `aria-haspopup` attribute when the pop-up has one of the following roles: `menu`, `listbox`, `tree`, `grid`, or `dialog`. The value of `aria-haspopup` must be either one of these roles or `true`, which is the same as `menu`.  
- 
+- **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-haspopup` attribute**: This state is used to indicate that an interactive element will trigger a pop-up element when activated. You can only use the `aria-haspopup` attribute when the pop-up has one of the following roles: `menu`, `listbox`, `tree`, `grid`, or `dialog`. The value of `aria-haspopup` must be either one of these roles or `true`, which is the same as `menu`.
+
 ```html
 <button id="menubutton" aria-haspopup="menu" aria-controls="filemenu" aria-expanded="false">File</button>
 <ul id="filemenu" role="menu" aria-labelledby="menubutton" hidden>
@@ -116,19 +116,19 @@ There are six main categories of ARIA roles:
 </ul>
 ```

- **`aria-checked` attribute**: This attribute is used to indicate whether an element is in the checked state. It is most commonly used when creating custom checkboxes, radio buttons, switches, and listboxes.  
+- **`aria-checked` attribute**: This attribute is used to indicate whether an element is in the checked state. It is most commonly used when creating custom checkboxes, radio buttons, switches, and listboxes.

 ```html
 <div role="checkbox" aria-checked="true" tabindex="0">Checkbox</div>
 ```

- **`aria-disabled` attribute**: This state is used to indicate that an element is disabled only to people using assistive technologies, such as screen readers.  
+- **`aria-disabled` attribute**: This state is used to indicate that an element is disabled only to people using assistive technologies, such as screen readers.

 ```html
 <div role="button" tabindex="-1" aria-disabled="true">Edit</div>
 ```

- **`aria-selected` attribute**: 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.  
+- **`aria-selected` attribute**: 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.

 ```html
 <div role="tablist">
@@ -138,7 +138,7 @@ There are six main categories of ARIA roles:
 </div>
 ```

- **`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-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.

 ```html
 <div role="tablist">
@@ -154,7 +154,7 @@ There are six main categories of ARIA roles:
 </div>
 ```

- **`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-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.

 ```html
 <form>
@@ -115,7 +115,7 @@ Review the concepts below to prepare for the upcoming prep exam.
  type="text"
  id="name"
  name="name"
-  placeholder="e.g. Quincy Larson" 
+  placeholder="e.g. Quincy Larson"
  size="20"
  minlength="5"
  maxlength="30"
@@ -286,12 +286,12 @@ Review the concepts below to prepare for the upcoming prep exam.
 ## WAI-ARIA, Roles, and Attributes

 - **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 assistive technologies understand the content of the website. Examples include `role="tab"`, `role="menu"`, and `role="alert"`.
+- **ARIA roles**: A set of predefined roles that can be added to HTML elements to define their purpose. This helps 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 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 assistive technologies 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 assistive technologies understand the content of the website.
+- **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 assistive technologies understand the content of the website.
 - **`aria-controls` attribute**: Used to associate an element with another element that it controls. This helps 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 helps assistive technologies understand the purpose of the element.