diff --git a/techniques/css/C42.html b/techniques/css/C42.html index a5ba9c3e07..b70567c6bb 100644 --- a/techniques/css/C42.html +++ b/techniques/css/C42.html @@ -1,11 +1,11 @@ - Using min-height and min-width to ensure sufficient target spacing + Using CSS to ensure sufficient target size -

Using min-height and min-width to ensure sufficient target spacing

+

Using CSS to ensure sufficient target size

Metadata

@@ -18,67 +18,50 @@

When to Use

Description

-

The objective of this technique is to ensure that links in navigation or pagination menus will be spaced so that they fall within an area that measures at least 44 x 44 CSS pixels if the target area itself is smaller than that. The aim is to provide an adequate target clearance so the offset to adjacent targets is sufficient to prevent accidental pointer activation of adjacent targets.

- +

The objective of this technique is to ensure that navigation or pagination links measure at least 44 by 44 CSS pixels. The aim is for target sizes to be large enough for users to easily activate them.

+

Examples

-

The following examples can be seen as rendered versions in the working examples.

- -
-

Using a display value of inline-block and min-height / width

-

The first example shows a situation where the targets (in this case, the linked numbers in th pagination menu) are smaller than 44 x 44 CSS pixels. However, the list items that contain them have a minimum height and width of 44 px set, so that sufficient target spacing is assured.

-
- A horizontal pagination component immediately above the search results. -
Example of using CSS to ensure enough spacing around targets
-
-

Given the following HTML:

- 
<nav class="pag" aria-label="pagination menu">
-	<ol class="pagination-1">
-		<li><span>previous</span></li>
-		<li><strong>1</strong></li>
-		<li><a href="#">2</a></li>
-		<li><a href="#">3</a></li>
-		<li><a href="#">4</a></li>
-		<li><a href="#">5</a></li>
-		<li><a href="#">next</a></li>
-	</ol>
-</nav>
-

The following CSS would ensure the minimum spacing is applied:

- 
ol.pagination-1 li {
-	display: inline-block; 
-	min-width: 44px;
-	min-height: 44px;
-}
- -
+

The following example can be seen as a working example.

-

Using a display value of flex and min-height / width

-

The second example uses min-width and min-height on the targets (the linked numbers in the pagination menu) and not on the parent container, thereby meeting this target spacing Success Criterion and incidentally also the AAA Success Criterion 2.5.5 Target Size.

+

Making pagination links at least 44px wide and 44px high

+

This example uses min-width and min-height on the targets.

- A horizontal pagination component immediately above the search results. It looks identical to the previous example. -
Example of using CSS to ensure enough spacing within targets
+ a pagination control with links for the previous page, pages 1 - 5, and the next page. Page 1 is visually highlighted. +
Example of using CSS to ensure sufficiently large target size
-

Given the following HTML:

- 
<nav class="pag" aria-label="pagination menu">
-	<ol class="pagination-2">
-		<li><span>previous</span></li>
-		<li><strong>1</strong></li>
-		<li><a href="#">2</a></li>
-		<li><a href="#">3</a></li>
-		<li><a href="#">4</a></li>
-		<li><a href="#">5</a></li>
-		<li><a href="#">next</a></li>
-	</ol>
-  </nav>
-

The following CSS ensures the minimum size is applied:

