Link

Links allow users to navigate to another location either outside or within the current page or application..

Usage Guidelines

Link elements should be used exclusively for navigation. In situations when dynamic content is loaded or form data is being submitted, the use of buttons is recommended.

Text label

A link’s text should help users understand its purpose so they can decide whether they want to follow its path. Whenever possible, provide text that identifies what it does without needing additional context.

Text decoration

Basic links and links that include icons will not have text decoration by default but will reveal an underline on hover or focus. Links that appear inside a paragraph will have the underline text decoration by default so they can easily be identified within the context of the surrounding text with the underline being removed on hover and focus.

Accessibility

Where possible, it is recommended that you use a native <a> element rather than the link role, as native elements are more widely supported by older user agents and assistive technology. Native <a> elements also support keyboard and focus requirements by default, without need for additional customization.

External site links

For links that direct users to an external site that is not maintained by American, a warning should be conveyed informing users that the site they’ll encounter may not meet the same strict accessibility guidelines as aa.com. We achieve this through the use of icons and screen-reader-only text.

Example markup and screen reader text:

<span class="icon-newpage" aria-hidden="true"></span>
<span class="show-for-sr">
    , opens another site that may not meet accessibility guidelines.
</span>

Note: the comma in the screen reader text allows for a pause.

New window links (internal or external)

Users should be made aware that a link will open a new browser window. This is especially important for users with vision issues who might not be able to perceive the new window context. We can achieve this through the use of icons and screen-reader-only text.

Internal to the application

For new window links to other pages with the aa.com domain, we must convey that a new browser window will be opened.

Example markup and screen reader text:

<span class="icon-newpage" aria-hidden="true"></span>
<span class="show-for-sr"> , opens in a new window.</span>

Note: the comma in the screen reader text allows for a pause.

External to the application

For new window links to external sites we must convey both aspects, a new browser window and an external site. Example markup and screen reader text:

<span class="icon-newpage" aria-hidden="true"></span>
<span class="show-for-sr">
    , opens another site in a new window that may not meet accessibility guidelines.
</span>

Note: the comma in the screen reader text allows for a pause.

We do not have a different icon to indicate external sites and external sites in new windows. The same icon is used but the screen-reader-only text is adjusted to convey whether a new browser window is also involved.

Focus indication

Links should provide clear indication when a user places keyboard focus on the link.