New issue
Advanced search Search tips
Note: Color blocks (like or ) mean that a user may not be available. Tooltip shows the reason.

Issue 670836 link

Starred by 2 users

Issue metadata

Status: Verified
Owner:
Closed: Dec 2016
Cc:
Components:
EstimatedDays: ----
NextAction: ----
OS: Linux , Windows , Chrome , Mac
Pri: 2
Type: Bug
Team-Accessibility



Sign in to add a comment

MD History: fix a11y audit issues

Project Member Reported by dbeam@chromium.org, Dec 2 2016

Issue description

steps to reproduce:
0) install https://chrome.google.com/webstore/detail/accessibility-developer-t/fpkknkljclfencbdbgkenhalefipecmb?hl=en
1) enable chrome://flags/#extensions-on-chrome-urls
2) visit chrome://history with material design enabled
3) open dev tools > Audits > Accessibility > Run

what do you expect?
minimal damage
 

Comment 1 by dbeam@chromium.org, Dec 2 2016

2016-12-02-121026_524x297_scrot.png
49.5 KB View Download

Comment 2 by dbeam@chromium.org, Dec 2 2016

Cc: aboxhall@chromium.org
Owner: aboxhall@chromium.org
Looks like the contrast ratio calculation is wrong. The text is rgb(117, 117, 117) on pure white, which is fine - but the reported contrast ratio seems to be computed based on that color text on the outer page background color (light gray).

Alice?

To summarize, there are a few things that are low contrast:

* The search prompt: contrast ratio of 3.80, when AA is 4.51
* The blue label in the sidebar (3.16 vs 4.53)
* The footer text (4.08 vs 4.51)
* Any centered message ('Loading', 'No search results found'): These are quite bad, at 1.84 vs 4.51

There are also a couple of false-positives from the extension:

* The severe warning about input labelling seems invalid: There is a <label> which uses the `for` attribute to link to the <input>, and VoiceOver/ChromeVox seem to be happy with this. (Although we should change it to `aria-labelledby`, per the Chrome style guide)

* The contrast ratio of the domains in the list is fine. As per comment 3, the extension identifies the wrong background color, but this is understandable since the background is applied in a really weird way (on the #background element).
The following should hold true for *all* webUI pages. Please let me know if additional bugs need to be filed for each page. 


* The search prompt: contrast ratio of 3.80, when AA is 4.51

Use #BECBE5 or #FFF, 0.7a = 4.5

* The blue label in the sidebar (3.16 vs 4.53)

Use Google Blue 700 (#3367D6) = 4.5

* The footer text (4.08 vs 4.51)

Use #6E6E6E (#000, 0.54a) for body text = 4.5
Use Google Blue 700 (#3367D6) for hyperlinks = 4.5

* Any centered message ('Loading', 'No search results found'): These are quite bad, at 1.84 vs 4.51

Use #6E6E6E (#000, 0.54a) = 4.5



Owner: calamity@chromium.org
Assigning to calamity for MD History changes. Chris, do you plan on making the changes to other pages, or do we need extra bugs?

aboxhall@/dmazzoni@: Do you want us to file a specific bug for the false positives in accessibility tools? Where is the best place for that?
The search prompt change will apply to all pages. Most other pages don't have centered messages or footer text. The downloads page will need a new image resource that's colored 6e6e6e if we want to change that (it's currently #b4b4b4).

I'll make the sidebar changes to all other MD Pages and lump it into this bug.
Project Member

Comment 8 by bugdroid1@chromium.org, Dec 13 2016

The following revision refers to this bug:
  https://chromium.googlesource.com/chromium/src.git/+/25fffa4d6c9d5260260e82f93d18e086ab2b058d

commit 25fffa4d6c9d5260260e82f93d18e086ab2b058d
Author: calamity <calamity@chromium.org>
Date: Tue Dec 13 06:05:07 2016

[MD History] Color tweaks.

This CL fixes some colors in MD History that were low contrast. It also
makes a bunch of colors consistent and pulls most colors into
shared_vars.html so we can better manage our vast color spectrum.

BUG= 670836 
CQ_INCLUDE_TRYBOTS=master.tryserver.chromium.linux:closure_compilation

Review-Url: https://codereview.chromium.org/2549133003
Cr-Commit-Position: refs/heads/master@{#438073}

[modify] https://crrev.com/25fffa4d6c9d5260260e82f93d18e086ab2b058d/chrome/browser/resources/md_downloads/vulcanized.html
[modify] https://crrev.com/25fffa4d6c9d5260260e82f93d18e086ab2b058d/chrome/browser/resources/md_history/app.html
[modify] https://crrev.com/25fffa4d6c9d5260260e82f93d18e086ab2b058d/chrome/browser/resources/md_history/app.vulcanized.html
[modify] https://crrev.com/25fffa4d6c9d5260260e82f93d18e086ab2b058d/chrome/browser/resources/md_history/grouped_list.html
[modify] https://crrev.com/25fffa4d6c9d5260260e82f93d18e086ab2b058d/chrome/browser/resources/md_history/history.html
[modify] https://crrev.com/25fffa4d6c9d5260260e82f93d18e086ab2b058d/chrome/browser/resources/md_history/history_item.html
[modify] https://crrev.com/25fffa4d6c9d5260260e82f93d18e086ab2b058d/chrome/browser/resources/md_history/history_toolbar.html
[modify] https://crrev.com/25fffa4d6c9d5260260e82f93d18e086ab2b058d/chrome/browser/resources/md_history/lazy_load.vulcanized.html
[modify] https://crrev.com/25fffa4d6c9d5260260e82f93d18e086ab2b058d/chrome/browser/resources/md_history/shared_style.html
[modify] https://crrev.com/25fffa4d6c9d5260260e82f93d18e086ab2b058d/chrome/browser/resources/md_history/shared_vars.html
[modify] https://crrev.com/25fffa4d6c9d5260260e82f93d18e086ab2b058d/chrome/browser/resources/md_history/side_bar.html
[modify] https://crrev.com/25fffa4d6c9d5260260e82f93d18e086ab2b058d/chrome/browser/resources/md_history/synced_device_manager.html
[modify] https://crrev.com/25fffa4d6c9d5260260e82f93d18e086ab2b058d/ui/webui/resources/cr_elements/cr_toolbar/cr_toolbar_search_field.html
[modify] https://crrev.com/25fffa4d6c9d5260260e82f93d18e086ab2b058d/ui/webui/resources/css/md_colors.css

Project Member

Comment 9 by bugdroid1@chromium.org, Dec 13 2016

The following revision refers to this bug:
  https://chromium.googlesource.com/chromium/src.git/+/c5f59eea1cf7d6667729ab99fbea1752ed4db3c0

commit c5f59eea1cf7d6667729ab99fbea1752ed4db3c0
Author: calamity <calamity@chromium.org>
Date: Tue Dec 13 08:00:25 2016

[MD WebUI] Fix sidebar selected color.

BUG= 670836 
CQ_INCLUDE_TRYBOTS=master.tryserver.chromium.linux:closure_compilation

Review-Url: https://codereview.chromium.org/2552163003
Cr-Commit-Position: refs/heads/master@{#438094}

[modify] https://crrev.com/c5f59eea1cf7d6667729ab99fbea1752ed4db3c0/chrome/browser/resources/md_extensions/sidebar.html
[modify] https://crrev.com/c5f59eea1cf7d6667729ab99fbea1752ed4db3c0/chrome/browser/resources/settings/settings_menu/settings_menu.html

Status: Fixed (was: Available)
Issues noted here have been fixed.
Status: Verified (was: Fixed)

Sign in to add a comment