The new success criteria may reference new terms that have also been added to the glossary and form part of the normative requirements of the success criteria.
-In addition to the above new Success Criteria, Focus Visible has been promoted from Level AA to Level A.
AA
+AAA
New
-When the keyboard focus indicator is visible, one or both of the following are true:
-When the keyboard focus indicator is visible, an area of the focus indicator meets all the following:
+Exceptions:
A
-Changed
- -Any keyboard operable user interface has a mode of operation where the keyboard focus - indicator is visible. -
- -The size of the target for pointer inputs is at least 24 by 24 CSS pixels, except where:
Targets that allow for values to be selected spatially based on position within the target are considered one target for the purpose of the success criterion. Examples include sliders with granular values, color pickers displaying a gradient of colors, or editable areas where you position the cursor.
For inline targets the line-height should be interpreted as perpendicular to the flow of text. For example, in a language displayed vertically, the line-height would be horizontal.
diff --git a/guidelines/terms/22/minimum-bounding-box.html b/guidelines/terms/22/minimum-bounding-box.html index cf22492af8..daeca0df6e 100644 --- a/guidelines/terms/22/minimum-bounding-box.html +++ b/guidelines/terms/22/minimum-bounding-box.html @@ -1,4 +1,4 @@ -New
the smallest enclosing rectangle aligned to the horizontal axis within which all the points of a shape lie. For components which wrap onto multiple lines as part of a sentence or block of text (such as hypertext links), the bounding box is based on how the component would appear on a single line.
diff --git a/guidelines/terms/22/perimeter.html b/guidelines/terms/22/perimeter.html index 68be5a3ae0..a4325e5568 100644 --- a/guidelines/terms/22/perimeter.html +++ b/guidelines/terms/22/perimeter.html @@ -2,6 +2,6 @@New
continuous line forming the boundary of a shape not including shared pixels, or the minimum bounding box, whichever is shortest.
- +New
-length of the longest possible line that starts at an edge of a target (A), intersects a second edge of A, and ends at the closest edge of a second target (B). For horizontally aligned targets, target offset is measured with a horizontal line. For vertically aligned targets, target offset is measured with a vertical line. For targets that are neither, target offset is measured diagonally.
-Two targets are horizontally aligned if a horizontal line can be drawn that goes through both targets, but no vertical line can be drawn that goes through both targets. Two targets are vertically aligned if a vertical line can be drawn that goes through both targets, but no horizontal line can be drawn that goes through both targets.
-The target offset from A to B may differ from the target offset from B to A, for example, if the sizes or shapes of these targets are different.
-“Mode of operation” accounts for user agents which may not always show a focus indicator, or only show the focus indicator when the keyboard is used. User agents may optimise when the focus indicator is shown, such as only showing it when a keyboard is used. Authors are responsible for providing at least one mode of operation where the focus is visible. In most cases there is only one mode of operation so this success criterion applies. The focus indicator must not be time limited, when the keyboard focus is shown it must remain.
-Note that a keyboard focus indicator can take different forms. This criterion does not specify what the form is, but Focus Appearance (Minimum) does define how visible the indicator should be. Passing Focus Appearance (Minimum) would pass this success criterion.
+Note that a keyboard focus indicator can take different forms. This criterion does not specify what the form is, but Focus Appearance does define how visible the indicator should be. Passing Focus Appearance (Minimum) would pass this success criterion.
-AA
+AAA
+ +When the keyboard focus indicator is visible, an area of the focus indicator meets all the following:
++
-- is at least as large as the area of a 2 CSS pixel thick perimeter of the unfocused component or sub-component, and
+- has a contrast ratio of at least 3:1 between the same pixels in the focused and unfocused states
+When the keyboard focus indicator is visible, one or both of the following is true:
--
- -- The entire focus indicator: -
--
-- encloses the visual presentation of the user interface component, and
-- has a contrast ratio of at least 3:1 between the same pixels in the focused and unfocused states, and
-- has a contrast ratio of at least 3:1 against adjacent non-focus-indicator colors.
-- An area of the focus indicator meets all the following: -
--
-- is at least as large as the area of a 1 CSS pixel thick perimeter of the unfocused component, or is at least as large as a 4 CSS pixel thick line along the shortest side of the minimum bounding box of the unfocused component, and
-- has a contrast ratio of at least 3:1 between the same pixels in the focused and unfocused states, and
-- has a contrast ratio of at least 3:1 against adjacent non-focus-indicator colors, or is no thinner than 2 CSS pixels.
-Where a user interface component has active sub-components, if a sub-component receives a focus indicator, these requirements may be applied to the sub-component instead.
-Exceptions:
- -
- The focus indicator is determined by the user agent and cannot be adjusted by the author, or
- The focus indicator and the indicator's background color are not modified by the author.
Examples of sub-components that may receive a focus indicator are menu items in an opened drop-down menu. However, it may also be possible to indicate user interaction for such sub-components by relying strictly on a visual indication of which item is selected. Where selectable sub-components have no differentiated focus indicator, the visual indicator for sub-component selection is measured against 1.4.11 Non-text Contrast requirements, not against this Criterion.
- + +What is perceived as the user interface component or sub-component (to determine enclosure or size) depends on its visual presentation. The visual presentation includes the component's visible content, border, and component-specific background. It does not include shadow and glow effects outside the component's content, background, or border.
+ +Examples of sub-components that may receive a focus indicator are menu items in an opened drop-down menu, or focusable cells in a grid.
+Contrast calculations can be based on colors defined within the technology (such as HTML, CSS and SVG). Pixels modified by user agent resolution enhancements and anti-aliasing can be ignored.
+
- Focus indicator
- pixels that are changed to visually indicate when a user interface component is in a focused state.
-- minimum bounding box
-- - the smallest enclosing rectangle aligned to the horizontal axis within which all the points of a shape lie. For components which wrap onto multiple lines as part of a sentence or block of text (such has hypertext links), the bounding box is based on how the component would appear on a single line. -
-- encloses
-- - solidly bounds or surrounds -
- perimeter
- continuous line forming the boundary of a shape not including shared pixels, or the minimum bounding box of a complex shape, whichever is shortest. For example, the perimeter calculation for a rectangle is 2h+2w -4, where h is the height and w is the width and the corners are not counted twice. The perimeter of a circle is 2𝜋r. diff --git a/understanding/22/target-size-minimum.html b/understanding/22/target-size-minimum.html index 1ff4e7cb79..ef11bdb302 100644 --- a/understanding/22/target-size-minimum.html +++ b/understanding/22/target-size-minimum.html @@ -23,13 +23,13 @@
Target Size (Minimum)
New
The size of the target for pointer inputs is at least 24 by 24 CSS pixels, except where:
--
- Spacing: The target does not overlap any other target and has a target offset of at least 24 CSS pixels to every adjacent target;
++
+- Spacing: Undersized targets (those less than 24 by 24 CSS pixels) are positioned so that if a 24 CSS pixel diameter circle is centered on the bounding box of each, the circles do not intersect another target or the circle for another undersized target;
- Equivalent: The function can be achieved through a different control on the same page that meets this criterion.
-- Inline: The target is in a sentence, or is in a bulleted or numbered list, or its size is otherwise constrained by the line-height of non-target text;
-- User agent control: The size of the target is determined by the user agent and is not modified by the author;
-- Essential: A particular presentation of the target is essential or is legally required for the information being conveyed;
-- Inline: The target is in a sentence or its size is otherwise constrained by the line-height of non-target text;
+- User agent control: The size of the target is determined by the user agent and is not modified by the author;
+- Essential: A particular presentation of the target is essential or is legally required for the information being conveyed.
+Targets that allow for values to be selected spatially based on position within the target are considered one target for the purpose of the success criterion. Examples include sliders with granular values, color pickers displaying a gradient of colors, or editable areas where you position the cursor.
For inline targets the line-height should be interpreted as perpendicular to the flow of text. For example, in a language displayed top to bottom, the line-height would be horizontal.
- target offset