Google e WAI-ARIA

googleWAI-ARIA (Accessible Rich Internet Applications Suite) è davvero un bell’aggeggio, è un po’ che sto meditando qualche test.  Come ben spiega Steve Faulkner, WAI-ARIA it’s easy, e insomma, stuzzica.

Per chi volesse provare, è disponibile anche un componente aggiuntivo per Firefox, la Juicy Studio Accessibility Toolbar (sperimentale) di Gez Lemon, che permette di fare verifiche sulle proprie pagine.

Oggi una succulenta novità su ARIA: Google ha implementato ARIA su alcuni dei suoi servizi, come Google News, Google Calendar e Google Finance.

In effetti, una buona occasione per provare la Accessibility Toolbar di Juicy Studio, che rileva Live Regions, landmarks del documento, Roles e Roles and Properties (oltre ad offrire un Table Inspector e un Colour Contrast Analyzer aggiornato all’algoritmo WCAG 2.0).

Detto fatto. Vai a Google Finance, seleziona ARIA > Aria roles ed ecco:

WAI-ARIA Roles

Properties
Properties Element Parent Nodes Markup
tablist DIV
  • HTML
  • BODY.fix-margin
  • DIV#body-wrapper
  • DIV.g-doc
  • DIV#home-main
  • DIV.g-section.home-main-content
  • DIV.g-unit
  • DIV.g-c.sfe-break-right
<div id="news-tabs"

    class="goog-tab-bar hdg"

    style="-moz-user-select: none;"

    role="tablist"

    tabindex="0">
tab DIV
  • HTML
  • BODY.fix-margin
  • DIV#body-wrapper
  • DIV.g-doc
  • DIV#home-main
  • DIV.g-section.home-main-content
  • DIV.g-unit
  • DIV.g-c.sfe-break-right
  • DIV#news-tabs.goog-tab-bar.hdg
<div class="goog-tab goog-tab-selected"

    aria-selected="true"

    role="tab"

    style="-moz-user-select: none;"

    id=":0">
tab DIV
  • HTML
  • BODY.fix-margin
  • DIV#body-wrapper
  • DIV.g-doc
  • DIV#home-main
  • DIV.g-section.home-main-content
  • DIV.g-unit
  • DIV.g-c.sfe-break-right
  • DIV#news-tabs.goog-tab-bar.hdg
<div class="goog-tab"

    role="tab"

    style="-moz-user-select: none;"

    id=":1">
tablist DIV
  • HTML
  • BODY.fix-margin
  • DIV#body-wrapper
  • DIV.g-doc
  • DIV#home-main
  • DIV.g-section.home-main-content
  • DIV.g-unit
  • DIV.g-c.sfe-break-right
  • DIV.g-tpl-50-50.g-section.g-break
  • DIV.g-unit
  • DIV.break
  • DIV.g-wrap
<div class="hdg goog-tab-bar"

    id="trends"

    style="-moz-user-select: none;"

    role="tablist"

    tabindex="0">
tab DIV
  • HTML
  • BODY.fix-margin
  • DIV#body-wrapper
  • DIV.g-doc
  • DIV#home-main
  • DIV.g-section.home-main-content
  • DIV.g-unit
  • DIV.g-c.sfe-break-right
  • DIV.g-tpl-50-50.g-section.g-break
  • DIV.g-unit
  • DIV.break
  • DIV.g-wrap
  • DIV#trends.hdg.goog-tab-bar
<div class="goog-tab goog-tab-selected"

    aria-selected="true"

    role="tab"

    style="-moz-user-select: none;"

    id=":2">
tab DIV
  • HTML
  • BODY.fix-margin
  • DIV#body-wrapper
  • DIV.g-doc
  • DIV#home-main
  • DIV.g-section.home-main-content
  • DIV.g-unit
  • DIV.g-c.sfe-break-right
  • DIV.g-tpl-50-50.g-section.g-break
  • DIV.g-unit
  • DIV.break
  • DIV.g-wrap
  • DIV#trends.hdg.goog-tab-bar
<div class="goog-tab"

    role="tab"

    style="-moz-user-select: none;"

    id=":3">
tab DIV
  • HTML
  • BODY.fix-margin
  • DIV#body-wrapper
  • DIV.g-doc
  • DIV#home-main
  • DIV.g-section.home-main-content
  • DIV.g-unit
  • DIV.g-c.sfe-break-right
  • DIV.g-tpl-50-50.g-section.g-break
  • DIV.g-unit
  • DIV.break
  • DIV.g-wrap
  • DIV#trends.hdg.goog-tab-bar
<div class="goog-tab"

    role="tab"

    style="-moz-user-select: none;"

    id=":4">
tab DIV
  • HTML
  • BODY.fix-margin
  • DIV#body-wrapper
  • DIV.g-doc
  • DIV#home-main
  • DIV.g-section.home-main-content
  • DIV.g-unit
  • DIV.g-c.sfe-break-right
  • DIV.g-tpl-50-50.g-section.g-break
  • DIV.g-unit
  • DIV.break
  • DIV.g-wrap
  • DIV#trends.hdg.goog-tab-bar
<div class="goog-tab"

    role="tab"

    style="-moz-user-select: none;"

    id=":5">

Mica male! Non capisco comunque la politica di Google verso gli standard, però bel colpo del dinamico duo Raman & Chen verso l’accessibilità.

Annunci

Rispondi

Inserisci i tuoi dati qui sotto o clicca su un'icona per effettuare l'accesso:

Logo WordPress.com

Stai commentando usando il tuo account WordPress.com. Chiudi sessione / Modifica )

Foto Twitter

Stai commentando usando il tuo account Twitter. Chiudi sessione / Modifica )

Foto di Facebook

Stai commentando usando il tuo account Facebook. Chiudi sessione / Modifica )

Google+ photo

Stai commentando usando il tuo account Google+. Chiudi sessione / Modifica )

Connessione a %s...