Twenty Fourteen Accessibility fixes

[sabreuse]

Twenty Fourteen has a few accessibility issues that I've found:

• Remove title attributes on featured image permalinks and entry meta. There may be others as well.
• A few color contrast issues (our goal is a contrast ratio of 4.5:1 in text below 18px):
  • gray on white (meta, blockquotes) is 3.36:1. recommended: replace with 767676
  • green on white (links) is 3.13 recommended: replace with 24890d
  • dark gray on black (site description & colophon) 3.7:1; change the alpha value to 0.5 for a 5.2:1 ratio
• The search button in toolbar can't be focused with the keyboard
• Dropdown menus aren't keyboard accessible (note that this is true of nearly all themes)
• There's no visible focus on tag links. They should match the focus style.

This is a first pass; please comment with any additional issues.

[sabreuse]

related: #24766 deals with title attributes in core functions. Patches on this ticket should only deal with title attributes that are added in theme files.

[sabreuse]

Added three patches. Note, these don't iterate on each other -- each addresses a separate problem from the list.

• 25054.titleattr.diff removes the title attributes from links.
• 25054.taglinks.diff adds focus styles to match the hover style on tag links.
• 25054.contrast.diff fixes the color contrast ratio in link text and a few other places (notably hovers and focus outlines). It does not address the same color where it's used in the search and social toggles in the top nav, since I want to get design feedback on that one.

[lancewillett]

In 25066:

Twenty Fourteen: accessibility changes to fix the color contrast ratio in link text and a few other places (notably hovers and focus outlines). Props sabreuse, see #25054.

[lancewillett]

In 25067:

Twenty Fourteen: accessibility changes to add focus styles to match the hover style on tag links. Props sabreuse, see #25054.

[lancewillett]

Replying to sabreuse:

Awesome, thank you.

• 25054.titleattr.diff removes the title attributes from links.

This one I have a question on ... shouldn't it only be removed when the anchor text is repeated in the title text? But shouldn't it be left in place when they are different?

[sabreuse]

Replying to lancewillett:

Replying to sabreuse:

Awesome, thank you.

• 25054.titleattr.diff removes the title attributes from links.

This one I have a question on ... shouldn't it only be removed when the anchor text is repeated in the title text? But shouldn't it be left in place when they are different?

There's some related discussion in #24766 - the current consensus seems to be that title attributes are at best pointless and at worst somewhat harmful to accessibility. Add to that the fact that device support is all over the map, which means we can't rely on them for the information that really needs to be there.

Throughout WP, we have mix of title attributes -- those that just repeat the link text are uncontroversial. Those that very nearly repeat it (e.g. Link text: "Trackback URL". Title: "Trackback URL for your post") should be just as uncontroversial. The only real problem is with title attributes that serve as help text -- and if it's that important, the information shouldn't be in a title attribute at all, but we should consider whether the information is really needed and find a better solution.

IMO, we don't have any of that class in the theme.

[obenland]

Do you think we could send Twenty Fourteen through an a11y review by the group? Like they did with _s?

[sabreuse]

I alerted the a11y group to this ticket in yesterday's meeting and asked for further trouble spots to be added in comments here -- if anyone has the bandwidth for a more formal audit, that would be wonderful to have!

[joedolson]

Can definitely do an a11y review - I'll schedule some time for that.

[joedolson]

Allow keyboard focus to activate search toggle

[joedolson]

Allow keyboard focus to activate social links toggle

[joedolson]

I was starting work on a keyboard focus patch for the stylesheet, but I think that the issues with that are a bit more complicated. There are many hover states that are themselves insufficient difference to pass accessibility standards. I'll need to do the a11y review before I can prep that patch, so I have a better sense of what needs to happen.

[SergeyBiryukov]

Text in the sidebar appears to have low contrast, and the font is too small, so the titles, dates, and the site description are barely readable. The screenshot is from Firefox 23 (Windows).

[joedolson]

All right, I've reviewed the theme extensively, and have some notes. I'll work on patches for these, of course - but if anybody else wants to pick one up, here are my notes:

These are just notes, so they may be hard to make sense of, but I can clarify if needed.

Color Contrast
values with alpha transparency that may be problematic:

• .site-description, #secondary, .site-footer, .site-footer a - color: rgba(255, 255, 255, 0.55) / #000; ( ratio + transparency: 6.27:1 (PASS, but low given very small font size...) )
• .ephemera .entry-meta - color: rgba(0, 0, 0, 0.2); (in stylesheet, but can't locate an example? ratio + transparency, if #fff background: 1.61:1 (FAIL) (#fff gives the max contrast possible for rgba value.) )
• .comment-navigation - color: rgba(0, 0, 0, 0.2); (appears to apply to text that is also hidden. regardless, as above, fails on any background.)

border-bottom on abbr/acronym very hard to see at .1 transparency; not critical, but would be nice to be able to see it - at least a little bit...

Empty link:
.attachment-featured-thumbnail has no content if no featured image assigned? Remove link if no featured image?

:hover/:focus states with insufficient contrast
many, particularly post meta links: author, permalink, comment link). Links should have :hover/:focus states that are easily discernable from their default states; contrast is one way to do this, but adding or removing text-decoration is actually better.

