Mobile Accessibility Guidelines - Links

Links to alternative formats must


Links to alternative formats must indicate that an alternative is opening.


Unexpectedly opening an item in another format and/or application could cause any user to become disoriented. This is especially relevant for users with cognitive impairments or using assistive technology.

It is important to inform the user that they will be going to a different format and/or application and what that will be, so that they know what to expect and where they are.


iOS

Take the following steps for page elements that, when activated, launch an external application:

  1. Provide the page element with a trait of UIAccessibilityTraitLink. A rule of thumb is to provide links to external applications with this role, and provide in-app links with a button trait.
  2. Make sure that the link鈥檚 label clearly indicates an external application will be opened if the user activates it.
  3. Indicate to sighted users that the link opens in a new application, for example by providing an 鈥渆xternal link鈥 icon. Alternatively, provide a UIAlertView once the user activates the link to confirm that the user really wants to open the new application.

iOS Example (Objective-C)

[openPDFLink.setAccessibilityTraits:UIAccessibilityTraitLink];
[openPDFLink.setAccessibilityLabel:@"Financial results (PDF) (Opens in an external application)"];

Android

Take the following steps for page elements that, when activated, launch an external application:

  1. Make sure that the page element鈥檚 contentDescription attribute clearly indicates an external application will be opened if the user activates it.
  2. Indicate to sighted users that the link opens in a new application, for example by providing an 鈥渆xternal link鈥 icon.
  3. Optionally, use an AlertDialog once the user activates the link to confirm that the user really wants to open the new application.

Android Pass Example

<Button
鈥
android:id="@+id/button_loadPDF"
android:contentDescription="Financial Results (PDF) (Opens in an external application)"
鈥 />

HTML

Make sure that the link text clearly indicates that activating a link will open up a new application. This may be achieved in text, or by using an 鈥淓xternal Link鈥 icon.

HTML Pass Example

<p><a href="鈥">Financial Results (PDF) <img src="external.png" alt="Opens in an external application"></a></p>

Testing

Procedures

  1. Activate a link.
  2. Verify the link opens in another application or format.
  3. Verify a warning is provided.
  4. The role of the link is announced by the screen reader as a link.
  5. The format or information regarding the loading of a new application is indicated in the link text, or adjacent to it, in the page.

Outcome

The following check must be true:

  • The user is warned that a link opens in a new application, or downloads content in a specific format (e.g. PDF).