Anvandbart.se. Startsida.

Användbarhetsboken beskriver på ett konkret sätt hur man gör webbplatser tillgängliga och användbara. Läs ett provkapitel som pdf, eller läs den direkt här på webben.

Köp boken hos Adlibris eller Bokus

.


Tillgänglighet

Begreppet tillgänglighet används för två delvis skilda saker. Dels när man talar om hur tillgänglig en webbplats är för användare med funktionshinder. Dels när man talar om hur tillgänglig den är för användare med olika tekniska förutsättningar, till exempel någon som har en väldigt gammal webbläsare eller surfar via mobiltelefon.

I första hand kommer denna avdelning att koncentrera sig på det som ökar tillgängligheten för människor. I praktiken sammanfaller dock ofta områdena. Samma saker som gör webbplatsen tillgänglig för den som är blind göra den också tillgänglig för söktjänster och mobilsurfare.

Design för alla

Tillgänglighet för funktionshindrade är inte något som bara är intressant för en liten grupp handikappade användare. Ibland används istället begreppet ”design för alla”, som mycket bättre berättar vad det handlar om. Man behöver inte vara synskadad för att uppskatta att texten inte är pytteliten, det gör både den tredjedel av Sveriges befolkning som är över 50 och användare av bärbara datorer av senaste modell med högupplösta skärmar. Man behöver inte ha lässvårigheter för att föredra en text som är skriven på ett läsvänligt sätt. Och man behöver inte ha en muskelsjukdom för att ibland vilja låta mushanden vila och surfa via tangentbordet.

Både demokratiska och kommersiella skäl motiverar att designa för alla. Att myndighetswebbplatser görs så att delar av befolkningen inte kan använda dem är naturligtvis inte acceptabelt. Att e-handelsplatser görs så att potentiella kunder inte kan använda dem är dåligt affärsmannaskap – i synnerhet som det ofta inte är dyrare att designa tillgängligt, utan snarare en fråga om att utföra hantverket på rätt sätt.

Inte bara för synskadade

När man talar om handikappanpassning av webben tänker många på de synskadade . Det är inte så konstigt, det är ju ett litet mirakel som skett, det enda som behövs är en gnutta eftertanke hos webbmakarna så öppnar sig en ny värld för en grupp som tidigare bara kunde komma åt text via dyra inläsningar på band. En enorm nytta för en liten ansträngning.

Den stora gruppen funktionshindrade är dock en annan. Det är de kognitivt handikappade, till exempel människor med lässvårigheter, svårigheter att följa abstrakta resonemang eller inlärningssvårigheter.

Att tillgängliggöra för denna grupp handlar mycket om språket, hur innehållet skrivs och att komplettera texter även med andra uttrycksformer, till exempel förklarande bilder.

Texten ovan är ett avsnitt ur Användbarhetsboken. Varje avsnitt har sin egen webbsida. Här hittar du rättelser, tillägg, blogginlägg och kommentarer - eller gör dina egna. Några sidor (till exempel den du läser nu) har också hela bokens text. Steg för steg kommer hela bokens text att läggas ut här på webben.

Vill du läsa mer kan du:

Post new comment

The content of this field is kept private and will not be shown publicly.

Ur bloggen

C-uppsatsen Avhandlingen Tillgänglighets olidliga lätthetOm sambanden mellan kunskap om, motivation till och efterlevnad av riktlinjer för tillgänglighet på webben har undersökt varför så många offentliga webbplatser är så otillgängliga – stolta ord och 24-timmarsvägledningar till trots.

Uppsatsen Avhandlingen hittar flera anledningar. Brist på kunskap är en, men även där kunskapen finns är ofta tillgänglighetsfrågorna lågt prioriterade, och kommer i kläm när projekten skall sys ihop. De väger, som titeln antyder, alltför lätt. 

Accessify.com bjuder på en stor uppsättning verktyg för att producera tillgänglig html- och css-kod. Till exempel Accessible Table Builder som ställer ett antal frågor om tabellen som skall göras och sedan producerar koden.

