Making Your HubSpot Website WCAG 2.1 Compliant

3.1.1 Language of Page

MCS Accessibility Team

MCS Accessibility Team
Last Updated July 23, 2020

The following directions are part of a full step-by-step guide to making a HubSpot website WCAG 2.1 AA compliant. These recommendations are intended for websites managed on the HubSpot CMS but can be adapted for other content management systems.

LEVELA
Principle: Understandable
Information and the operation of user interface must be understandable.
Guideline: Readable
Make text content readable and understandable.

The default human language of each Web page can be programmatically determined.

View Official WCAG 2.1 Compliance Techniques

Understanding 3.1.1

This is a simple one: you simply have to specify what language your website is in. This is important for users who require braille translation software so that the proper codes for certain characters is used, as well as speech synthesizer tools that support multiple languages or can translate from one language to another.

Beyond compliance for disabled users, identifying the default language helps all users use technology that translates foreign languages into their native one.

How HubSpot Helps

Almost all modern content management systems (CMS) and website platforms—HubSpot, WordPress, Squarespace to name just a few‚set the default language for you and give you a Settings option to change this if needed. 

Recommended Solutions

To set the language, you would add a snippet to your page's <html> tag.

Most language codes are just two characters, but you can use up to four characters to distinguish between regional dialects and provide a better experience for users with screen readers.

For example:

  • If your webpage is in American English: <html lang="en-us"> 
  • If your webpage is in British English: <html lang="en-gb">
  • If your webpage is in French: <html lang="fr"> 

 
Here you can find a full list of language codes.

You'll only ever declare one default language for your site, even if your site has content in multiple languages. If that's the case, whenever you have a page with content in another language, add a language attribute to an element around that content only:

<p>You'd say that in Spanish as <span lang="es">Crecer para Bueno</span>.</p>

If you have PDFs or Flash media available on your site, you'll also need to set the default language on each piece of content. Typically, this is done by default in your software (i.e. Adobe Acrobat Pro automatically sets your default language in the export settings in Advanced > Reading Options > Language.)

For more information, please visit the official W3C article: Understanding 3.1.1 Language of Page


Download the WCAG 2.1 Compliance Checklist

Checklist Download

Questions?

Let us know if we can help you address this specific WCAG Recommendation.