Repetitive text:
Leave a Comment text: remove title attribute, replace with .screen-reader-text
ditto 'Continue Reading', add title via screen-reader-text.

Form focus visibility
form :focus states - none; apply :hover and :focus states on fields, not just buttons.

Keyboard Accessibility
dropdown menus - not keyboard accessible; needs patch.
Skip link: not keyboard accessible, needs to be moved ahead of other focusable elements.

[sharonaustin]

Replying to joedolson:

All right, I've reviewed the theme extensively, and have some notes. I'll work on patches for these, of course - but if anybody else wants to pick one up, here are my notes:
Joe, I'd like to have a crack at what I perceive to be the 'easiest" one....

:hover/:focus states with insufficient contrast
many, particularly post meta links: author, permalink, comment link). Links should have :hover/:focus states that are easily discernable from their default states; contrast is one way to do this, but adding or removing text-decoration is actually better.

This should be able to be accomplished via strict CSS, right? I think this would be a gentle way for me to make a first contribution. Let me know if you think it involves more than CSS

[joedolson]

Replying to sharonaustin:

This should be able to be accomplished via strict CSS, right? I think this would be a gentle way for me to make a first contribution. Let me know if you think it involves more than CSS

You're right; that shouldn't involve anything but CSS. Have fun!

[obenland]

No movement in a while. Do we have a consensus on the proposed changes? Do the patches need testing? Are any of them commit ready?

[joedolson]

I don't think there's been any conflict on the changes -- nobody has expressed any qualms about them, at any rate. There are more patches yet to be done, but as far as this thread represents, all the proposed changes are agreed to.

TheI don't know the conditions for testing patches; is there anything special that needs to be done for that? These are all pretty basic & discrete; should be readily testable.

[sabreuse]

At the last accessibility chat, there were a couple of newer devs who were interested in learning to contrib to core; some of the remaining fixes look like they should be pretty do-able CSS stuff for learners.

[sabreuse]

25054.searchfocus.2.diff is an update of joedolson's searchfocus diff -- it could no longer be applied after the changes in the last few weeks. As a quick housekeeping note, patches should be relative to the WordPress root directory, not the theme directory.

Social icon integration was removed at r25214, so the Social Icon focus diff isn't relevant any more.

Thanks for those two patches, Joe!

[sabreuse]

25054.searchfocus.3.diff removes an unnecessary .genericons class from the css and includes a couple of code style fixes at obenland's suggestion.

[lancewillett]

In 25613:

Twenty Fourteen: accessibility fix for allowing the search button in the toolbar to be focused with the keyboard. Props joedolson and sabreuse, see #25054.

[lancewillett]

I think the only open change from these patches is the title attribute changes. @sabreuse if you could please refresh that one, I can get it in so we can close this ticket.

[joedolson]

Provides keyboard support for primary navigation

[joedolson]

Just added a new patch to this ticket that provides keyboard support for the primary navigation. Edits to style.css & theme.js

[joedolson]

Oh, heck. And that patch also included a minor spelling correction in a comment that I completely forgot that I'd made...and shouldn't be on this patch. Uploading update.

[joedolson]

Updated patch.

[lancewillett]

Replying to joedolson:

Oh, heck. And that patch also included a minor spelling correction in a comment that I completely forgot that I'd made...and shouldn't be on this patch. Uploading update.

Thanks Joe, it tests out and works well. My only nitpicks are with core WP code style. :) I'll fix it up -- but in CSS we use one selector per line, and in JS spaces around braces and parentheses, similar to PHP code style.

[lancewillett]

In 25731:

Twenty Fourteen: provide keyboard support for the primary navigation, props joedolson. See #25054.

[lancewillett]

Refreshed title attribute removal

[lancewillett]

In 25740:

Twenty Fourteen: minor color contrast and a11y fixes, see #25054.

[lancewillett]

Replying to joedolson:

Color Contrast
values with alpha transparency that may be problematic:

• .ephemera .entry-meta - color: rgba(0, 0, 0, 0.2); (in stylesheet, but can't locate an example? ratio + transparency, if #fff background: 1.61:1 (FAIL) (#fff gives the max contrast possible for rgba value.) )

I think it's fine to leave this one, because the only text with that color is a pipe | between words. If it's invisible it doesn't impact the usability on readability of any real words.

• .comment-navigation - color: rgba(0, 0, 0, 0.2); (appears to apply to text that is also hidden. regardless, as above, fails on any background.)

This color rule can be removed from the CSS, the only text this styles is hidden as .screen-reader-text and if that's going to be shown, black is preferred (as much contrast as possible, I think).

border-bottom on abbr/acronym very hard to see at .1 transparency; not critical, but would be nice to be able to see it - at least a little bit...

It's fine to change it to be darker. #2b2b2b should work.

Empty link:
.attachment-featured-thumbnail has no content if no featured image assigned? Remove link if no featured image?

We do want the background pattern to be there so it might require an anchor with no content (it does link to the single post, though, right? )... can you re-test now that r25735 changes are in? There should be a difference between index and single views -- only index gets the link, single does not.

In order to show the background pattern we'll need the empty element, either div or a.

:hover/:focus states with insufficient contrast
many, particularly post meta links: author, permalink, comment link). Links should have :hover/:focus states that are easily discernable from their default states; contrast is one way to do this, but adding or removing text-decoration is actually better.

