En tredje genomgång av WCAG juni 2018 Pär Lannerö & Pia Flodquist

Relevanta dokument
Webbinarium om det nya webbdirektivet

Kognitiv tillgänglighet

Tillgänglighetskrav i webbdirektivet. Pär Lannerö Underlag för muntlig introduktion hos Finansdep

Webbdirektivet vad innebär det för dig? Tjänster och användbarhet på webben, SKL, 14 september 2017 Pär Lannerö

Att göra-lappar för digital tillgänglighet

Om webbdirektivet, WCAG och MITT-nätverket

Tillgänglig statistik Utforma tabeller, kartor och diagram så att så många som möjligt kan använda dem!

Tillgänglig presentation av statistiska data

Vad säger WCAG om kognition?

Webbtillgänglighet. Webbtillgänglighet. World Wide Web Consortium. Web Accessibility Initiative, WAI WCAG 2.0 WCAG 1.0

Tillgänglighet först vägen till Sveriges bästa webbplats. #webbföralla

F15 Tillgänglighet/Accessibility Dagens agenda

Tillgänglighet som en naturlig del i våra projekt. Sid 1 Mars 2016 Tillgänglighet

Teater 23:s arbete med tillgänglig webb

Checklista Mobila applikationer fo r bank och betalning

Tillgänglighetskrav på interaktion och design Dessa krav baseras på WCAG 2.0,

Mot ett. Laura Rahka & Ossi Alho

Visa stora ikoner utan text i Command Manager = Större arbetsyta

Tillgänglighetskrav på teknik Dessa krav baseras på WCAG 2.0,

Innehåll. Styrdon (ej i boken) Fitts lag (sidan ) Natural user interfaces. Kap 6.2.9, , Kap

För att öppna galleriet, ange adressen

Ändringar i språkfiler i e-line 3.42A

Interaktion 2 STYRDON, PEKDON OCH ANNAN INTERAKTION ATT RÄKNA MED

Vässa kraven och förbättra samarbetet med hjälp av Behaviour Driven Development Anna Fallqvist Eriksson

Användarmanual för webbapplikationen Fejjan för alla. Manualens version:1.0. Datum: 5 februari 2014

Webbtillgänglighet. Tillgänglighet på webben. Hörselskadades behov. Synskadades behov. Kognitivt funktionshindrades behov. Rörelsehindrades behov

UPPDRAGSGIVARE: Malmö stöd. VÅR REFERENS: Andreas Cederbom DATUM:

JAG VILL HA EN bizhub SOM ALLA KAN ANVÄNDA

Schenker Privpak AB Telefon VAT Nr. SE Schenker ABs ansvarsbestämmelser, identiska med Box 905 Faxnr Säte: Borås

SKAPA EN WWW-LÄNK I EN ARTIKELTEXT

HJÄLP VISU-Schéma v2

Tillgänglighet och bondförnuft. MITT-nätverket 13 februari 2017

Vägledningen för webbutveckling webbriktlinjer.se. Björn

Schenker Privpak AB Telefon VAT Nr. SE Schenker ABs ansvarsbestämmelser, identiska med Box 905 Faxnr Säte: Borås

Webbtillgänglighetsdagarna 2018 Upphandling av en tillgänglig webbplats Camilla Heikkilä, North Patrol Oy

TILLGÄNGLIGHET PÅ WEBBEN KOMMUNIKATIONSENHETEN

Riktlinjer för navigation i mobilgränssnitt Senast uppdaterad

Språk och tillgänglighet. Viggo Kann (språkkommittén) Anna Mann (myndigheten för delaktighet) Pär Lannerö (PTS) Monica Barsch (KTH Funka)

Olle Olsson. December 2006

Sju riktlinjer vid utveckling av hemsidor för mobil och desktop

CLOVER 7 Elektroniskt förstoringsglas Användarguide. Rev B

Bygga kurser för mobila enheter

Lathund - webbsidor och filer

Dags för lösenordsbyte? Instruktioner för PC/Windows och Mac.

Nyheter och ändringar Adelanet 4.8.0

Instruktioner för Articulate Storyline 2

Att använda Energiforsks rapportmall

Typo 3 version Utbildningsmaterial för redaktörer. Senast uppdaterad

Guide för att skapa & ändra Sidor och Statiska block - Speedcom E-Handel

behövs för enhetlighet, tala samma språk, så att användaren kan lära sig och använda det vidare.

Vägledning för webbutveckling. webbriktlinjer.se

F04 Webbteknik. Föreläsning 4, HT2014 Webbteknik. Johan Leitet

EPi Skapa och redigera sidor

Ändringar i språkfiler i e-line 3.42A

2. Change log Datamodell/XML

Riktlinjer för utveckling av tillgängliga mobilgränssnitt Senast uppdaterad


PNSPO! Använda NJ med NS System Memory. 14 mars 2012 OMRON Corporation

Formulär, textsträngar och en del annat

Kom igång med. Windows 8. DATAUTB MORIN AB

