WAI-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à.
6 aprile 2009
-
Archiviato in Accessibilità, Markup | Comment (0) torna alla Home
Lascia la tua opinione