Fixes contrast #200
Merged
Fixes contrast #200
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
* always include a dotted underline under "Start a new search". * on hover, dotted becomes solid
* we only want padding-right: 0 to apply on wide screens. * uses same breakpoint as bootstrap does for .col-sm-8
* apply text shadow for light elements on (kind of) dark backgrounds - has the effect of creating enough contrast to meet WCAG requirements (sort of: see #191 (comment)) * note we make sure to disable text-shadow on the email & github font icons while being hovered, and instead we set the hover color equal to what that text shadow would be (which provides sufficient contrast against the light circle behind the icon).
* previously the contrast wasn't great enough for disclaimer text; this fixes that
(while also switching to from RGB to #hex since we weren't using alpha value so no need for RGB syntax)
* we now have a '.lesser-text' class for things lower in the visual hierarchy (which may or may not be disclaimers).
note: .lesser-text needs more specificity to overcome font-size of .jumbotron p
* use the same style as the disclaimer on the first .jumbotron - gray with a bold link [1]
* to conform with WCAG 1.4.1 (Use of Color) [1], we switch from distinguishing links in disclaimer simply by color
(blue vs light gray) to use a combination of bold font-weight and a dotted underline for links. Note, we use partly
because it's more subtle and aesthetically pleasing for most, but also because bold is recommended as a more
readable alternative to underlining for dyslexic users [2]
* note also we make .lesser-text font a bit smaller (while still readable) so it's position in the visual hierarchy is maintained
while we're making it darker.
* fixes contrast for results list secondary call to action ("or try a new search")
1: see: Use of Color - https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-without-color.html
- 1.4.1 Use of Color: Color is not used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element. (Level A)
- Common failure: "F73: Failure of Success Criterion 1.4.1 due to creating links that are not visually evident without color vision"
2: http://www.bdadyslexia.org.uk/common/ckeditor/filemanager/userfiles/About_Us/policies/Dyslexia_Style_Guide.pdf
* Google Chrome Accessibility audit pointed out that we didn't have any appropriate label. This fixes that by adding 'aria-label' attribute. see https://github.com/GoogleChrome/accessibility-developer-tools/wiki/Audit-Rules#ax_aria_02
* makes text just a shade darker so light font color is more visible against it.
* (background is light colored and we needed more contrast)
* for WCAG - use something other than color to show as link (it's now bold) * instead of link underline, use border-bottom as we do elsewhere * since the right arrow isn't really content, use :before in hopes that screen readers skip it * improve margin (2px) between text and right arrow and between arrow and 'read more' * use same text color as .lesser-text -- we're making it bold but we don't want it too dark that it stands out too much * note the added <span> (schoolview.js) -- we want the border-bottom on just 'continue reading', not the right arrow content :before it.
* https://github.com/GoogleChrome/accessibility-developer-tools/wiki/Audit-Rules#ax_text_02 says: ``` <!-- Good: image used for presentation has an empty alt value --> <img src="line.png" alt=""> ```
|
Hello Peter, thanks, OK to merge |
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.
Fixes #191 - color contrast for accessibility
See comments on commits included, but basically:
font-weightand/or underlining (a dotted bottom border which goes solid on hover -- see note about dyslexics in this commit).aria-labelwhere needed (commit 96acc7f).Still to do:
<a>links rather thanbuttons. See also: Using the button role from MDN1: except where we don't but should be fine, thanks to text-shadow. See this comment for more on that.