Can you make a patch to demonstrate this?

Repetitive text:
Leave a Comment text: remove title attribute, replace with .screen-reader-text
ditto 'Continue Reading', add title via screen-reader-text.

These are both in core WP (not controlled in the theme).

Form focus visibility
form :focus states - none; apply :hover and :focus states on fields, not just buttons.

Can you give an example? I see focus states on input elements already.

Keyboard Accessibility
Skip link: not keyboard accessible, needs to be moved ahead of other focusable elements.

Yes, this is because a div can't be focused, it needs to be an a element instead (props obenland for reminding me). Will fix that soon.

[lancewillett]

In 25742:

Twenty Fourteen: a11y fix for keyboard navigation and Skip Content link, see #25054.

[lancewillett]

Replying to lancewillett:

Replying to joedolson:

Color Contrast

• .comment-navigation - color: rgba(0, 0, 0, 0.2); (appears to apply to text that is also hidden. regardless, as above, fails on any background.)

Removed in r25740.

border-bottom on abbr/acronym very hard to see at .1 transparency; not critical, but would be nice to be able to see it - at least a little bit...

Fixed in r25740.

Empty link:
.attachment-featured-thumbnail has no content if no featured image assigned? Remove link if no featured image?

More notes on this here: ​http://core.trac.wordpress.org/ticket/25325#comment:17

I think we can add screen reader text to the empty elements.

Keyboard Accessibility
Skip link: not keyboard accessible, needs to be moved ahead of other focusable elements.

Yes, this is because a div can't be focused, it needs to be an a element instead (props obenland for reminding me). Will fix that soon.

Fixed in r25742.

[lancewillett]

In 25743:

Twenty Fourteen: remove title attributes for better accessibility. Props sabreuse for original patch, see #25054.

[lancewillett]

I think we're really close to closing this one. Just a few things that need a reply from joedolson, and any other changes should be new tickets, please.

[lancewillett]

In 25749:

Twenty Fourteen: merge recent stylesheet changes to RTL, and file miscellaneous CSS cleanup.

RTL still needs more responsive fixes, see #25332 -- and a11y menu fixes, see #25054.

[obenland]

Simplified, namespaced, and rtl'ified.

[obenland]

RTL for screen reader text

[obenland]

Added patches for simplified tabbable nav and RTL for screenreader text.

[lancewillett]

In 25756:

Twenty Fourteen: a11y and RTL fixes for tabbed navigation and Skip to Content link. Props obenland, see #25054.

[lancewillett]

In 25757:

Twenty Fourteen: improved JS support for keyboard navigation for main navigation menu. Props obenland, see #25054.

[lancewillett]

Everything mentioned above has been addressed except:

1. :hover/:focus states with insufficient contrast -- needs reporter feedback
2. Repetitive text: needs a core ticket + patch

[lancewillett]

@joedolson Can you also comment on ​http://core.trac.wordpress.org/ticket/25325#comment:25 please?

1. What effect does an empty element have on a11y?
2. If the element has text, but isn't focusable, is that a problem?

The latest patch there adds placeholder text so the div or a is never empty.

[averma]

Facing alot of lagging while scrolling on mozilla firefox 24.0 (Mac OS X 10.8.5).

[sabreuse]

For contrast on hover/focus, I'd support toggling the underline on focus, they way we do with .more-link -- it's a clear visual transition, and probably more noticeable, especially for colorblind users, than tweaking the color contrast more.

I'll follow up with a patch.

Replying to lancewillett:

Everything mentioned above has been addressed except:

1. :hover/:focus states with insufficient contrast -- needs reporter feedback
2. Repetitive text: needs a core ticket + patch

[sabreuse]

25054-linkdecoration.diff gives the hover state on entry text the same treatment as read more links -- underlined by default for better link recognition, remove the underline on hover to make the difference more noticeable.

[lancewillett]

In 25803:

Twenty Fourteen: link hover improvements, props sabreuse. See #25054.

[lancewillett]

Closing this ticket, please open new issues in new tickets. Feel free to refer here for any general accessibility comment, though.

[lancewillett]

Replying to averma:

Facing alot of lagging while scrolling on mozilla firefox 24.0 (Mac OS X 10.8.5).

Hi averma, can you add your notes to #25600 please?

[SergeyBiryukov]

Replying to SergeyBiryukov:

Text in the sidebar appears to have low contrast, and the font is too small, so the titles, dates, and the site description are barely readable. The screenshot is from Firefox 23 (Windows).

Fixed in [26044].