Creating accessible links
Creating accessible HTML should be an important part of any web designer’s workflow. Ensuring that links are accessible is especially critical, as user’s ability to navigate through your site and access content can be severely restricted through poor accessibility. Let’s take a look at some of the ways you can increase the accessibility of your links.
Skip navigation links
Sites usually have the main navigation at the top of the page. When structuring HTML, this means that the site navigation appears above the page’s main content. This requires people using screen readers to read through each link in the site on every page prior to actually reading content. This can be especially frustrating on sites with complex menu structures or those that contain a large amount of links. To address this, sites can contain a skip navigation link prior to the navigation that gives users the option to jump to the page’s content. This link can be hidden or minimized through CSS while still accessible to screen readers.
Use the “title” attribute
Using the global title attribute allows you to pass along additional advisory information about links. In most browsers, title attributes are shown as “tool tips” when links are hovered over by the user. While this is valuable, the real value of the title attribute is the additional information it can pass on through other user agents like screen readers. As such, you want to make sure your title attributes are succinct and informative.
Make link content meaningful
Often we forget that users need the contents of a link to instruct them as to the link’s purpose and destination. Links that use terms like “click here” and “more” may look fine in the flow of an article, but they’re not descriptive or informative at all. Make sure than when you are creating links that the content inside the links are as descriptive as possible. When possible, don’t include a long URL as link content simply use descriptive text to replace the URL. When using images as links, make sure you include descriptive content in the images alt attribute and use a descriptive title attribute on the link itself.
Links should be keyboard accessible
Most user agents will allow users to tab through the links on a page. If you stick to using the anchor element to create links, you avoid the issue of needing mouse input to trigger a link. In cases where pages are progressively enhanced, it’s not uncommon to see links created purely through JavaScript on non-anchor elements. Avoid this practice by using anchors for all links, use class or id attributes for JavaScript hooks when necessary, and use the tabindex attribute to add non-anchor links to the tab order if non-anchor links are an absolute necessity.
Use ARIA landmark roles
WAI-ARIA landmark roles allow you to identify content regions to which users might want quick access. Among these roles are banner, contentinfo, form, main, navigation, and search. To use them, you simply use the roll attribute with the desired value. Supporting user agents then allow users to navigate directly to the desired area. While there has been some debate as to whether or not the role attribute directly conflicts with the new HTML5 elements, support for ARIA roles is fairly widespread and there’s no reason you can’t use the two in concert with one another. For more information on WAI-ARIA roles explore the WAI-ARIA specification.
Of course, these are just a few suggestions on how to make your links more accessible. Later in the course we’ll explore a few best practices surrounding styling links and we’ll discuss the impact they can have on accessibility.
For more information on accessibility and navigation, visit the WebAIM’s page on links and hypertext.