Lang Attribute Accessibility: Move the Boundary Inward

An English link title can inherit Spanish even when only the visible greeting needs that language. Move the language boundary to the greeting span so the surrounding link keeps its English scope.

The scope inspector compares the incorrect anchor-wide declaration with a corrected nested span. Its matrix shows English for the document, sentence, and link title, and Spanish for both greeting spans. These are declared language scopes, not recorded speech results.

Lang Attribute Accessibility: Move the Boundary Inward
Lang Attribute Accessibility: Move the Boundary Inward
Open the full example ↗

Use the worked example

Press Correct scope and inspect the revised source beside the matrix. Then switch back to Anchor-wide Spanish to see the title row change to es. The greeting text stays Buenos días in both cases: changing language metadata does not translate any words.

Follow the source and its scope

W3C recommends declaring the page's default language on the html element and using an enclosing element for content in another language. It also explains nested elements when visible content and attribute text differ in language. W3C: Declaring Language in HTML

Use html lang="en" for this English fixture. Its heading, title text, and ordinary sentence “Meeting starts at noon.” are English. A language declaration on body alone would leave the head outside that element's scope.

MDN describes lang as a BCP 47 language tag and explains inherited language when an element has no own declaration. It also describes language information's role in helping assistive technologies choose pronunciation. That purpose does not demonstrate the result of a particular reader/voice combination. MDN: lang

Keep en as this baseline and es for the supplied Spanish text. Choose additional regional subtags only when the actual content warrants them, using registered tags rather than invented labels. This small correction is about scope, not adding regional detail for its own sake.

An English paragraph can retain its default language while containing a Spanish phrase. The original example is Meeting starts at noon. Our greeting is <span lang="es">Buenos días</span>.

The English text outside the span inherits en; the greeting inside the span has es. The span provides the boundary for the different language without changing the language of the whole paragraph.

Do not put lang="es" on the paragraph merely because it contains two Spanish words. That would declare its English sentence Spanish as well. Changing a tag does not rewrite or translate “Meeting starts at noon.” The content remains English until someone actually changes it.

The comparison uses an in-page greeting link with visible Spanish words and an English title. Inspect the generated source to see which element owns each declaration.

The corrected anchor inherits English from the document. Its English title stays within that scope, while the nested span declares the visible greeting Spanish. The destination remains the same in-page section; the change does not create a translation page or a different link action.

Follow the element and its ancestors to inspect language scope. Check the attribute's owning element as well as the visible text's enclosing element. A source search that finds one lang="es" cannot establish that all five rows have the expected declaration.

Copy a prompt for this example

Create a self-contained HTML inspector that shows where language declarations apply. The document has lang="en". Show the English sentence "Meeting starts at noon." and the Spanish greeting "Buenos días" inside a span with lang="es". Also show a link whose English title is "Read the Spanish greeting" and whose visible greeting is Buenos días.

Provide two fixed source examples. In the incorrect example, lang="es" is placed on the entire anchor, making both its title and visible greeting Spanish in the declared scope. In the corrected example, remove that anchor-wide declaration and put lang="es" only on a nested greeting span. The link title then inherits English from the document while the greeting retains Spanish. Display the actual snippets beside a language-scope matrix.

The matrix should list the document, English sentence, inline greeting, link title and link greeting. In the corrected example, their values are en, en, es, en and es. Pressing Correct scope updates the snippet and matrix together. Pressing Anchor-wide Spanish restores the incorrect example and shows es for the link-title row. Reset returns to the incorrect comparison.

Keep the greeting unchanged in both examples: changing metadata does not translate text. Explain that the matrix describes declared scopes, not recorded pronunciation or a screen-reader test. Use readable source text, clear matrix labels and keyboard-accessible comparison buttons. Stack snippets and the matrix on a phone without cutting off code. Return one complete HTML file.

Attach the corrected snippet and language matrix to the maintained FAQ source, then test its resulting document with the browser, reader, and voices your audience uses. NOS can preview the prepared HTML scope explanation for that review; the pronunciation observations still belong in your actual assistive-technology test record.

Keep reading