-
Notifications
You must be signed in to change notification settings - Fork 327
Target Size techniques update #4685
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.
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
Open
fstrr
wants to merge
33
commits into
main
Choose a base branch
from
technique-using-css-to-ensure-sufficient-target-size
base: main
Could not load branches
Branch not found: {{ refName }}
Loading
Could not load tags
Nothing to show
Loading
Are you sure you want to change the base?
Some commits from the old base branch may be removed from the timeline,
and old review comments may become outdated.
Open
Changes from all commits
Commits
Show all changes
33 commits
Select commit
Hold shift + click to select a range
cf5419d
New technique for target size enhanced
fstrr 20e41bd
re-title working example
fstrr 665a306
reflow!
fstrr fe10026
re-title c42 working example file
fstrr 1addbf8
replace PNGs with SVGs, update c42 nav example
fstrr 55aeeb9
update img path
fstrr 48217e1
Update C42
fstrr 01ad4f9
link to new technique
fstrr 5271419
re-title c42 image
fstrr dbd0a9f
Update test procedure for C42 as well
patrickhlauke 49f8fe6
Reset base.css to main
patrickhlauke 5f24632
Swap test procedure/expected results for C42 and new technique
patrickhlauke 27b9a97
Update techniques/css/technique-using-css-to-ensure-targets-are-at-le…
patrickhlauke c3ea650
Update techniques/css/C42.html
fstrr bfec7e3
Update techniques/css/C42.html
fstrr 2f16655
Update techniques/css/C42.html
fstrr 31a5a85
Update techniques/css/C42.html
fstrr 32ad743
Update working-examples/css-24px-target-size/index.html
fstrr 686b2c3
Update working-examples/css-24px-target-size/index.html
fstrr 1e3498b
update c42 example to use 24px instead of 36px
fstrr b855799
border color
fstrr affe42d
Update techniques/css/C42.html
patrickhlauke 19a317c
Update techniques/css/C42.html
fstrr e775a4d
Update techniques/css/C42.html
fstrr 7c47d56
Update techniques/css/C42.html
fstrr 93bee90
Merge branch 'main' into technique-using-css-to-ensure-sufficient-tar…
bruce-usab 0abeb4b
fix position of border around links
fstrr d1bb507
delete old png that’s been replaced
fstrr b92615f
Apply suggestion from @adampage
fstrr 1d0d449
Apply suggestion from @adampage
fstrr 5d469a7
Apply suggestion from @adampage
fstrr 2460d54
Apply suggestion from @adampage
fstrr 200a0dc
Various updates
fstrr File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Some comments aren't visible on the classic Files Changed page.
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file not shown.
Binary file not shown.
94 changes: 94 additions & 0 deletions
94
techniques/css/technique-using-css-to-ensure-targets-are-at-least-44-by-44-css-pixels.html
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,94 @@ | ||
| <!DOCTYPE html> | ||
| <html lang="en"> | ||
| <head> | ||
| <meta charset="utf-8"> | ||
| <title>Using CSS to ensure targets are at least 44 by 44 CSS pixels</title> | ||
| </head> | ||
| <body> | ||
| <h1>Using CSS to ensure targets are at least 44 by 44 CSS pixels</h1> | ||
| <section id="applicability"> | ||
| <h2>When to Use</h2> | ||
| <p>All technologies that support CSS and pointer input.</p> | ||
| </section> | ||
| <section id="description"> | ||
| <h2>Description</h2> | ||
| <p>The objective of this technique is to ensure that links in pagination components are large enough to meet the requirements of <a href="../../understanding/21/target-size-enhanced.html">Success Criterion 2.5.5, Target Size (Enhanced)</a>. The aim is to provide an adequate target size to prevent accidental pointer activation of adjacent targets.</p> | ||
| </section> | ||
|
|
||
| <section id="examples"> | ||
| <h2>Examples</h2> | ||
| <p>The following example can be seen as a <a href="../../working-examples/css-44px-target-size/">working example</a>.</p> | ||
| <section class="example"> | ||
| <h3>Making pagination links at least 44px wide and 44px high</h3> | ||
| <p>This example uses <code>min-inline-size</code> and <code>min-block-size</code> on the targets.</p> | ||
| <figure id="pointer-spacing-flex"> | ||
| <img src="img/44px-target-size-pagination-navigation.svg" alt="a pagination control with links for the previous page, pages 1 - 5, and the next page. Page 1 is visually highlighted." height="56" width="514"> | ||
| <figcaption>Example of using CSS to ensure sufficiently large target size</figcaption> | ||
| </figure> | ||
| <h4>The HTML</h4> | ||
| <pre><code class="language-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></code></pre> | ||
| <h4>The CSS</h4> | ||
| <pre><code class="language-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-block-size: 44px; | ||
| min-inline-size: 44px; | ||
| padding: 0.5em; | ||
| }</code></pre> | ||
| </section> | ||
|
|
||
| </section> | ||
| <section id="tests"> | ||
| <h2>Tests</h2> | ||
|
|
||
| <section class="test-procedure"> | ||
| <h3>Procedure</h3> | ||
|
|
||
| <p>For each target that has no sufficiently large equivalent, that isn't in a sentence or otherwise constrained | ||
| by the <code>line-height</code> of non-target text, that has had its size modified by the author, and whose | ||
| presentation isn't essential:</p> | ||
| <ol> | ||
| <li>Check that the target has a size of at least 44px width and 44px height.</li> | ||
| </ol> | ||
| </section> | ||
| <section class="test-results"> | ||
| <h3>Expected Results</h3> | ||
| <ul> | ||
| <li>#1 is true</li> | ||
| </ul> | ||
| </section> | ||
| </section> | ||
| <section id="related"> | ||
| <h2>Related Techniques</h2> | ||
| <ul> | ||
| <li><a href="C42">C42</a></li> | ||
| </ul> | ||
|
|
||
| </section> | ||
| <!-- <section id="resources"> | ||
| <h2>Resources</h2> | ||
| </section> --> | ||
| </body> | ||
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,95 @@ | ||
| <!DOCTYPE html> | ||
| <html lang="en"> | ||
| <head> | ||
| <meta charset="UTF-8"> | ||
| <title>Working example - Using min-height and min-width on target container to ensure sufficient target spacing</title> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> | ||
| <style> | ||
| body{ | ||
| background:#fff; | ||
| color:#000; | ||
| font: 1rem/1.5 system-ui; | ||
| } | ||
|
|
||
| nav, ol, li { | ||
| margin: 0; | ||
| } | ||
|
|
||
| ol{ | ||
| display:flex; | ||
| flex-wrap: wrap; | ||
| list-style-type: none; | ||
| padding: 0; | ||
| } | ||
|
|
||
| li { | ||
| background:#B9D6E5; | ||
| border:1px solid; | ||
| color:#183544; | ||
| margin: 3px; | ||
| min-height: 24px; | ||
| min-width: 24px; | ||
| place-content: center; | ||
| text-align: center; | ||
| } | ||
|
|
||
| ol li:first-of-type, ol li:last-of-type{ | ||
| padding-inline: 8px; | ||
| } | ||
|
|
||
| li a{ | ||
| color:#183544; | ||
| padding: 0 0.2em; | ||
| text-align: center; | ||
| text-decoration: none; | ||
| transition: background 0.2s ease-in-out; | ||
| &:focus-visible{ | ||
| outline: none; | ||
| } | ||
| } | ||
|
|
||
| li:focus-within{ | ||
| outline:2px solid #653171; | ||
| outline-offset:-4px; | ||
| } | ||
|
|
||
| [aria-current=page]{ | ||
| background: #183544; | ||
| color:white; | ||
| } | ||
|
|
||
| li a[href]:hover{ | ||
| background: #653171; | ||
| color:#fff; | ||
| } | ||
|
|
||
| .visually-hidden { | ||
| clip: rect(0, 0, 0, 0); | ||
| clip-path: inset(50%); | ||
| height: 1px; | ||
| overflow: hidden; | ||
| position: absolute; | ||
| white-space: nowrap; | ||
| width: 1px; | ||
| } | ||
|
|
||
| </style> | ||
| </head> | ||
| <body> | ||
| <h1>Working example of using <code>min-height</code> and <code>min-width</code> on target container to ensure sufficient target spacing</h1> | ||
| <p>This example relates to technique <a href="../../techniques/css/C42.html">C42</a>.</p> | ||
|
|
||
| <nav aria-label="pagination"> | ||
| <ol> | ||
| <li><a class="previous">previous</a></li> | ||
| <li><a aria-current="page"><span class="visually-hidden">page </span>1</a></li> | ||
| <li><a href="#"><span class="visually-hidden">page </span>2</a></li> | ||
| <li><a href="#"><span class="visually-hidden">page </span>3</a></li> | ||
| <li><a href="#"><span class="visually-hidden">page </span>4</a></li> | ||
| <li><a href="#"><span class="visually-hidden">page </span>5</a></li> | ||
| <li><a href="#">next</a></li> | ||
| </ol> | ||
| </nav> | ||
|
|
||
| </body> | ||
| </html> |
Oops, something went wrong.
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Uh oh!
There was an error while loading. Please reload this page.