From 01dbded7d744621d39c3f6abf4bcee5eeacf6f19 Mon Sep 17 00:00:00 2001 From: Peter W Date: Sun, 11 Sep 2016 20:11:02 +1000 Subject: [PATCH 1/9] Make .new-search button a bit more visible * always include a dotted underline under "Start a new search". * on hover, dotted becomes solid --- css/style.css | 6 ++++++ index.html | 5 ++++- 2 files changed, 10 insertions(+), 1 deletion(-) diff --git a/css/style.css b/css/style.css index 52b9783..f0fe0a7 100644 --- a/css/style.css +++ b/css/style.css @@ -409,6 +409,12 @@ input#nearby-girls { background-color: transparent; text-decoration: none; } +.new-search span { + border-bottom: 1px dotted; +} +.new-search:hover span { + border-bottom-style: solid; +} .jumbotron #or { text-transform: uppercase; diff --git a/index.html b/index.html index 7c4ed1f..d6fd77a 100644 --- a/index.html +++ b/index.html @@ -93,7 +93,10 @@

I live at:

- Start a new search + + + Start a new search +
From 2f79d43b0b1345665d1d3a4bed0513eb58187f68 Mon Sep 17 00:00:00 2001 From: Peter W Date: Sun, 11 Sep 2016 20:28:11 +1000 Subject: [PATCH 2/9] fix new search button layout on narrow screens * we only want padding-right: 0 to apply on wide screens. * uses same breakpoint as bootstrap does for .col-sm-8 --- css/style.css | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/css/style.css b/css/style.css index f0fe0a7..e7276ab 100644 --- a/css/style.css +++ b/css/style.css @@ -393,8 +393,10 @@ input#nearby-girls { margin-right: 1em; } -.new-search-btn-column { - padding-right: 0; +@media (min-width: 768px) { + .new-search-btn-column { + padding-right: 0; + } } .new-search.btn { From 7e3eb35614a25e27688a5796093d655cd64e813b Mon Sep 17 00:00:00 2001 From: Peter W Date: Sun, 11 Sep 2016 20:36:30 +1000 Subject: [PATCH 3/9] WCAG: use text-shadow for contrast * 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 https://github.com/CodeforAustralia/school-finder/issues/191#issuecomment-244863615) * 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). --- css/style.css | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/css/style.css b/css/style.css index e7276ab..34c0730 100644 --- a/css/style.css +++ b/css/style.css @@ -8,7 +8,8 @@ body { background-color: #39acc9; color: #3e3e3e; padding-bottom: 0px; font-size: 34px; } -.header .sitename { +.sitename, .results-list .btn, .new-search, footer { + text-shadow: 0px 0px 1px #375a63; text-shadow: 0px 0px 1px rgb(55, 90, 99); } .org-logo img { @@ -60,9 +61,8 @@ a:hover .fa-circle { color: #f7f6f6; } a:hover .fa-stack-1x { - color: #39ACC9; - font-size: 1.1em; // make the icons pop out a bit - text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1); + color: #375a63; /* use same as circle's text shadow for increased contrast */ + text-shadow: none; } #map-container { From 2885db75365ddb0534ea657cecebaf8118928117 Mon Sep 17 00:00:00 2001 From: Peter W Date: Sun, 11 Sep 2016 22:48:24 +1000 Subject: [PATCH 4/9] WCAG: fix contrast on disclaimers + results list 2ndary action * 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 --- css/style.css | 17 +++++++++++++++-- index.html | 6 +++--- 2 files changed, 18 insertions(+), 5 deletions(-) diff --git a/css/style.css b/css/style.css index 34c0730..350f7b8 100644 --- a/css/style.css +++ b/css/style.css @@ -433,9 +433,22 @@ input#nearby-girls { margin-top: 1em; } .jumbotron .disclaimer { - margin-top: 1em; + margin-top: 24px; margin-bottom: 0em; - color: rgb(153, 153, 153); +} + +.jumbotron .lesser-text { + font-size: 16px; + color: #717171; +} +.lesser-text a { + color: inherit; + font-weight: bold; + text-decoration: none; + border-bottom: 1px dotted; +} +.lesser-text a:hover { + border-bottom-style: solid; } .school-name-search { margin-right: 2em; diff --git a/index.html b/index.html index d6fd77a..3f7d627 100644 --- a/index.html +++ b/index.html @@ -73,7 +73,7 @@

Find a school

-

Information subject to change; by using this, you agree to our terms of service.

+

Information subject to change; by using this, you agree to our terms of service.

@@ -82,7 +82,7 @@

I live at:

Search -

*We do not keep address information. For best results please supply your full address.

+

