You should also check that your colour choices have enough contrast—this is really easy using tools like the Colour Contrast Analyser for both PC and Mac or the Web Accessibility Toolbar for Opera both from the Paciello Group.
The Colour Contrast Analyser see Figure 20 allows you to use a colour picker to select the foreground and background colours on screen, then receive a simple evaluation of their contrast:. If all four results show a pass, the colour combination is ok. Remember to check all link states. You may need to enter some of them manually in the "hex" field to check focus, hover and active.
Your link styles must always be in the following order:. The different link states are styled using their "pseudo classes"— :link , :visited , :focus , :hover , :active —which you append to the link element selector, a. So your starting CSS should look like this:. If you want to set a CSS rule for all links in all states, you can style a directly.
Just remember to place the generic rule first, to preserve the order:. This is useful if you are planning to replace the default underline with a bottom border, which is a common way to gain better visual control of the style. By default, most browsers set all links to have an underline and focus state links to have an outline, as illustrated in Figure Underlining is set using the text-decoration property:.
Even if you are conserving the underline style, you may find it easier to disable text-decoration and use border-bottom to set a faux underline. We will go through this in the example below. The focus outline is controlled by the outline property.
Outline is much the same as border, but it does not take up space or cause the page to re-flow when it appears note that it is not supported in IE7 and below either.
The easiest way to control outline is with the shorthand property:. If you are in doubt about what to do with the outline, simply leave the outline to the browser default. Many designers have observed that underlining is a bit thick and cuts through descenders of lowercase type—that is, the line goes through the bottom of g, j, p, q and y. This is illustrated in figure First, disable the underline for all link states, then set a bottom-border to match the link colour for each state:.
If you do use the faux border method, be careful that you have sufficient line-height set to avoid the underline clashing with the next row of text. Since the example so far relies purely on colour to distinguish four of the five link states, we should take the next step and change the bottom border for visited, focus and hover. Accepting focus and hover as equivalent styled states, this method means the link states are distinguished with more than colour. Even if you were to view these links in black and white, you could identify the different link states, as shown in Figure Some sites use icons and symbols to add information about their links.
For example, some sites use an arrow to indicate that a link goes to an external site; or they use a tick to show the link has been visited. Then in your stylesheet, set a background image for that class—remembering to add padding to accommodate the image:.
This example would apply the icon to all instances of visited links, in all states. If you wanted to restrict the icon just to unvisited external links, you can combine classes and the link state pseudo classes in your selector:. Combining classes and states opens up a wide range of creative possibilities for your links. Remembering to check your colours, your only limitation from this point is creativity.
To illustrate one way to bring lists and links together, the examples zip includes a simple flyout navigation menu , as seen in Figure Flyout menus are a very common navigation system. A good grasp of styling lists and links is essential for web developers, as they are used everywhere. They are routinely combined to create site navigation; while a clear link style is critical for the ease of use of any site.
Bad link styles can be seriously confusing for everyone and may even make a site unusable for some people. Note: This material was originally published as part of the Opera Web Standards Curriculum, available as Styling lists and links , written by Ben Buchanan. Next: CSS: Styling tables. Jump to: navigation , search. Navigation menu Personal tools Log in. Exercise: Set the color of links to "red". Report Error.
Your message has been sent to W3Schools. W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content.
While using W3Schools, you agree to have read and accepted our terms of use , cookie and privacy policy. Whether or not you care about accessibility, it offers guidance and you really do have to address accessibility anyway. I use that as a the baseline to set some parameters so it is a good place for us to start. Success Criterion SC 1. Color is not used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element.
Level A. In short, links should not rely on color alone to indicate that they are links. This is a Level A requirement. Level A means this is the minimum level of conformance.
Level AA is the next level of conformance and encompasses all of Level A. Regardless of other visual cues, content links must still have sufficient contrast from the surrounding text. With this technique, a relative luminance lightness difference of or greater with the text around it can be used if additional visual confirmation is available when a user points or tabs to the link.
Visual highlights may, for example, take the form of underline, a change in font style such as bold or italics, or an increase in font size.
While using this technique is sufficient to meet this success criteria, it is not the preferred technique to differentiate link text. If there are not a large number of links in the block of text, underlines are recommended for links [emphasis added]. Underlines have been evaluated more than once by organizations curious how they or their absence affects link use and comprehension. Summary: Textual links should be colored and underlined to achieve the best perceived affordance of clickability, though there are a few exceptions to these guidelines.
A article from Jamie Appleseed identifies three basic link usability guidelines, one of which is underlining links. If you actually want people to click on your links, then you have to make it obvious that they can and should be clicked.
Underlining text is the most universal way to indicate. The argument is simple. If you have links in your content, you put them there for people to click. So make them look like it. A article from Hoa Loranger argues that while underlines may not be necessary, some comparable cue must be evident. Current trends have seen the underline go away, with no generally-understood replacement handy. This increases cognitive load, reduces trust, and increases frustration.
They guard clicks with care and resent sites that force them to hunt for clickable items, or, even worse, waste their clicks. Signifiers can evolve over time as web users gain more exposure to different interaction cues and get to learn these new cues. Textures that users were long relied upon for cues are stripped away, making it difficult for users to determine what is clickable and what is not. Here I gather some research done outside of usability studies, and measured using different metrics than engagement rates, abandonment rates, and so on.
There is no denying that the presence of links within content adds some cognitive load to readers. That is the very nature of hypertext, and arguably the reason somebody is reading some types of content.
The authors make a compelling point right off the bat that link underlines particularly those in use in interfere with the descenders of characters. The paper contains two studies: one exploring underlined text and one exploring hiding links until the user needs them. The first study concluded that underlines affected readability and that underlines should be avoided when the main goal of the content is comprehension. Since most participants reported scanning a page prior to reading, the underlined links were initially useful.
Using highlights performed better than underlines, though the study was not set up to measure if that was a better approach. The second study suggests hiding all links and making the user depress a button to see them. When reading comprehension and speed alone were measured, the lack of links performed better.
When task completion depended on following a link, users performed far worse. The goal was to identify how personal preferences affect the way people would like to see links visually represented. Participants self-reported that low contrast link colors as compared to surrounding text was problematic, and high contrast colors were distracting. Otherwise most noted that it was easiest to find links that were underlined.
Interestingly, overall read times of the sample articles were improved when links were highlighted. The second-best read times were for samples with underlined links. Readers did not report on comprehension, just read times; clearly underlined links did not slow them down but seemingly the opposite. Otherwise the results proved inconclusive for recommending an ideal link style. In the paper Cognitive load in hypertext reading: A review by Diana DeStefano and Jo-Anne LeFevre, the authors perform a meta-analysis of many previous papers from to neither of the two I discussed are in it.
While the authors argue that there is cognitive load just from having links on a page, no statement is made about links being underlined or not. The authors posit that previewing links via pop-up windows or hover overlays might reduce cognitive load by offering users a cue of where a link will take them. They go on to suggest text labels and icons as options as well. Arguably, users who intend to search or scan the content have to bear a greater cognitive load to distinguish links without clear visual indicators such as underlines from the surrounding text.
Links without underlines and insufficient contrast may even impart more cognitive load as the user pauses to determine if it is even a link this is clearly speculation on my part.
It is not uncommon for people who immediately resist underlines to present examples of major sites that do not use them. Little thought is given to the fact that those sites are major because people are very familiar with them, while the site on which they want to remove links is likely not a major site. I have already written about how Google dropped underlines and why this is not a free pass to do it on your own sites. Amazon is another common example.
This is a site that is primarily navigation, where underlines would not be appropriate. The places where there is narrative text do not include hyperlinks in the content, though links immediately following that narrative such as See all Editorial Reviews do have underlines. The fact that those links fail the contrast check is rendered moot by the underlines.
Links are primarily used as navigation with little narrative content that, when it appears, is almost always devoid of links. Social platforms do not use underlines, such as Twitter and Facebook, which is not ideal.
Facebook is effectively a product site and promotes links heavily with other techniques, such as images. Twitter has been unfriendly to accessibility for quite some time, but regardless, your site is probably not a singular timeline full of chunked content.
Wikipedia, however, is a good example of a site full of narrative content that is itself brimming with links. Unfortunately, the links fail the contrast check , so the site is also an example of how to do it wrong.
Note that many content platforms are moving to address link contrast, with Drupal even codifying underlines into core and WordPress discussing it offline. Even in the world of installed applications versus web pages , the value of clear indicators is important and stressed in design concepts for software developers, as Microsoft does here:. The challenge is then to keep enough visual clues so users can recognize the links.
Underlines are not the only option. We have already identified that more than color alone must be used and that links should be visible with no interaction.
The drawbacks to underlines noted in the studies come into play when a user has to focus on a piece of text and comprehend it.
0コメント