- Taxonomic name: A-SOCIAL-LINKS
- Added on: v3.0.0 (15/09/17)
- Updated on: v5.4.0 (23/02/21)
Social links
Social media icons can be used to link to Abeille Assurances' social media sites, including Facebook, Twitter, Google+ and YouTube.
Design and usage
Accessibility and screen readers
- Icon contrast inline with pre-existing WCAG guidelines and established Framework components
- Link dimensions a minimum of 44px by 44px in-line with pre-existing WCAG guidelines and established Framework components
- Hover and focus states inline with pre-existing WCAG guidelines and established Framework components
- Hidden descriptive text must be descriptive of what the link is doing eg. "Abeille Assurances' Facebook page" or "Share this article on Facebook"
Design anatomy
- Designed for use with light or dark backgrounds (see footer style example below).
Examples
Interactive example
Code example
<ul class="a-social-links a-list-plain">
<li><a class="a-social-links__icon [ Modifier ]" href="..." itemprop="sameAs"><span>...</span></a></li>
...
</ul>Development and test
Notes for testers
- Ensure that links can be accessed via the mouse as well as via tabbing using the keyboard.
- Use a screen reader to confirm that the links are understandable as to where they will be going when listed out of context of the page.
- Ensure that when hovering over a link, the style changes noticeably.
- Ensure that when a link has focus, the style changes noticeably.
- Ensure that text within links is descriptive of what or where the link is going such as "Abeille Assurances' Facebook page" or "Share this article on Facebook".
Classes overview
The following table gives you a quick overview of the CSS classes that can be applied.
| Class | Outcome | Required | Applied to | Comments |
|---|---|---|---|---|
.a-social-links |
Base style for social icon list | Yes | ul |
|
.a-social-links__icon |
Base style for social icon within a list | Yes | .a-social-links > li |
|
.a-social-links__icon--facebook |
Facebook icon | .a-social-links__icon |
||
.a-social-links__icon--twitter |
Twitter icon | .a-social-links__icon |
||
.a-social-links__icon--x |
X icon | .a-social-links__icon |
||
.a-social-links__icon--google |
Google icon | .a-social-links__icon |
||
.a-social-links__icon--youtube |
YouTube icon | .a-social-links__icon |
||
.a-social-links__icon--linkedin |
LinkedIn icon | .a-social-links__icon |
||
.a-social-links__icon--instagram |
Instagram icon | .a-social-links__icon |
||
.a-social-links__icon--email |
Email icon | .a-social-links__icon |
||
.a-social-links__icon--messenger |
Messenger icon | .a-social-links__icon |
Keyboard operations
- TAB
-
Tabbing to an anchor should make the social link clearly visually different so that the focus point on the page is obvious to the user.
- SPACE or ENTER
-
With focus on an anchor, pressing SPACE or ENTER will open the relevant social page.
Component releases
- Added on: v3.0.0 (15/09/17)
- Updated on: v5.4.0 (23/02/21)
Latest update:
- updated: Guidance regarding social sharing links has been updated to recommend containing more descriptive text eg. "Abeille Assurances' Twitter feed" or "Share this article on Twitter" instead of simply "Twitter" in order to make it clearer to users of assistive technologies what the link will do.