Application and app store buttons

Apple App Store

The Apple app store buttons are suplied in both a dark and light variant, with the black variant being used by default. The alternative white variant is designed to give you greater versatility and can be used when the preferred black variant appears visually heavy in the layout. The white is suitable when only one button appears in the layout and when it complements the colors used in the layout. If app store buttons for other app platforms appear on the same page, the Apple app store button must be first in the lineup of buttons and the preferred black variant must be used, not the alternative white variant.

These buttons are available, hosted on the Abeille Assurances Icon Library, in a selection of alternative languages. See the development notes for further details.

Google Play Store

For full usage rules see https://play.google.com/intl/en_us/badges/

These buttons are available, hosted on the Abeille Assurances Icon Library, in a selection of alternative languages. See the development notes for further details.

Amazon Appstore

For full usage rules see https://developer.amazon.com/support/legal/tuabg

These buttons are available, hosted on the Abeille Assurances Icon Library, in a selection of alternative languages. See the development notes for further details.

Adobe Acrobat Reader

For full usage rules see https://www.adobe.com/uk/legal/permissions/icons-web-logos.html

Notes for developers

Accessible labels

All the application and app store buttons are static image meaning that to maintaining accessibility visually hidden text is required. This hidden text must begin with the text included on the button eg. "Download on the App Store", and if required where there is more than one unique link to the same app store follow this text with additional deciption to inform the user what specific app this button is associated with.

Links to external websites

If a link is taking the user to an external website, ensure that it is clear that it will do so by making the title attribute descriptive of what it will do and where it will go, for example:

<a href="https://www.google.com" title="External site - www.google.com" rel="external">Google</a>

Notes for testers

• Ensure that buttons can be accessed via the mouse as well as via tabbing using the keyboard.
• Use a screen reader to confirm that the buttons are understandable as to where they will be going when listed out of context of the page.
• Ensure that when a button has focus, the style changes noticeably.
• Ensure that text within buttons is descriptive of what or where the button is going. Additional text descriptive text can be hidden visually from the user to aid to help make the button understandable, especially if there area number of links / buttons such as "Find out more" on the page which go to different locations.

Classes overview

The following table gives you a quick overview of the CSS classes that can be applied.

An example of the full image path would be /assets/themes-icons/v2/aviva/default/functional/app-store/google-play.svg.

Keyboard operations

TAB

Tabbing to an anchor should make the button clearly visually different so that the focus point on the page is obvious to the user.

SPACE or ENTER

With focus on a button, pressing SPACE or ENTER will open the link if a link or perform the form action. If the link is internal to the page it will scroll the page otherwise it will load the new page.