chore(cssxref): Replace links with cssxref macro in /web/accessibility

files/en-us/web/accessibility/aria/reference/roles/menuitemradio_role/index.md

@@ -116,7 +116,7 @@ If the `menuitemradio` is in a submenu in a `menubar` or a menu opened with a me
 
 The [`tabindex="-1"`](/en-US/docs/Web/HTML/Reference/Global_attributes/tabindex) makes the `menuitemradio` focusable but not part of the page tab sequence. Had we included `aria-checked="true"` it would have indicated that the `menuitemradio` was checked, and we would have visually styled the selected state to look checked using the attribute selector `[role='menuitemradio'][aria-checked='true']`. Instead, the presence of `aria-checked="false"` indicates to assistive technologies that the `menuitemradio` is checkable but not currently checked. The accessible name "purple" comes from the contents.
 
-The visual appearance of the selected state is a checked radio button which we can create using [generated content](/en-US/docs/Web/CSS/Guides/Generated_content), making it visible and the same color as the content by synchronizing with the `aria-checked` value using CSS [attribute selectors](/en-US/docs/Web/CSS/Reference/Selectors/Attribute_selectors) and changing the [`background-color`](/en-US/docs/Web/CSS/Reference/Properties/background-color).
+The visual appearance of the selected state is a checked radio button which we can create using [generated content](/en-US/docs/Web/CSS/Guides/Generated_content), making it visible and the same color as the content by synchronizing with the `aria-checked` value using CSS [attribute selectors](/en-US/docs/Web/CSS/Reference/Selectors/Attribute_selectors) and changing the {{cssxref("background-color")}}.
 
 ```css
 [role="menuitemradio"]::before {
@@ -136,7 +136,7 @@ The visual appearance of the selected state is a checked radio button which we c
 }
 ```
 
-Don't use the [`background`](/en-US/docs/Web/CSS/Reference/Properties/background) shorthand property, as that will override the [`background-clip`](/en-US/docs/Web/CSS/Reference/Properties/background-clip) property we used to create the radio button effect.
+Don't use the {{cssxref("background")}} shorthand property, as that will override the {{cssxref("background-clip")}} property we used to create the radio button effect.
 
 ### Prefer HTML
 

files/en-us/web/accessibility/aria/reference/roles/tab_role/index.md