Instagram Stories en guide

Begära inlösen av aktier i Sequoia

Materialspecifikationer webb 2014

DIGITALA RESURSER MANUAL FÖR. Komma igång med Acrobat Connect

SPRIDA Kommunikationscenter. Centrum för hjälpmedel

LUPstudentpapers. Manual Reviewer

Läget, läget, läget. Sök, sök, sök. mars 2018/Ted Durdel

Grafiska riktlinjer FÖR WEBB OCH WEBBUTBILDNING

Slutrapport Svensk e-legitimations anvisningstjänst

Snabbguide LQS App (översättning av originalbruksanvisningen) Dokumentversion: 1.2. Appversion LQS Om detta dokument

Effektiv webbkommunikation - vet vi vilka dagens krävande användare är och vad de behöver?

Inställningstips Windows 8

Leica mojo3d start första gången

Verktygsfält. Hantering av webbkarta Grundinstruktion. Sida 1 av 6. De olika verktygen och delarna förklaras i detalj längre ner i dokumentet.


Nyheter i PowerPoint 2010

Arbeta effektivare. med macos

Uppdatering av föreningsuppgifter på Internet Gäller från

UBIQUITI Powerstation5 - Config

Elias Castegren. (Version 1, 2012)

Dollar Street Beta Version 1.0 Manual

Grafiska användargränssnitt i Java

Word kortkommando. 5. I rutan till höger klickar du på kommandot eller elementet.

BRUKSANVISNING GSM-MODUL DBG5. Version 1.00 Utgåva 1

Instruktioner för Articulate Studio 13

Annonsformat desktop. Startsida / områdesstartsidor. Artikel/nyhets-sidor. 1. Toppbanner, format 1050x180 pxl. Format 1060x180 px + 250x240 pxl.

Tillgänglighet i digital nyhetsmedia

Din manual CANON LBP

Karlstads Universitet, Datavetenskap 1

Energieffektiv GUI design

Instruktioner till Styckeformattexten

På sjön 2.0 Intern Guide för Android

Manual till Båstadkartans grundläggande funktioner

Använda Convertus Kursplaneöversättaren

Användartester av HiFi-Prototyp Svar enkäter och utvärdering

epayslip - användarmanual

iphone app - Users Net2 AN1116-SE Allmänt Starta Appen

Boken. OBS! Konkret interaktion är inte bokens starka sida. OBS! Jag har skrivit fel kapitel i kursprogrammet Uppdaterad version kommer.

Väl installerat får du en ikon som du förhoppningsvis också hittar Så du klickar på den och startar upp programmet:

Information efter genomgång av Microsoft Word 2010

Transkript:

En tredje genomgång av WCAG 2.1 15 juni 2018 Pär Lannerö & Pia Flodquist webbriktlinjer.se

Vad är WCAG 2.1? En ny version av den ca 10 år gamla tillgänglighetsstandarden WCAG 2.0, som ligger till grund för bland annat webbdirektivets krav Utökar WCAG 2.0 med 17 nya kriterier (12 på nivå AA) Bl.a. för bättre kognitiv och mobil tillgänglighet Helt bakåtkompatibel Förändrar ingenting i WCAG 2.0 Samma grundprinciper Samma numrering Samma nivåindelning A-AAA

Status Den 5 juni 2018 blev specifikationen en W3C Recommendation, vilket innebär en internetstandard. Specifikationen finns på http://www.w3.org/tr/wcag21/ Varje kriterium länkas till en sida med förklaringar ( understanding criterium x.y.z ) men dessa sidor är än så länge bara utkast. Sannolikt kommer även en ny version av EN 301549 under sommaren som hänvisar till WCAG 2.1 istället för 2.0. Det innebär att webbdirektivet på sikt sannolikt medför krav på WCAG 2.1 AA (minus undantag).

Robust WCAG 2.0 Presenteras på webbriktlinjer.se/1 Möjlig att uppfatta (28st) Hanterbar Begriplig (33st) (18st) (2st)

Robust WCAG 2.0 2.1 Möjlig att uppfatta (28st) +7 Hanterbar (33st) +9 Begriplig (18st) +1 (2st)

Robust WCAG 2.0 2.1 AA Möjlig att uppfatta (14st) +6 Hanterbar (12st) +5 Begriplig (10st) +1 (2st)

Förenklad presentation av kriterier på nivå A/AA Se resten av denna presentation. Hör av dig om du hittar fel eller om du har andra kommentarer! Vår plan är att presentera dessa kriterier på webbriktlinjer.se/wcag med exempel och förenklingar på svenska, så som WCAG 2.0-kriterier presenteras där idag.

Robust WCAG 2.0 2.1 AA Möjlig att uppfatta (14st) +6 Hanterbar Begriplig (12st) (10st) (2st)

1.3.4 Orientation Kräv inte att användaren håller enheten åt ett visst håll (liggande/stående). Viktigt för personer som monterar fast sin enhet på t.ex. rullstol. Landscape Portrait

