lillbra.se

Veckans länktips – 2010-10-31

• A crash course in how DOM events work – Jupiter JavaScript Consulting
  Vet du skillnaden mellan Level 1 och Level 2 event listeners, eller mellan Capture och Bubble Phase?
  (taggar: javascript events dom reference browser )
• Fluid Width Equal Height Columns | CSS-Tricks
  Olika metoder för att sätta lika höjd på kolumner mha css.
  (taggar: css equalheight column height howto )
• Formalize CSS
  Snygg js+css-lösning för att bättre kontrollera stylingen av formulär.
  (taggar: forms design crossbrowser style )
• HTML5 Audio and Video: What you Must Know | Nettuts+
  Braiga saker att veta när du ska infoga video som html5.
  (taggar: html5 video codecs tutorial embed )
• Optimizing sites for TV – Official Google Webmaster Central Blog
  Så ska du designa sajter för tv:n (via Daytona).
  (taggar: tv design tutorial )
• Qwerly: People Search for the Social Web
  Skriv in ett twitternamn och få reda på kontakter och andra sajter personen är aktiv på.
  (taggar: socialweb social searchengine api socialgraph )
• cssembed – GitHub
  Jar-fil som byter ut alla referenser till bilder i en css-fil mot base64-enkodade data-urier. Perfekt att koppla till ditt bygge.
  (taggar: performance base64 mhtml build compression data-uri jar )
• LIBRIS stavnings-API
  Api för rättstavning av ord (via @joopey).
  (taggar: api webservices spelling translate )
• Gangsta Lorem Ippzle Dummy Text Generator
  När du behöver lite mer yo i dina dummytexter, brother! (via Tomas G)
  (taggar: loremipsum text gangsta humor funny )
• Manipulating the browser history – MDC
  Så använder du history.pushState() & history.replaceState() i html5 för att ändra webbläsarhistoriken.
  (taggar: html5 javascript backbutton ajax history )

Veckans länktips – 2010-10-10

• Hardboiled CSS3 Media Queries | Stuff and Nonsense
  Lista över mått och egenskaper till css media-queries för de vanligaste mobila enheterna.
  (taggar: media-queries iphone ipad mobile css3 )
• How Good C# Habits can Encourage Bad JavaScript Habits: Part 1 – Enterprise jQuery
  Några best-practices runt patterns och syntax i javascript.
  (taggar: javascript bestpractices tips patterns )
• Jo HTML5 Mobile App Framework
  Ramverk för att skapa mobil-appar – native och html.
  (taggar: mobile iphone android development phonegap )
• Smooth Fading Image Captions with Pure CSS3
  Så här enkelt skapar du en fade-in med css-transitions.
  (taggar: css3 fade css-transitions howto )
• WordPress Custom Post Types Guide
  Så skapar du egna sidtyper i WordPress.
  (taggar: wordpress tutorial custom-post-types wp )
• jQuery Fundamentals
  E-bok för dig som vill lära dig jquery (via @ilia_mikhailov).
  (taggar: jquery javascript book tutorials ebook pdf )
• HOW TO: Make Your Mobile Websites Act More Like Native Apps – Edging
  Lista över js-ramverk som härmar utseende och funktionalitet hos native apps.
  (taggar: mobile javascript apps list resources framework iphone android )

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!