The human language of each passage or phrase in the content can be programmatically determined except for proper names, technical terms, words of indeterminate language, and words or phrases that have become part of the vernacular of the immediately surrounding text.
Testing & Remediation How to test:
Open up your site view the the content to see if there are any phrases or pieces of text where the human language is different from the surrounding text. For any phrase or piece of text that is different from the surrounding text, ensure that there is an appropriate container with the proper "lang" attribute
You should also open your site up in a screenreader (JAWS, VoiceOver, etc) and have it read the content of you site, ensuring that the identified phrase or text is read in the correct human language.
How to remediate:
For any phrase or piece of text that is displayed in a separate language from the surrounding text, implement a "lang" attribute for that particular piece of text (such as - "xml:lang="de" for a German quote surrounded by English).
Questions and Answers
Your site should have the correct semantic elements (header, main, footer, article, etc) in the order that they are intended to be read. This means that sometimes this isn't the order that makes styling the page the easiest. You must also ensure that all your heading levels are hit in the order. This means that you should not skip from an h1 to an h4, and so on.
Not necessarily, but there are a few things that you need to make sure of:
- The page should be using the proper semantic elements. This means things like header, nav, aside, etc.
- All headings and page content should flow in a logical order. H1 > H2> etc.
- Without styling, elements should still be in the order they are intended to be read or listened to.
Yes, you can, and yes you should! The same way you specific the language of the document in the HTML tag with lang="en" you can specify the language of individual elements the same way! Consider your example:
<p>The french word <span lang="fr">bonjour</span> means hello in english.</p>
WP Beginner has a great explanation on a few ways you can accomplish this. Click here to view their article.
They more or less explain the 2 options that you have. You could install a plugin called 'Polylang' which allows you to manually add translations for categories, pages, taxonomies, posts, URLs... everything. You are then given a language switch that you can plop on you site where you find it best suited.
The second option that requires less manual labor is to add Google Translate to your site. This translates the entire site and similarly gives you a customizable language switcher to be displayed and use anywhere on your site.
This question depends on a number of factors including size of site, desired level of conformance, your developer's understanding of accessibility techniques, etc. Accessible Web is here to help. Reach out and we can discuss your site specifically.