[wp-trac] [WordPress Trac] #30108: Twenty Fifteen: Underline menu links & post links in the archive on hover so it is clear they are links

[WordPress Trac]

#30108: Twenty Fifteen: Underline menu links & post links in the archive on hover
so it is clear they are links
-------------------------------------+--------------------------------
 Reporter:  KatherineMancuso         |       Owner:
     Type:  enhancement              |      Status:  new
 Priority:  normal                   |   Milestone:  4.1
Component:  Bundled Theme            |     Version:  trunk
 Severity:  normal                   |  Resolution:
 Keywords:  has-patch needs-testing  |     Focuses:  ui, accessibility
-------------------------------------+--------------------------------

Comment (by afercia):

 Replying to [comment:15 iamtakashi]:
 > the underline touches letters and for some letters it overlaps. This is
 the reason I use bottom border in the content area in the first place.
 My personal opinion:
 Twenty Fifteen is a theme with a strong focus on accessibility and I'm
 totally happy with this, having been involved in accessibility projects
 since more than 10 years, but still is a theme for a general audience.
 Twenty Fifteen should not be compared to sites that are strongly targeted
 to users who need a very high level of accessibility like for example
 webaim.org, paciellogroup.com, deque.com, etc.

 It would be great to have the maximum ''reasonable'' level of
 accessibility without sacrificing the beautiful typography @iamtakashi and
 others carefully crafted. That's a great value for readability
 (readability = better accessibility). Not to mention aesthetics.
 Like @joedolson, I'm for practicality :)

 Menu links are perceivable by context. It's a navigation menu, has links,
 everyone gets that. No need of underlines. Navigational links are
 different from links within body content:

 http://www.w3.org/TR/WCAG20-TECHS/F73.html
 ...
 While some links may be visually evident from page design and context,
 such as navigational links, links within text are often visually
 understood only from their own display attributes. Removing the underline
 and leaving only the color difference for such links would be a failure
 because there would be no other visual indication (besides color) that it
 is a link.

 http://webaim.org/techniques/hypertext/link_text#underlining
 ...
 Although users are accustomed to seeing links in the main content
 underlined, they are also accustomed to seeing tabs and main navigational
 features (oftentimes created as graphics rather than text) without
 underlining. In these cases, the linked items should be designed so it is
 apparent that the user can click on them to perform an action.

 http://www.nngroup.com/articles/guidelines-for-visualizing-links/
 Nielsen (2004, a bit outdated and Nielsen is known for being a bit...
 radical :))
 ...
 There are two main cases in which you can safely eliminate underlines:
 navigation menus and other lists of links. However, this is true only when
 the page design clearly indicates the area's function.
 ...
 Exception: underlined links are important for low-vision users'
 accessibility, so retain underlines if accessibility is a priority for
 your site or you have many users with low vision.

 Recap:

 - navigation menus are a no-issue for me
 - border bottom is totally fine for links within post content
 - I agree with @joedolson: better focus, everywhere
 - focus style could be like in the WordPress admin (à la Webkit) or even
 something stronger like on deque.com `outline: 3px solid #0079c1;`
 - post meta, comments meta, links in the footer and other secondary links
 may benefit from a border-bottom just on hover, that's one of the points
 suggested by @KatherineMancuso and I totally agree
 - widgets that have links within some kind of text block (for sure the
 text widget) need same bottom border as main content

 If you think at all this, not so much would be changed in the visual
 appearance of this beautiful theme and at the same time links would have
 some nice improvements on hover/focus.

--
Ticket URL: <https://core.trac.wordpress.org/ticket/30108#comment:21>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform