[wp-trac] [WordPress Trac] #26504: Semantic elements for non-link links

[WordPress Trac]

#26504: Semantic elements for non-link links
---------------------------+-----------------------------
 Reporter:  GaryJ          |      Owner:
     Type:  defect (bug)   |     Status:  new
 Priority:  normal         |  Milestone:  Awaiting Review
Component:  Accessibility  |    Version:  trunk
 Severity:  normal         |   Keywords:
---------------------------+-----------------------------
 Using the [http://heydonworks.com/revenge_css_bookmarklet/ revenge.css
 bookmarklet] on the dashboard gives a very [http://d.pr/i/yVYh clear
 indication] that some of the links on there are semantically incorrect -
 they should be buttons, even if they should look like links.

 The Actual Buttons Are Actual section of this
 [http://coding.smashingmagazine.com/2013/08/20/semantic-css-with-
 intelligent-selectors/ article] sums it up nicely why.

 Unless the accessibility team have indicated otherwise, each of the 74+
 occurrences (only counting PHP files, more in JS files) of links with
 `href="#"` should probably be a `<button>`, so that screen readers
 interpret it as a button that does something, rather than a link that
 takes you somewhere. It also reduces the number of links that can be
 pulled out of context.

 Appearance isn't a problem either - taking the "See 3 more…" from the
 screenshot:

 {{{
 // Original:
 <a href="#">See 3 more…</a>

 // New (might benefit from ARIA attribute):
 <button class="no-button">See 3 more…</button>

 // Basic CSS:
 .no-button {
     background: none;
     border: none;
     color: #0074a2;
 }
 .no-button:hover {
     color: #2EA2C9;
     cursor: pointer;
 }

--
Ticket URL: <http://core.trac.wordpress.org/ticket/26504>
WordPress Trac <http://core.trac.wordpress.org/>
WordPress blogging software