- 
ol.pagination-2 a,
-ol.pagination-2 strong,
-ol.pagination-2 span {
-	display: block;
-	line-height:44px;
-	min-height:44px;
-	min-width: 44px;
+				
The HTML

+
<nav aria-label="pagination">
+  <ol class="pagination-list">
+    <li><a>previous</a></li>
+    <li><a aria-current="page"><span class="visually-hidden">page </span>1</a></li>
+    <li><a href="/page-2"><span class="visually-hidden">page </span>2</a></li>
+    <li><a href="/page-3"><span class="visually-hidden">page </span>3</a></li>
+    <li><a href="/page-4"><span class="visually-hidden">page </span>4</a></li>
+    <li><a href="/page-5"><span class="visually-hidden">page </span>5</a></li>
+    <li><a href="/page-2">next</a></li>
+  </ol>
+</nav>

+					
The CSS

+
.pagination-list{
+  display: flex;
+  gap: 0.5em;
+  list-style: none;
+  padding: 0;        
+}
+
+.pagination-list li{
+  padding: 0.25em;
+}
+
+.pagination-list a{
+  align-items: center;
+  display: flex;
+  justify-content: center;
+  min-height: 44px;
+  min-width: 44px;
+  padding: 0.5em;
 }
@@ -89,25 +72,27 @@

Tests

Procedure

-

For each target that cannot be enlarged by a mechanism, is not inline, and is not covered by the essential exception:

-
    -
  • Check that the target has enough spacing so that the space around it measures at least 44px width and 44px height.
    • -
+

For each target that is not inline and is not covered by the essential exception:

+
    +
  1. Check that the target measures at least 44px width and 44px height.
    2. +

Expected Results

    -
  • Check #1 is true
    • +
  • #1 is true.
-
+ diff --git a/techniques/css/C44.html b/techniques/css/C44.html new file mode 100644 index 0000000000..911f8d38a9 --- /dev/null +++ b/techniques/css/C44.html @@ -0,0 +1,94 @@ + + + + Using CSS to add spacing to undersized targets + + + +

Using CSS to add spacing to undersized targets

+
+

Metadata

+

+

CSS

+

+
+
+

When to Use

+

All technologies that support CSS and pointer input.

+
+
+

Description

+

The objective of this technique is to ensure that links in navigation menus have enough spacing around them to meet the requirements of the spacing exception in Success Criterion 2.5.8, Target Size (Minimum). The aim is to provide an adequate target clearance to prevent accidental pointer activation of adjacent targets.

+
+ +
+

Examples

+

The following example can be seen as a working example.

+ +
+

Adding spacing to undersized targets

+

This example shows a situation where targets are smaller than 24 CSS pixels wide and 24 CSS pixels high. To meet Success Criterion 2.5.8, Target Size (Minimum), when a 24 CSS pixel diameter circle is centered on the bounding box of each target, the circles do not intersect another target or the circle for another undersized target. In this example, each target is 20 × 20 CSS pixels, and a 4 CSS pixel gap is added between each target's parent container to create the minimum required spacing.

+
+ a line of four interactive icons: back, forwards, email, home. +
An example of inline undersized targets
+
+

The HTML

+
<nav aria-label="controls">
+  <ol class="navigation-controls">
+    <li><a href="/previous-page/"><img alt="Back" src="arrow-back.svg"></a></li>
+    <li><a href="/next-page/"><img alt="Forward" src="arrow-forward.svg"></a></li>
+    <li>
+      <a href="mailto:c42@example.com?subject=WCAG%20C42%20Technique">
+        <img alt="Email" src="email.svg">
+      </a>
+    </li>
+    <li><a href="/"><img alt="Home" src="home.svg"></a></li>
+  </ol>
+</nav>
+

The CSS

+
.navigation-controls{
+  display: flex;
+  gap: 4px;
+  line-height: 0;
+  list-style: none;
+  padding: 0;
+}
+
+.navigation-controls a{
+  display: inline-block;
+  line-height: 0;
+}
+ +
+
+
+

Tests

+ +
+

Procedure

+

For each undersized target that has no equivalent, that isn't in a sentence or otherwise constrained by the line-height of non-target text, that hasn't had its size modified by the author, and whose presentation isn't essential:

+
    +
  1. Draw a 24px diameter circle centered on the target's bounding box.
    2. +
  2. Check that the circle from #1 does not intersect any other target.
    3. +
  3. Check that the circle from #1 does not intersect any other undersized target's circle.
    4. +
+
+
+

Expected Results

+
    +
  • #2 and #3 are true.
    • +
+
+
+ + + + diff --git a/techniques/css/img/adding-spacing-undersized-targets.png b/techniques/css/img/adding-spacing-undersized-targets.png new file mode 100644 index 0000000000..6281068f64 Binary files /dev/null and b/techniques/css/img/adding-spacing-undersized-targets.png differ diff --git a/techniques/css/img/pointer-spacing-1.png b/techniques/css/img/pointer-spacing-1.png deleted file mode 100644 index 3297ef987f..0000000000 Binary files a/techniques/css/img/pointer-spacing-1.png and /dev/null differ diff --git a/techniques/css/img/pointer-spacing-2.png b/techniques/css/img/pointer-spacing-2.png deleted file mode 100644 index e124b426e1..0000000000 Binary files a/techniques/css/img/pointer-spacing-2.png and /dev/null differ diff --git a/techniques/css/img/sufficient-spacing-pagination-2.png b/techniques/css/img/sufficient-spacing-pagination-2.png new file mode 100644 index 0000000000..00ba1063f6 Binary files /dev/null and b/techniques/css/img/sufficient-spacing-pagination-2.png differ diff --git a/understanding/21/target-size-enhanced.html b/understanding/21/target-size-enhanced.html index 457ef71693..628ce1cd81 100644 --- a/understanding/21/target-size-enhanced.html +++ b/understanding/21/target-size-enhanced.html @@ -3,7 +3,7 @@ Understanding Target Size (Enhanced) - +

Understanding SC 2.5.5 Target Size (Enhanced)

@@ -65,12 +65,11 @@

Techniques

Each numbered item in this section represents a technique or combination of techniques that the WCAG Working Group deems sufficient for meeting this Success Criterion. However, it is not necessary to use these particular techniques. For information on using other techniques, see Understanding Techniques for WCAG Success Criteria, particularly the "Other Techniques" section.

Sufficient

-

Techniques that are sufficient to meet the Guideline or Success Criterion.

+

Techniques that are sufficient to meet the Guideline or Success Criterion. See example in C42, Using CSS to ensure sufficient target size.

  • Ensuring that targets are at least 44 by 44 CSS pixels.
    • -
  • Ensuring inline links provide sufficiently large activation target.
    • -
+
diff --git a/understanding/22/target-size-minimum.html b/understanding/22/target-size-minimum.html index 9d980dc26b..a25cf3eafe 100644 --- a/understanding/22/target-size-minimum.html +++ b/understanding/22/target-size-minimum.html @@ -191,13 +191,12 @@

Resources

Techniques for Target Size (Minimum)

-

Sufficient Techniques for Target Size (Minimum)

  1. - Using min-height and min-width to ensure sufficient target spacing + Using CSS to add spacing to undersized targets
diff --git a/working-examples/css-pointer-spacing/index.html b/working-examples/css-pointer-spacing/index.html deleted file mode 100644 index d0f152f1d9..0000000000 --- a/working-examples/css-pointer-spacing/index.html +++ /dev/null @@ -1,188 +0,0 @@ - - - - -Working example - Using min-height and min-width to ensure sufficient target spacing - - - - - - - -

Working example of using min-height and min-width to ensure sufficient target spacing

- -

This example relates to technique C42.

- -

Example 1 (display: inline-block, min-height: 44px and min-width: 44px set on list items inside pagination menu)

-

The first example shows a situation where the targets (in this case, the linked numbers in th pagination menu) are smaller than 44 x 44 CSS pixels. However, the list items that contain them have a minimum height and width of 44 px set, so that sufficient target spacing is assured.

-

Search results (invented):

- - -
    -
  1. -

    Garbage Delight by Dennis Lee (2014-05-06) (NoDust) by | HC | Good

    -

    HarperCollins, 1800. Condition: Good.

    -
    2. -
  2. -

    Frederick S Perls: In and out the garbage pail by Frederick S Perls (1969-05-03)

    -

    Real People Press, 1804. Shows some signs of wear, and may have some markings on the inside.

    -
    3. -
  3. -

    Lila Karp: The Queen Is in the Garbage (Classic Feminist Writers) by Lila Karp (2007-05-01)

    -

    1838. Condition: Very Good. Published by Belmont Books, 1969.

    -
    4. -
- - -

Example 2 (display: flex, min-height: 44px and min-width: 44px set on links inside pagination menu)

-

The second example uses min-width and min-height on the targets (the linked numbers in the pagination menu) and not on the parent container, thereby meeting this target spacing Success Criterion and the AAA Success Criterion 2.5.5 Target Size.

-

Search results (invented):

- - -
    -
  1. -

    Garbage Delight by Dennis Lee (2014-05-06) (NoDust) by | HC | Good

    -

    HarperCollins, 1800. Condition: Good.

    -
    2. -
  2. -

    Frederick S Perls: In and out the garbage pail by Frederick S Perls (1969-05-03)

    -

    Real People Press, 1804. Shows some signs of wear, and may have some markings on the inside.

    -
    3. -
  3. -

    Lila Karp: The Queen Is in the Garbage (Classic Feminist Writers) by Lila Karp (2007-05-01)

    -

    1838. Condition: Very Good. Published by Belmont Books, 1969.

    -
    4. -
- - - diff --git a/working-examples/css-sufficient-target-size/index.html b/working-examples/css-sufficient-target-size/index.html new file mode 100644 index 0000000000..8f1dc37f8e --- /dev/null +++ b/working-examples/css-sufficient-target-size/index.html @@ -0,0 +1,124 @@ + + + + + +Working example - Using CSS to ensure sufficient target size + + + + + + +

Working example of using CSS to ensure sufficient target size

+ +

This example relates to technique C42.

+ +

Making pagination links at least least 44px wide and 44px high

+ + + + + diff --git a/working-examples/css-undersized-target-spacing/index.html b/working-examples/css-undersized-target-spacing/index.html new file mode 100644 index 0000000000..21bbe82ff0 --- /dev/null +++ b/working-examples/css-undersized-target-spacing/index.html @@ -0,0 +1,125 @@ + + + + + +Working example - Using CSS to add spacing to undersized targets + + + + + + + + +

Working example of using CSS to add spacing to undersized targets

+ +

This example relate to technique CXXXXXX.

+ + + + +