Practical Accessibility Tips for Developers
Language Attribute: Setting the Right Context
Setting the correct lang attribute is one of the simplest yet most impactful accessibility practices in web development. It ensures that assistive technologies like screen readers interpret and pronounce content correctly, giving users the proper context for what they are reading or hearing.
What Happens When You Omit the lang Attribute?
When a document lacks a declared language attribute (e.g., <html lang="en">), screen readers default to the user’s system or software language settings. If a user with an English system setup opens a page written in French without a lang attribute, the synthesizer will force English phonetic rules onto French words.
The result is confusing, comical, or entirely unintelligible: So the text “Bienvenue sur notre site web” would be read using English phonetics as “Bee-en-ven-oo sur no-tree sight web”.
You might have experienced a similar mismatch while using navigation software abroad. When street names are written in a language different from the app’s interface or voice, pronunciation can become unexpectedly confusing and sometimes comical. A turn instruction that should be clear can suddenly sound like an entirely different place, reminding us how important the right language context is.
Multilingual Content & Technical Terminology
Setting the document language at the root level (<html lang="...">) is only the bare minimum. Whenever a section, quote, or phrase on a page switches languages, that specific element must be tagged with its corresponding lang attribute.
<p lang="fr">C'est la vie!</p>
<blockquote lang="es">
<p>El respeto al derecho ajeno es la paz.</p>
</blockquote>These examples show how each piece of content can carry its own language context, allowing assistive technologies to use the appropriate pronunciation even when several languages appear on the same page.
Navigating Loanwords & Technical Jargon
A common challenge arises in technical or localized content. For instance, when writing technical documentation in German, text frequently includes English terms (e.g., Frontend, Layout, Lounge).
While wrapping foreign terms in <span lang="en">...</span> ensures precise pronunciation by screen readers, loanwords require nuanced judgment:
Rule of thumb: If a term is widely recognized and documented in the native language’s reference dictionary, explicit lang overrides are usually unnecessary unless testing reveals severe pronunciation failures in major screen readers.
Designing Accessible Language Selectors
On multi-language sites, the language switcher demands extra careful attention to both markup and user experience.
A common antipattern involves translating all available language options into the currently selected language. For example, displaying options as “German”, “Arabic”, or “Japanese” on an English page.
While this seems logical for the current reader, it creates a total blocker if a user lands on a page set to a language they cannot read, especially when switching between different scripts (e.g., Latin to Arabic or Cyrillic). If a non-Arabic speaker lands on a page translated into Arabic, and the selector lists options solely in Arabic script, navigating away becomes almost impossible.
Best Practice: Native Script Identification
Language selectors should always display each language option in its own native script, explicitly tagged with its corresponding lang attribute.
| Pattern | Markup | User Experience |
|---|---|---|
| Problematic | <li>German</li> | Inaccessible if the user lands on a language they don’t read. |
| Accessible | <li lang="de">Deutsch</li> | Immediate recognition for native speakers. |
| Hybrid (Recommended) | <li lang="de">Deutsch <span lang="en">(German)</span></li> | Clear for both native speakers and current readers. |
The CodePen demo below compares three approaches to language selectors:
Problematic Version: All options are translated into Persian without
langattributes. While fully localized for Persian readers, it prevents non-Persian speakers from identifying their native language to switch back.Accessible Version: Each language name is rendered in its native script with the proper
langattribute (lang="fa",lang="de", etc.), allowing immediate recognition.Hybrid Version (Recommended): Each language name is rendered in its native script with the proper
langattribute, followed by its English name in parentheses. This preserves native recognition while also helping users who do not read that language.
See the Pen Language selector by th3s4mur41 (@th3s4mur41) on CodePen.
Open “Language selector” on CodePen if the embedded preview is not available.
Closing Thoughts
Language support should be verified in practice, not assumed from the markup alone. Follow the manual testing guidance and test across multiple browser and screen reader combinations, such as NVDA with Firefox, VoiceOver with Safari, and JAWS with Chrome, rather than relying solely on automated auditing tools.
The lang attribute is a small piece of markup with a meaningful impact: it helps people hear, read, and navigate content in the language it was intended for. Declare the document language, mark language changes where they occur, and test the experience with real assistive technologies.