@@ -134,7 +134,7 @@ All of the `tabpanel` elements have `tabindex="0"` to make them tabbable, and al
 </div>
 ```
 
-There is some basic styling applied that restyles the buttons and changes the [`z-index`](/en-US/docs/Web/CSS/Reference/Properties/z-index) of `tab` elements to give the illusion of it connecting to the `tabpanel` for active elements, and the illusion that inactive elements are behind the active `tabpanel`. You need to clearly distinguish the active tab from the inactive tabs, such as thicker borders or larger size.
+There is some basic styling applied that restyles the buttons and changes the {{cssxref("z-index")}} of `tab` elements to give the illusion of it connecting to the `tabpanel` for active elements, and the illusion that inactive elements are behind the active `tabpanel`. You need to clearly distinguish the active tab from the inactive tabs, such as thicker borders or larger size.
 
 ```css hidden
 .tabs {

files/en-us/web/accessibility/guides/cognitive_accessibility/index.md

@@ -121,7 +121,7 @@ The order of focus for interactive elements should make sense. To achieve this,
 
 ### Focused elements should be visibly focused
 
-When a user navigates using a keyboard, the UI should make it obvious which element currently has focus. Don't alter or remove the browser's default [`:focus`](/en-US/docs/Web/CSS/Reference/Selectors/:focus) styling, unless you're making focus even more obvious.
+When a user navigates using a keyboard, the UI should make it obvious which element currently has focus. Don't alter or remove the browser's default {{cssxref(":focus")}} styling, unless you're making focus even more obvious.
 
 ### Link text conveys meaning
 

files/en-us/web/accessibility/guides/colors_and_luminance/index.md

@@ -30,7 +30,7 @@ Luminance must be established before the contrast may be. When speaking of color
 
 ### Terminology
 
-Terminology can be confusing because different terms often describe the same thing. "Luminance" and "Saturation" are particularly important to get right. For example, "saturation" is known as "chroma" in some circles. In others, "chroma" and "saturation" are two different concepts. The "L" in the HSL color space is sometimes referred to as "luminosity," and other times as "lightness." Even something seemingly simple, like naming common colors, can be open to debate. For example, the color "crimson red" may be described in hex values as `#990000` by some and `#DC143C` by others. For this document, we'll use terminology as it is defined on the CSS [`<named-color>`](/en-US/docs/Web/CSS/Reference/Values/named-color) page.
+Terminology can be confusing because different terms often describe the same thing. "Luminance" and "Saturation" are particularly important to get right. For example, "saturation" is known as "chroma" in some circles. In others, "chroma" and "saturation" are two different concepts. The "L" in the HSL color space is sometimes referred to as "luminosity," and other times as "lightness." Even something seemingly simple, like naming common colors, can be open to debate. For example, the color "crimson red" may be described in hex values as `#990000` by some and `#DC143C` by others. For this document, we'll use terminology as it is defined on the CSS {{cssxref("named-color")}} page.
 
 When working with color, it's important to know which "color space" you are working in, as different color spaces map to different measurement systems.
 
@@ -40,7 +40,7 @@ Currently, the {{glossary("RGB", "RGB color space")}} predominates as the space
 
 ## The sRGB color space
 
-Color has many ways of being defined, as is apparent in the [`<color>` data type](/en-US/docs/Web/CSS/Reference/Values/color_value), including RGB, RGB decimal, RGB percent, HSL, HWB, LCH, Lab, and CMYK, among others.
+Color has many ways of being defined, as is apparent in the {{cssxref("&lt;color&gt;")}} data type, including RGB, RGB decimal, RGB percent, HSL, HWB, LCH, Lab, and CMYK, among others.
 
 For digital concerns, much of the technology has historically resided in the RGB color space. The RGB color model is extended to include "alpha" — RGBA — to allow specification of the opacity of a color. Other methods for measuring color involve measurements using other color spaces and are supported in modern displays and browsers. Still, color measurements in the RGB color space predominate, including in video production.
 
@@ -95,7 +95,7 @@ color: color(xyz-d65 0.59 0.28 0.96);
 color: color(xyz-d65 0.59 0.28 0.96 / 1);
 ```
 
-The first example uses one of the defined [named colors](/en-US/docs/Web/CSS/Reference/Values/named-color).
+The first example uses one of the defined {{cssxref("named-color")}}s.
 
 We can set the sRGB values directly as a percentage, with 0% being off (black) and 100% being the full value for that color. The values are in the order of red, green, and blue. We can also set the sRGB values directly by a number from 0 to 255.
 
@@ -105,23 +105,23 @@ If all values are pairs of identical digits, the value can be represented by sin
 
 The example also shows the legacy syntax for both [`rgb()` and `rgba()`](/en-US/docs/Web/CSS/Reference/Values/color_value/rgb#examples). The legacy syntax for color functions is comma-separated, with a separate function for when the alpha channel is included. New color functions only have one syntax with space-separated (rather than comma-separated) values, with the alpha channel, if present, being preceded by a slash. Modern syntax allows for mixing numbers and percents and supports the `none` keyword; the comma-separated legacy syntax does not.
 
-The following examples show "HSL", which stands for _Hue, Saturation, and Lightness_. HSL color values are considered by many to be more intuitive than RGB values. The color produced from the settings are still in the sRGB colorspace, but [`hsl()`](/en-US/docs/Web/CSS/Reference/Values/color_value/hsl) is an intuitive syntax for many. The hue is adjusted as an angle, and it is easy to create a user interface using a knob or circular control to adjust the hue. Do note that HSL colors incorporate _lightness_, not _luminance_, which is a significant consideration.
+The following examples show "HSL", which stands for _Hue, Saturation, and Lightness_. HSL color values are considered by many to be more intuitive than RGB values. The color produced from the settings are still in the sRGB colorspace, but {{cssxref("color_value/hsl")}} is an intuitive syntax for many. The hue is adjusted as an angle, and it is easy to create a user interface using a knob or circular control to adjust the hue. Do note that HSL colors incorporate _lightness_, not _luminance_, which is a significant consideration.
 
-The next examples shows "HWB" which stands for _Hue, Whiteness, and Blackness_. With both `hsl()` and [`hwb()`](/en-US/docs/Web/CSS/Reference/Values/color_value/hwb) the first value can be a [`<number>`](/en-US/docs/Web/CSS/Reference/Values/number) or an [`<angle>`](/en-US/docs/Web/CSS/Reference/Values/angle) value. When unitless, the value is interpreted as `deg` degrees.
+The next examples shows "HWB" which stands for _Hue, Whiteness, and Blackness_. With both `hsl()` and {{cssxref("color_value/hwb", "hwb()")}} the first value can be a {{cssxref("number")}} or an {{cssxref("angle")}} value. When unitless, the value is interpreted as `deg` degrees.
 
-There are several other color functions and color spaces. The last three examples demonstrate representing magenta using the [`lab()`](/en-US/docs/Web/CSS/Reference/Values/color_value/lab), [`oklch()`](/en-US/docs/Web/CSS/Reference/Values/color_value/oklch), and [`color()`](/en-US/docs/Web/CSS/Reference/Values/color_value/color) color functions.
+There are several other color functions and color spaces. The last three examples demonstrate representing magenta using the {{cssxref("color_value/lab", "lab()")}}, {{cssxref("color_value/oklch", "oklch()")}}, and {{cssxref("color_value/color", "color()")}} color functions.
 
 ### Conversions
 
 As we saw, one color within the same color space may be expressed in many ways. Looking at how the RGB color space is used to describe the color "magenta", you can see that the same color may be expressed in a shorthand, three-digit hex number that converts to an rgb value as a six-digit hex number that also converts to the same rgb value, or as a rgba value, expressed in percentages.
 
-RGB is hardware-oriented, reflecting the use of CRTs. Many developers and designers prefer the intuitiveness of [`hsl()`](/en-US/docs/Web/CSS/Reference/Values/color_value/hsl) notation. Fortunately, browsers convert from RGB to HSL automatically, and shift-clicking on colors in browser developer tools provides conversion functionality.
+RGB is hardware-oriented, reflecting the use of CRTs. Many developers and designers prefer the intuitiveness of {{cssxref("color_value/hsl", "hsl()")}} notation. Fortunately, browsers convert from RGB to HSL automatically, and shift-clicking on colors in browser developer tools provides conversion functionality.
 
 In addition to developer tools, many tools can convert RGB to HSL for you and provide both the RGB hexadecimal and CSS function syntax. A great example of a tool that converts colors for you is Tom Jewett's "[mini color selector](https://colortutorial.design/microColorsC.html)" with HSL, RGB, and Hex options for checking contrast in the browser. Note that developer tools color pickers and this tool all provide WCAG [color contrast](https://webaim.org/resources/contrastchecker/) values.
 
 ![Color picker with HSL and RGB, with color contrast values.](microcolorsc.jpg)
 
-As noted earlier, the [CSS color module](/en-US/docs/Web/CSS/Guides/Colors) includes adding additional colorspaces, including [`lch()`](/en-US/docs/Web/CSS/Reference/Values/color_value/lch) and [`oklch()`](/en-US/docs/Web/CSS/Reference/Values/color_value/oklch) functional color notation and the [`lab()`](/en-US/docs/Web/CSS/Reference/Values/color_value/lab) and [`oklab()`](/en-US/docs/Web/CSS/Reference/Values/color_value/oklab) color coordinate systems, which can specify any visible color. That said, sRGB is still the default and preferred colorspace for accessibility because of its ubiquity.
+As noted earlier, the [CSS color module](/en-US/docs/Web/CSS/Guides/Colors) includes adding additional colorspaces, including {{cssxref("color_value/lch", "lch()")}} and {{cssxref("color_value/oklch", "oklch()")}} functional color notation and the {{cssxref("color_value/lab", "lab()")}} and {{cssxref("color_value/oklab", "oklab()")}} color coordinate systems, which can specify any visible color. That said, sRGB is still the default and preferred colorspace for accessibility because of its ubiquity.
 
 Where accessibility is concerned, however, standards and guidelines are currently written predominantly using the sRGB color space, especially as it applies to color contrast ratios.
 
@@ -228,7 +228,7 @@ Saturation is sometimes described as the "purity" or "intensity" of a color. Alt
 
 When it comes to color on a monitor, saturated colors are of a particular wavelength. While the definition of saturation for each color space may differ, saturation is readily measured. The key is to know which color space you are working in and be ready to convert it if necessary.
 
-The color spaces most frequently considered when discussing photosensitivity are the RGB, HSL, and HSV, also known as HSB, color spaces. The HSV color space, which stands for _hue_, _saturation_, and _value_, and the synonym HSB, which stands for _hue_, _saturation_, and _brightness_, are represented in CSS as [`hwb()`](/en-US/docs/Web/CSS/Reference/Values/color_value/hwb) for _hue_, _whiteness_, and _blackness_.
+The color spaces most frequently considered when discussing photosensitivity are the RGB, HSL, and HSV, also known as HSB, color spaces. The HSV color space, which stands for _hue_, _saturation_, and _value_, and the synonym HSB, which stands for _hue_, _saturation_, and _brightness_, are represented in CSS as {{cssxref("color_value/hwb", "hwb()")}} for _hue_, _whiteness_, and _blackness_.
 
 It's important to know what color space you're working with. For example, saturated colors have a lightness of `0.5` in HSL, while in HWB, they have a value `1`. Saturation in the RGB color space is usually indicated by an RGB value of `255` or `100%` for the color in question. For example, a saturated red of hex value `#ff0000` has an RGB value of `rgb(255 0 0)` and an HSL value of `hsl(0 100% 50%)`. A different saturated red with a hex value of `#ff3300` has an RGB value of `rgb(255 51 0)` and an HSL value of `hsl(12 100% 50%)`. Both are "saturated" reds. They are two different "hues" but are both considered to be a saturated color.
 
@@ -262,7 +262,7 @@ The nature of blue light causes it to focus at a different location on the retin
 
 ## The special case of red
 
-Not all colors ("hue") are processed similarly by our brains. Human physiology and psychology are affected by the color red, generally speaking, in ways different from that of other colors. We respond physiologically as well as psychologically to colors. For example, it has been demonstrated that [some colors are more likely to cause epileptic fits than others](https://www.sciencedaily.com/releases/2009/09/090925092858.htm). Some devices offer a ["grayscale" setting as an accessibility option](https://ask.metafilter.com/312049/What-is-the-grayscale-setting-for-in-accessibility-options)" which can help people who are photo-sensitive. To mimic the grayscale setting, use the CSS {{cssxref("filter")}} property with a [`grayscale()`](/en-US/docs/Web/CSS/Reference/Values/filter-function/grayscale) or [`saturate()`](/en-US/docs/Web/CSS/Reference/Values/filter-function/saturate) [`<filter-function>`](/en-US/docs/Web/CSS/Reference/Values/filter-function).
+Not all colors ("hue") are processed similarly by our brains. Human physiology and psychology are affected by the color red, generally speaking, in ways different from that of other colors. We respond physiologically as well as psychologically to colors. For example, it has been demonstrated that [some colors are more likely to cause epileptic fits than others](https://www.sciencedaily.com/releases/2009/09/090925092858.htm). Some devices offer a ["grayscale" setting as an accessibility option](https://ask.metafilter.com/312049/What-is-the-grayscale-setting-for-in-accessibility-options)" which can help people who are photo-sensitive. To mimic the grayscale setting, use the CSS {{cssxref("filter")}} property with a {{cssxref("filter-function/grayscale", "grayscale()")}} or {{cssxref("filter-function/saturate", "saturate()")}} {{cssxref("filter-function")}}.
 
 ### Saturated red
 
@@ -314,8 +314,8 @@ Color as in hues and saturation can affect our mood, and enhance — or de-enhan
 
 - [Accessibility](/en-US/docs/Web/Accessibility)
 - [Accessibility learning path](/en-US/docs/Learn_web_development/Core/Accessibility)
-- CSS [`color`](/en-US/docs/Web/CSS/Reference/Properties/color) property
-- [`<color>`](/en-US/docs/Web/CSS/Reference/Values/color_value) data type
+- CSS {{cssxref("color")}} property
+- CSS {{cssxref("&lt;color&gt;")}} data type
 - [Web accessibility for seizures and physical reactions](/en-US/docs/Web/Accessibility/Guides/Seizure_disorders)
 - [How the Color Red Influences Our Behavior](https://www.scientificamerican.com/article/how-the-color-red-influences-our-behavior/) Scientific American By Susana Martinez-Conde, Stephen L. Macknik on November 1, 2014
 - [Red Desaturation](https://www.smartoptometry.app/red-desaturation/) The human eye is so sensitively "tuned" to red, that ophthalmologists set up a test using it, assessing the integrity of the optic nerve.

files/en-us/web/accessibility/guides/seizure_disorders/index.md

@@ -215,7 +215,7 @@ With animated GIFs, ensure animation is inactive until the user chooses to activ
 
 As in the case of animated GIFs, the user must push a button or check a box in order to start the animation. There are many ways to do this, such as NOT adding the [`autoplay`](/en-US/docs/Web/API/HTMLMediaElement/autoplay) attribute to `<video controls>`, or setting {{CSSxRef('animation-play-state')}} to `paused` as an initial state. To see a powerful example of how this can actually work see the article by Kirupa, ["Toggling Animations On and Off"](https://www.kirupa.com/html5/toggling_animations_on_off.htm). Kirupa uses the `animation-play-state` in concert with {{CSSxRef('transition')}}, {{CSSxRef('transform')}}, and [`prefers-reduced-motion`](/en-US/docs/Web/CSS/Reference/At-rules/@media/prefers-reduced-motion) to create a very accessible experience under the user's control.
 
-[`animation-play-state`](/en-US/docs/Web/CSS/Reference/Properties/animation-play-state) is a CSS property that sets whether an animation is running or paused.
+{{cssxref("animation-play-state")}} is a CSS property that sets whether an animation is running or paused.
 
 ```css
 div {
@@ -563,7 +563,7 @@ The requirement for the `literal` property is taken from [WAI-Adapt: Help and Su
 - [Basic Animations](/en-US/docs/Web/API/Canvas_API/Tutorial/Basic_animations) (Canvas Tutorial)
 - [Canvas API](/en-US/docs/Web/API/Canvas_API)
 - [CanvasRenderingContext2D.drawImage()](/en-US/docs/Web/API/CanvasRenderingContext2D/drawImage)
-- [\<color>](/en-US/docs/Web/CSS/Reference/Values/color_value)
+- {{cssxref("&lt;color&gt;")}}
 - [Document Object Model](/en-US/docs/Web/API/Document_Object_Model)
 - [MediaQueryList](/en-US/docs/Web/API/MediaQueryList)
 - [Using dynamic styling information](/en-US/docs/Web/API/CSS_Object_Model/Using_dynamic_styling_information)