diff --git a/third_party/aria-practices/src/content/patterns/disclosure/examples/disclosure-image-description.html b/third_party/aria-practices/src/content/patterns/disclosure/examples/disclosure-image-description.html index 9917cc4d03dc1..81d5cbb41b1fe 100644 --- a/third_party/aria-practices/src/content/patterns/disclosure/examples/disclosure-image-description.html +++ b/third_party/aria-practices/src/content/patterns/disclosure/examples/disclosure-image-description.html @@ -2,55 +2,13 @@ - Example Disclosure (Show/Hide) for Image Description - - - - - - - - - -
-

Example Disclosure (Show/Hide) for Image Description

- -
-

About This Example

- -

- The following example demonstrates using the Disclosure Pattern to provide a way of revealing a table of data that complements an image. -

-

Similar examples include:

- -
- -
-
-

Example

-
-
- -
- -
-

Accessibility Features

- -
- -
-

Keyboard Support

- - - - - - - - - - - - - - - - - -
KeyFunction
- Tab - Moves keyboard focus to the disclosure button.
- Space or
- Enter -
Activates the disclosure button, which toggles the visibility of the long description.
-
- -
-

Role, Property, State, and Tabindex Attributes

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
RoleAttributeElementUsage
- aria-controls="ID_REFERENCE" - buttonIdentifies the element controlled by the disclosure button.
- aria-expanded="false" - - button - -
    -
  • Indicates that the container controlled by the disclosure button is hidden .
  • -
  • - CSS attribute selectors (e.g. [aria-expanded="false"]) synchronize the visual states with the value of the aria-expanded attribute. -
  • -
  • The visual indicator of the show/hide state is created using the CSS :before pseudo element and the content property so the image is reliably rendered in high contrast mode of operating systems and browsers.
  • -
-
- aria-expanded="true" - - button - -
    -
  • Indicates that the container controlled by the disclosure button is visible.
  • -
  • - CSS attribute selectors (e.g. [aria-expanded="true"]) synchronize the visual states with the value of the aria-expanded attribute. -
  • -
  • The visual indicator of the show/hide state is created using the CSS :before pseudo element and the content property so the image is reliably rendered in high contrast mode of operating systems and browsers.
  • -
-
-
- -
-

JavaScript and CSS Source Code

- -
- -
-

HTML Source Code

-

To copy the following HTML code, please open it in CodePen.

- -
- - -
-