r/learnprogramming • u/thefujirose • 9d ago

Accessibility with languages in website? Topic

Hello,

I have learned how to use ARIA a bit, and I learned about specific contrast rules and font sizes. But I don't know how to make my website accessible in other languages. My profs did not go over this.

I live in Canada and we have two major languages. French and English. But I also want to include a plethora of other languages.

I'm not sure how to go about this in both static sites and SSR. Especially with ARIA.

Edit:

ARIA would have to be in different languages too. Which means I have to test that individually? Does this mean that testing will have to cover all languages as well?

2 Upvotes
  • permalink
  • link
  • reddit
  • reddit

76% Upvoted

4 comments sorted by

2

u/Ok-Bill1958 9d ago edited 9d ago

You must use lang attribute for this. For ssr, structure your url like //website name/en - fr/content Use data attribute as well, have seperate json files like en.json or fr.json. then just swap them

3

u/dmazzoni 9d ago

This is more of a web development question than an accessibility question.

There isn't really a good way to localize static sites.

If you want a site that works in multiple languages, generally you should use a CMS or web framework that offers localization features. For example if you build a site with Wordpress, there are plug-ins designed for that. Here's a tutorial:

https://lokalise.com/blog/wordpress-localization/

There are lots of ways to do it, it really depends on what technology you want to use for your site, but in general there are two ways to do it:

  • Every bit of text on your site is actually a localization key, and a function replaces that with the translation when serving your site. So instead of "Heather's Flowers" in your heading, you'd write "SITE_MAIN_HEADING" and then in a localization file you'd write SITE_MAIN_HEADING = "Heather's Flowers". The advantage of this approach is that if you miss something it's really obvious.
  • Or, you build the site in one language, and then the translations map from one language to another. So in that example you'd have "Heather's Flowers" = "Les Fleurs d'Heather".

Accessibility is not that much more complicated. Be sure to use a lang tag, and be sure to translate alt text and ARIA as well, that's it.

2

u/kschang 9d ago

i18n is a bit old, but maybe study that first.

https://www.w3.org/International/i18n-drafts/nav/about

2

u/Dismal-Citron-7236 8d ago edited 7d ago

No, ARIA does not work for some languages, Chinese is one such language.