How to Translate WCAG 2
Overview
Web Content Accessibility Guidelines (WCAG) 2.1/2.2 are currently available in more than 14 languages!
There are 6 main steps to create a new translation:
- Get the source files from
w3c/wcag/
repository - Translate WCAG source files
- Export in HTML
- Edit the HTML files to complete the translation
- Check your translation
- Deliver the final files to W3C
Step 1: Get the source files
- Clone
w3c/wcag
repository (you can fork it first) - Checkout the following tag to get the relevant source files:
WCAG22-20231005
tag to translate WCAG 2.2 (5 October 2023 version)WCAG21-20230921
tag to translate WCAG 2.1 (21 September 2023 version)
Step 2: Translate WCAG source files
The repository contains numerous folders and files. Only some of them are relevant to your WCAG translation.
Translate user-oriented content in:
guidelines/index.html
- All files in
guidelines/sc/
folder and subfolders - All files in
guidelines/terms/
folder and subfolders guidelines/input-purposes.html
guidelines/relative-luminance.html
guidelines/respect-config.js
: translate Editors list.- All files in
acknowledgements/
folder
Make sure to follow these guidelines:
- Update <html>
lang
andxml:lang
attributes inindex.html
andrelative-luminance.html
.
Use the appropriate “language tag” from the Language Subtag Registry - Do not add or edit CSS.
- Do not translate
id
s. - Add
hreflang="en"
to links when needed, andlang="en"
where needed. - Follow the guidelines of the W3C Internationalization Activity : for example, the proper usage of language tags, encoding declarations, handling bidirectional text, etc.
Step 3: Preview your changes and export in HTML
To preview your changes, open the index.html
file in a modern browser, on a local server. Without a server, the success criteria and glossary terms will not be included.
Allow the script to compile and format the content.
- If your document has “ReSpec” errors or warnings, they will shop up at the top of the page, next to the “ReSpec Menu” link.
- Check and resolve (potential) “ReSpec Errors”.
- Check “ReSpec Warnings”. The original document may contain some warnings. Make sure you do not introduce new ones.
- Export in HTML using ReSpec:
- Activate the “Respec Menu” link in the top right corner
- Choose “Export…”, then the “HTML” option.
Step 4: Edit the resulting HTML file and complete the translation
Rename the exported HTML file to index.html
and make the following changes.
Add the translation header
At the very start of your body
element, add a translation header, based on the provided boilerplate.
The text in this disclaimer must be in the target language, except for the original title and the reference to the Lead Translation Organization (LTO) at the top.
Make some edits
- Translate the
.head
section - In each
dfn-panel
, translate “Permalink” and “Referenced in:” - Next to each Success Criterion, translate “Understanding” and “How to Meet”
- Change the ID of the “5. Conformance”
<section>
to “conformance
”.
Make sure to follow these guidelines:
- Do not add or edit CSS.
- Do not translate
id
s. - Add
hreflang="en"
to links when needed, andlang="en"
where needed. - Follow the guidelines of the W3C Internationalization Activity: for example, the proper usage of language tags, encoding declarations, handling bidirectional text, etc.
Translate the text added by fixup.js
The fixup.js
file adds links that allow users to jump to the Table of contents, and to collapse/expand the sidebar.
Download fixup.js
and translate the following terms:
- “Collapse Sidebar”
- “Pop Out Sidebar”
- “Jump to Table of Contents”
Step 5: Check your translation thoroughly
Please properly check your files before submission to W3C.
In particular, make sure that:
- All links are valid. You can use W3C Link Checker
- HTML is valid. You can use W3C Markup Validation Service
- CSS is valid. You can use W3C CSS Validation Service
- Pages are internationalization-friendly. You can use W3C Internationalization Checker
- All relevant content has been properly translated
- All
id
s are in English; that is, they have not been translated. If you have followed How to Translate WCAG 2 – Get the source files, this should be fine. lang
andxml:lang
attributes of the<html>
tag are correcthreflang
attribute has been added to links when relevantlang
attribute has been used when relevant (especially when some text has been kept in English)- The links/anchors of the original and translated versions match.
- “Jump to table of contents”, “Collapse sidebar” and “Hide sidebar” have been translated.
- There is no code showing in the rendered page.
- No custom CSS has been added.
- (Authorized translation) An errata has been created and is hosted on the Lead Translation Organization (LTO)’s website.
Step 6: Deliver the final files to W3C
In conformance with step 6.3 of the Policy for Authorized W3C Translations , deliver the following files to W3C for publication:
index.html
relative-luminance.html
fixup.js
Make sure these are valid (X)HTML documents with UTF-8 encoding.
Back to Top