From 88cf8631792f7f5bd95393275a4e7740c74d0a7b Mon Sep 17 00:00:00 2001
From: Jon Gunderson Disclosure (Show/Hide)
Examples
-
Example Disclosure (Show/Hide) for Answers to Frequently Asked Questions
Similar examples include:
Similar examples include:
dt
element, a button
element is contained within the dd
element.
Similarly, the container for the answer content that is shown and hidden is inside of the dd
element so the dl
structure is complete even when the answers are all hidden.
aria-expanded
using a CSS attribute selector and :before
pseudo element that generates an image with the content
property.aria-expanded
using a CSS attribute selector and :before
pseudo element that defines an SVG graphic to visually identify the state of a disclosure button using the content
property.currentColor
value for the fill
and stroke
properties of the SVG polygon
element is used to synchronize the color with text content.
+ If specific colors are used to specify the fill
and stroke
properties, these colors will remain the same in high contrast mode, which could lead to insufficient contrast between the icon and the background or even make the icon invisible if its color matches the high contrast mode background.
+ :focus
pseudo class is used to change the background and border colors.aria-expanded
using a CSS attribute selector and :before
pseudo element that generates an image with the content
property.aria-expanded
using a CSS attribute selector and :before
pseudo element that defines an SVG graphic to visually identify the state of the disclosure button using the content
property.currentColor
value for the fill
and stroke
properties of the SVG polygon
element is used to synchronize the color with text content.
+ If specific colors are used to specify the fill
and stroke
properties, these colors will remain the same in high contrast mode, which could lead to insufficient contrast between the icon and the background or even make the icon invisible if its color matches the high contrast mode background.
+ :focus
pseudo class is used to change the background and border colors.Similar examples include:
dl
, dt
and dd
elements.
So that the list structure is communicated to assistive technologies, instead of applying a button role to the dt
element, a button
element is contained within the dd
element.
Similarly, the container for the answer content that is shown and hidden is inside of the dd
element so the dl
structure is complete even when the answers are all hidden.
aria-expanded
using a CSS attribute selector and :before
pseudo element that defines an SVG graphic to visually identify the state of a disclosure button using the content
property.currentColor
value for the fill
and stroke
properties of the SVG polygon
element is used to synchronize the color with text content.
- If specific colors are used to specify the fill
and stroke
properties, these colors will remain the same in high contrast mode, which could lead to insufficient contrast between the icon and the background or even make the icon invisible if its color matches the high contrast mode background.
+ To provide a visual indication the labels can also be used to change the state of the button, the background color changes, a border appears and the cursor changes to a pointer when a pointer hovers over the button. The border and pointer changes help people with visual impairments identify the element as interactive.
+ :focus
pseudo class is used to change the background and border colors.:hover
pseudo class is used to change the background color and underline the text.aria-expanded
using a CSS attribute selector and :before
pseudo element that defines an SVG graphic to visually identify the state of a disclosure button using the content
property.
currentColor
value for the stroke
and fill
properties of the polygon
elements used to draw the arrows.
+ If specific colors were instead used to specify the stroke
and fill
properties, those colors would remain the same in high contrast mode, which could lead to insufficient contrast between the rail and the thumb or even make them invisible if their color matched the high contrast mode background.forced-color-adjust
property set to auto
for the currentColor
value to be updated in high contrast mode.
+ Some browsers do not use auto
for the default value.
+ Note: A French translation from Wikipedia.
-MK
z4|RJh)&nW#c){!4(2wf&Ogqg$s`f?6^3>SjG;~D^Jl}UXJ)Ylxpz~4Bo*B03()4iY
zv)#8kBk(uacY=LPcl<`&rC__xI%D8%R@b9(LE|09k${>|4UZr?*J#y6a59*|6Dr5;Tx}N?xySG2Z;te0-MU
zL~W7mN%)I}vY0JXa)%661ZF{Q1SHMV$RwGkNcua76I`SJ#gjs3XA`25VvG4*$0j@L3zU6SrpO; |