code • Localize text language strings for a11y internationalization - martindubenet/wed-dev-design GitHub Wiki
[ Localize text language strings ][ Common UI strings ][ Script languages syntaxes ]
-
PoEdit : Translation editor for
.pofiles. - Le grand dictionnaire terminologique, or GDT, is an official product of the Government of Québec agency « Office de la langue française » which is very good at proposing the equivalence of English technical terms in the official (you can't get more official than that) French Canadian (fr_CA) language, which in many cases contains fewer semantic English words than the French of France (fr_FR).
- Google Translate
- DeepL Translator for Windows OS and/or Linguee for iOS or Android OS devices, both are German made products that translate many European languages for free in. They do offer an optional payed PRO version but it is not required.
A numeronym is a number-based word with 11 for the number of letters between the letters a and y. « #a11y » often appears on social media platforms like Twitter because space is limited and every character counts.
- a11yproject.com a community-driven effort to make digital accessibility easier.
This checklist uses The Web Content Accessibility Guidelines (WCAG) as a reference point. The WCAG is a shared standard for web content accessibility for individuals, organizations, and governments.
➥ Content
- Use plain language and avoid complexe syntax like figures of speech, idioms, and complicated metaphors.
- Make sure that
<button>,<a>, and<label>element text string is unique and descriptive.
- Use a
langattribute on the<html>element. - Provide a unique
<title>for each page or view. - Ensure that viewport zoom is NOT disabled.
- Use landmark elements (semantic HTML) to indicate important content regions.
- Ensure a linear content flow (Tab key navigation complacency).
➥ Keyboard
- Make sure there is a visible
:focus(CSS) style for interactive elements that are navigated to via « Tab key navigation » on keyboard input. - Validate that « Tab key navigation » focus order matches the visual layout.
- Remove invisible focusable elements.
➥ Images
- Make sure that all
<img>elements have analt(alternative text) attribute. - Make sure that decorative images (unrelated to content) use
alt=""attribute with a null values.
➥ Headings
- Use heading elements to introduce (semantic) content, NOT for (
font-weightandfont-size) style. - Don't skip heading levels.
This is why good design systems comes with CSS class like «
.h2 {}» allowing us to use<h3 class="h2">where is this example the tag<h3>is for the document's semantic and the class.h2for styling purposes.