ps. Nikke Lindqvist har en lista på andra svenska bloggar som firar nakenheten idag.

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!

• 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]

Google Charts

Chris Heilmann (som för övrigt talar här i Sverige på torsdagens Geek Meet) har skrivit ett javascript som skapar Google-diagram från html-tabeller. Med det kan du presentera data och statistik i vanliga tabeller. Skriptet förvandlar sedan tabellen till snygga grafer för användare som har javascript påslaget. Men för sökmotorer, användare som inte kan se bilder eller surfar utan javascript- eller bildstöd finns ändå datat tillgängligt.

Google Maps

Tidigare i veckan tipsade Roger Johansson om hur du gör Google Maps mer tillgängligt. Med hjälp av Google Static Maps API kan man få statiska bilder av kartor. Perfekt att använda som fallback till Googles populära kart-api som kräver javascript. På så sätt kan användare som inte har javacript och därför inte kan använda den avancerad kartjänsten, ändå få en kartbild.

Youtube

Chris Heilman har skapat en tjänst och ett API som gör Youtube enklare och mer tillgängligt. Hans Easy Youtube Player gör det lättare för användare med synskador eller andra funktionshinder att se på video. Du kan själv ändra look-and-feel på spelaren så att den passar just dina användare.

Så nästa gång du använder någon av dessa populära API:er – se till att du implementerar de med så hög tillgänglighet som möjligt.

[tags]tillgänglighet, användbarhet, google maps, google charts, youtube[/tags]