*We do not keep address information. For best results please supply your full address.

@@ -208,7 +208,7 @@

Results

{{/each}} -

Or, try a new search.

+

Or, try a new search.

From 96acc7f425d80c77e64be111f8890e3a7f121715 Mon Sep 17 00:00:00 2001 From: Peter W Date: Sun, 11 Sep 2016 20:26:17 +1000 Subject: [PATCH 5/9] WCAG: aria-label address, school name inputs * 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 --- index.html | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/index.html b/index.html index 3f7d627..80be824 100644 --- a/index.html +++ b/index.html @@ -65,7 +65,7 @@

Find a school

- + @@ -80,7 +80,7 @@

Find a school

I live at:

Please provide your home location* to see nearby schools:

-

+

Search

*We do not keep address information. For best results please supply your full address.

From 817149c7f58068ddf299d8cbd68eeef0c25444da Mon Sep 17 00:00:00 2001 From: Peter W Date: Mon, 12 Sep 2016 08:51:48 +1000 Subject: [PATCH 6/9] WCAG: fix contrast in school details section * makes text just a shade darker so light font color is more visible against it. --- css/style.css | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/css/style.css b/css/style.css index 350f7b8..7f33b0a 100644 --- a/css/style.css +++ b/css/style.css @@ -156,7 +156,7 @@ a:hover .fa-stack-1x { ul.school-details { list-style: none; - background: #7e7d7d; + background: #696767; color: white; margin-top: 35px; padding: 1em; @@ -200,7 +200,7 @@ ul.school-details { .school-details .fa { margin-right: 0.5em; - color: #7e7d7d; + color: #696767; } .school-details .fa-inverse { color: white; From 1de7a834e048b53307c0ca26d1996f1867e4ca8d Mon Sep 17 00:00:00 2001 From: Peter W Date: Mon, 12 Sep 2016 08:54:45 +1000 Subject: [PATCH 7/9] WCAG: fix contrast on 'this school serves your location' text * (background is light colored and we needed more contrast) --- css/style.css | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/css/style.css b/css/style.css index 7f33b0a..71f6910 100644 --- a/css/style.css +++ b/css/style.css @@ -140,7 +140,8 @@ a:hover .fa-stack-1x { } .school-info-intro { - color: rgb(132, 132, 132); + color: rgb(112, 112, 112); + color: #707070; margin-top: 0.25em; } .school-info .field-label { From 4bc46524b8c9176930f3b208e65de9963331367a Mon Sep 17 00:00:00 2001 From: Peter W Date: Mon, 12 Sep 2016 09:01:41 +1000 Subject: [PATCH 8/9] .readmore style changes * 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 (schoolview.js) -- we want the border-bottom on just 'continue reading', not the right arrow content :before it. --- css/style.css | 18 ++++++++++++++++++ js/views/schoolview.js | 2 +- 2 files changed, 19 insertions(+), 1 deletion(-) diff --git a/css/style.css b/css/style.css index 71f6910..3f79a42 100644 --- a/css/style.css +++ b/css/style.css @@ -149,6 +149,24 @@ a:hover .fa-stack-1x { } .expandable-text .body { display:none; } +a.readmore { + font-weight: bold; + color: inherit; + text-decoration: none; +} +.readmore:before { + content: " \2192 "; /* → is → is \2192 */ + margin-left: 2px; +} +.readmore span { + border-bottom: 1px dotted; + margin-left: 2px; + color: #717171; +} +.readmore:hover span { + border-bottom-style: solid; +} + .school-description .field-label { font-size: 25px; color: #d72d6c; diff --git a/js/views/schoolview.js b/js/views/schoolview.js index b3dbb9c..1d2c347 100644 --- a/js/views/schoolview.js +++ b/js/views/schoolview.js @@ -63,7 +63,7 @@ app = app || {}; var result; if (breakpoint < text.length) { // build a teaser and full text. - var continueReading = ' → Continue Reading '; + var continueReading = 'Continue Reading'; // regex looking for short_text worth of characters + whatever it takes to get to a whitespace // (we only want to break on whitespace, so we don't cut words in half) From 2ee89daf11e7eec217f5c93b88e028b66169b3df Mon Sep 17 00:00:00 2001 From: Peter W Date: Mon, 12 Sep 2016 09:17:12 +1000 Subject: [PATCH 9/9] WCAG: add alt="" on school non-content icon * https://github.com/GoogleChrome/accessibility-developer-tools/wiki/Audit-Rules#ax_text_02 says: ``` ``` --- index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/index.html b/index.html index 80be824..668214d 100644 --- a/index.html +++ b/index.html @@ -224,7 +224,7 @@

Results

- + {{school_name}}