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. In addition to explaining the WCAG Success Criteria and how to address them, this guide also describes how the AudioEye Managed solution may address each issue.

LEVELA
Success Criteria

3.1.1 Language of Page

  • Resolved
  • Partially Resolved
  • Manually Managed
  • N/A - Level AAA
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

  • This criteria is consistently resolved with AudioEye Managed.

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 AudioEye 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. 

In the event your website does not include a language tag, AudioEye will apply the language attribute so that screen readers and other technology can identify the default language.

That said, AudioEye cannot modify the PDF or Flash content found on your site. This will require manual intervention. You will want to check that your export settings on the files include the correct default language, as specified previously.

AudioEye will alert Managed customers when 3.1.1 violations are detected and can take action. However, for instances where Managed customers do have full control to remediate the source issue, AudioEye will collaborate with accessibility stakeholders to instruct them on what specific changes are required, why the changes are important, and how the changes can be implemented.

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.

Recent Morey Creative Studios Blog Articles