bunch of editorial changes #563
Closed
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
alastc
reviewed
Dec 15, 2018
| @@ -11,20 +11,22 @@ <h1>Understanding Non-text Contrast</h1> | |||
| <h2>Intent</h2> | |||
|
|
|||
|
|
|||
| <p>The intent of this Success Criterion is to ensure that active user interface components (i.e., controls) and meaningful graphics are distinguishable by people with moderately low vision. The requirements and rationale are similar to those for large text in <a href="contrast-minimum">1.4.3 Contrast (Minimum)</a>.</p> | |||
| <p>The intent of this Success Criterion is to ensure that active user interface components (i.e., controls) and meaningful graphics are distinguishable by people with moderately low vision who do not use contrast-enhancing assistive technology. The requirements and rationale are similar to those for large text in <a href="contrast-minimum">1.4.3 Contrast (Minimum)</a>.</p> | |||
There was a problem hiding this comment.
I don't think this change is relevant, even if you do use a contrast enhancing technology many graphics won't increase in contrast based on that usage.
alastc
reviewed
Dec 15, 2018
|
|
||
| <p>This Success Criterion does not require that all states are differentiated within the component. With the exception of keyboard focus indicators, links and buttons are not required to differentiate states such as hover. Information within controls that convey the value or state of an input, such as checkboxes, sliders, and radio buttons must meet the contrast requirement for those states. For example, the tick in a checkbox must meet the contrast requirement.</p> | ||
| <p>This Success Criterion does not requires that User Interface Component states have a 3:1 contrast ratio with other states for the same component. The visual information that indicates that a component is in the focused state must have a 3:1 contrast ratio with the colors adjacent to the component in the focused state. For example, a black button with white text on a white background meets the 3:1 contrast ratio, and the same button when focused changes the black color in the button to dark blue will also meet the 3:1 contrast ratio even if the dark blue and black colors do not have a 3:1 contrast ratio between them.</p> |
There was a problem hiding this comment.
This one depends on the outcome of the group discussion.
alastc
reviewed
Dec 15, 2018
|
|
||
| <p>Low contrast controls are more difficult to perceive, and may be completely missed by people with a visual impairment. Similarly, if a graphic is needed to understand the content or functionality of the webpage then it should be perceivable by people with low vision or other impairments without the need for contrast-enhancing assistive technology.</p> | ||
|
|
||
| <section id="user-interface-components"> | ||
| <h3>Active User Interface Components</h3> | ||
|
|
||
| <p>For active controls, those that are not inactive or disabled, such as buttons and form fields: Any visual information provided that is necessary for a user to identify that a control exists and how to operate it must have a minimum 3:1 contrast ratio with the adjacent background. Also, any visual effects implemented which are necessary to indicate state, such as whether a component is selected or focused, must also ensure that the information used to identify the control in that state has a minimum 3:1 contrast ratio.</p> | ||
| <p>For active controls that are not inactive or disabled, such as buttons and form fields: any visual information provided that is necessary for a user to identify that a control is present and how to operate it must have a minimum 3:1 contrast ratio with the adjacent colors. Also, any visual effects implemented which are necessary to indicate state, such as whether a component is selected or focused must also ensure that the information used to identify the control in that state has a minimum 3:1 contrast ratio.</p> |
alastc
reviewed
Dec 15, 2018
|
|
||
| <h4>Boundaries</h4> | ||
|
|
||
| <p>This success criteria does not require that controls have a visual boundary indicating the hit area, but if the visual indicator of the control is the only way to identify the control, then that indicator must have sufficient contrast. If text (or an icon) within a button is visible and there is no visual indication of the hit area, or the visual indication does not provide the only indication, then there is no contrast requirement beyond the text contrast (<a href="contrast-minimum">1.4.3 Contrast (Minimum)</a>) or icon contrast covered by the Graphical Objects part of this Success Criteria. Note that for people with cognitive disabilities it is recommended to delineate the boundary of controls to aid in the recognition of controls and therefore the completion of activities.</p> | ||
| <p>This success criteria does not require that controls have a visual boundary indicating the hit area, but if the visual indicator of the control is the only way to identify the control, then that indicator must have sufficient contrast. If text (or an icon) within a button is visible and there is no visual indication of the hit area then the Success Criterion is passed. If a button with text also has a colored border, since the border does not provide the only indication there is no contrast requirement beyond the text contrast (<a href="contrast-minimum">1.4.3 Contrast (Minimum)</a>). Note that for people with cognitive disabilities it is recommended to delineate the boundary of controls to aid in the recognition of controls and therefore the completion of activities.</p> |
alastc
reviewed
Dec 15, 2018
| @@ -77,12 +79,6 @@ <h4>Use of Color and Focus Visible</h4> | |||
| <img alt="Two buttons on a white background. The first has a blue border to indicate its boundary, white internal background and blue text. The second adds a thick blue-grey outer border to show focus." src="img/first-button-example.png" /> | |||
| <figcaption>An active control showing the visual boundary by default, and the focus indicator which changes the shape of the component</figcaption> | |||
| </figure> | |||
| <p>It is also possible to do the reverse of expanding a button with an outline, and change the outer part of the component to a color that contrasts with the inner color.</p> | |||
There was a problem hiding this comment.
Need to get this aspect in front of the group.
alastc
added a commit
that referenced
this pull request
Dec 15, 2018
But not all, see comments there for things not added/changed.
|
I couldn't see a 'tick this but not that' type of interface, and because there were some I didn't think should be added (yet), I manually updated the branch. I incorporated most of the changes, but I think a couple are still to be decided by the group. I commented on anything not included. |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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.
@alastc - I put in a bunch of changes that would be good for you to take a look at and we can decide to merge or pick and choose from to include.