Metadata refers to information about a web document that describes its content and structure, rather than being visible on the page itself. This can include, but is not limited to, the page title, language, character encoding, and instructions for how browsers should display or handle the content.
Types of metadata:
Declare the language of the page, or parts of the page.
- Difficulty Tier 2: Moderate
- Priority Tier 2: Ideal
A primary language must be set in the pages metadata. Screen readers rely on the documents language setting to correctly interpret and pronounce text. Without this information, assistive technologies may default to the wrong language, leading to poor accessibility.
Additionally, any text written in a different language from the main page should be properly marked up in the HTML. This allows screen readers to accurately interpret and pronounce the content using the correct language settings.
The language code is a two letter ISO code such as en for English, or an extended code such as en-US for US English or en-GB for British English. Only use the extended code when it creates a meaningful difference, such as with varied Chinese dialects, Spanish, French (fr) vs French Canadian (fr-CA), etc.
Remember:
- Languages don’t have visual parity or equal length. If you have an interface designed in English and a user selects a Spanish or German, for example, the length of text strings may increase by 30% or more.
- If right-to-left (RTL) languages are supported and have associated visuals with a corresponding direction, you can set this with Reading Order annotations.
- If content is generated or controlled by external data, language may not be able to be annotated. Use a Flexible Content Area utility to mark these areas.
Determine how the language is chosen: - Language code - Default. The platform decides what language is displayed, using a two or four-letter ISO code added into the Language code property.
User-controlled- Language set by the user from a pre-defined list of localization options. Useful for annotating content localized through a language-picker.
Determine how the language is chosen:
- Platform (hard coded) - Default. The platform decides what language is displayed, using a two or four-letter ISO code added into the Language code property.
User(preference) - Language set by the user from a pre-defined list of localization options. Useful for annotating content localized through a language-picker.User agent(avoid this) - Avoid setting the language based on user agent settings or other forms of automatic detection. This is a choice best left to users—we can’t know whether someone is traveling, what their native tongue may be, or what their preference is based on things like detected location or hardware.- Rely instead on the From setting or stored session setting to specify that the language can be set based on session cookies or saved local settings.
Page- Defines the default language for the entire webpage, typically via<html lang="en-US">. This setting is inherited by all content on the page unless overridden.Section- Applies the language setting to part of a page such as a paragraph, div, or article. For example, usinglang="es"on a container element will mark the contents as Spanish language.Inline- Applies to a single word or short phrase, typically embedded within a sentence. This is commonly done by wrapping the word in a<span>element and adding the appropriatelangattribute to indicate its language.
- Add a ❖ Language Stamp component from the asset panel. Place the stamp over the design frame and resize to extend pin, bracket, or lasso. Configure the component properties as needed:
- Label position: Set based on Stamp’s placement relative to the element being annotated.
- Type: Select whether a specific
language codeis being used or if the content’s language isuser-controlled. - Show number: Toggle off if there’s no need for a matching Details annotation (in which case, skip step 2).
- Note number: Set this number in relative sequence with the other numbered Stamps placed over the same design.
- Place a ❖ Language Details component in the margins next to the design and configure the component properties as needed:
- Note number: Set this to match the corresponding ❖ Language Stamp. This number should be unique and in relative sequence with other Details annotations on the same design.
- Scope: Set parameters for how much of a page a specific language annotation applies to the page level, a section, or a short string.
- Set by: Determine how the language is chosen, whether hard-coded by the
platform, based onuser preference, or based on auser agentsetting (avoid this). - Select language code: The language code is a two letter ISO code such as
enfor English, or an extended code such asen-USfor US English oren-GBfor British English.
- What is the predominant language of the page?
- Are there any additional languages used for certain sections/words throughout the page?
- GitHub Inclusive Language Docs (Internal only)
- Tips for Multilingual Accessibility - Ben Myers
- On Language Learning for Screen Reader Users - Florian Beijers
- What they don’t tell you when you translate your app - Eric Bailey
- Language tags in HTML and XML - W3C Internationalization
- Understanding WCAG 2.2 Success Criteria 3.1.1: Language of Page - WAI
- Don’t forget to localize your icons - Eric Bailey
Define the document <title> shown in a browser's title bar and search engine results.
- Difficulty Tier 1: Easy
- Priority Tier 2: Ideal
If a page title is not descriptive, many people, especially those relying on assistive technologies, may struggle to understand where they are within the site, and additionally, which site they are on. Make sure the page title clearly reflects the main content and purpose of the page. Ideally, it would be:
- Concise and descriptive
- Uses important, distinctive terms first
- Title should correspond to the
<h1>element
- Add a ❖ Page Title Stamp component from the asset panel. Place the stamp over the design frame and resize to extend pin. Configure the component properties as needed:
- Label position: Set based on Stamp’s placement relative to the element being annotated.
- Note number: Set this number in relative sequence with the other numbered Stamps placed over the same design.
- Place a ❖ Page Title Details component in the margins next to the design and configure the component properties as needed:
- Show guidance: Toggle high-level guidance and resources.
- Value: Add the page title to the value input
- Note number: Set this to match the corresponding ❖ Page Title Stamp. This number should be unique and in relative sequence with other Details annotations on the same design.
- Is the title concise?
- Does it adequately provide context for the topic of the page, and more broadly, the site?
- Does it correspond closely to the text of the
<h1>?