ampproject / ampproject/amphtml

amp-story: Language of page content is not indicated

Open
#32,514 4 comments 0 reactions 1 assignee Claimed by @gmajoulet View on GitHub
P2: Soon Related to: Accessibility Stale Type: Accessibility Type: Bug WG: stories
Dominant language
JavaScript
Stars
14.9k
Forks
4.1k
PR merge metrics
No merged PRs in 30d

Description

# Language of page content is not indicated

## WCAG Level
Level A / AA

## Priority
Medium

## Pages/screens/components affected
* [Navigation](https://www.gstatic.com/amphtml/stamp/qa/navigation.html)
* [RTL](https://www.gstatic.com/amphtml/stamp/qa/rtl.html)
* [Video](https://www.gstatic.com/amphtml/stamp/qa/video.html)
* [Audio - amp-story background audio](https://www.gstatic.com/amphtml/stamp/qa/audio-story.html)
* [Audio - amp-story-page background audio](https://www.gstatic.com/amphtml/stamp/qa/audio-page.html)
* [Audio - amp-story using amp-audio](https://www.gstatic.com/amphtml/stamp/qa/amp-audio.html)
* [Animation](https://www.gstatic.com/amphtml/stamp/qa/animation.html)
* [Sharing](https://www.gstatic.com/amphtml/stamp/qa/sharing.html)
* [Tooltip](https://www.gstatic.com/amphtml/stamp/qa/tooltip.html)
* [Page attachment](https://www.gstatic.com/amphtml/stamp/qa/page-attachment.html)
* [Branching](https://www.gstatic.com/amphtml/stamp/qa/branching.html#page=page2)
* [Consent](https://www.gstatic.com/amphtml/stamp/qa/consent.html)
* [Prerender - Image](https://www.gstatic.com/amphtml/stamp/qa/prerender-img.html?amp_js_v=0.1#origin=https://www.google.com&prerenderSize=1&visibilityState=prerender&paddingTop=0&p2r=0&horizontalScrolling=0&csi=1&aoh=15526927198732&viewerUrl=https://www.google.com&history=1&storage=1&cid=1&cap=swipe,navigateTo,cid,fragment,replaceUrl)
* [Prerender - Video](https://www.gstatic.com/amphtml/stamp/qa/prerender-video.html?amp_js_v=0.1#origin=https://www.google.com&prerenderSize=1&visibilityState=prerender&paddingTop=0&p2r=0&horizontalScrolling=0&csi=1&aoh=15526927198732&viewerUrl=https://www.google.com&history=1&storage=1&cid=1&cap=swipe,navigateTo,cid,fragment,replaceUrl)
* [AMP Story Player - Player](https://www.gstatic.com/amphtml/stamp/qa/player.html)
* [AMP Story Player - AMP Story 360](https://www.gstatic.com/amphtml/stamp/qa/amp-story-360.html)

## Description
It is important to programmatically identify the human language of a web page/section of a page, as this makes a difference as to how screen readers pronounce content.

All tested pages lack a programmatically defined language, which fails WCAG 2.1 SC 3.1.1 Language of the Page. This leads to the language of all *parts* of the content also lacking a programmatically defined language, failing WCAG 2.1 SC 3.1.2 Language of Parts as well.

## User impact
Depending on the user’s setup, screen readers and other text-to-speech applications that support multiple languages will not be able to adapt to the correct accent or pronunciation when announcing page content, which can impact on the understandability of the page.

## Required solution
Make sure that the human language of all HTML pages, as well as content embedded within pages and changes in language, is declared correctly. Make sure that the `` element has the required `lang` attribute, and that the value of this attribute matches the human language of the page.

This solution must be applied to all instances of the issue identified within the test sample, then applied to all other instances of the same issue identified throughout the rest of the website.

## Implementation guidance

On all pages tested, the `` element lacks a `lang` attribute.

```

```

Include the relevant `lang="en"` attribute on all pages.

```

```

## Test procedure(s)
Use these steps to confirm that the solution has been correctly applied:
1. Check that the `` element has a `lang` attribute.
2. Check that the value of the `lang` attribute reflects the primary language used by the page.

## Related standards
* [WCAG 2.1 Success Criterion 3.1.1 Language of Page (Level A)](https://www.w3.org/TR/WCAG21/#language-of-page)
* [WCAG 2.1 Success Criterion 3.1.2 Language of Parts (Level AA)](https://www.w3.org/TR/WCAG21/#language-of-parts)

## More information
* [W3C - Technique H57: Using the language attribute on the HTML element](https://www.w3.org/WAI/WCAG21/Techniques/html/H57.html)
* [W3C - Technique H58: Using language attributes to identify changes in the human language](https://www.w3.org/WAI/WCAG21/Techniques/html/H58.html)

## Test data
Test date: January 2021

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.