Helena Zubkow and Mike Herchel published a great article recently comparing the U.S. Presidential candidates websites on accessibility. That article points out several features (both good and bad) that affect accessibility for some visitors to their sites. There's one feature in particular that I want to expand upon since it's been on my mind lately. Hillary Clinton's site (hillaryclinton.com) is available in both English and Spanish, and there's a link in the main menu that takes users from one site to the other. (It's no surprise that Donald Trump doesn't have a Spanish version since he's the guy who wants to build un muro).
Anyway, I've developed an interest in how best to code a menu of languages, as in a language picker for translated versions of a website. Hillary's site provides an interesting example of why this matters. On the main menu bar at the top of her English website, she has a link to "ES" which targets the Spanish version.
Why "ES", rather than "Español"? I'd be curious to know the thinking behind that decision. In contrast, the link from the Spanish site back to the English site says "English", not just "EN".
For screen reader users, it's important for web developers to identify the language of the page so multilingual screen readers know how to pronounce the words they're reading. Hillary's sites as a whole are coded properly: The English site has lang="en" on the <html> element, and the Spanish site has lang="es".
It's also important though to identify the language of foreign language text within the body of a web page. Otherwise screen readers will pronounce the foreign words using the rules of the main language of the page, which at best makes the screen reader sound silly, and at worse is indecipherable. In Hillary's case, if she had used Español as the link text for switching to the Spanish site, she would need to specify in the code that Español is a Spanish word, like so:
<a href="/es/" lang="es">Español</a>
Of course, she doesn't really need to do this since "ES" isn't a word at all. However, she should do it on the Spanish version, where the word "English" is not correctly tagged, therefore is pronounced by screen readers in a thick Spanish accent. Here's how it should be tagged:
<a href="/" lang="en">English</a>
What about unpronounceable languages?
This is the issue that has brought me to ponder this topic. Able Player, the accessible media player I've developed with help from the open source community, supports subtitles in any language, and users can browse a list of available languages and choose the one they need. On the DO-IT Video website, which is running Able Player, some of our videos have been translated into Chinese (simplified and traditional), French, Greek, Indonesian, Japanese, Korean,
Portuguese, Spanish, and Vietnamese as part of the DO-IT Translation Project. When subtitles are available for any of these languages, they appear in a menu that pops up when users click the CC button.
To me, it seems reasonable to list the languages in their native language rather than in English since the reader might be unable to read English. (Would you English readers recognize "English" if it appeared as "イングレス" on a Japanese website?)
As for Hillary's using "ES", that's the two-character ISO 639-1 code for Español—all major languages have one. But how many web users know their ISO 639-1 code? Maybe all Spanish-speaking people understand that an "ES" link is intended for them, but in case there are a few who don't, I think spelling it out makes more sense.
But what if a language picker includes multiple languages, including some not supported by users' screen readers? If we list the languages in their native language rather than English (e.g., 日本語) how will screen readers handle this?