From d84d9a29072b1327c0acee9abf3ea15843a8cacd Mon Sep 17 00:00:00 2001 From: Michiel Bijl Date: Tue, 14 Feb 2017 02:27:31 +0000 Subject: [PATCH] Link Examples: Remove link 4 and Strengthen Visual Focus Indicator Per issue #228, make changes to examples/link/link.html: 1. Remove link 4, which used a background image that disappears in Windows high contrast mode. 2. Edit introduction, states and properties table, and source code section to reflect removal of link 4. 3. Change CSS to fix disappearance of custom focus ring on link 3. 4. Change CSS to make the custom focus ring more visually distinct. --- examples/link/css/link.css | 40 ++++++++++++---------------------- examples/link/link.html | 44 +++++++++----------------------------- 2 files changed, 24 insertions(+), 60 deletions(-) diff --git a/examples/link/css/link.css b/examples/link/css/link.css index e68ddaacbf..e7442cdd37 100644 --- a/examples/link/css/link.css +++ b/examples/link/css/link.css @@ -1,34 +1,22 @@ -[role="link"] -{ - color: #009; - background: transparent; - text-decoration: underline; - border: thin solid transparent; +[role="link"] { + color: #009; + background: transparent; + text-decoration: underline; } -[role="link"]:hover, [role="link"]:focus, [role="link"]:active -{ - color:#000; - border-color: #fc0; - cursor: pointer; +[role="link"]:hover, +[role="link"]:focus, +[role="link"]:hover::before, +[role="link"]:focus::before { + color:#000; + cursor: pointer; + outline: .2em solid hsl(219, 63%, 44%); + outline-offset: .2em; } -[role="link"].link3:before { +[role="link"].link3::before { display: block; content: url('../images/w3c-logo.png'); width:153px; - height:104px; + height:104px; } - -[role="link"].link4 { - display: block; - background-repeat: no-repeat; - background-image: url('../images/w3c-logo.png'); - width:153px; - height:104px; -} - -td div { - margin-bottom: 0.25em; - font-weight: bold; -} \ No newline at end of file diff --git a/examples/link/link.html b/examples/link/link.html index e02331dd83..84a065b96a 100644 --- a/examples/link/link.html +++ b/examples/link/link.html @@ -15,14 +15,14 @@ -
+

Link Examples

- NOTE: provide feedback on this example page in + NOTE: provide feedback on this example page in issue 228.

- The examples below demonstrate four variations of the + The examples below demonstrate three variations of the design pattern for link. The link pattern is used when it is necessary for elements other than the HTML a element to have link behaviors.

@@ -50,7 +50,7 @@

Examples

span element with text content. - Examples img element with alt attribute. - W3C Website @@ -84,32 +84,13 @@

Examples

CSS :before content property on a span element. - - - - - - - 4 - - - CSS background image on a span element. - - - - + aria-label="W3C website"> @@ -155,7 +136,7 @@

Role, Property, State, and Tabindex Attributes

span
img
    -
  • Examples 1, 3, and 4: Identifies the span element as a link.
    • +
  • Examples 1 and 3: Identifies the span element as a link.
  • Example 2: Identifies the img element as a link.
@@ -179,7 +160,7 @@

Role, Property, State, and Tabindex Attributes

aria-label span - Examples 3 and 4: Defines the accessible name of the link. + Example 3: Defines the accessible name of the link. @@ -213,15 +194,10 @@

Link 3

-

Link 4

- -
-