This repository was archived by the owner on Mar 4, 2020. It is now read-only.
docs(Accessibility): add accessibility spec #2237
Open
Conversation
This file contains 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
jurokapsiar
requested review from
dvdzkwsk,
dzearing,
ecraig12345,
JasonGore,
jdhuntington,
kenotron,
layershifter,
levithomason,
miroslavstastny and
mnajdova
as code owners
smykhailov
reviewed
Jan 14, 2020
Perf comparison
Generated by 🚫 dangerJS |
kolaps33
approved these changes
Jan 14, 2020
khmakoto
reviewed
Jan 14, 2020
specs/Accessibility.md
Outdated
| - macOS/Chrome - VoiceOver | ||
|
|
||
| ## Contrast | ||
| - There has to be sufficient contrast between background and foreground of the component (text, icon...) in all component states and themes. |
There was a problem hiding this comment.
This could use more info, links to specs etc
Co-Authored-By: Makoto Morimoto <humbertomakotomorimoto@gmail.com>
aneeshack4
reviewed
Jan 16, 2020
khmakoto
reviewed
Jan 21, 2020
|
|
||
| ## Zoom | ||
| - Elements need to be rendered correctly when zoomed up to 400% | ||
| - Content need to be able to [reflow](https://www.w3.org/WAI/WCAG21/Understanding/reflow.html) |
There was a problem hiding this comment.
Suggested change
| - Content need to be able to [reflow](https://www.w3.org/WAI/WCAG21/Understanding/reflow.html) | |
| - Content needs to be able to [reflow](https://www.w3.org/WAI/WCAG21/Understanding/reflow.html) |
| <Checkbox aria-checked={false} ... /> | ||
| ``` | ||
|
|
||
| Components also respect onKeyDown prop for event listeners. If used, the listener is called after the keys from the behavior have been processed. |
There was a problem hiding this comment.
Suggested change
| Components also respect onKeyDown prop for event listeners. If used, the listener is called after the keys from the behavior have been processed. | |
| Components also respect the `onKeyDown` prop for event listeners. If used, the listener is called after the keys from the behavior have been processed. |
| ## Focus | ||
| - Whenever possible, focus should land only on elements that have concrete implicit or explicit ARIA role (`<button />`, `role='button'`, `role='menuitem'`, ....) | ||
| - onClick event handlers need to be handled on focusable elements with implicit or explicit ARIA role and not on their parent/child elements | ||
| - When reacting to on focus or on hover events, screen reader interaction needs to be specified. Some screen readers do not have the concept of hovering and not always focus elements, so the screen reader needs another way to interact with the elements. For example showing popups on focus or on hover needs to have an alternatve interaction compatible with the screen readers. |
There was a problem hiding this comment.
Suggested change
| - When reacting to on focus or on hover events, screen reader interaction needs to be specified. Some screen readers do not have the concept of hovering and not always focus elements, so the screen reader needs another way to interact with the elements. For example showing popups on focus or on hover needs to have an alternatve interaction compatible with the screen readers. | |
| - When reacting to on focus or on hover events, screen reader interaction needs to be specified. Some screen readers do not have the concept of hovering and don't always focus elements, so the screen reader needs another way to interact with them. For example showing popups on focus or on hover needs to have an alternative interaction compatible with the screen readers. |
aneeshack4
reviewed
Jan 31, 2020
| - onClick event handlers need to be handled on focusable elements with implicit or explicit ARIA role and not on their parent/child elements | ||
| - When reacting to on focus or on hover events, screen reader interaction needs to be specified. Some screen readers do not have the concept of hovering and not always focus elements, so the screen reader needs another way to interact with the elements. For example showing popups on focus or on hover needs to have an alternatve interaction compatible with the screen readers. | ||
|
|
||
| ## Screen reader support |
There was a problem hiding this comment.
Would be helpful to add guidance for scan mode or at least warnings of lack of scan mode support because a lot of issues coming in currently are regarding this special feature of Narrator (which since it is a Microsoft AT users expect our controls to work with it fully).
# for free
to subscribe to this conversation on GitHub.
Already have an account?
#.
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.
This reflects current state of the framework, code and process used for Fluent components