Provide information below to help editors associate the technique properly. Contents of the meta section are not output by the processor.
+ + +Describe the situations in which to use the technique, such as types of pages, features in use that might use the technique, etc. Do not add references to the part of WCAG to which the technique relates; this is taken from the Understanding pages and inserted in technique pages upon publication.
+Describe how the technique works. This begins with a description of the problem the technique solves, then describes how to apply the technique. The description should be detailed enough to provide all the information a reader needs to be able to apply the technique, without recourse to following example code.
+The objective of this technique is to ...
+Copy the following section for each example. Examples must have a title and a description, and usually have a code sample. Code samples should be elided if necessary to show the core of the technique without necessarily providing all the surrounding code that would also be involved. A working example link references a location where the technique can be shown working live.
+Description
+Code sample
+
+ Tests must have a test procedure and expected results. Populate the following sections as appropriate. If a technique has multiple alternative testing approaches, add a new section with class="test" for each one, and put the test-procedure and test-results sections inside that.
+Provide links to external resources that are relevant to users of the technique. This section is optional.
+Provide information below to help editors associate the technique properly. Contents of the meta section are not output by the processor.
- - +1.4.1
+sufficient
Describe the situations in which to use the technique, such as types of pages, features in use that might use the technique, etc. Do not add references to the part of WCAG to which the technique relates; this is taken from the Understanding pages and inserted in technique pages upon publication.
+Pages there are a large number of links in the block of text.
Describe how the technique works. This begins with a description of the problem the technique solves, then describes how to apply the technique. The description should be detailed enough to provide all the information a reader needs to be able to apply the technique, without recourse to following example code.
-The objective of this technique is to ...
+The objective of this technique is to provide a redundant visual cue for users who may not be able to discern a difference in text color.
+Use of Color a relative luminance difference of 3:1 or greater with the text around can be used to identify links and surrounding texts. To meet success criterion 1.4.1: Use of Color, use dotted lines as additional visual cue.
+This technique is an alternative to use solid underlines. Solid underlines might be visually distracting for pages there are a large number of links in the block of text. Links are commonly used to indicate words or phrases that are links within a paragraph or other block of text. Even using underlines on hover or keyboard focus only, they might not be used for users with touch devices.
Copy the following section for each example. Examples must have a title and a description, and usually have a code sample. Code samples should be elided if necessary to show the core of the technique without necessarily providing all the surrounding code that would also be involved. A working example link references a location where the technique can be shown working live.
Description
-Code sample
- Working example of {Example Title}
+The links in pages are medium-light blue (#4D6BD5) and the surrounding text is black (#111111). Links have a contrast of 3.9:1 with the surrounding text. Links also have minimal dotted underlines to reduce visually distracting in wiki pages there are a large number of links in the block of text.
body {
+ color: #111111;
+}
+
+a {
+ color: #4D6BD5;
+ text-decoration: underline dotted;
+}Tests must have a test procedure and expected results. Populate the following sections as appropriate. If a technique has multiple alternative testing approaches, add a new section with class="test" for each one, and put the test-procedure and test-results sections inside that.
For each instance where color is used to convey information about text:
Provide links to external resources that are relevant to users of the technique. This section is optional.
+ Use of Color a relative luminance difference of 3:1 or greater with the text around can be used to identify links and surrounding texts. + To meet success criterion 1.4.1: Use of Color, use dotted lines as additional visual cue. +
+ ++ This technique is an alternative to use solid underlines. + Solid underlines might be visually distracting for pages there are a large number of links in the block of text. + Links are commonly used to indicate words or phrases that are links within a paragraph or other block of text. + Even using underlines on hover or keyboard focus only, they might not be used for users with touch devices. +
+ ++ Use of Color a relative luminance difference of 3:1 or greater with the text around can be used to identify links and surrounding texts. + To meet success criterion 1.4.1: Use of Color, use dotted lines as additional visual cue. +
+ ++ This technique is an alternative to use solid underlines. + Solid underlines might be visually distracting for pages there are a large number of links in the block of text. + Links are commonly used to indicate words or phrases that are links within a paragraph or other block of text. + Even using underlines on hover or keyboard focus only, they might not be used for users with touch devices. +
+The links in pages are medium-light blue (#4D6BD5) and the surrounding text is black (#111111). Links have a contrast of 3.9:1 with the surrounding text. Links also have minimal dotted underlines to reduce visually distracting in wiki pages there are a large number of links in the block of text.
body {
- color: #111111;
+ color: #111111;
}
a {
- color: #4D6BD5;
- text-decoration: underline dotted;
+ color: #4D6BD5;
+ text-decoration: underline dotted;
}Working example of dotted underline link
diff --git a/working-examples/css-dotted-underline-link/index.html b/working-examples/css-dotted-underline-link/index.html index ec71da9a9b..ed3a4a4196 100644 --- a/working-examples/css-dotted-underline-link/index.html +++ b/working-examples/css-dotted-underline-link/index.html @@ -2,9 +2,11 @@ -