Play Framework: Adding a Lang Attribute

If we create a new Play Framework project

and then take a look at main.scala.html, we’ll see something like this.

Notice that the html element doesn’t have a lang attribute. That’s a problem.

WCAG 2.0 Success Criterion 3.1.1 says:

3.1.1 Language of Page: The default human language of each Web page can be programmatically determined. (Level A)

And technique H57: Using language attributes on the html element says:

The objective of this technique is to identify the default language of a document by providing the lang and/or xml:lang attribute on the html element.

Identifying the language of the document is important for a number of reasons:

  • It allows braille translation software to substitute control codes for accented characters, and insert control codes necessary to prevent erroneous creation of Grade 2 braille contractions.
  • Speech synthesizers that support multiple languages will be able to orient and adapt to the pronunciation and syntax that are specific to the language of the page, speaking the text in the appropriate accent with proper pronunciation.
  • Marking the language can benefit future developments in technology, for example users who are unable to translate between languages themselves will be able to use machines to translate unfamiliar languages.
  • Marking the language can also assist user agents in providing definitions using a dictionary.

To fix main.scala.html, all we have to do is add lang="en" to the html element. We use the lang attribute because it is an HTML5 document, and we use the ISO 639-1 language code for English (“en”) because the play-scala project uses English.

If your project uses only a single language, that’s all there is to it. It’s a shame Play’s templates don’t include the lang attribute by default.

If your project supports multiple languages, you can take advantage of Play’s i18n support to assign the right language code to the lang attribute.

If you have an implicit Request in the scope, it will provide an implicit Lang value corresponding to the preferred language extracted from the Accept-Language header and matching one of the application supported languages. You should add a Lang implicit parameter to your template like this: @()(implicit lang: Lang).

We need to make two changes:

  1. Add the implicit Lang parameter to main.scala.html, and
  2. use its language member to get the ISO language code for the lang attribute.

Here’s what the finished product looks like:

This approach will work even if you don’t support multiple languages. The only supported language by default is English, so regardless of what the request’s Accept-Language header contains, the template’s Lang parameter will be English. Once the template is rendered this will result in lang="en", as if we had hard-coded it in the first place. Take a look at application.config to see why this is the case:

In fact, doing it this way is probably superior to hard-coding lang="en" because it is DRYer. If your project ever evolves to support multiple languages, you need only change application.config and your lang attribute will be set to the right value for free.

Leave a Reply

Your email address will not be published. Required fields are marked *