From 00388360a418882465376c76f7d4478f1fbe35b0 Mon Sep 17 00:00:00 2001 From: Alastair Campbell <ac@alastc.com> Date: Tue, 28 Mar 2023 16:00:09 +0100 Subject: [PATCH 01/17] Initial draft --- guidelines/sc/22/focus-appearance.html | 26 +++++++------------------- 1 file changed, 7 insertions(+), 19 deletions(-) diff --git a/guidelines/sc/22/focus-appearance.html b/guidelines/sc/22/focus-appearance.html index 8ec377495c..d96c24ae18 100644 --- a/guidelines/sc/22/focus-appearance.html +++ b/guidelines/sc/22/focus-appearance.html @@ -2,27 +2,15 @@ <h4>Focus Appearance</h4> - <p class="conformance-level">AA</p> + <p class="conformance-level">AAA</p> <p class="change">New</p> - <p>When the keyboard <a>focus indicator</a> is visible, one or both of the following are true:</p> - <ol> - <li>The entire <a>focus indicator</a> meets all the following: - - <ul> - <li><a>encloses</a> the <a>user interface component</a> or sub-component that is focused, and</li> - <li>has a contrast ratio of at least 3:1 between the same pixels in the focused and unfocused states, and</li> - <li>has a contrast ratio of at least 3:1 against adjacent non-focus-indicator colors.</li> - </ul> - </li> - <li>An area of the focus indicator meets all the following: - <ul> - <li>is at least as large as the area of a 1 <a>CSS pixel</a> thick <a>perimeter</a> of the unfocused component or sub-component, or is at least as large as a 4 CSS pixel thick line along the shortest side of the <a>minimum bounding box</a> of the unfocused component or sub-component, and</li> - <li>has a contrast ratio of at least 3:1 between the same pixels in the focused and unfocused states, and</li> - <li>has a contrast ratio of at least 3:1 against adjacent non-focus-indicator colors, or is no thinner than 2 CSS pixels.</li> - </ul> - </li> - </ol> + <p>When the keyboard <a>focus indicator</a> is visible, an area of the focus indicator meets all the following:</p> + <ul> + <li>is at least as large as the area of a 1 <a>CSS pixel</a> thick <a>perimeter</a> of the unfocused component or sub-component, or is at least as large as a 4 CSS pixel thick line along the shortest side of the <a>minimum bounding box</a> of the unfocused component or sub-component, and</li> + <li>has a contrast ratio of at least 3:1 between the same pixels in the focused and unfocused states, and</li> + <li>has a contrast ratio of at least 3:1 against adjacent non-focus-indicator colors, or is no thinner than 2 CSS pixels.</li> + </ul> <p>Exceptions:</p> <ul> From 1733728ddec0fb4c24b72868b5fd2c5503da2b75 Mon Sep 17 00:00:00 2001 From: Alastair Campbell <ac@alastc.com> Date: Tue, 28 Mar 2023 19:19:12 +0100 Subject: [PATCH 02/17] Update target-size-minimum.html --- guidelines/sc/22/target-size-minimum.html | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/guidelines/sc/22/target-size-minimum.html b/guidelines/sc/22/target-size-minimum.html index bb5a300116..e4c43f8251 100644 --- a/guidelines/sc/22/target-size-minimum.html +++ b/guidelines/sc/22/target-size-minimum.html @@ -7,11 +7,11 @@ <h4>Target Size (Minimum)</h4> <p>The size of the <a>target</a> for <a>pointer inputs</a> is at least 24 by 24 <a>CSS pixels</a>, except where:</p> <ul> - <li><strong>Spacing:</strong> The target does not overlap any other target and has a <a>target offset</a> of at least 24 CSS pixels to every adjacent target;</li> <li><strong>Equivalent:</strong> The function can be achieved through a different control on the same page that meets this criterion.</li> - <li><strong>Inline:</strong> 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;</li> + <li><strong>Inline:</strong> The target is in a sentence or its size is otherwise constrained by the line-height of non-target text;</li> <li><strong>User agent control:</strong> The size of the target is determined by the user agent and is not modified by the author;</li> <li><strong>Essential:</strong> A particular presentation of the target is <a>essential</a> or is legally required for the information being conveyed;</li> + <li><strong>Spacing:</strong> Undersized targets that do not meet another exception are positioned with sufficient spacing so that if a 24 CSS pixel diameter circle is centred on each, none of the circles intersect another circle or target.</li> </ul> <p class="note">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.</p> <p class="note">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.</p> From 9e9af81492b69f019d93ffb26775b6fc6d35024d Mon Sep 17 00:00:00 2001 From: Alastair Campbell <ac@alastc.com> Date: Tue, 28 Mar 2023 19:32:00 +0100 Subject: [PATCH 03/17] Target size updates --- guidelines/terms/22/target-offset.html | 7 ------- understanding/22/target-size-minimum.html | 14 +++++++------- 2 files changed, 7 insertions(+), 14 deletions(-) delete mode 100644 guidelines/terms/22/target-offset.html diff --git a/guidelines/terms/22/target-offset.html b/guidelines/terms/22/target-offset.html deleted file mode 100644 index 5ab2115437..0000000000 --- a/guidelines/terms/22/target-offset.html +++ /dev/null @@ -1,7 +0,0 @@ -<dt class="new"><dfn data-lt="target offsets">target offset</dfn></dt> -<dd class="new"> - <p class="change">New</p> - <p>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.</p> - <p>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.</p> - <p class="note">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.</p> -</dd> diff --git a/understanding/22/target-size-minimum.html b/understanding/22/target-size-minimum.html index 1ff4e7cb79..0723ae7ad0 100644 --- a/understanding/22/target-size-minimum.html +++ b/understanding/22/target-size-minimum.html @@ -23,13 +23,13 @@ <h4>Target Size (Minimum)</h4> <p class="change">New</p> <p>The size of the <a>target</a> for <a>pointer inputs</a> is at least 24 by 24 <a>CSS pixels</a>, except where:</p> - <ul> - <li><strong>Spacing:</strong> The target does not overlap any other target and has a <a>target offset</a> of at least 24 CSS pixels to every adjacent target;</li> - <li><strong>Equivalent:</strong> The function can be achieved through a different control on the same page that meets this criterion.</li> - <li><strong>Inline:</strong> 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;</li> - <li><strong>User agent control:</strong> The size of the target is determined by the user agent and is not modified by the author;</li> - <li><strong>Essential:</strong> A particular presentation of the target is <a>essential</a> or is legally required for the information being conveyed;</li> - </ul> + <ul> + <li><strong>Equivalent:</strong> The function can be achieved through a different control on the same page that meets this criterion.</li> + <li><strong>Inline:</strong> The target is in a sentence or its size is otherwise constrained by the line-height of non-target text;</li> + <li><strong>User agent control:</strong> The size of the target is determined by the user agent and is not modified by the author;</li> + <li><strong>Essential:</strong> A particular presentation of the target is <a>essential</a> or is legally required for the information being conveyed;</li> + <li><strong>Spacing:</strong> Undersized targets that do not meet another exception are positioned with sufficient spacing so that if a 24 CSS pixel diameter circle is centred on each, none of the circles intersect another circle or target.</li> + </ul> <p class="note">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.</p> <p class="note">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.</p> <dl><dt class="new"><dfn data-lt="target offsets">target offset</dfn></dt> From 2a7cd2cbf5b55cdc310379b609b817c746ad60f6 Mon Sep 17 00:00:00 2001 From: Alastair Campbell <ac@alastc.com> Date: Wed, 29 Mar 2023 16:38:57 +0100 Subject: [PATCH 04/17] Updates to focus apearance --- guidelines/sc/22/focus-appearance.html | 3 +- understanding/22/focus-appearance.html | 45 ++++++++------------------ 2 files changed, 14 insertions(+), 34 deletions(-) diff --git a/guidelines/sc/22/focus-appearance.html b/guidelines/sc/22/focus-appearance.html index d96c24ae18..f7a0506de1 100644 --- a/guidelines/sc/22/focus-appearance.html +++ b/guidelines/sc/22/focus-appearance.html @@ -7,9 +7,8 @@ <h4>Focus Appearance</h4> <p>When the keyboard <a>focus indicator</a> is visible, an area of the focus indicator meets all the following:</p> <ul> - <li>is at least as large as the area of a 1 <a>CSS pixel</a> thick <a>perimeter</a> of the unfocused component or sub-component, or is at least as large as a 4 CSS pixel thick line along the shortest side of the <a>minimum bounding box</a> of the unfocused component or sub-component, and</li> + <li>is at least as large as the area of a 1 <a>CSS pixel</a> thick <a>perimeter</a> of the unfocused component or sub-component</li> <li>has a contrast ratio of at least 3:1 between the same pixels in the focused and unfocused states, and</li> - <li>has a contrast ratio of at least 3:1 against adjacent non-focus-indicator colors, or is no thinner than 2 CSS pixels.</li> </ul> <p>Exceptions:</p> diff --git a/understanding/22/focus-appearance.html b/understanding/22/focus-appearance.html index 466efd00d0..e7421024d5 100644 --- a/understanding/22/focus-appearance.html +++ b/understanding/22/focus-appearance.html @@ -18,50 +18,31 @@ <h2>Status</h2> <h2>Focus Appearance Success Criterion text</h2> <blockquote> - <p class="conformance-level">AA</p> + <p class="conformance-level">AAA</p> + + <p>When the keyboard <a>focus indicator</a> is visible, an area of the focus indicator meets all the following:</p> + <ul> + <li>is at least as large as the area of a 1 <a>CSS pixel</a> thick <a>perimeter</a> of the unfocused component or sub-component</li> + <li>has a contrast ratio of at least 3:1 between the same pixels in the focused and unfocused states, and</li> + </ul> - <p>When the keyboard <a>focus indicator</a> is visible, one or both of the following is true:</p> - <ol> - <li>The entire <a>focus indicator</a>: - <ul> - <li><a>encloses</a> the visual presentation of the user interface component, and</li> - <li>has a contrast ratio of at least 3:1 between the same pixels in the focused and unfocused states, and</li> - <li>has a contrast ratio of at least 3:1 against adjacent non-focus-indicator colors.</li> - </ul> - </li> - <li>An area of the focus indicator meets all the following: - <ul> - <li>is at least as large as the area of a 1 <a>CSS pixel</a> thick <a>perimeter</a> of the unfocused component, or is at least as large as a 4 CSS pixel thick line along the shortest side of the <a>minimum bounding box</a> of the unfocused component, and</li> - <li>has a contrast ratio of at least 3:1 between the same pixels in the focused and unfocused states, and</li> - <li>has a contrast ratio of at least 3:1 against adjacent non-focus-indicator colors, or is no thinner than 2 CSS pixels.</li> - </ul> - </li> - </ol> - - <p>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.</p> - <p>Exceptions:</p> <ul> <li>The focus indicator is determined by the user agent and cannot be adjusted by the author, or</li> <li>The focus indicator and the indicator's background color are not modified by the author.</li> </ul> - - <p class="note">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 <em>selected</em>. Where selectable sub-components have no differentiated focus indicator, the visual indicator for sub-component selection is measured against <a href="https://www.w3.org/WAI/WCAG22/Understanding/non-text-contrast.html">1.4.11 Non-text Contrast</a> requirements, not against this Criterion.</p> - + + <p class="note">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.</p> + + <p class="note">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.</p> + <p class="note">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.</p> + <dl> <dt class="new"><dfn>Focus indicator</dfn></dt> <dd class="new"> pixels that are changed to visually indicate when a user interface component is in a focused state. </dd> - <dt class="new"><dfn>minimum bounding box</dfn></dt> - <dd class="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 has hypertext links), the bounding box is based on how the component would appear on a single line. - </dd> - <dt class="new"><dfn>encloses</dfn></dt> - <dd class="new"> - solidly bounds or surrounds - </dd> <dt class="new"><dfn>perimeter</dfn></dt> <dd class="new"> 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 2<em>h</em>+2<em>w</em> -4, where <em>h</em> is the height and <em>w</em> is the width and the corners are not counted twice. The perimeter of a circle is 2๐<em>r</em>. From 36a0d8022084576590886a91d4803524060b2b5d Mon Sep 17 00:00:00 2001 From: Alastair Campbell <ac@alastc.com> Date: Thu, 30 Mar 2023 17:43:50 +0100 Subject: [PATCH 05/17] Typo on 'and' --- guidelines/sc/22/focus-appearance.html | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/guidelines/sc/22/focus-appearance.html b/guidelines/sc/22/focus-appearance.html index f7a0506de1..9470826184 100644 --- a/guidelines/sc/22/focus-appearance.html +++ b/guidelines/sc/22/focus-appearance.html @@ -7,8 +7,8 @@ <h4>Focus Appearance</h4> <p>When the keyboard <a>focus indicator</a> is visible, an area of the focus indicator meets all the following:</p> <ul> - <li>is at least as large as the area of a 1 <a>CSS pixel</a> thick <a>perimeter</a> of the unfocused component or sub-component</li> - <li>has a contrast ratio of at least 3:1 between the same pixels in the focused and unfocused states, and</li> + <li>is at least as large as the area of a 1 <a>CSS pixel</a> thick <a>perimeter</a> of the unfocused component or sub-component, and</li> + <li>has a contrast ratio of at least 3:1 between the same pixels in the focused and unfocused states.</li> </ul> <p>Exceptions:</p> From 186bcaae17b0bc9b62b54ed44a7e6153cce444f0 Mon Sep 17 00:00:00 2001 From: Alastair Campbell <ac@alastc.com> Date: Thu, 30 Mar 2023 17:44:32 +0100 Subject: [PATCH 06/17] typo on 'and' --- understanding/22/focus-appearance.html | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/understanding/22/focus-appearance.html b/understanding/22/focus-appearance.html index e7421024d5..9da099b062 100644 --- a/understanding/22/focus-appearance.html +++ b/understanding/22/focus-appearance.html @@ -22,8 +22,8 @@ <h2>Focus Appearance Success Criterion text</h2> <p>When the keyboard <a>focus indicator</a> is visible, an area of the focus indicator meets all the following:</p> <ul> - <li>is at least as large as the area of a 1 <a>CSS pixel</a> thick <a>perimeter</a> of the unfocused component or sub-component</li> - <li>has a contrast ratio of at least 3:1 between the same pixels in the focused and unfocused states, and</li> + <li>is at least as large as the area of a 1 <a>CSS pixel</a> thick <a>perimeter</a> of the unfocused component or sub-component, and</li> + <li>has a contrast ratio of at least 3:1 between the same pixels in the focused and unfocused states</li> </ul> <p>Exceptions:</p> From 2d83963eb660f12460cddf202d3e920a4495ee72 Mon Sep 17 00:00:00 2001 From: Alastair Campbell <ac@alastc.com> Date: Thu, 30 Mar 2023 18:10:44 +0100 Subject: [PATCH 07/17] 2px not 1 --- guidelines/sc/22/focus-appearance.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/guidelines/sc/22/focus-appearance.html b/guidelines/sc/22/focus-appearance.html index 9470826184..8735e99770 100644 --- a/guidelines/sc/22/focus-appearance.html +++ b/guidelines/sc/22/focus-appearance.html @@ -7,7 +7,7 @@ <h4>Focus Appearance</h4> <p>When the keyboard <a>focus indicator</a> is visible, an area of the focus indicator meets all the following:</p> <ul> - <li>is at least as large as the area of a 1 <a>CSS pixel</a> thick <a>perimeter</a> of the unfocused component or sub-component, and</li> + <li>is at least as large as the area of a 2 <a>CSS pixel</a> thick <a>perimeter</a> of the unfocused component or sub-component, and</li> <li>has a contrast ratio of at least 3:1 between the same pixels in the focused and unfocused states.</li> </ul> From 9340abaf92a356194adbe46391c872a630cb6757 Mon Sep 17 00:00:00 2001 From: Alastair Campbell <ac@alastc.com> Date: Thu, 30 Mar 2023 18:11:04 +0100 Subject: [PATCH 08/17] Update focus-appearance.html --- understanding/22/focus-appearance.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/understanding/22/focus-appearance.html b/understanding/22/focus-appearance.html index 9da099b062..3961dbf73e 100644 --- a/understanding/22/focus-appearance.html +++ b/understanding/22/focus-appearance.html @@ -22,7 +22,7 @@ <h2>Focus Appearance Success Criterion text</h2> <p>When the keyboard <a>focus indicator</a> is visible, an area of the focus indicator meets all the following:</p> <ul> - <li>is at least as large as the area of a 1 <a>CSS pixel</a> thick <a>perimeter</a> of the unfocused component or sub-component, and</li> + <li>is at least as large as the area of a 2 <a>CSS pixel</a> thick <a>perimeter</a> of the unfocused component or sub-component, and</li> <li>has a contrast ratio of at least 3:1 between the same pixels in the focused and unfocused states</li> </ul> From 50b6a26044a7a74ab760a4e82308ee02a4745269 Mon Sep 17 00:00:00 2001 From: Alastair Campbell <ac@alastc.com> Date: Fri, 7 Apr 2023 00:19:28 +0100 Subject: [PATCH 09/17] Update from meeting --- guidelines/sc/22/target-size-minimum.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/guidelines/sc/22/target-size-minimum.html b/guidelines/sc/22/target-size-minimum.html index e4c43f8251..6e60c37187 100644 --- a/guidelines/sc/22/target-size-minimum.html +++ b/guidelines/sc/22/target-size-minimum.html @@ -11,7 +11,7 @@ <h4>Target Size (Minimum)</h4> <li><strong>Inline:</strong> The target is in a sentence or its size is otherwise constrained by the line-height of non-target text;</li> <li><strong>User agent control:</strong> The size of the target is determined by the user agent and is not modified by the author;</li> <li><strong>Essential:</strong> A particular presentation of the target is <a>essential</a> or is legally required for the information being conveyed;</li> - <li><strong>Spacing:</strong> Undersized targets that do not meet another exception are positioned with sufficient spacing so that if a 24 CSS pixel diameter circle is centred on each, none of the circles intersect another circle or target.</li> + <li><strong>Spacing:</strong> 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 <a>bounding box</a> of each, the circles do not intersect another target or the circle for another undersized target.</li> </ul> <p class="note">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.</p> <p class="note">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.</p> From 36717d7464531931fbe13d19b07b6fadb259982c Mon Sep 17 00:00:00 2001 From: Alastair Campbell <ac@alastc.com> Date: Fri, 7 Apr 2023 00:28:32 +0100 Subject: [PATCH 10/17] moving spacing back up --- guidelines/sc/22/target-size-minimum.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/guidelines/sc/22/target-size-minimum.html b/guidelines/sc/22/target-size-minimum.html index 6e60c37187..4d2d585272 100644 --- a/guidelines/sc/22/target-size-minimum.html +++ b/guidelines/sc/22/target-size-minimum.html @@ -7,11 +7,11 @@ <h4>Target Size (Minimum)</h4> <p>The size of the <a>target</a> for <a>pointer inputs</a> is at least 24 by 24 <a>CSS pixels</a>, except where:</p> <ul> + <li><strong>Spacing:</strong> 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 <a>bounding box</a> of each, the circles do not intersect another target or the circle for another undersized target.</li> <li><strong>Equivalent:</strong> The function can be achieved through a different control on the same page that meets this criterion.</li> <li><strong>Inline:</strong> The target is in a sentence or its size is otherwise constrained by the line-height of non-target text;</li> <li><strong>User agent control:</strong> The size of the target is determined by the user agent and is not modified by the author;</li> <li><strong>Essential:</strong> A particular presentation of the target is <a>essential</a> or is legally required for the information being conveyed;</li> - <li><strong>Spacing:</strong> 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 <a>bounding box</a> of each, the circles do not intersect another target or the circle for another undersized target.</li> </ul> <p class="note">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.</p> <p class="note">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.</p> From 9c188ee6bce0ae56591724b45fe94bd0cd886077 Mon Sep 17 00:00:00 2001 From: Alastair Campbell <ac@alastc.com> Date: Fri, 7 Apr 2023 00:36:08 +0100 Subject: [PATCH 11/17] Moving focus-visible to AA --- guidelines/index.html | 3 +-- guidelines/sc/22/focus-visible.html | 12 ------------ understanding/20/focus-visible.html | 2 +- 3 files changed, 2 insertions(+), 15 deletions(-) delete mode 100644 guidelines/sc/22/focus-visible.html diff --git a/guidelines/index.html b/guidelines/index.html index 810d2f7575..1aecb2671c 100644 --- a/guidelines/index.html +++ b/guidelines/index.html @@ -102,7 +102,6 @@ <h4>New Features in WCAG 2.2</h4> <li>3.3.9 <a href="#accessible-authentication-enhanced">Accessible Authentication (Enhanced)</a> (AAA)</li> </ul> <p>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.</p> - <p>In addition to the above new Success Criteria, <a href="#focus-visible">Focus Visible</a> has been promoted from Level AA to Level A.</p> </section> <section> <h4>Numbering in WCAG 2.2</h4> @@ -267,7 +266,7 @@ <h3>Navigable</h3> <section data-include="sc/20/headings-and-labels.html" data-include-replace="true"></section> - <section data-include="sc/22/focus-visible.html" data-include-replace="true"></section> + <section data-include="sc/20/focus-visible.html" data-include-replace="true"></section> <section data-include="sc/20/location.html" data-include-replace="true"></section> diff --git a/guidelines/sc/22/focus-visible.html b/guidelines/sc/22/focus-visible.html deleted file mode 100644 index 4bfce04a33..0000000000 --- a/guidelines/sc/22/focus-visible.html +++ /dev/null @@ -1,12 +0,0 @@ -<section class="sc changed"> - - <h4>Focus Visible</h4> - - <p class="conformance-level">A</p> - <p class="change">Changed</p> - - <p>Any keyboard operable user interface has a mode of operation where the keyboard focus - indicator is visible. - </p> - - </section> \ No newline at end of file diff --git a/understanding/20/focus-visible.html b/understanding/20/focus-visible.html index 5195e6e91f..9ed093e650 100644 --- a/understanding/20/focus-visible.html +++ b/understanding/20/focus-visible.html @@ -19,7 +19,7 @@ <h2>Intent of Focus Visible</h2> <p>โ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.</p> - <p>Note that a keyboard focus indicator can take different forms.<span class="wcag22"> This criterion does not specify what the form is, but <a href="focus-appearance-minimum">Focus Appearance (Minimum)</a> does define how visible the indicator should be. Passing <a href="focus-appearance-minimum">Focus Appearance (Minimum)</a> would pass this success criterion.</span></p> + <p>Note that a keyboard focus indicator can take different forms.<span class="wcag22"> This criterion does not specify what the form is, but <a href="focus-appearance-minimum">Focus Appearance</a> does define how visible the indicator should be. Passing <a href="focus-appearance-minimum">Focus Appearance (Minimum)</a> would pass this success criterion.</span></p> </section> From e22bdb5e3b84723b534ecdde1c9922761a9ae778 Mon Sep 17 00:00:00 2001 From: Alastair Campbell <ac@alastc.com> Date: Fri, 7 Apr 2023 00:37:22 +0100 Subject: [PATCH 12/17] Aligning understanding doc --- guidelines/sc/22/target-size-minimum.html | 4 ++-- understanding/22/target-size-minimum.html | 6 +++--- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/guidelines/sc/22/target-size-minimum.html b/guidelines/sc/22/target-size-minimum.html index 4d2d585272..d42ef16aaa 100644 --- a/guidelines/sc/22/target-size-minimum.html +++ b/guidelines/sc/22/target-size-minimum.html @@ -7,11 +7,11 @@ <h4>Target Size (Minimum)</h4> <p>The size of the <a>target</a> for <a>pointer inputs</a> is at least 24 by 24 <a>CSS pixels</a>, except where:</p> <ul> - <li><strong>Spacing:</strong> 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 <a>bounding box</a> of each, the circles do not intersect another target or the circle for another undersized target.</li> + <li><strong>Spacing:</strong> 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 <a>bounding box</a> of each, the circles do not intersect another target or the circle for another undersized target;</li> <li><strong>Equivalent:</strong> The function can be achieved through a different control on the same page that meets this criterion.</li> <li><strong>Inline:</strong> The target is in a sentence or its size is otherwise constrained by the line-height of non-target text;</li> <li><strong>User agent control:</strong> The size of the target is determined by the user agent and is not modified by the author;</li> - <li><strong>Essential:</strong> A particular presentation of the target is <a>essential</a> or is legally required for the information being conveyed;</li> + <li><strong>Essential:</strong> A particular presentation of the target is <a>essential</a> or is legally required for the information being conveyed.</li> </ul> <p class="note">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.</p> <p class="note">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.</p> diff --git a/understanding/22/target-size-minimum.html b/understanding/22/target-size-minimum.html index 0723ae7ad0..ef11bdb302 100644 --- a/understanding/22/target-size-minimum.html +++ b/understanding/22/target-size-minimum.html @@ -24,11 +24,11 @@ <h4>Target Size (Minimum)</h4> <p>The size of the <a>target</a> for <a>pointer inputs</a> is at least 24 by 24 <a>CSS pixels</a>, except where:</p> <ul> - <li><strong>Equivalent:</strong> The function can be achieved through a different control on the same page that meets this criterion.</li> + <li><strong>Spacing:</strong> 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 <a>bounding box</a> of each, the circles do not intersect another target or the circle for another undersized target;</li> + <li><strong>Equivalent:</strong> The function can be achieved through a different control on the same page that meets this criterion.</li> <li><strong>Inline:</strong> The target is in a sentence or its size is otherwise constrained by the line-height of non-target text;</li> <li><strong>User agent control:</strong> The size of the target is determined by the user agent and is not modified by the author;</li> - <li><strong>Essential:</strong> A particular presentation of the target is <a>essential</a> or is legally required for the information being conveyed;</li> - <li><strong>Spacing:</strong> Undersized targets that do not meet another exception are positioned with sufficient spacing so that if a 24 CSS pixel diameter circle is centred on each, none of the circles intersect another circle or target.</li> + <li><strong>Essential:</strong> A particular presentation of the target is <a>essential</a> or is legally required for the information being conveyed.</li> </ul> <p class="note">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.</p> <p class="note">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.</p> From 7fea64fa65438232c3e563f88b87d4fce43adf17 Mon Sep 17 00:00:00 2001 From: Alastair Campbell <ac@alastc.com> Date: Tue, 18 Apr 2023 15:36:21 +0100 Subject: [PATCH 13/17] Update min-bounding-box --- guidelines/terms/22/minimum-bounding-box.html | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/guidelines/terms/22/minimum-bounding-box.html b/guidelines/terms/22/minimum-bounding-box.html index cf22492af8..93614b6c7f 100644 --- a/guidelines/terms/22/minimum-bounding-box.html +++ b/guidelines/terms/22/minimum-bounding-box.html @@ -1,6 +1,6 @@ -<dt class="new"><dfn>minimum bounding box</dfn></dt> +<dt class="new"><dfn data-lt="bounding boxes">bounding box</dfn></dt> <dd class="new"> <p class="change">New</p> - <p>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.</p> + <p>the smallest enclosing rectangle aligned to the horizontal axis within which all the points of a shape lie.</p> </dd> From 0f41593054d51159a74da632ef55e451b9894477 Mon Sep 17 00:00:00 2001 From: Alastair Campbell <ac@alastc.com> Date: Thu, 20 Apr 2023 14:37:52 +0100 Subject: [PATCH 14/17] Updating perimeter for 2px --- guidelines/terms/22/perimeter.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/guidelines/terms/22/perimeter.html b/guidelines/terms/22/perimeter.html index 68be5a3ae0..a4c07ea799 100644 --- a/guidelines/terms/22/perimeter.html +++ b/guidelines/terms/22/perimeter.html @@ -2,6 +2,6 @@ <dd class="new"> <p class="change">New</p> <p>continuous line forming the boundary of a shape not including shared pixels, or the <a>minimum bounding box</a>, whichever is shortest.</p> - <aside class="example"><p>The perimeter calculation for a rectangle is 2<em>h</em>+2<em>w</em> -4, where <em>h</em> is the height and <em>w</em> is the width and the corners are not counted twice. The perimeter of a circle is 2๐<em>r</em>.</p></aside> + <aside class="example"><p>The perimeter calculation for a 2 CSS pixel perimeter around a rectangle is 4<em>h</em>+4<em>w</em> -16, where <em>h</em> is the height and <em>w</em> is the width and the corners are not counted twice. For a 2 CSS pixel perimeter around a circle it is 4๐<em>r</em>.</p></aside> </dd> From bef570a5bcd660b5da980ce71399ceb680f89671 Mon Sep 17 00:00:00 2001 From: Alastair Campbell <ac@alastc.com> Date: Thu, 20 Apr 2023 14:38:54 +0100 Subject: [PATCH 15/17] Undoing min-bounding-box change --- guidelines/terms/22/minimum-bounding-box.html | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/guidelines/terms/22/minimum-bounding-box.html b/guidelines/terms/22/minimum-bounding-box.html index 93614b6c7f..96b5efc7ba 100644 --- a/guidelines/terms/22/minimum-bounding-box.html +++ b/guidelines/terms/22/minimum-bounding-box.html @@ -1,6 +1,6 @@ -<dt class="new"><dfn data-lt="bounding boxes">bounding box</dfn></dt> +<dt class="new"><dfn data-lt="bounding boxes">minimim bounding box</dfn></dt> <dd class="new"> <p class="change">New</p> - <p>the smallest enclosing rectangle aligned to the horizontal axis within which all the points of a shape lie.</p> + <p>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.</p> </dd> From 728a19c5d54578e81531ffdbaf3cb4c968425925 Mon Sep 17 00:00:00 2001 From: Alastair Campbell <ac@alastc.com> Date: Thu, 20 Apr 2023 14:39:27 +0100 Subject: [PATCH 16/17] typo --- guidelines/terms/22/minimum-bounding-box.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/guidelines/terms/22/minimum-bounding-box.html b/guidelines/terms/22/minimum-bounding-box.html index 96b5efc7ba..daeca0df6e 100644 --- a/guidelines/terms/22/minimum-bounding-box.html +++ b/guidelines/terms/22/minimum-bounding-box.html @@ -1,4 +1,4 @@ -<dt class="new"><dfn data-lt="bounding boxes">minimim bounding box</dfn></dt> +<dt class="new"><dfn data-lt="bounding boxes">minimum bounding box</dfn></dt> <dd class="new"> <p class="change">New</p> <p>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.</p> From 358097e02152b741e1a62d71f3cf385dabdd6f19 Mon Sep 17 00:00:00 2001 From: Alastair Campbell <ac@alastc.com> Date: Thu, 20 Apr 2023 17:02:33 +0100 Subject: [PATCH 17/17] Adjusting maths --- guidelines/terms/22/perimeter.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/guidelines/terms/22/perimeter.html b/guidelines/terms/22/perimeter.html index a4c07ea799..a4325e5568 100644 --- a/guidelines/terms/22/perimeter.html +++ b/guidelines/terms/22/perimeter.html @@ -2,6 +2,6 @@ <dd class="new"> <p class="change">New</p> <p>continuous line forming the boundary of a shape not including shared pixels, or the <a>minimum bounding box</a>, whichever is shortest.</p> - <aside class="example"><p>The perimeter calculation for a 2 CSS pixel perimeter around a rectangle is 4<em>h</em>+4<em>w</em> -16, where <em>h</em> is the height and <em>w</em> is the width and the corners are not counted twice. For a 2 CSS pixel perimeter around a circle it is 4๐<em>r</em>.</p></aside> + <aside class="example"><p>The perimeter calculation for a 2 CSS pixel perimeter around a rectangle is 4<em>h</em>+4<em>w</em>, where <em>h</em> is the height and <em>w</em> is the width. For a 2 CSS pixel perimeter around a circle it is 4๐<em>r</em>.</p></aside> </dd>