[HTML] Usability/Semantiek achter taalkeuze

[MoietyMe]

In een nieuw project ben ik een taal keuze menu aan het maken. Dat ziet er als volgt uit:



En na openen:



Mijn HTML ziet er nu als volgt uit:

HTML:

<div class="language-nav" aria-expanded="false">
  <a data-update="language-nav">
    <abbr title="Nederlands">NL</abbr>
    <span class="close" title="Sluit het taalkeuze menu">
      <span class="sr-only">Sluit het taalkeuze menu</span>
    </span>
  </a>
  <div class="language-container">
    <a title="Stel Nederlands in als taal" class="active"><abbr title="Nederlands">NL</abbr></a>
    <a title="Stel Engels in als taal"><abbr title="English">EN</abbr></a>
  </div>
</div>

Met JavaScript vervang ik keurig aria-expanded met true of false waar nodig. De titles worden vervangen door middel van resource files (page refresh).

Het geen mij nog een beetje tegenstaat is dat er geen instructies staan bij een hover als het menu is ingeklapt; dan staat er simpelweg de title van de abbr die op dat moment actief is: "Nederlands" of "English". Als het menu open is dan staat er keurig netjes "Sluit het taalkeuze menu" of "Close language menu". Nou had ik zelf bedacht om [data-update="language-nav"] te voorzien van een title die ik kan aanpassen als er van taal word gewisseld of als het menu wordt uitgeklapt. Dit kan vrij simpel door het gebruik van data attributen (voor de content) en wat JavaScript.

Mijn vraag is, is dat de netste oplossing of zijn er nog betere alternatieven?

[geert1]

Een dynamische tooltip of title-attribuut lijkt me inderdaad een aardige manier om het menuutje nog wat duidelijker te maken. Maar wat mij veel meer opvalt is de keuze voor het pictogram: Die zou gemakkelijk kunnen worden geïnterpreteerd als een chatfunctie, een forum, een berichtencentrum (zoals op T.net), enz. Daar straalt niet de functie "taalkeuze" vanaf. Ik zou je daarom eerder aanraden om iets met de landvlaggen te doen, in combinatie met de naam van de taal of de afkorting zoals je nu hebt. Dat geeft volgens mij meer duidelijkheid dan alleen het toevoegen van een title / tooltip. Je zou ook iets van een pijltje kunnen toevoegen, om aan te geven dat het blokje uitklapbaar is (functioneel is dit blokje gelijk aan een select-element, waar ook een indicatie in zit dat het uitklapbaar is). Zoiets als dit dus, hoewel het best horizontaal mag uitklappen zoals je nu hebt.

Bedenk ook dat gebruikers met een touchscreen over het algemeen weinig hebben aan title-attributen. Semantisch gezien zou een title / tooltip handig kunnen zijn, maar qua usability zal het vervangen van het pictogram door de huidige landsvlag volgens mij een stuk meer doen.

[ Voor 21% gewijzigd door geert1 op 08-05-2014 11:07 ]

[MoietyMe]

Het pictogram werpt een modal met contact gegevens en dergelijk op. Het menu wordt geopend door op de afkorting van de taal te klikken.

Wellicht dat het volledige menu het duidelijker weergeeft:



Voor touch is het inderdaad een ander verhaal, de mobiele variant neemt dan ook een andere vorm aan:



Neemt niet weg dat je op een iPad nog steeds niks hebt aan mijn mooie title attribuut (ga er van uit dat niet iedereen de SR functies van iOS aan heeft staan ).

[ Voor 39% gewijzigd door MoietyMe op 08-05-2014 11:37 ]

[geert1]

Ah kijk, de extra screenshots geven al wat meer context inderdaad. Alsnog lijkt de toevoeging van een vlag mij een nuttig stukje verduidelijking. Het toevoegen van een titel-attribuut zou ook kunnen helpen zoals je zegt. Iets in de trant van "Taalkeuze openen", en dat zou ik dan inderdaad met javascript weghalen op het moment dat het menu al open staat.

[MoietyMe]

geert1 schreef op donderdag 08 mei 2014 @ 15:47:
Ah kijk, de extra screenshots geven al wat meer context inderdaad. Alsnog lijkt de toevoeging van een vlag mij een nuttig stukje verduidelijking. Het toevoegen van een titel-attribuut zou ook kunnen helpen zoals je zegt. Iets in de trant van "Taalkeuze openen", en dat zou ik dan inderdaad met javascript weghalen op het moment dat het menu al open staat.

Bedankt voor je input, heb een voorstel gedaan bij de Creative Director Title-attributen komen er in ieder geval in.

[Bosmonster]

Nog wat issues mbt toegankelijkheid:

• De contrasten die je nu hanteert (grijs op wit en grijs op zwart) zijn veel te laag.
• De taal-linkjes die je gebruikt beter opgemaakt in een lijst, dan losse linkjes in een div.
• Je gebruikt nu een span als button. Beter is hier een button-element van te maken. Dan kom je ook niet zo snel in de problemen met de vereiste toetsenbordnavigatie.
• Neem de sluitbutton op in het menu dat je opent, ipv op een semantisch ongerelateerde plek.

Begin bij het begin zou ik zeggen. Een site kan ook prima toegankelijk zijn zonder Aria-shizzle namelijk.

[ Voor 54% gewijzigd door Bosmonster op 13-05-2014 17:04 . Reden: Even iets beter opgemaakt :) ]

[InZane]

geert1 schreef op donderdag 08 mei 2014 @ 15:47:
Ah kijk, de extra screenshots geven al wat meer context inderdaad. Alsnog lijkt de toevoeging van een vlag mij een nuttig stukje verduidelijking. Het toevoegen van een titel-attribuut zou ook kunnen helpen zoals je zegt. Iets in de trant van "Taalkeuze openen", en dat zou ik dan inderdaad met javascript weghalen op het moment dat het menu al open staat.

Vlag != Taal

Wellicht een interessant artikel om eens te lezen: http://flagsarenotlanguag...o-not-represent-language/