Andra verktyg:


  • Accessibility Tools
    • Accessible Form Builder – A simple but very quick way of putting together a form that uses either CSS or table for layout, automatically creates label elements and the associated for and id atttributes, as well as (optional) title attributes for each text field. It’s as simple as entering a list of fields that need to be captured and hitting return.
    • Form Element Generator – Build individual form elements that are accessible (requires JavaScript to work). Could be used after creating the form above to address fields that are not straightforward text inputs.
    • Pop-up Window Generator – Create pop-ups that are accessible and search engine-friendly. Note: this tool is going to get a revamp very soon, such that inline event handlers are not used. So, don’t flame me, all ye DOM scripters!
    • Favelets – Little pieces of JavaScript that can be saved as favourites in Internet Explorer, Mozilla and Opera. You may find these useful for checking features of a page (for example, what links are present, images missing alt attributes etc
  • General Developer Tools
    • Yes/No List creator – It’s a tool for quickly generating accessible, XHTML-compliant yes/no radio button choices from a list
    • Insta-Select – An easy XHTML-compliant select list generator (paste in your list and out comes the select with relevent option elements and value attributes)
    • List-o-matic – Create CSS-styled navigation blocks based on unordered list <li> items.
    • Acrobot – converts all your acronyms/abbreviations using the <acronym> and <abbr> tag
    • HTML to JavaScript Convertor – Similar to Response.Right, this tool takes your markup and converts it to a series of document.write() statements that you can use in a block of JavaScript.
    • XFN (XHTML Friends Network) Link Creator – Build up XFN-friendly links for copying/pasting into a blog-roll or navigation menu.
    • Response.Right – Save time converting large blocks of text/HTML to server-side write statements (such as PHP echo or ASP response.write) with this handy convertor.
    • Quick Escape – Converts HTML to escaped characters suitable for pasting into form textarea inputs.

Hur tillgängligt är Ajax? Inte särskilt, visar den här artikeln där James Edwards testat hur väl olika varianter av att uppdatera en sida fungerar med olika skärmläsare, och inte hittar någon Ajax-metod som klarar det i alla sorters skärmläsare.

Egentligen är problemet inte Ajax i sig, utan att skrämläsarnas stöd för javascript är väldigt buggigt – och buggigt på olika sätt i olika läsare. Alltså samma situation som vi hade för vanliga webbläsare för några år sedan.

Slutsatsen blir att det enda sättet att uppdatera sidan som fungerar är att låta bli Ajax helt och istället göra på det traditionella sättet: ladda om hela sidan. Eller att åtminstone erbjuda ett sådant alternativ.

“I’m forced to conclude that, unless a way can be found to notify screen readers of updated content, AJAX techniques cannot be considered accessible, and should not be used on a production site without a truly equivalent non-script alternative being offered to users up-front.”

En annan slutsats som kan dras är att överhuvudtaget inte lita på att skärmläsare klarar att korrekt hantera javascript, och att buggarna är så olika att det är nödvändigt att testa skripten med många olika skärmläsare. (Det påminner med andra ord mycket om situationen med javascript i mobiltelefoner.)

Via “456 Berea Street”:http://www.456bereastreet.com/archive/200605/ajax_javascript_support_and_screen_reader_accessibility/.

alt-texter på bilder har blivit något av en symbol för om en webbplats är tillgänglig eller ej. Men för funktionshindrade användare finns det andra saker som är långt viktigare: ett tydligt språk, enkel layout, bra navigation och länkar som syns tydligt och som berättar vart de går, toppade listan i en undersökning som User Vision gjort: Disabled web users rank their usability priorities. En fjärdedel av de synskade svarade till och med att alt-texter inte var viktiga alls för dem.

Här är de (enligt undersökningen) fem viktigaste sakerna du kan göra för att göra din sajt tillgänglig:

  • Sökning på sajten
  • Sajtkarta
  • Tydliga, väl formulerade länkar
  • Navigation inom sidan
  • Möjlighet för användaren att själv ställa in textstorlek

Läs mer:

De nya tekniker som brukar betäknas med samlingsnamnet ajax leder till nya tillgänglighetsproblem. (Inte så förvånande, för när har inte något nytt lyckats skaka webbens ganska bräckliga tillgänglighetsstöd?)

Framförallt uppstår problem när delar av sidan byts ut, eftersom det inte finns något riktigt bra sätt att underrätta skärmläsare om att detta skett.

456 Berea Street skriver mer om detta och länkar till flera intressanta texter samt tester av ajax-sajter som gjorts med skärmläsare.

Det finns alltid ett visst underhållningsvärde i att se någon skryta med sin förträfflighet för att sedan få ballongen punkterat. OnOff har gått ut med stora annonser om hur tillgänglig deras nya webbsajt är. Men när 456 Berea Street tittade under ytan, hittade de ett härke av dålig kod och amatörmässiga tillgänglighetsmissar.

Läs mer:

Verktyg för att testa och utveckla tillgängligheten direkt i webbläsaren – men bara om du använder Internet Explorer på en PC.

En utmärkt liten översikt över vilka olika sorters funktionshinder det finns, och hur de påverkar möjligheten att använda webben. Backend Media är för övrigt en läsvärd liten blogg som skriver mycket om användbarhet och tillgänglighet.

Läs mer:

20 Apr 2006

Tillgänglig HTML-kod

Formatmallar ger oss stora möjligheter att styra hur webbsidor presenteras. Men hur skall själva html-koden ordnas, så att den blir så tillgänglig som möjligt? Undersökningen Source Order, Skip links and Structural labels ger några svar:

  • Lägg navigationen först, innehållet sedan.
  • Bygg in genvägar, så att användaren snabbt kan ta sig runt på sidan.
  • Sätt etiketter på de olika delarna av sidan, så att användaren snabbt kan identifiera dem.

Notera dock att det statistiska underlaget för undersökningen är litet.