1.3.5 Identify Input Purpose Märk upp vanliga inmatningsfält med standard-semantik (se t.ex. specifikationen för autocomplete). Ger möjlighet till förenkling med hjälp av autocomplete mm. Bra för användare med vissa kognitiva funktionsnedsättningar och för den som inte kan sidans språk så bra. name given-name additional-name family-name nickname username new-password current-password organization-title organization street-address address-line1 address-line2 address-level1 country country-name postal-code cc-name cc-exp cc-csc Exempel på innehåll cc-type transactioncurrency transaction-amount language bday sex url photo

Illustrationer från http://nosetothepage.org/fitz/2dscroll.html 1.4.10 Reflow Kunna använda 320x256 pixlars skärm utan horistontell scrollning (med undantag). I praktiken: responsiv design + se till att riktigt långa ord kan avstavas Underlättar mycket för den som behöver förstora. Besläktad med kravet att kunna förstora text (1.4.4).

1.4.11 Non-Text Contrast Utvidgar kontrastkravet för text i 1.4.3 till innehåll i grafik, knappar och andra kontroller. Bra för personer med nedsatt syn. Bra kontrast Dålig kontrast

Illustrationer från W3Cs Understanding WCAG 1.4.12 1.4.12 Text Spacing Måste kunna öka avstånd mellan stycken, rader, ord och tecken upp till angivna gränsvärden utan t.ex. krockar. Bra för dyslektiker och personer med nedsatt syn. Görs med css. Besläktad med kravet att kunna förstora text (1.4.4).

cc-by Ervins Strauhmanis 1.4.13 Content on Hover or Focus Popups, tooltips och liknande ska kunna uppfattas och kontrolleras även av användare som t.ex. använder förstoring. Kunna stängas enkelt (med t.ex. escapetangent eller klick på det som triggade händelsen). Kunna uppfattas (får inte försvinna för att användaren t.ex. panorerar dit eller tar tid på sig.) Gynnar främst personer med nedsatt syn.

Robust WCAG 2.0 2.1 AA Möjlig att uppfatta (14st) Hanterbar (12st) +5 Begriplig (10st) (2st)

CC-BY-SA Niklas Bildhauer 2.1.4 Character Key Shortcuts Snabbkommandon som består av bara vanliga bokstäver måste gå att stänga av eller bytas ut. De kan annars orsaka problem för personer som använder röststyrning eller som kan råka klicka på fel tangent (t.ex. pga skakningar). Dokumenteras exempelvis efter första tabtryck.

CC-BY-SA Chad Person 2.5.1 Pointer gestures Komplexa gester (multi-touch på pekskärm, swipe etc) måste kunna ersättas med enklare interaktion (klick/dubbelklick/trycka länge/..) Alla har inte möjlighet att hantera flera punkter samtidigt eller kontrollera en rörelse. T.ex. på grund av motoriska begränsningar eller okunskap.

CC-BY-SA Dave Dougdale 2.5.2 Pointer Cancellation Vid klick/tryck ska antingen: Händelsen ske när knappen/trycket släpps upp Släpp (up-event) återställer det som hände vid tryck Klicket kunna avbrytas eller ångras Undantag för t.ex. pianoprogram och Counterstrike. Viktigt för personer med begränsad motorisk kontroll.

CC-BY Atlasowa @flickr 2.5.3 Label in Name Om text syns på knappar mm så ska samma text finnas i inledningen av maskinläsbar etikett (t.ex. aria-label). Nödvändigt för att röststyrning ska fungera på dessa kontroller, och därmed för personer med nedsatt motorik. Exempel på fel: <button aria-label= Stäng >X</button> Bättre? <button aria-label= X Stäng >X</button>

Flexzi2 Eco Clamp 2.5.4 Motion Actuation Rörelsestyrning (skaka/luta/gestikulera) kan stängas av och har alternativ. Vissa användare monterar enheten fast i t.ex. rullstol. Andra kan inte röra sig, eller har händerna fulla. CC0 pxhere.com CC-BY Andreas Kambanis

Robust WCAG 2.0 2.1 AA Möjlig att uppfatta (14st) Hanterbar (12st) Begriplig (10st) +1 (2st)

4.1.3 Status Messages Dynamiskt förändrade status- och felmeddelanden ska kunna tillkännages utan att vara i fokus. Användare som zoomar eller använder skärmläsare riskerar annars att missa meddelandet. Använd t.ex. ARIA live regions. <div role= status aria-live= polite > Den här texten kommer att läsas upp när det passar. </div>

Tack för att du hängde med ända hit! Hör gärna av dig med frågor och förslag! Läs mer om WCAG: webbriktlinjer.se/1 Förenklad beskrivning av WCAG-kriterier på nivå AA: webbriktlinjer.se/wcag E-post: info@webbriktlinjer.se Twitter: @plannero eller #webbföralla Facebookgrupp: webbriktlinjer