From 00388360a418882465376c76f7d4478f1fbe35b0 Mon Sep 17 00:00:00 2001 From: Alastair Campbell 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 @@

Focus Appearance

-

AA

+

AAA

New

-

When the keyboard focus indicator is visible, one or both of the following are true:

-
    -
  1. The entire focus indicator meets all the following: - -
      -
    • encloses the user interface component or sub-component that is focused, 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.
      • -
    -
    2. -
  2. 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 sub-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 or sub-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.
      • -
    -
    3. -
+

When the keyboard focus indicator is visible, an area of the focus indicator meets all the following:

+

Exceptions:

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.

From 36717d7464531931fbe13d19b07b6fadb259982c Mon Sep 17 00:00:00 2001 From: Alastair Campbell 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 @@

Target Size (Minimum)

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.

From 9c188ee6bce0ae56591724b45fe94bd0cd886077 Mon Sep 17 00:00:00 2001 From: Alastair Campbell 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 @@

New Features in WCAG 2.2

  • 3.3.9 Accessible Authentication (Enhanced) (AAA)

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

    Numbering in WCAG 2.2

    @@ -267,7 +266,7 @@

    Navigable

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

    Focus Visible

    - -

    A

    -

    Changed

    - -

    Any keyboard operable user interface has a mode of operation where the keyboard focus - indicator is visible. -

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

    Intent of Focus Visible

    โ€œ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.

    From e22bdb5e3b84723b534ecdde1c9922761a9ae778 Mon Sep 17 00:00:00 2001 From: Alastair Campbell 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 @@

    Target Size (Minimum)

    The size of the target for pointer inputs is at least 24 by 24 CSS pixels, except where:

      -
    • 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.
      • +
    • 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 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;
      • +
    • 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 vertically, the line-height would be horizontal.

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

    Target Size (Minimum)

    The size of the target for pointer inputs is at least 24 by 24 CSS pixels, except where:

      -
    • Equivalent: The function can be achieved through a different control on the same page that meets this criterion.
      • +
    • 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 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;
      • -
    • Spacing: 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.
      • +
    • 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.

    From 7fea64fa65438232c3e563f88b87d4fce43adf17 Mon Sep 17 00:00:00 2001 From: Alastair Campbell 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 @@ -
    minimum bounding box
    +
    bounding box

    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.

    +

    the smallest enclosing rectangle aligned to the horizontal axis within which all the points of a shape lie.

    From 0f41593054d51159a74da632ef55e451b9894477 Mon Sep 17 00:00:00 2001 From: Alastair Campbell 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 @@

    New

    continuous line forming the boundary of a shape not including shared pixels, or the minimum bounding box, whichever is shortest.

    - +
    From bef570a5bcd660b5da980ce71399ceb680f89671 Mon Sep 17 00:00:00 2001 From: Alastair Campbell 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 @@ -
    bounding box
    +
    minimim bounding box

    New

    -

    the smallest enclosing rectangle aligned to the horizontal axis within which all the points of a shape lie.

    +

    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.

    From 728a19c5d54578e81531ffdbaf3cb4c968425925 Mon Sep 17 00:00:00 2001 From: Alastair Campbell 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 @@ -
    minimim bounding box
    +
    minimum bounding box

    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.

    From 358097e02152b741e1a62d71f3cf385dabdd6f19 Mon Sep 17 00:00:00 2001 From: Alastair Campbell 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 @@

    New

    continuous line forming the boundary of a shape not including shared pixels, or the minimum bounding box, whichever is shortest.

    - +