...
...
...
...
...
...
...
...
Table of Contents
| Table of Contents | ||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
|
Overview
Screen reader users frequently navigate web pages, using the TAB key on the keyboard, through actionable items such as links, buttons and form controls.
...
Combining adjacent image and text links for the same resource.
...
General Guidelines
Best practice is to provide descriptive, actionable link text or button labels by default.
Avoid the use of single word links (“Here”, “More”, “Go”). Links should be clear, descriptive and able to stand on their own.
Good and Bad Link Text Examples:
Good example: View all upcoming meetings
Bad example: View more
Good example: Start the process to apply for a marriage license.
Bad example: Click here to apply for a marriage license.
...
When using aria attributes for descriptive link text make sure that they are also accessible to speech to input users.
Use of aria-label
The aria-label will completely override the default link text/button label.
...
In the above example the screen reader will announce the Learn more link as “Learn more about the mayor’s state of the city address”.
Use of aria-labelledby
You can also use the aria-labelledby attribute to associate the non-descriptive link text/button label ("Learn more..." "More..." "See more", etc) with the preceding heading.
...
In this example the screen reader will announce the Learn more link as “Learn more state of the city address”.
...
Speech to Input Users
...
and ARIA Label Attributes
About Speech to Input Users
...
Please see more detailed information on how to comply with this guideline.
What Elements Can Be Used With aria-label?
interactive elements: such as
a(whenhrefattribute is present),audioandvideo(whencontrolsattribute is present),input,select,button,textarea.implicit landmark elements: such as
header,footer,nav,main,aside,section, andform.explicit landmark elements: such as an element with
role="navigation".widget role elements: such as an element with
role="dialog"orrole="tooltip"(there are 27 widget roles in ARIA 1.1).iframeandimgelements.
...
For more information on this, and on using ARIA with HTML in general, refer to the W3C Note on Using ARIA
The Link Text Label Should Not Visibly Display the URL
Provide links at the point in the content at which they're useful without visibly displaying the URL.
...
Please visit the Help Desk on the second floor of the Permit Center. Drop in or click here https://kiosk.na5.qless.com/kiosk/app/home/513 to schedule an appointment.
Email Links
Emails embedded in hyperlinks can be inaccessible because they often launch a user’s preloaded email client, which may not be what they use, instead of allowing them to copy and paste. It also may not be obvious what someone’s email is when a user is looking for it.
...
Not accessible: Email Christina
Combining Adjacent Image and Text Links for the Same Resource
Provide both text and iconic representations of links without making the web page more confusing or difficult for keyboard users or assistive technology users. Since different users finding text and icons more usable, providing both can improve the accessibility of the link.
...
<a href="home.html">
<img src="house.gif" alt="home page icon">
Go to the home page
</a>
WCAG Related
...
Guidelines
2.4.4 Link Purpose - In Context (Level A)
...