[
    {
        "role": "user",
        "content": "Give%20me%20a%20w3%20example%20page%20for%20language%20of%20parts%20correct%20code."
    },
    {
        "role": "assistant",
        "content": "Here\u2019s a concise example HTML page that satisfies the W3C\u2019s WCAG 2.2 Success Criterion 3.1.2 **\u201cLanguage of Parts\u201d**. It shows both setting the default language for the page and marking up parts in different languages correctly.\n\n```html\n<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\">\n  <title>Multilingual Example: Language of Parts</title>\n</head>\n<body>\n  <h1>Welcome to our Website</h1>\n  <p>This page is written mainly in English.</p>\n\n  <p>\n    Sometimes we include phrases from other languages. For example:\n    <span lang=\"fr\">Bonjour tout le monde</span>,\n    which means \"Hello everyone\" in French.\n  </p>\n\n  <p lang=\"es\">\n    Aqu\u00ed incluimos un p\u00e1rrafo completo en espa\u00f1ol. habla sobre temas interesantes\n    y ejemplos \u00fatiles para usuarios que leen en espa\u00f1ol.\n  </p>\n\n  <p>\n    And sometimes a different example:\n    <strong lang=\"de\">Frau M\u00fcller</strong> is a proper name in German.\n  </p>\n\n</body>\n</html>\n```\n\n---\n\n### Key points from WCAG / W3C\n\n- **Default language**: The `<html lang=\"en\">` sets English as the page\u2019s main language. ([w3.org](https://www.w3.org/International/questions/qa-html-language-declarations.en.html?utm_source=openai))  \n- **Language changes in parts**: Use the `lang` attribute on an element (like `<span>`, `<p>`, `<strong>`) when a section is in a different language. ([w3.org](https://www.w3.org/WAI/WCAG22/Understanding/language-of-parts?utm_source=openai))  \n- **Valid language codes**: Use BCP 47 tags like \u201cfr\u201d, \u201ces\u201d, \u201cde\u201d, or more specific ones like \u201cen-US\u201d, \u201czh-Hans\u201d. ([w3.org](https://www.w3.org/International/questions/qa-html-language-declarations.en.html?utm_source=openai))  \n\n---\n\nIf you want, I can also give you several real-world examples or edge-cases (like mixing right-to-left languages, using xml:lang, etc.). Would that be helpful?"
    },
    {
        "role": "user",
        "content": "Is%20there%20a%20link%20to%20a%20page%20where%20I%20can%20try%20it%20out%20with%20screen%20reader%3F"
    },
    {
        "role": "assistant",
        "content": "Yes \u2014 here are a couple of live example pages where you can try out \u201cLanguage of Parts\u201d behavior with screen readers, plus some tools to simulate or test it directly:\n\n---\n\n## \u2705 Live Example Pages\n\n1. **W3C's *Lang Attribute Tests***  \n   W3C provides a testing page titled *\u201clang attribute tests\u201d*. It shows a full HTML document with different sections set with `lang=\"fr\"` (French) and `lang=\"es\"` (Spanish) inside a default English (`lang=\"en\"`) page. You can open this page in a browser, turn on a screen reader, and move through the multilingual sections to hear how the reader switches pronunciation. ([w3.org](https://www.w3.org/2013/08/lang.html?utm_source=openai))\n\n2. **a11ySupport.io \u2014 HTML `<p>` with lang attribute test**  \n   This test page uses a simple example of a paragraph in English plus a paragraph in Chinese (with `lang=\"zh\"`). You can navigate to each section and see if your screen reader picks up the language swap. ([a11ysupport.io](https://a11ysupport.io/tests/html_p_element_with_lang?utm_source=openai))\n\n---\n\n## \u2699 Tools & Simulations\n\n- **A11yOn: Language Attribute Checker**  \n  A tool where you can paste your own HTML code (or examples) and it'll report whether your `lang` attributes are placed and used correctly. Good way to test before using a real screen reader. ([a11yon.com](https://www.a11yon.com/tools/language?utm_source=openai))\n\n- **Screen Reader Preview by Simple Online Toolbox**  \n  This simulates how a screen reader will announce parts of your HTML \u2014 reading order, ARIA roles, etc. It\u2019s not exactly a \u201cvoice switch\u201d test, but helpful for structural verification. ([simpleonlinetoolbox.com](https://simpleonlinetoolbox.com/tools/screen-reader-preview/?utm_source=openai))\n\n---\n\nIf you like, I can send you a page you can host (or paste into a codepen) with multiple languages to test on your own device with a screen reader."
    }
]