[wp-trac] [WordPress Trac] #25054: Twenty Fourteen Accessibility fixes

[WordPress Trac]

#25054: Twenty Fourteen Accessibility fixes
-------------------------------------+--------------------
 Reporter:  sabreuse                 |       Owner:
     Type:  defect (bug)             |      Status:  new
 Priority:  normal                   |   Milestone:  3.8
Component:  Bundled Theme            |     Version:  trunk
 Severity:  normal                   |  Resolution:
 Keywords:  has-patch needs-testing  |
-------------------------------------+--------------------

Comment (by lancewillett):

 Replying to [comment:15 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.

--
Ticket URL: <http://core.trac.wordpress.org/ticket/25054#comment:31>
WordPress Trac <http://core.trac.wordpress.org/>
WordPress blogging software