[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      |
---------------------------+--------------------

Comment (by 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.

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