Komponenter inom webbtillgänglighet (på engelska)

Om WCAG 2.0

• W3C standard sedan 11 December 2008
• Utvecklades genom W3Cs process
• Bred internationell medverkan:
  • Experter
  • Forskare
  • Utvecklare
  • IT-branschen
  • Slutanvändare

Mål för WCAG 2.0

• Teknikoberoende
• Objektivt testbart
• Flexibelt för olika situationer
• Stöd för utvecklare

WCAG 2.0 - Dokument

WCAG 2.0 - Struktur

• Principer (4)
  • Riktlinjer (12)
    • Framgångsfaktorer - Nivå A (25)
    • Framgångsfaktorer - Nivå AA (13)
    • Framgångsfaktorer - Nivå AAA (23)
• Överensstämmelse

Jämförelse: WCAG 1.0 hade 14 riktlinjer och 65 kontrollpunkter

WCAG 2.0 - Principer

"POUR" tillgänglighetsprincipen av WCAG 2.0:

• Perceivable - Begripligt
• Operable - Genomförbart
• Understandable - Förståeligt
• Robust - Robust

WCAG 2.0 - Riktlinjer

Exempel på riktlinjer från WCAG 2.0:

• Riktlinje 2.1 Oberoende av inmatningsenhet: Se till att all funktionalitet kan skötas från ett tangentbordet
• Riktlinje 3.3 Input Assistance: Hjälp användarna att undvika och själv rätta sina misstag

WCAG 2.0 - Framgångsfaktorer

Exempel på framgångsfaktorer från WCAG 2.0:

• 1.1.1 Innehåll som inte är text: Allt innehåll som inte är text som presenteras för användaren ska ha en alternativ textbeskrivning som fungerar likvärdigt - Nivå A
• 2.2.4 Avbrott: Avbrott kan skjutas upp eller förbjudas av användaren, förutom avbrott som handlar om en nödsituation - Nivå AAA

WCAG 2.0 - Dokument

WCAG 2.0 Tekniker

Tekniker är dokumenterade separat. Det finns 3 typer av tekniker:

• Tillräckliga tekniker - minimikrav
• Rekommenderade tekniker - viss förbättring
• Vanliga fel - återkommande misstag

Tekniker är teknikoberoende (till exempel HTML, CSS, AJAX, ...)

WCAG 2.0 Tekniker - Situationer

Situationer för framgångsfaktor 1.1.1 (alternativ textbeskrivning):

• A: Om en kort beskrivning kan tjäna samma syfte
• B: Om en kort beskrivning inte kan tjäna samma syfte
• C: Om innehåll utan text är en kontroll eller styrs av inmatning från användaren
• D: Om innehåll som inte är text är tidsbaserad media
• E: Om innehåll som inte är text är en CAPTCHA
• F: Om innehåll som inte är text ska ignoreras av hjälpmedel

WCAG 2.0 Tekniker - Innehåll

Exempel på en teknik - H36 - Användning av ALT-attribut för en OK-knapp:

• Tillämplig
• Beskrivning
• Exempel
• Resurser
• Relaterade tekniker
• Test

WCAG 2.0 Tekniker - Test

Exempel på testmetodik för Teknik H36:

Metodik

1. För alla inmatningselement som har en attributet "image", kontrollera ALT-attribut.
2. Kontrollera att ALT-attributet förklarar knappens funktion.

Förväntat resultat

#1 och #2 är sant

WCAG 2.0 - Hierarki

• Principer
  • Riktlinjer
    • Framgångsfaktorer
      • Tekniker (separata dokument)

WCAG 2.0 - Dokument

Hur du lever upp till WCAG 2.0 (på engelska)

WCAG 2.0 Snabbreferens (på engelska)

Vad förändrades egentligen?

• Allt - ny struktur, mycket att läsa, ...
• Ingenting - användarkraven har inte förändrats

Jämförelse med WCAG 1.0

Jämförelse per prioritetsnivå:

• Nivå A - 6 nya krav
• Nivå AA - 3 nya krav
• Nivå AAA - 11 nya krav
• ...ca 24 krav är borttagna

Liten eller ingen skillnad behövdes på nivå AA.

WCAG 2.0 is Precist

Exempel från WCAG 1.0:

