Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

WCAG 2.2 CR 3 updates #3123

Merged
merged 18 commits into from
May 3, 2023
Merged

WCAG 2.2 CR 3 updates #3123

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
18 commits
Select commit Hold shift + click to select a range
0038836
Initial draft
alastc Mar 28, 2023
1733728
Update target-size-minimum.html
alastc Mar 28, 2023
9e9af81
Target size updates
alastc Mar 28, 2023
2a7cd2c
Updates to focus apearance
alastc Mar 29, 2023
36a0d80
Typo on 'and'
alastc Mar 30, 2023
186bcaa
typo on 'and'
alastc Mar 30, 2023
2d83963
2px not 1
alastc Mar 30, 2023
9340aba
Update focus-appearance.html
alastc Mar 30, 2023
50b6a26
Update from meeting
alastc Apr 6, 2023
dfd2665
Merge branch 'wcag22-cr3-last-updates' of https://github.com/w3c/wcag…
alastc Apr 6, 2023
36717d7
moving spacing back up
alastc Apr 6, 2023
9c188ee
Moving focus-visible to AA
alastc Apr 6, 2023
e22bdb5
Aligning understanding doc
alastc Apr 6, 2023
7fea64f
Update min-bounding-box
alastc Apr 18, 2023
0f41593
Updating perimeter for 2px
alastc Apr 20, 2023
bef570a
Undoing min-bounding-box change
alastc Apr 20, 2023
728a19c
typo
alastc Apr 20, 2023
358097e
Adjusting maths
alastc Apr 20, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 1 addition & 2 deletions guidelines/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down Expand Up @@ -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>

Expand Down
25 changes: 6 additions & 19 deletions guidelines/sc/22/focus-appearance.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,27 +2,14 @@

<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 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>

<p>Exceptions:</p>
<ul>
Expand Down
12 changes: 0 additions & 12 deletions guidelines/sc/22/focus-visible.html
View file
Open in desktop

This file was deleted.

6 changes: 3 additions & 3 deletions guidelines/sc/22/target-size-minimum.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>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>
alastc marked this conversation as resolved.
Show resolved Hide resolved
<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>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>
Expand Down
2 changes: 1 addition & 1 deletion guidelines/terms/22/minimum-bounding-box.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<dt class="new"><dfn>minimum 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>
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

i'm still unclear what that second part actually means in practice...how would I imagine a link on a single line? it's a bit cryptic

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this also makes it confusing when considering targets that are fragmented on purpose somehow...would the "pretend it's all together" approach apply to them too?

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

ah, as you were, I see you answered this in the email

The second sentence about wrapping targets should not apply to target size because, by the definition of target, it is “a region” rather than multiple regions.

It should also not come up due to the inline exception.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

however, are you re-applying this second sentence here in the PR? or am I getting confused?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It is applicable to focus-appearance, and yes, if the link were not wrapped, that's the size.
It is not applicable to target-size, both due to the inline exception, and because a target is defined as a region (not multiple regions).

Expand Down
2 changes: 1 addition & 1 deletion guidelines/terms/22/perimeter.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>, 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>
Copy link
Contributor

@WilcoFiers WilcoFiers Apr 25, 2023 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This note is wrong. A 2px border around the perimeter isn't 2 * width + 2 * height. You're missing the corners in that. Instead its 2 * (width+2) + 2 * (height+2). And for a circle it's not 4𝜋 * radius. It's 2𝜋 * (radius+1) + 2𝜋 * (radius+2).

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Wilco, the example is 2h+2w-4, not 2h+2w. You are measuring the internal width and height in your calculation, which I guess we should be clear on which way is correct. I thought that we had settled on the original form (2h+2w-4).

For the circle, you are saying the same thing, except perhaps making it less clear since you do part of the math. The perimeter of a circle is 2𝜋r (or 𝜋d as I learned it) so if we want to clarify the computation for different border thicknesses we should use 2𝜋r*border thickness. And again, we need to clarify if the border is inside or outside the circle itself.

I think that we might need to just mention that authors and evaluators need to start with the basic formula and make adjustments if the border extends beyond the bounds of the shape.

Copy link

@JAWS-test JAWS-test Apr 25, 2023 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

In my opinion, it makes no sense to count the actual pixels for a rectangle and therefore subtract the corner pixels, but for a circle take the theoretical pixels and subtract nothing. The actual pixels for a circle can deviate considerably from 4 x PI x radius, especially for small circles.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hi Wilco,

See the comment above. Drawing the perimeter outside the component would lead to odd fails, by a few px.

Drawing it with 1px inside, 1px outside leads to the simplest calc as 2w + 2h - 4 and the outer of 2w + 2h + 4, giving total of 4w + 4h.

Drawing both pixels of the perimeter inside would be the most conservative, with the exact calc being 4w + 4h – 16.

</dd>

7 changes: 0 additions & 7 deletions guidelines/terms/22/target-offset.html
View file
Open in desktop

This file was deleted.

2 changes: 1 addition & 1 deletion understanding/20/focus-visible.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
45 changes: 13 additions & 32 deletions understanding/22/focus-appearance.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 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>

<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>.
Expand Down
12 changes: 6 additions & 6 deletions understanding/22/target-size-minimum.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
<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>
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

does this need a new definition somewhere for "bounding box"?

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

probably something very high-level like https://developer.mozilla.org/en-US/docs/Glossary/Bounding_box (rather than that definition of "minimum bounding box" that used to be used for focus appearance)

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Well, seeing as focus-appearance doesn't use that definition any more, I think we can re-use it here. The latest push includes that change.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I do think the definition on https://developer.mozilla.org/en-US/docs/Glossary/Bounding_box is quite nice and concise. also, not quite sure what "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." part of the minimum bounding box definition actually means/shakes out to, so if we ARE going with that definition, this may need some clarification

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I agree that the Mozilla bounding box is definition seems sufficient. We have the wrinkle that our bounding box for hypertext is to based on the bounding box formed when linked text is unspooled to a single line.

<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>
<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>
</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>
alastc marked this conversation as resolved.
Show resolved Hide resolved
Expand Down