When a user navigates to the social media icons on the News article page using screen reader, these are announced ‘Facebook’, ‘Twitter’, ‘LinkedIn’ and ‘Pinterest’ link. This does inform the user of the purpose of the link which is to share the article on their social platforms.
Furthermore, these links open in a new tab window without informing the user visually or programmatically. It is important that the text indicates that an element opens in a new tab window so that users know what to expect. This issue is related to Links that open in a new tab window is not communicated to the user visually or programmatically (H)
Recommendation
Implement a visible label such as ‘Share article on:’ and ensure this is programmatically associated to each of the social media links for screen reader users.
If opening in a new window/ tab is required (which WCAG guidelines strongly advise against) then you should add a visual indicator such as descriptive text, stating that elements that will open in an external window. Also, provide additional information for screen reader users to notify them they they will be taken to a new tab. This can be achieved by using the target="_blank" attribute.
10.1 Social media icons open in a new tab window (H)
FIGURE 10.1: Social media icons on News article page
10.1.1 WCAG 1.3.1 (A), 2.4.4 (A), 2.4.6 (AA) - Desktop, Mobile
When a user navigates to the social media icons on the News article page using screen reader, these are announced ‘Facebook’, ‘Twitter’, ‘LinkedIn’ and ‘Pinterest’ link. This does inform the user of the purpose of the link which is to share the article on their social platforms.
Furthermore, these links open in a new tab window without informing the user visually or programmatically. It is important that the text indicates that an element opens in a new tab window so that users know what to expect. This issue is related to Links that open in a new tab window is not communicated to the user visually or programmatically (H)
10.1.2 Recommendation
Implement a visible label such as ‘Share article on:’ and ensure this is programmatically associated to each of the social media links for screen reader users.
If opening in a new window/ tab is required (which WCAG guidelines strongly advise against) then you should add a visual indicator such as descriptive text, stating that elements that will open in an external window. Also, provide additional information for screen reader users to notify them they they will be taken to a new tab. This can be achieved by using the
target="_blank"attribute.