Difference between revisions of "ARIA Link"

From Level Access Web Labs
Jump to navigation Jump to search
 
(6 intermediate revisions by one other user not shown)
Line 5: Line 5:
 
     [role="link"] {
 
     [role="link"] {
 
       display:inline-block;
 
       display:inline-block;
 +
      text-decoration:underline;
 +
      cursor:pointer;
 
     }
 
     }
 
   </style>
 
   </style>
 
</head>
 
</head>
 
<body>
 
<body>
   <div tabindex="0" role="link" onClick="window.location='http://www.google.com'">This is an ARIA link
+
   <div>
 +
    <div tabindex="0" role="link" onClick="window.location='http://www.google.com'">This is an ARIA link
 +
    </div>
 
   </div>
 
   </div>
   <div tabindex="0" role="link" onClick="window.location='http://amp.ssbbartgroup.com'">Try AMP
+
   <div>
 +
    <div tabindex="0" role="link" onClick="window.location='http://amp.ssbbartgroup.com'">Try AMP
 +
    </div>
 +
  <div>
 +
  <idv>
 +
    <div aria-label="my aria-label" tabindex="0" role="link" onClick="window.location='http://amp.ssbbartgroup.com'">Try AMP with aria-label
 +
    </div>
 +
  </div>
 +
  <p id="p1">Some label</p>
 +
  <p id="p2">Some description</p>
 +
  <div>
 +
    <div aria-labelledby="p1" aria-describedby="p2" tabindex="0" role="link" onClick="window.location='http://amp.ssbbartgroup.com'">Try AMP with aria-labelledby
 +
    </div>
 
   </div>
 
   </div>
 
</body>
 
</body>
Line 35: Line 51:
 
|Talkback||Firefox||Works as expected, The Name and role of the link are announced when navigating to the link.  The link can be navigated to using the  Firefox Gesture for navigating links.
 
|Talkback||Firefox||Works as expected, The Name and role of the link are announced when navigating to the link.  The link can be navigated to using the  Firefox Gesture for navigating links.
 
|- style="background-color:#99ff99;"
 
|- style="background-color:#99ff99;"
|Talkback||Chrome|| Works as expected, The Name of the link is announced when navigating to the link. The earcon for link is played.
+
|Talkback||Chrome|| If a link has ARIA-Describedby text such as the some label link above then the description text is not announced. Works as expected, The Name of the link is announced when navigating to the link. The earcon for link is played. In newer versions of TalkBack the Role of link is announced.
 
|-
 
|-
 
|}
 
|}

Latest revision as of 20:30, 4 January 2018

ARIA Link Example

This is an ARIA link
Try AMP
Try AMP with aria-label

Some label

Some description

Try AMP with aria-labelledby

Test results for ARIA Link

AT Browser Notes
JAWS Internet Explorer Works as expected When Navigating to the link the Name and Role of the link are announced. The link is in the JAWS links list. When enter is pressed on the link the link is activated.
JAWS Firefox Works as expected When Navigating to the link the Name and Role of the link are announced. The link is in the JAWS links list. When enter is pressed on the link the link is activated.
NVDA Internet Explorer Works as expected When Navigating to the link the Name and Role of the link are announced. The link is in the NVDA elements list. When enter is pressed on the link the link is activated.
NVDA firefox Works as expected When Navigating to the link the Name and Role of the link are announced. The link is in the NVDA elements list. When enter is pressed on the link the link is activated.
VoiceOver Safari Works as expected, The name and role of the link is announced when navigating to the link. The link is in the rotor under links.
Talkback Firefox Works as expected, The Name and role of the link are announced when navigating to the link. The link can be navigated to using the Firefox Gesture for navigating links.
Talkback Chrome If a link has ARIA-Describedby text such as the some label link above then the description text is not announced. Works as expected, The Name of the link is announced when navigating to the link. The earcon for link is played. In newer versions of TalkBack the Role of link is announced.