• Kontrollpunkt 2.2: Se till att förgrundens och bakgrundens färgkombinationer ger tillräcklig kontrast.
• Framgångsfaktor 1.4.3 Kontraster: Den visuella presentationen av text och bilder av text måste ha ett kontrastförhållande på minst 4.5:1

WCAG 2.0 är modernt

Fungerar bättre i komplexa situationer:

• Mulitmedia-innehåll
• Webbapplikationer
• Naturligt språk
• Fullbordade processer

WCAG 2.0 är omfattande

Dokumentation för WCAG 2.0 ger stöd:

• Webben är mer komplex än tidigare och det krävs mer kunskap
• Testprocedurerna måste utföras ändå
• Förklaringarna är hjälpsamma för omedvetna utvecklare
• Den tillämpningsbara checklistan är dynamiskt framställd

Användbarhet med WCAG 2.0

WCAG 2.0 passar in i designprocesser för användbarhet:

• Många möjligheter att nå målet
• Utvecklare måste välja lämpliga metoder
• Det är en skillnad mellan tillräcklig och optimal
• Användartester kompletterar implementationer

Webbapplikationer

Problem: Avsaknad semantik

Vad är den semantiska betydelsen av följande kod?

<div>
  <div>Veggies
    <div>
      <div>Green
        <div>
          <div>Asparagus</div>
          <div>Kale</div>
          <div>Leafy
            <div>
              <div>Lettuce</div>
              <div>Kale</div>
              <div>Spinach</div>
              <div>Chard</div>
            </div>
          </div>
          <div>Green beans</div>
        </div>
      </div>
      <div>Legumes</div>
      <div>Yellow
        <div>
          <div>Bell peppers</div>
          <div>Squash</div>
        </div>
      </div>
    </div>
  </div>
</div>

Trädvy

Föregående kod representerar en visuell trädvy:

Lösning: WAI-ARIA

"Accessible Rich Internet Applications" - WAI-ARIA tillför semantik:

<div role="wairole:tree">
  <div role="wairole:treeitem">Veggies
    <div role="wairole:group">
      <div role="wairole:treeitem">Green
        <div role="wairole:group">
          <div role="wairole:treeitem">Asparagus</div>
          <div role="wairole:treeitem">Kale</div>
          <div role="wairole:treeitem">Leafy
            <div role="wairole:group">
              <div role="wairole:treeitem">Lettuce</div>
              <div role="wairole:treeitem">Kale</div>
              <div role="wairole:treeitem">Spinach</div>
              <div role="wairole:treeitem">Chard</div>
            </div>
          </div>
          <div role="wairole:treeitem">Green beans</div>
        </div>
      </div>
      <div role="wairole:treeitem">Legumes</div>
      <div role="wairole:treeitem">Yellow
        <div role="wairole:group">
          <div role="wairole:treeitem">Bell peppers</div>
          <div role="wairole:treeitem">Squash</div>
        </div>
      </div>
    </div>
  </div>
</div>

WAI-ARIA Godkännande

Flera WAI-ARIA implementationer existerar redan:

• Webbläsare: Firefox, Internet Explorer, Opera, Safari
• Hjälpmedel: JAWS, Orca, WindowEyes, ZoomText
• Bibliotek: Dojo Toolkit, Google Gears, jQuery, YUI
• Exempel: AOL, Google, IBM, Yahoo!

Övergången till WCAG 2.0

Några av WAIs resurser som stödjer övergången:

• Hur WCAG 2.0 skiljer sig från WCAG 1.0
• Jämförelse mellan WCAG 1.0 och WCAG 2.0s kontrollpunkter
• Hur du uppdaterar din webbplats från WCAG 1.0 till WCAG 2.0

Auktoriserade översättningar

Flera auktoriserade WCAG 2.0 översättningar pågår just nu:

• Översätts just nu: Danska, Franska, Italienska, Spanska
• Tillkännagivna översättningar: Katalanska, Kinesiska, Tyska, Japanska, Koreanska
• Under diskussion: Arabiska, Nederländska, Grekiska, Hindi
• Inofficiell översättning: Ungerska, Portugisiska, Portuguese/Brazil

Nyhet: Svensk översättning diskuteras numera!

Tack

Shadi Abou-Zahra, W3C/WAI
Activity Lead, WAI International Program Office
http://www.w3.org/People/shadi/