Alles widgets en UI-elementen zitten al in het OS
Nog meer: grids, tree-views, tab panels, rich-text editors, media-players et cetera.
Bekijk deze presentatie met Opera in full-screen modus.
Arjan Eising, 8 mei 2009
Tijd voor een voorbeeld.
Webtoegankelijkheid betekent dat mensen met beperkingen het web kunnen waarnemen en begrijpen, dat ze ermee kunnen navigeren en interacteren, en dat ze kunnen bijdragen aan het web.
WAI start in 2006 het ARIA project om webapplicaties toegankelijk te maken.
WAI is onderdeel van het W3C, gericht op toegankelijkheid. Het heeft ook o.a. de WCAG specificatie ontwikkeld.
ARIA zit als een schil tussen de webapplicatie en de user-agent (eg browser).
Als JavaScript iets veranderd aan de HTML, registreerd ARIA dat, en geeft dat door aan de user-agent.
ARIA moet dus door de user-agent ondersteund worden.
Voor alle widgets en UI-elementen zijn best-practices opgesteld.
Denk aan: hoe te navigeren met het toetsenbord.
role-attribuut<a role="button" onclick="action">
Don't press
</a>Je hoeft niet perse attributen in je HTML op te nemen, je kan ze dynamisch genereren met JavaScript.
Nog meer: grids, tree-views, tab panels, rich-text editors, media-players et cetera.
Attributen om de status van een UI-element aan te duiden.
aria-pressed als een button is ingedrukt. (Bijvoorbeeld een knop voor vetgedrukte tekst.)aria-valuenow om de waarde van een slider mee te geven.aria-activedescendant voor de huidige waarde van een toolbar.<div role="toolbar" aria-activedescendant="a">
<a role="button" id="a">A</a>
<a role="button" id="b">B</a>
<a role="button" id="c">C</a>
</div>Gebruik van onder andere CSS sprites om minder JavaScript code te hoeven schrijven.
a[aria-pressed] {
background: url(mijn-button-image) no-repeat;
height: 20px;
}
a[aria-pressed=false] {
background-position: 0 -20px;
}(En met CSS3 wordt het nog leuker!)
Hoe moet de browser handelen als content verandert.
<div aria-live="polite">
[content]
</div>Waarden van dit attribuut: off (default), polite en assertive.
De meest belangrijke speler, Internet Explorer 8, ondersteund ARIA. Belangrijk omdat veel (oudere) spraakssoftware alleen overweg kunnen met IE.
Firefox 3
Laatste versies van Jaws en Window-Eyes (spraaksoftware) ondersteunen het ook.
Sommige delen van YUI-library zijn van ARIA-attributen en best-practices voorzien.