Making Your HubSpot Website WCAG 2.1 Compliant

3.1.1 Language of Page

MCS Accessibility Team

MCS Accessibility Team
Last Updated November 09, 2019

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. All suggestions in this guide are in conjunction with the accessiBe solution and require an active license. For more information on the accessiBe platform and pricing, you can learn more here.

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 completely resolved with accessiBe or HubSpot.

Understanding

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.

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">

or if it's in British English...

   <html lang="en-gb">

or if it's in French...

   <html lang="fr">

...and so on. 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.)

 

How accessiBe 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 based and give you a Settings option to change this if needed. 

In the event your website does not include a language tag, accessiBe will make adjustments to your website's code so that screen readers and other technology can identify the default language.

That said, accessiBe cannot modify the PDFs 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. 

 

Solutions

An easy way to check that your website is compliant is to view your page's source code. If your <html> tag is missing a language label, you'll need to add it in.

To check that PDFs or Flash media is compliant, open the files in an editing software program such as Adobe Acrobat, then review the Settings on the files.

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


Download the WCAG 2.1 Compliance Checklist

What to expect if you download this checklist

Video: What to Expect If You Download this Checklist

Checklist Download

Questions?

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

Recent Morey Creative Studios Blog Articles