feat: improvements on glossary a11y (#34095)

* feat: improvements on a11y glossary entries * fix: macro * feat: improvements * feat: links * fix: macro * feat: improvements * revert: aria * feat: improvements * revert * feat: improvements Co-authored-by: Dipika Bhattacharya <[email protected]> * feat: improvements Co-authored-by: Dipika Bhattacharya <[email protected]> --------- Co-authored-by: Dipika Bhattacharya <[email protected]>
mdn · Jun 27, 2024 · ad2f2bb · ad2f2bb
1 parent b49ed0d
commit ad2f2bb
Show file tree

Hide file tree

Showing 3 changed files with 39 additions and 7 deletions.
diff --git a/files/en-us/glossary/accessibility/index.md b/files/en-us/glossary/accessibility/index.md
@@ -6,14 +6,25 @@ page-type: glossary-definition
 
 {{GlossarySidebar}}
 
-**Accessibility** (**A11Y**) refers to best practices for keeping a website usable despite physical and technical restrictions. Web accessibility is formally defined and discussed at the {{Glossary("W3C")}} through the {{Glossary("WAI","Web Accessibility Initiative")}} (WAI).
+**Accessibility** (**A11y**) means enabling as many people as possible to use websites, including those with limited abilities. The most common way to achieve this is by ensuring that assistive technologies work properly to access the content. These technologies include {{glossary("screen reader", "screen readers")}}, screen magnifiers, speech recognition tools, and alternative input devices.
+
+You can measure the accessibility of your website by using tools like [Lighthouse](https://developer.chrome.com/docs/lighthouse/accessibility/scoring) and the [Firefox Accessibility Inspector](https://firefox-source-docs.mozilla.org/devtools-user/accessibility_inspector/index.html).
+
+Web accessibility is formally defined and discussed at the {{Glossary("W3C")}} through the {{Glossary("WAI", "Web Accessibility Initiative (WAI)")}}.
 
 ## See also
 
-- [Accessibility resources](/en-US/docs/Web/Accessibility)
+- [Accessibility](/en-US/docs/Web/Accessibility)
 - [Learn accessibility](/en-US/docs/Learn/Accessibility)
-- [ARIA documentation](/en-US/docs/Web/Accessibility/ARIA)
+- [ARIA](/en-US/docs/Web/Accessibility/ARIA)
 - [Web accessibility](https://en.wikipedia.org/wiki/Web_accessibility) on Wikipedia
-- [Accessible Rich Internet Applications (WAI-ARIA)](https://w3c.github.io/aria/)
-- [The W3C Web Accessibility Initiative](https://www.w3.org/WAI/)
+- [Web Accessibility Initiative (WAI)](https://www.w3.org/WAI/) on W3C
+- [Accessible Rich Internet Applications (WAI-ARIA)](https://w3c.github.io/aria/) specification
 - [Web Accessibility In Mind](https://webaim.org/)
+- [Glossary](/en-US/docs/Glossary)
+
+  - {{Glossary("ARIA")}}
+  - {{Glossary("Screen reader")}}
+  - {{Glossary("Accessibility tree")}}
+  - {{Glossary("Accessible description")}}
+  - {{Glossary("Accessible name")}}
diff --git a/files/en-us/glossary/accessibility_tree/index.md b/files/en-us/glossary/accessibility_tree/index.md
@@ -18,7 +18,7 @@ There are four properties in an accessibility tree object:
   - : How do we describe this thing, if we want to provide more description beyond the name? The description of a table could explain what kind of information the table contains.
 - [**role**](/en-US/docs/Web/Accessibility/ARIA/Roles)
   - : What kind of thing is it? For example, is it a button, a nav bar, or a list of items?
-- **state**
+- [**state**](/en-US/docs/Web/Accessibility/ARIA/Attributes)
   - : Does it have a state? Examples include checked or unchecked checkbox states and collapsed or expanded states for the [`<summary>`](/en-US/docs/Web/HTML/Element/summary) element.
 
 Additionally, the accessibility tree often contains information on what can be done with an element: a link can be _followed_, a text input can be _typed into_, etc.
@@ -27,7 +27,16 @@ While still in draft form within the Web Incubator Community Group as of April 2
 
 ## See also
 
+- [Accessibility](/en-US/docs/Web/Accessibility)
+- [Learn accessibility](/en-US/docs/Learn/Accessibility)
+- [Web accessibility](https://en.wikipedia.org/wiki/Web_accessibility) on Wikipedia
+- [Web Accessibility In Mind](https://webaim.org/)
+- [ARIA](/en-US/docs/Web/Accessibility/ARIA)
+- [The W3C Web Accessibility Initiative (WAI)](https://www.w3.org/WAI/)
+- [Accessible Rich Internet Applications (WAI-ARIA)](https://w3c.github.io/aria/)
 - [Glossary](/en-US/docs/Glossary)
 
   - {{Glossary("Accessibility")}}
+  - {{Glossary("Accessible description")}}
+  - {{Glossary("Accessible name")}}
   - {{Glossary("ARIA")}}
diff --git a/files/en-us/glossary/accessible_name/index.md b/files/en-us/glossary/accessible_name/index.md
@@ -22,11 +22,23 @@ To create an association between visible content and an element or multiple text
 
 Many elements, such as sections of textual content, don't need an accessible name. All controls should have an accessible name. All images that convey information and aren't purely presentational do too.
 
-Assistive technologies will provide the user with the accessibility name property, which is the accessible name along with the element's role. While many elements don't need an accessible name, some content [roles](/en-US/docs/Web/Accessibility/ARIA/Roles) can benefit from having an accessible name. For example, a [`tabpanel`](/en-US/docs/Web/Accessibility/ARIA/Roles/tabpanel_role) is a section of content that appears after a user activates the associated element with a [`tab`](/en-US/docs/Web/Accessibility/ARIA/Roles/tab_role) role. This role can be set on an element with no needed name, like the {{HTMLElement("div")}} element. The `tab` is the control and must have an accessible name. The `tabpanel` is the child (content section) of the `tab`. Adding `aria-labelledby` to the `tabpanel` is a best practice.
+Assistive technologies provide users with the accessibility name property, which includes the accessible name along with the element's role. While many elements don't need an accessible name, it's necessary to provide an accessible name to override or supplement the content of elements with specified [roles](/en-US/docs/Web/Accessibility/ARIA/Roles). For example, a [`tabpanel`](/en-US/docs/Web/Accessibility/ARIA/Roles/tabpanel_role) is a section of content that appears after a user activates the associated element with a [`tab`](/en-US/docs/Web/Accessibility/ARIA/Roles/tab_role) role. This role can be set on an element with no needed name, like the {{HTMLElement("div")}} element. The `tab` is the control and must have an accessible name. The `tabpanel` is the child (content section) of the `tab`. Adding `aria-labelledby` to the `tabpanel` is a best practice.
 
 ## See also
 
 - [ARIA roles](/en-US/docs/Web/Accessibility/ARIA/Roles)
 - [ARIA attribute](/en-US/docs/Web/Accessibility/ARIA/Attributes)
+- [Accessible Name and Description Computation 1.2 (accname)](https://w3c.github.io/accname/#mapping_additional_nd_description)
 - [Accessibility](/en-US/docs/Web/Accessibility)
 - [Learn accessibility](/en-US/docs/Learn/Accessibility)
+- [Web accessibility](https://en.wikipedia.org/wiki/Web_accessibility) on Wikipedia
+- [Web Accessibility In Mind](https://webaim.org/)
+- [ARIA](/en-US/docs/Web/Accessibility/ARIA)
+- [The W3C Web Accessibility Initiative (WAI)](https://www.w3.org/WAI/)
+- [Accessible Rich Internet Applications (WAI-ARIA)](https://w3c.github.io/aria/)
+- [Glossary](/en-US/docs/Glossary)
+
+  - {{Glossary("Accessibility")}}
+  - {{Glossary("Accessibility tree")}}
+  - {{Glossary("Accessible description")}}
+  - {{Glossary("ARIA")}}