Skip to content

Add lang attribute to html element for screen reader accessibility#231

Merged
bertysentry merged 3 commits intomainfrom
copilot/add-lang-attribute-to-html
Mar 4, 2026
Merged

Add lang attribute to html element for screen reader accessibility#231
bertysentry merged 3 commits intomainfrom
copilot/add-lang-attribute-to-html

Conversation

Copy link
Contributor

Copilot AI commented Mar 2, 2026

The <html> element lacked a lang attribute, preventing screen readers from identifying page language and announcing content correctly.

Changes

  • site.vm: Compute lang attribute from $locale.toLanguageTag() with fallback to "en" for ROOT/undetermined locales ("und")
  • Integration tests: Verify lang attribute presence and correctness for English and French locales

Implementation

#set($langAttribute = $locale.toLanguageTag())
#if($StringUtils.isBlank($langAttribute) || $langAttribute == "und")
    #set($langAttribute = "en")
#end
<html lang="$langAttribute">

Produces BCP 47 compliant language tags (e.g., "en", "fr", "en-US", "fr-FR") for all generated pages.

Warning

Firewall rules blocked me from connecting to one or more addresses (expand for details)

I tried to connect to the following addresses, but was blocked by firewall rules:

  • www.apache.org
    • Triggering command: /usr/lib/jvm/temurin-17-jdk-amd64/bin/java /usr/lib/jvm/temurin-17-jdk-amd64/bin/java --enable-native-access=ALL-UNNAMED -classpath /usr/share/apache-maven-3.9.12/boot/plexus-classworlds-2.9.0.jar -Dclassworlds.conf=/usr/share/apache-maven-3.9.12/bin/m2.conf -Dmaven.home=/usr/share/apache-maven-3.9.12 -Dlibrary.jansi.path=/usr/share/apache-maven-3.9.12/lib/jansi-native -Dmaven.multiModuleProjectDirectory=/home/REDACTED/work/sentry-maven-skin/sentry-maven-skin org.codehaus.plexus.classworlds.launcher.Launcher clean install site (dns block)

If you need me to access, download, or install something from one of these locations, you can either:

Original prompt

This section details on the original issue you should resolve

<issue_title> element does not have a [lang] attribute</issue_title>
<issue_description>## Problem

<html> element does not have a [lang] attribute
If a page doesn't specify a lang attribute, a screen reader assumes that the page is in the default language that the user chose when setting up the screen reader. If the page isn't actually in the default language, then the screen reader might not announce the page's text correctly. Learn more about the lang attribute.

Specification

Add the lang attribute to the <html> element, and make sure it matches with the $locale being rendered.

If $locale is the default, we need to determine the actual locale (probably "English", but it could be theoretically different).

From MDN:

The lang global attribute helps define the language of an element: the language that non-editable elements are written in, or the language that the editable elements should be written in by the user. The attribute contains a single BCP 47 language tag.

BCP-47

The full BCP 47 syntax is specified in RFC 5646. It is capable of identifying extremely specific language dialects, but most usage is much simpler.

A language tag is made of hyphen-separated subtags, where each subtag indicates a certain property of the language. The three most common subtags are:

Language subtag
A 2-or-3-character code that defines the basic language, typically written in all lowercase. For example, the language code for English is en, and the code for Badeshi is bdz.

Script subtag Optional
This subtag defines the writing system used for the language, and is always 4 characters long, with the first letter capitalized. For example, French-in-Braille is fr-Brai and Japanese written with the Katakana alphabet is ja-Kana.

Note: If the language is written in a highly typical way, like English in the Latin alphabet, there is no need to use this subtag.

Region subtag Optional
This subtag defines a dialect of the base language from a particular location and is either two upper-case letters matching a country code or three numbers matching a non-country area. For example, es-ES is for Spanish as spoken in Spain, and es-013 is Spanish as spoken in Central America. "International Spanish" would just be es.

The script subtag precedes the region subtag if both are present — ru-Cyrl-BY is Russian, written in the Cyrillic alphabet, as spoken in Belarus.</issue_description>

Comments on the Issue (you are @copilot in this section)


💬 We'd love your input! Share your thoughts on Copilot coding agent in our 2 minute survey.

Copilot AI and others added 2 commits March 2, 2026 22:39
Co-authored-by: bertysentry <32521698+bertysentry@users.noreply.github.com>
Co-authored-by: bertysentry <32521698+bertysentry@users.noreply.github.com>
Copilot AI changed the title [WIP] Add lang attribute to html element Add lang attribute to html element for screen reader accessibility Mar 2, 2026
@bertysentry bertysentry marked this pull request as ready for review March 3, 2026 12:03
@bertysentry
Copy link
Member

@codex Please review

Copy link
Contributor

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

Adds a proper lang attribute to the generated HTML root element so assistive technologies can correctly detect and announce the page language, aligning the skin’s output with accessibility requirements.

Changes:

  • Update site.vm to compute <html lang="…"> from $locale.toLanguageTag() with a fallback to "en" for blank/"und" values.
  • Extend integration tests to assert the presence/correctness of the lang attribute on generated pages.

Reviewed changes

Copilot reviewed 3 out of 3 changed files in this pull request and generated no comments.

File Description
src/main/webapp/site.vm Derives a BCP 47-compliant language tag for the root <html> element with a safe fallback.
src/it/studio-km/verify.groovy Adds assertions that English/French generated pages include the expected lang attribute values.
src/it/site4/verify.groovy Adds assertions that generated pages include a non-empty lang attribute for accessibility.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

@bertysentry bertysentry merged commit 514a415 into main Mar 4, 2026
5 checks passed
@bertysentry bertysentry deleted the copilot/add-lang-attribute-to-html branch March 4, 2026 17:33
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

<html> element does not have a [lang] attribute

3 participants