Do not underline navigation links

[hugovk]

Follow on from #160.

Fixes #168.

Accessibility

The lowest level WCAG* 2.0 guidelines (specifically G182) say colour alone shouldn't be used for links. Something else -- like an underline, different font or size, or italics/bold -- must also be used to help identify them.

However, this is mainly for main body text (e.g. words linked in a paragraph or narrative content), not thing like navigation, footers, page controls.

Applicability

Colored text when the color is used to convey information such as:

• Words that are links in a paragraph
• Items in a list where some are different than others and are presented in colored text

Description

The intent of this technique is to provide a redundant visual cue for users who may not be able to discern a difference in text color. Color is commonly used to indicate the different status of words that are part of a paragraph or other block of text or where special characters or graphics cannot be used to indicate which words have special status. For example, scattered words in text may be hypertext links that are marked as such by being printed in a different color. This technique describes a way to provide cues in addition to color so that users who may have difficulty perceiving color differences or have low vision can identify them.

To use this technique, an author incorporates a visual cue in addition to color for each place where color alone is used to convey information. Visual cues can take many forms including changes to the font style, the addition of underlines, bold, or italics, or changes to the font size.

(*There are many international accessibility laws based on WCAG: https://www.w3.org/WAI/policies/)

Usability

Usability guidelines suggest they can be removed from navigation (but if accessibility is not a priority):

• To maximize the perceived affordance of clickability, color and underline the link text. Users shouldn't have to guess or scrub the page to find out where they can click.

• Assuming the link text is colored, it's not always absolutely necessary to underline it.

  • 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. (Remember: your design might not be as obvious to outside users as it is to your own team members.) Users typically understand a left-hand navigation rail with a list of links on a colored background, assuming it resembles the navigation areas on most other sites.
  • Exception: underlining is essential if you use link colors such as reds or greens, which cause problems for users with common forms of color-blindness.
  • 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.

This PR

Disables underlines for:

• header navigation
• footer navigation
• left menu bar
• list of links on the homepage
• list of links in the global module index
• list of links in the general module index
• list of links in search results
• tables of contents
• edit: and the pilcrow (¶) for linking to headers

Excepts re-enables the underlines when mouse hovers over them (also the pre-#160 behaviour).

Also, use the default underline offset in the footer. We had links there pre-#160 too.

[ezio-melotti]

auto should already be the default -- is there something else overriding this when it's not explicitly stated, or did you add it as a precaution to prevent other rules from overriding the value in case the offset is added to some parent container in the future?

[hugovk]

is there something else overriding this when it's not explicitly stated ...

Yes, it's overridden by this:

a[href] {
    text-decoration: underline 1px;
    text-underline-offset: 0.25em;
}

So "normal" body text links have underlines with extra offset; but navigational links only have underlines for hover, and they're the default offset.