There was quite a bit of discussion about accessibility on other thread. Let's collect those conversations here, and then we can continue the discussion, and make changes to Bartik as needed.

CommentFileSizeAuthor
#8 User with little or no color cones7.81 KBAnonymous (not verified)
#8 User with the most common form of color blindness10.03 KBAnonymous (not verified)

Comments

jensimmons’s picture

jensimmons commented

Comment 262 (http://drupal.org/node/683026#comment-2649424) at #683026: Add a new theme to D7 core: Bartik with my markup.

Everett Zufelt - February 26, 2010

My 5 minutes of thoughts on Bartik accessibility. Mostly recycled from other comments.

http://bartik.milkweedmediadesign.com/

1. Does flow of focus match visual page flow? Can focus be visually identified for every element that can receive focus?

2. Logo: the title of the anchor and the alt of the image are both set to "Home". This may be the node-title, but is not an accurate description of the
graphic. Suggestion: for best accessibility across technologies the title of the anchor and image can both describe briefly the image and the destination of the anchor. (This is something to improve in Drupal core.)

3. The list of tags for each node listed on the home page are not structured as a list. (This is something to improve in Drupal core.)

4. The footer is structurally at the bottom of the document, but some of the footer content "Powered by Drupal" is above the heading for the footer menu. There should likely be a heading to mark the beginning of the footer region. (This is something to improve in Drupal core.)

5. Ideally the search form would have a label. The title attribute on the input field is helpful to screen-reader users, however a label provides a larger
clickable target for mouse users who have difficulty with fine mouse movements. This obviously depends on the size of the input field, which I cannot assess. (This is something to improve in Drupal core.)

6.What style is applied to the skip to content link?

7. As far as colours go, I'd recommend using a tool like
http://www.snook.ca/technical/colour_contrast/colour.html
to make sure that all colours used in the theme (including any suggestions for focus etc. are WCAG compliant at the AA level. This basically means ensuring
that the contrast between foreground and background colours is sufficient to make the text clear to low vision users. This may already be part of the Color
module.

8. A heading for the right sidebar (with a better name than "Right sidebar") needs to be added. A Skip to link should also to be added to facilitate easy navigation to this content. This will help those who use heading navigation, as an example of the problem consider the number of headings on http://bartik.milkweedmediadesign.com/node/8 that exist before the sidebar content. (This is something to improve in Drupal core, and then mimic in Bartik.) (The right sidebar has always been called 'sidebar', 'first sidebar' and now 'second sidebar' as per D7 standards.)

Jeff Burnz’s picture

Jeff Burnz commented

6.What style is applied to the skip to content link?

Theme currently uses an off-screen type method - position absolute with a negative text-indent.

I'm wondering if with all that header space we could use focus styles to show the skip link on focus, I've tested with the following, but not with other colour combination's, I think some work with color and this could look quite good.

This hides the skip link until its focused (the :active psuedo class is just for IE). Theres no hover style since I think that can be very annoying when using Toolbar or Admin menu.

#skip-link a {
  display:block;
  color: #fff;
  height: 1px;
  opacity: 0;
  overflow: hidden;
  position: absolute;
  text-align: center;
  width: 1px;
}
#skip-link a:focus,
#skip-link a:active {
  background: #000;
  height: auto;
  opacity: 1;
  width: 100%;
}
jensimmons’s picture

jensimmons commented

Let's use this issue for collecting overall information, notes, and thoughts (links to resources). And then make individual issues for each actionable item.

Jeff Burnz’s picture

Jeff Burnz commented

Tables styles (colors) fail luminosity and color difference (AA) tests.

Neither of the background grays used (#ddd & #eee) are light enough to provide enough contrast against the text or link colors.

Jeff Burnz’s picture

Jeff Burnz commented

IE7 sidebar blocks fail color difference test (AA) - link color and the lightest in the gradient range (#F7F7F7).

Full report included for this one:

Foreground:#0073B6 Background:#F7F7F7

colour difference:444/brightness difference:159

The difference in brightness between the two colours is sufficient. The threshold is 125, and the result of the foreground and background colours is 159.

The difference in colour between the two colours is not sufficient. The threshold is 500, and the result of the foreground and background colours is 444.

Jeff Burnz’s picture

Jeff Burnz commented

We started japping in the accessibility group to draw some talent from over there:

http://groups.drupal.org/node/65608

Bojhan’s picture

Bojhan commented

I will bring it up at the accesiblity meetup this evening.

Anonymous’s picture

Anonymous (not verified) commented
StatusFileSize
new User with the most common form of color blindness10.03 KB
new User with little or no color cones7.81 KB

Additional color contrast issues, I've highlighted the specific selectors that seemed the biggest pain points. Also uploaded screenshots of what links would look like to users with the most common to the most severe form of color blindness:

#block-system-main .meta:

Contrast of 2.4:1 - fail for small text. Would require minimum of #6A6A6A to pass AA WCAG standards

a

Contrast of 4.9:1 - not very good for small text like in .meta divs. Would need at last #0070B3 to pass AA for smaller text.

#footer a:link

Contrast of 4.1:1 for links in the footer - again, the biggest concern is the contrast combined with the small size of the text.

All links

The color change between a hovered and a regular link is very slight - in fact, almost completely indiscernable for even those with slight color blindness. While I'm not going to say all links should always have underline, if text decoration is stripped from links, it should be there as a visual cue on hover. For people lacking access to the blue color spectrum, it's almost impossible to discern links from the surrounding text, and removing all but color changes as validation of a hovered link adds to the problems this causes.

mgifford’s picture

mgifford
he/him
Primary language English
commented
Issue tags: +Accessibility

yes, I probably should have added my notes here rather than in the group. However, good to see the a11y review coming along here!

jensimmons’s picture

jensimmons commented

In IRC, JohnAlbin and I had a conversation about accessibility status. Here are relevant parts:

[3:07pm] jensimmons: JohnAlbin: did you finish the accessibility review you were working on?
[3:07pm] jensimmons: porting over Everett's comments and such
[3:09pm] JohnAlbin: jensimmons: most of his comments were Core issues. lemme look again.
[3:09pm] jensimmons: cool
[3:10pm] jensimmons: I'll go over [color] contrast through the whole thing [throughout the theme], too. It's bad in a few places.

[3:15pm] JohnAlbin: jensimmons: did that "focus styling removed" issue get fixed?

[3:27pm] JohnAlbin: jensimmons: ok. good news. the "focus styling removed" issue was due to the old reset.css, which is gone. So the problem no longer applies.
[3:28pm] JohnAlbin: jensimmons: which means that all of Everett's comments are either already fixed or are core issues.
[3:28pm] JohnAlbin: ugh. I've got 10 core issues to file now.
[3:28pm] JohnAlbin: :)

Sounds like we are doing well.
I will work on contrast tomorrow (May 14).

What else?

jensimmons’s picture

jensimmons commented
Title: Improve Bartik's Accessibility » Check for Color Contrast and Adjust to Improve Bartik's Accessibility
Assigned: Unassigned » jensimmons

Several people have gone through things. It seems the color contrast problems are the last things left to do. And that all the other accessibility issues are issues with core.

So here's a note to me to fix up the color contrast.

jensimmons’s picture

jensimmons commented
Priority: Normal » Critical
Status: Active » Needs work
jensimmons’s picture

jensimmons commented
Status: Needs work » Fixed

Ta da! Committed.

Status: Fixed » Closed (fixed)
Issue tags: -Accessibility

Automatically closed -- issue fixed for 2 weeks with no activity.

Issue tags: +Accessibility

Restoring issue tags, see #2125755: System messages removed all issue tags during D7 upgrade.