WebAIM - Web Accessibility In Mind

E-mail List Archives

Thread: Bilingual Button

for

Number of posts in this thread: 3 (In chronological order)

From: Moore,Michael (Accessibility) (HHSC)
Date: Tue, Sep 29 2015 9:59AM
Subject: Bilingual Button
No previous message | Next message →

We have a web application that presents bilingual forms (English/Spanish) that is currently missing any language attributes. My preference would be to have a user select a language then have all of the information presented in the persons chosen language. What may help me get there is that the buttons used to submit information are also bilingual and I do not believe that there is a valid method for properly indicating two separate languages within the same button. Example: <input type="submit" value="Submit/Guardar" />. So is it possible to create a single button that will have correct language attributes for two languages?

Mike Moore
Accessibility Coordinator
Texas Health and Human Services Commission
Civil Rights Office
(512) 438-3431 (Office)

From: Chaals McCathie Nevile
Date: Tue, Sep 29 2015 10:29AM
Subject: Re: Bilingual Button
← Previous message | Next message →

On Tue, 29 Sep 2015 20:59:42 +0500, Moore,Michael (Accessibility) (HHSC)
< = EMAIL ADDRESS REMOVED = > wrote:

> We have a web application that presents bilingual forms
> (English/Spanish) that is currently missing any language attributes. My
> preference would be to have a user select a language then have all of
> the information presented in the persons chosen language. What may help
> me get there is that the buttons used to submit information are also
> bilingual and I do not believe that there is a valid method for properly
> indicating two separate languages within the same button. Example:
> <input type="submit" value="Submit/Guardar" />. So is it possible to
> create a single button that will have correct language attributes for
> two languages?

Nope. Not unless you use the switch element in SVG, and I am not sure if
you can do it even then - especially in practice.

I *would suggest that wherever you have links to swap between languages
you add hreflang, and other appropriate "meta" information, e.g. from the
english page

<a href="this.es.html" title="spanish version"
hreflang="es" lang="es"><!--
img src="castellano" alt=""-->Ésta pagina en castellano</a>

There are tools that can crawl across languages, and they are also very
easy to make.

Likewise you should use the Internationalisation tags - things like the
translate attributes are actually recognised by auto-translation services,
most of which come from search engines, so they have real-world value.

People will tell you, correctly, that using flags to identify languages is
questionable. Flags are political by nature and in most cases there is not
a 1:1 correspondence between a flag and language.

Speaking as someone whose language is usually represented by a US flag,
totally inappropriate to me personally, I think using flags can help with
recognition. But for the specific case of Texas I would skip the flag and
just use the text.

--
Charles McCathie Nevile - web standards - CTO Office, Yandex
= EMAIL ADDRESS REMOVED = - - - Find more at http://yandex.com

From: Chaals McCathie Nevile
Date: Tue, Sep 29 2015 11:09AM
Subject: Re: Bilingual Button
← Previous message | No next message

On Tue, 29 Sep 2015 21:29:03 +0500, Chaals McCathie Nevile
< = EMAIL ADDRESS REMOVED = > wrote:

> On Tue, 29 Sep 2015 20:59:42 +0500, Moore,Michael (Accessibility) (HHSC)
> < = EMAIL ADDRESS REMOVED = > wrote:
>
>> We have a web application that presents bilingual forms
[snip]
>> ... I do not believe that there is a valid method for properly
>> indicating two separate languages within the same button. Example:
>> <input type="submit" value="Submit/Guardar" />. So is it possible to
>> create a single button that will have correct language attributes for
>> two languages?
>
> Nope. Not unless you use the switch element in SVG, and I am not sure if
> you can do it even then - especially in practice.

I did a very simplistic bit of testing. On at least Yandex browser and
Vivaldi - so probably other Chromium-based browsers, and on Friefox and
Safari the following seems to work:

<html>
...
<body>
...
<svg>
<switch>
<!-- tests for language support -->
<foreignObject width="100" height="50" y="70" systemLanguage="zh">
<button>Voici des mots en français</button>
</foreignObject>
<foreignObject width="100" height="50" y="70" systemLanguage="es">
<button>Palabras castellanas</button>
</foreignObject>
<foreignObject width="100" height="50" y="70" systemLanguage="en">
<button>english words</button>
</foreignObject>
</switch>
</svg>
...

Although Firefox seems to take any systemLanguage that matches *a*
supported language, whereas Yandex matches the user's preferred language.
Some bugs to be filed…

…and be aware that even if you do the systemLanguage detection, you may
find that many users who speak spanish are using an english setup - this
is why many browsers ignore the system's language for practical purposes
if they get a hint from some other information.

cheers

--
Charles McCathie Nevile - web standards - CTO Office, Yandex
= EMAIL ADDRESS REMOVED = - - - Find more at http://yandex.com