DRAFT SC2-1-2-no-keyboard-trap-non-standard-navigation and SC2-1-2-no-keyboard-trap-standard-navigation.md #142
Conversation
…board-trap-standard-navigation.md
| - SC2-1-2-no-keyboard-trap-non-standard-navigation (current) | ||
|
|
||
| description: | | ||
| This rule checks if the user is advised on a method for non-standard keyboard navigation to navigate through focusable content on a web page without becoming trapped in any element. |
This comment was marked as resolved.
This comment was marked as resolved.
Sorry, something went wrong.
|
|
||
| ### Expectation 1 | ||
|
|
||
| For each target element help information is [visible on the page][] and [exposed to assistive technologies][] or can be navigated to from within the keyboard trap. |
This comment was marked as resolved.
This comment was marked as resolved.
Sorry, something went wrong.
_data/contributors.yml
Outdated
|
|
||
| Carlos Duarte: | ||
| name: Carlos Duarte | ||
| site: https://github.com/carlosapaduarte |
There was a problem hiding this comment.
Please leave this file in alphabetical order.
|
|
||
| ### Applicability | ||
|
|
||
| The rule applies to any HTML or SVG element on a web page that is [focusable][] and reachable through [sequential focus navigation](https://www.w3.org/TR/html/editing.html#sequential-focus-navigation). |
There was a problem hiding this comment.
Can we remove "[focusable][] and " from this sentence? It seems to me that any element that can be reached through sequential focus navigation, by definition is focusable. Am I missing something?
|
|
||
| For each target element help information is [visible on the page][] and [exposed to assistive technologies][] or can be navigated to from within the keyboard trap. | ||
|
|
||
| **Note**: As per Success Criterion 2.1.1 Keyboard the help information should be accessible through a keyboard interface. This however is the test subject for another ACT rule. |
There was a problem hiding this comment.
Add "WCAG 2.0" before "Success Criterion".
|
|
||
| ### Expectation 2 | ||
|
|
||
| The help information explains how to cycle to the browser UI, or on how to get to a point from where it is possible to cycle to the browser UI, using [standard keyboard navigation][]. |
There was a problem hiding this comment.
"cycle to the browser UI" is a bit "jargony". Can we find a more plain language term for this?
There was a problem hiding this comment.
I would suggest putting "using standard keyboard navigation" earlier in the sentence.
There was a problem hiding this comment.
"how to get to a point from where you can cycle to the browser UI"
| ## Assumptions | ||
|
|
||
| - The WCAG success criterion applies to all content where focus can be moved to through keyboard navigation. | ||
| - It is not possible to use unmodified arrow or tab keys, or other standard exit methods to move focus away. |
There was a problem hiding this comment.
I don't understand why this would be an assumption.
| ### Passed | ||
|
|
||
| ```html | ||
| <!-- Standard link and button --> |
There was a problem hiding this comment.
This shouldn't pass. There are no instructions.
| ``` | ||
|
|
||
| ```html | ||
| <!-- Hidden link and button --> |
There was a problem hiding this comment.
Same here, no instructions, shouldn't pass.
|
|
||
| ### Applicability | ||
|
|
||
| The rule applies to any HTML or SVG element on a web page that is [focusable][] by keyboard. |
This comment was marked as resolved.
This comment was marked as resolved.
Sorry, something went wrong.
| ``` | ||
|
|
||
| [focusable]: ../pages/algorithms/focusable.html | ||
| [standard keyboard navigation]: ../pages/algorithms/standard-keyboard-navigation.html |
There was a problem hiding this comment.
We will make a separate pull request for the algorithm Standard keyboard navigation.
| ## Assumptions | ||
|
|
||
| - The WCAG success criterion applies to all content where focus can be moved to through keyboard navigation. | ||
| - It is possible to use unmodified arrow or tab keys, or other standard exit methods to move focus away. |
This comment was marked as resolved.
This comment was marked as resolved.
Sorry, something went wrong.
|
|
||
| - The WCAG success criterion applies to all content where focus can be moved to through keyboard navigation. | ||
| - It is possible to use unmodified arrow or tab keys, or other standard exit methods to move focus away. | ||
| - The focus order in keyboard navigation is cyclical, not linear, meaning that the focus order will cycle to the first/last element when it moves away from the last/first element. |
This comment was marked as resolved.
This comment was marked as resolved.
Sorry, something went wrong.
This comment was marked as resolved.
This comment was marked as resolved.
Sorry, something went wrong.
|
|
||
| ```html | ||
| <a href ="#" style="visibility: hidden;">Link 1</a> | ||
| <button class="target" style="visibility: hidden;">Button1</button> |
This comment was marked as resolved.
This comment was marked as resolved.
Sorry, something went wrong.
|
|
||
| For each target element help information is [visible on the page][] and [exposed to assistive technologies][] or can be navigated to from within the keyboard trap. | ||
|
|
||
| **Note**: As per Success Criterion 2.1.1 Keyboard the help information should be accessible through a keyboard interface. This however is the test subject for another ACT rule. |
This comment was marked as resolved.
This comment was marked as resolved.
Sorry, something went wrong.
|
|
||
| ### Expectation 1 | ||
|
|
||
| For each target element help information is [visible on the page][] and [exposed to assistive technologies][] or can be navigated to from within the keyboard trap. |
This comment was marked as resolved.
This comment was marked as resolved.
Sorry, something went wrong.
This comment was marked as resolved.
This comment was marked as resolved.
Sorry, something went wrong.
| var trapOn = false ; | ||
| </script> | ||
|
|
||
| <p class="target">Press the M-key to Exit</p> |
This comment was marked as resolved.
This comment was marked as resolved.
Sorry, something went wrong.
| <p class="target">Press the M-key to Exit</p> | ||
| <button id="btn2" class="target" onkeydown="(function(e){ if (e.keyCode === 77){trapOn=false;document.getElementById('link2').focus();}})(event)" onblur="(function(e){ if(trapOn){document.getElementById('btn1').focus();}})(event)">Button 2</button> | ||
| <a id="link2" href="#">Link 2</a> | ||
| ```` |
This comment was marked as resolved.
This comment was marked as resolved.
Sorry, something went wrong.
| <button id="btn2" class="target" onkeydown="(function(e){ if (e.keyCode === 77){trapOn=false;document.getElementById('link2').focus();}})(event)" onblur="(function(e){ if(trapOn){document.getElementById('btn1').focus();}})(event)">Button 2</button> | ||
| <a id="link2" href="#">Link 2</a> | ||
| ```` | ||
|
|
This comment was marked as resolved.
This comment was marked as resolved.
Sorry, something went wrong.
This comment was marked as resolved.
This comment was marked as resolved.
Sorry, something went wrong.
|
@annethyme @geirsf - please go through comments. |
Updated after review from Wilco and jkodu - added new testcase for passed
Create StandardKeyboardNavigation.md
_data/contributors.yml
Outdated
| Shadi Abou-Zahra: | ||
| name: Shadi Abou-Zahra | ||
| site: https://github.com/nitedog | ||
|
|
||
| Brian Bors: |
There was a problem hiding this comment.
The names are to be in alphabetical order.
Draft version of:
And added contributors to contributors.yml