Coding for Beginners: Recap #78—Multilingual Sites and Good Structure for Accessibility

------

So we discussed how to set the primary language of your website for accessibility. What if you have a multi-lingual site? What extra steps are needed for accessibility?

In a multi-lingual website the content is presented in more than one language. While a majority of sites present all the content in one language at a time, there are instances where you may be presenting more than one language.

For phrases not in the primary language declared in the html element, you would add a lang attribute to the element that contains content in another language.

If you are directing a person to the same content but presented in a different language through a link, you need to indicate to the viewer with an assistive device that they are going to be taken to a version of the site in a different language using the hreflang attribute. The href indicates they are being directed elsewhere and the lang attribute indicates the language.

If the language of your link is in another language then you use both hreflang and lang:

Keep in mind that Google and many search engines do not recognize the lang attribute. So to make your pages more friendly to search engines, it is better not to create pages with more than the primary language. Google and other search engines will determine the languages being used on your page.

It is important to understand how to handle languages that are written in a different direction that your primary language. For example, English is written left-to-right. Since left-to-right is considered the default, it does not need to be specified. However, for languages written in a right-to-left fashion, you need to indicate the direction. You need to add the dir attribute and indicate the value of "rtl" for right-to-left.

Because right-to-left languages should be right aligned you may also need to change your layout of the page to fit the new direction of text.

Another issue to consider is character encoding. This is used to decipher letters and symbols. You may understand these as glyphs as part of typefaces. Glyphs have a unique code that represents that character. A popular type of character encoding is Unicode. Unicode supports a wide range of languages and is supported by many operating systems. So it is ideal for use in multi-lingual websites.

Finally, when designing a website that supports multiple languages, you also need to choose a typeface that supports the languages on your site. This is particularly evident for languages like Chinese, Japanese, Korean, and Arabic. These languages may need certain typefaces that support their glyph system as well as be presented at a different size for legibility.

Another key to making your website more accessible is by using good structure when writing your code. Identify major sections as discussed with last week's aria landmarks and the html5 that identifies the header, main, footer, sections, articles, asides and navigation. Screen readers will also use your headings to help navigate through the content so it is important that you label content with the appropriate hierarchy.

Paragraph text should be labeled as such and use unordered and ordered lists to help break up the content so it is easy to pick up key points. Your website should be organized so your user is not confused. And this will help those navigating your website using assistive devices such as screen readers.

Writing clear code is a key to accessible design and this will come with practice. Always imagine that your code will be read by another person and they need to be able to understand it. It will help you to not take shortcuts that only you understand. Follow accepted best practices when writing your code.

#HTML #CSS #coding #webdesign #web #designerslearncode #dailycodesnippet #codingforbeginners #accessibility #learntocode #learntocodeforbeginners #multilingualsites #websiteswithmorethanonelanguage #langattribute #hreflangattribute #websitetranslation #translation #goodstructure #cleancode #webdevelopment #htmltutorialforbeginners #webaccessibility #disability #inclusion #disabilityawareness #inclusionmatters #htmltutorial #csstutorial #csstutorialforbeginners #htmlcssfullcourse #codinglife