Arkiv för the ‘Tillgänglighet’ Category
Idag är det CSS Naked Day 2011
Idag den 9:e april är det den årliga CSS Naked Day, som uppmärksammar nyttan och betydelsen av strukturerad markup, semantisk html och webbstandarder. Så för 5:e året i rad så tar jag bort css:en från denna blogg för att visa min <body> – gör det du också! 
ps. Nikke Lindqvist har en lista på andra svenska bloggar som firar nakenheten idag.
Kom igång med WAI-ARIA
WAI-ARIA (Accessible Rich Internet Applications) är en standard från W3C för ökad tillgänglighet på javascript-tunga webbplatser. Den beskriver hur man ska hantera innehåll i html som är dynamiskt och ändras, till exempel genom AJAX.
Standarden har två huvuddelar: roller (roles) och tillstånd & egenskaper (states & properties).
Roller
Roller kan användas för att beskriva vilken roll (duh!) en viss del eller visst element har på sidan eller i applikationen. Du använder roller genom att lägga till attributet role i din html-kod, t.ex:
<div role="banner">
Det finns 61 stycken roller, mer eller mindre självförklarande, som t.ex. alertdialog, tabpanel, progressbar.
De mest övergripande rollerna kallas landmarks och kan användas av skärmläsare för att navigera runt till huvuddelarna av dokumentet, d.v.s. samma användning som en “Hoppa till innehållet”-länk. Landmarks-rollerna är följande:
- application – del av sidan som anses vara mer applikation än dokument
- banner – t.ex. sidhuvud som beskriver webbplatsen
- complementary – stödmaterial till huvudinnehållet som även är meningfullt om det skulle vara fristående
- contentinfo – metadata om huvudinformationen
- main – huvudinnehållet på sidan
- navigation – navigationsmeny
- search – sökfunktion
Som synes har några av rollerna stora likheter med betydelsen av vissa html5-element. Steve Faulkner har en bra jämförelsetabell mellan landmark roles och html-taggar där du kan se förhållandet mellan dem (via Bruce Lawson).
För samtliga roller bör man tänka på att inte sätta ut roller som konkurrerar med html-elementets semantiska betydelse (via html5doctor). Till exempel ska ett button-element inte ha något annat än en button-roll.
Egenskaper och tillstånd
Egenskaper och tillstånd används för att meddela en skärmläsare eller annat hjälpmedel när förändringar görs på sidan. Egenskaper och tillstånds sätts genom attribut med formatet aria-*. Till exempel:
<div aria-hidden="true">
Man kan använda flera attribut på samma element och de ska med fördel kombineras med roll-attributet. T.ex:
<a role="button" aria-haspopup="true" aria-owns="minPopup">
Skillnaden mellan egenskaper och tillstånd är att egenskaperna (t.ex. aria-labelledby) oftast inte ändras för ett element, medan tillstånd (t.ex. aria-checked) ändras löpande då användaren interagerar på sidan.
Det finns totalt 35 stycken egenskaper och tilstånd. Några av de, i mina ögon, viktigaste är:
- aria-live – Indikerar att ett område eller element kommer att uppdateras. Värde: off/polite/assertive, beroende på om användaren ska meddelas vid en uppdatering eller ej.
- aria-describedby – Hänvisning till ett annat element som innehåller mer information som användaren kan behöva för att använda elementet. Värde: element-id.
- aria-hidden – Om ett element är gömt eller inte. Värde: true/false.
- aria-selected – Om ett element är valt eller inte. Värde: true/false.
- aria-owns – Visar att ett element hör ihop med ett annat element, även om DOM-trädet inte avspeglar denna relation. Värde: element-id.
- aria-expanded – Om ett element, eller annat element som det kontrollerar, betraktas som utfällt eller inte. Värde: true/false.
- aria-haspopup – Om ett element har en popup-/dropdown-meny kopplad till sig. Värde: true/false.
Verktyg för utvecklare
Om du använder WAI-ARIA och vill testa resultatet för användaren kan du använda dessa verktyg (via eutveckling.se):
- Juciy Studio accessibility toolbar Firefox plugin – plugin som känner av och tolkar WAI-ARIA-attribut
- Validator SAC – en validator som har WAI-ARIA-stöd
Läs mer om hur du kommer igång med WAI-ARIA i artikeln Introduction to WAI ARIA på dev.opera.com. Lycka till!
De granskar webbplatser inom offentlig sektor
Som jag skrivit om tidigare har eutveckling.se tillfälligt tagit över nedlagda Vervas roll som förvaltare av Vägledningen 24-timmarswebben. Verva genomförde också tester av webbplatser inom offentlig sektor och även detta fortsätter eutveckling.se med. Peter Krantz som står bakom initiativet har nu utökat testet med följande (via 24-timmarsbloggen):
- Test av felsida
- Språkinformation
- Fungerar utan www
- Validering av rss
- Stilmall för utskrift
- Fältetiketter
- Validering css
- Alt-texter
Antalet sajter som testas har utökats till att även innehålla tidningar som får presstöd, statliga aktiebolag och andra organisationer med offentligt stöd. Första testet är redan genomfört – se resultaten här.
Men det finns fler som vill kvalitetsgranska myndigheters webbplatser. Nya sajten Validerat.se genomför också mätningar genom att validera koden mot W3C.
Mätningarna är inte lika detaljerade som Vervas eller eutveckling.ses (som Erkstam påpekar), men på varje webbplats har upp till 100 sidor testats – inte bara startsidan, som i de andra testerna. Bakom sajten och mätningarna står Meridium.
Ett bra initiativ av båda tycker jag, och det känns fint att se att arbetet med granskningen av offentliga webbplatser fortsätter i Vervas frånvaro.
Relaterade inlägg: Validera mera.
[tags]validering, w3c, verva, eutveckling, validerat.se[/tags]
Jag heter Jonatan Larsson och jobbar som webbutvecklare. Det här är min blogg om webbutveckling och webb- trender. Du kan läsa mer om mig här.
