htmlosk1/vefforritun/2014/pdf/03.html.pdf · wcag 2.0 w3c staðall: web content accessibility...
TRANSCRIPT
![Page 1: HTMLosk1/vefforritun/2014/pdf/03.html.pdf · WCAG 2.0 W3C staðall: Web Content Accessibility Guidelines 2.0 Listi af tilmælum til að gera vefi aðgengilegri, ... Search Engine](https://reader033.vdocuments.mx/reader033/viewer/2022060320/5f0d1eb87e708231d438c6ff/html5/thumbnails/1.jpg)
HTMLFYRIRLESTUR 3, 1. SEPTEMBER 2014ÓLAFUR SVERRIR KJARTANSSON, [email protected]
![Page 2: HTMLosk1/vefforritun/2014/pdf/03.html.pdf · WCAG 2.0 W3C staðall: Web Content Accessibility Guidelines 2.0 Listi af tilmælum til að gera vefi aðgengilegri, ... Search Engine](https://reader033.vdocuments.mx/reader033/viewer/2022060320/5f0d1eb87e708231d438c6ff/html5/thumbnails/2.jpg)
AÐGENGI
![Page 3: HTMLosk1/vefforritun/2014/pdf/03.html.pdf · WCAG 2.0 W3C staðall: Web Content Accessibility Guidelines 2.0 Listi af tilmælum til að gera vefi aðgengilegri, ... Search Engine](https://reader033.vdocuments.mx/reader033/viewer/2022060320/5f0d1eb87e708231d438c6ff/html5/thumbnails/3.jpg)
AÐGENGI Á ÍSLANDIBlogg frá Birki Rúnari á Advania blogginu:
Gott aðgengi gerir kraftaverk – þess vegna er ég rafviti
Gott aðgengi er góður bissness
Ísland er eftirbátur í aðgengi að upplýsingatækni
Öflugt og einfalt regluverk tryggir aðgengi aðupplýsingatækni
Aðgengi og nytsemi í Vefhandbók Innanríkisráðuneytisins
![Page 4: HTMLosk1/vefforritun/2014/pdf/03.html.pdf · WCAG 2.0 W3C staðall: Web Content Accessibility Guidelines 2.0 Listi af tilmælum til að gera vefi aðgengilegri, ... Search Engine](https://reader033.vdocuments.mx/reader033/viewer/2022060320/5f0d1eb87e708231d438c6ff/html5/thumbnails/4.jpg)
AFHVERJU AÐGENGI?Viljum ekki mismuna fólk vegna fötlunar
Lagasetning framtíðarinnar mun banna okkur aðmismuna fólki vegna fötlunar á vefnum
Getur verið mjög dýrt að gera aðgengilegt eftir á
Samlegðaráhrif! Vefurinn okkar verður betri fyrir alla
![Page 5: HTMLosk1/vefforritun/2014/pdf/03.html.pdf · WCAG 2.0 W3C staðall: Web Content Accessibility Guidelines 2.0 Listi af tilmælum til að gera vefi aðgengilegri, ... Search Engine](https://reader033.vdocuments.mx/reader033/viewer/2022060320/5f0d1eb87e708231d438c6ff/html5/thumbnails/5.jpg)
![Page 6: HTMLosk1/vefforritun/2014/pdf/03.html.pdf · WCAG 2.0 W3C staðall: Web Content Accessibility Guidelines 2.0 Listi af tilmælum til að gera vefi aðgengilegri, ... Search Engine](https://reader033.vdocuments.mx/reader033/viewer/2022060320/5f0d1eb87e708231d438c6ff/html5/thumbnails/6.jpg)
WCAG 2.0W3C staðall: Web Content Accessibility Guidelines 2.0
Listi af tilmælum til að gera vefi aðgengilegri, skiptist ífjögur prinsipp
Þrjár tegundir:
A, minnsta stig
AA
AAA, öll skilyrði uppfyllt
http://www.w3.org/TR/WCAG20/
![Page 7: HTMLosk1/vefforritun/2014/pdf/03.html.pdf · WCAG 2.0 W3C staðall: Web Content Accessibility Guidelines 2.0 Listi af tilmælum til að gera vefi aðgengilegri, ... Search Engine](https://reader033.vdocuments.mx/reader033/viewer/2022060320/5f0d1eb87e708231d438c6ff/html5/thumbnails/7.jpg)
WCAG PRINSIPP1. Perceivable - Information and user interface components
must be presentable to users in ways they can perceive.
2. Operable - User interface components and navigationmust be operable.
3. Understandable - Information and the operation of userinterface must be understandable
4. Robust - Content must be robust enough that it can beinterpreted reliably by a wide variety of user agents,including assistive technologies.
![Page 8: HTMLosk1/vefforritun/2014/pdf/03.html.pdf · WCAG 2.0 W3C staðall: Web Content Accessibility Guidelines 2.0 Listi af tilmælum til að gera vefi aðgengilegri, ... Search Engine](https://reader033.vdocuments.mx/reader033/viewer/2022060320/5f0d1eb87e708231d438c6ff/html5/thumbnails/8.jpg)
WCAG-TECHS 2.0W3C staðall: Techniques and Failures for Web ContentAccessibility Guidelines 2.0
Listi af aðferðum til að uppfylla WCAG2.0 með lýsingu ogprófanalýsingu
Dæmi: Using alt attributes on img elements
http://www.w3.org/TR/WCAG-TECHS/
![Page 9: HTMLosk1/vefforritun/2014/pdf/03.html.pdf · WCAG 2.0 W3C staðall: Web Content Accessibility Guidelines 2.0 Listi af tilmælum til að gera vefi aðgengilegri, ... Search Engine](https://reader033.vdocuments.mx/reader033/viewer/2022060320/5f0d1eb87e708231d438c6ff/html5/thumbnails/9.jpg)
AÐ NOTA SKJÁLESARA
![Page 10: HTMLosk1/vefforritun/2014/pdf/03.html.pdf · WCAG 2.0 W3C staðall: Web Content Accessibility Guidelines 2.0 Listi af tilmælum til að gera vefi aðgengilegri, ... Search Engine](https://reader033.vdocuments.mx/reader033/viewer/2022060320/5f0d1eb87e708231d438c6ff/html5/thumbnails/10.jpg)
HÖFUM Í HUGATitill síðu er það fyrsta sem skjálesarar lesa og skal þvívera lýsandi
Nota alt texta á myndir, tóman ef mynd er aðeins tilskrauts annars lýsandi fyrir mynd – engar myndir af texta
Huga að lesblindum og litblindum
Hafa vef aðgengilegan með lyklaborði
![Page 11: HTMLosk1/vefforritun/2014/pdf/03.html.pdf · WCAG 2.0 W3C staðall: Web Content Accessibility Guidelines 2.0 Listi af tilmælum til að gera vefi aðgengilegri, ... Search Engine](https://reader033.vdocuments.mx/reader033/viewer/2022060320/5f0d1eb87e708231d438c6ff/html5/thumbnails/11.jpg)
HÖFUM Í HUGATungumál síðu skal vera skilgreint (lang attribute á<html>)
Litamótstaða (color contrast) skal vera góð
Nota fyrirsagnir rétt og í röð, <h1> til <h6>
Skrifa lýsandi tenglatexta (ekki )
Color Contrast Checker
smelltu hér
![Page 12: HTMLosk1/vefforritun/2014/pdf/03.html.pdf · WCAG 2.0 W3C staðall: Web Content Accessibility Guidelines 2.0 Listi af tilmælum til að gera vefi aðgengilegri, ... Search Engine](https://reader033.vdocuments.mx/reader033/viewer/2022060320/5f0d1eb87e708231d438c6ff/html5/thumbnails/12.jpg)
HÖFUM Í HUGAAllar upplýsingar og aðgerðir skulu aðgengilegar meðlyklaborði (takmarka upplýsingar sem birtast með tooltipog virkni sem krefst músar)
Nota sjálfvirk tól til að hjálpa til en ekki treysta í blindni
Web Accessibility Evaluation Tool
![Page 13: HTMLosk1/vefforritun/2014/pdf/03.html.pdf · WCAG 2.0 W3C staðall: Web Content Accessibility Guidelines 2.0 Listi af tilmælum til að gera vefi aðgengilegri, ... Search Engine](https://reader033.vdocuments.mx/reader033/viewer/2022060320/5f0d1eb87e708231d438c6ff/html5/thumbnails/13.jpg)
FORMMerkja form á aðgengilegan hátt, nota <label>, merkja reiti semfylla þarf út skilmerkilega
Án <label>:
Ég samþykki skilmála
Með <label>:
Ég samþykki skilmála
<label><input type="checkbox"> Ég samþykki skilmála</label>
![Page 14: HTMLosk1/vefforritun/2014/pdf/03.html.pdf · WCAG 2.0 W3C staðall: Web Content Accessibility Guidelines 2.0 Listi af tilmælum til að gera vefi aðgengilegri, ... Search Engine](https://reader033.vdocuments.mx/reader033/viewer/2022060320/5f0d1eb87e708231d438c6ff/html5/thumbnails/14.jpg)
FORM
![Page 15: HTMLosk1/vefforritun/2014/pdf/03.html.pdf · WCAG 2.0 W3C staðall: Web Content Accessibility Guidelines 2.0 Listi af tilmælum til að gera vefi aðgengilegri, ... Search Engine](https://reader033.vdocuments.mx/reader033/viewer/2022060320/5f0d1eb87e708231d438c6ff/html5/thumbnails/15.jpg)
TÖFLURFyrir flóknar töflur þarf að tengja fyrirsagnir við reiti
T.d. ef ekki, heyrir sá sem skoðar töfluna ekki samhengið
WebAIM: Creating Accessible Tables
![Page 16: HTMLosk1/vefforritun/2014/pdf/03.html.pdf · WCAG 2.0 W3C staðall: Web Content Accessibility Guidelines 2.0 Listi af tilmælum til að gera vefi aðgengilegri, ... Search Engine](https://reader033.vdocuments.mx/reader033/viewer/2022060320/5f0d1eb87e708231d438c6ff/html5/thumbnails/16.jpg)
ARIAW3C staðall:
Auknar merkingar á element sem skjálesarar geta nýtt tilað bæta upplifun
Gefur til kynna til hvers ákveðin svæði eru, setjum uppkennileiti (landmarks), stöður á þeim o.fl.
Getum einnig merkt stöður á elementum, t.d. ef þær erubirtar með Ajax
Accessible Rich Internet Applications
https://developer.mozilla.org/en-US/docs/Accessibility/ARIA
![Page 17: HTMLosk1/vefforritun/2014/pdf/03.html.pdf · WCAG 2.0 W3C staðall: Web Content Accessibility Guidelines 2.0 Listi af tilmælum til að gera vefi aðgengilegri, ... Search Engine](https://reader033.vdocuments.mx/reader033/viewer/2022060320/5f0d1eb87e708231d438c6ff/html5/thumbnails/17.jpg)
ARIA ROLESSkilgreina hlutverk ákveðinna elementa
role="main" segir að meginverkefni síðu liggi innanmerkts elements
Hægt að skilgreina eigin, t.d. <div role="region" aria-label="Hafa samband">
![Page 18: HTMLosk1/vefforritun/2014/pdf/03.html.pdf · WCAG 2.0 W3C staðall: Web Content Accessibility Guidelines 2.0 Listi af tilmælum til að gera vefi aðgengilegri, ... Search Engine](https://reader033.vdocuments.mx/reader033/viewer/2022060320/5f0d1eb87e708231d438c6ff/html5/thumbnails/18.jpg)
AÐ NOTA ARIA1. Finnum rökrétta uppbyggingu síðunnar
2. Útfærum uppbyggingu með markup
3. Merkjum hvert svæði með fyrirsögn
4. Setjum kennileiti á hvert svæði
ARIA staðall hjá W3C
![Page 19: HTMLosk1/vefforritun/2014/pdf/03.html.pdf · WCAG 2.0 W3C staðall: Web Content Accessibility Guidelines 2.0 Listi af tilmælum til að gera vefi aðgengilegri, ... Search Engine](https://reader033.vdocuments.mx/reader033/viewer/2022060320/5f0d1eb87e708231d438c6ff/html5/thumbnails/19.jpg)
ARIA DÆMIKennileiti
<section role="main"> — svæði er meginmál síðu
role="navigation" — svæði inniheldur valmynd síðu
role="search" — svæði inniheldur leit á síðu
aria-expanded="true" — svæði er opið eða loka, t.d.trjávalmynd
aria-describedby="foo" — element er útskýrt af þvísem er í element með Id "foo"
![Page 20: HTMLosk1/vefforritun/2014/pdf/03.html.pdf · WCAG 2.0 W3C staðall: Web Content Accessibility Guidelines 2.0 Listi af tilmælum til að gera vefi aðgengilegri, ... Search Engine](https://reader033.vdocuments.mx/reader033/viewer/2022060320/5f0d1eb87e708231d438c6ff/html5/thumbnails/20.jpg)
ARIA NÁNARMDN — ARIA
The WAI Forward
ARIA Examples
The Web Ahead: Accessibility with Dale Cruse
The Web Ahead: WCAG and Accessibility with LukeMcGrath
![Page 21: HTMLosk1/vefforritun/2014/pdf/03.html.pdf · WCAG 2.0 W3C staðall: Web Content Accessibility Guidelines 2.0 Listi af tilmælum til að gera vefi aðgengilegri, ... Search Engine](https://reader033.vdocuments.mx/reader033/viewer/2022060320/5f0d1eb87e708231d438c6ff/html5/thumbnails/21.jpg)
SEOSTUTT YFIRFERÐ
![Page 22: HTMLosk1/vefforritun/2014/pdf/03.html.pdf · WCAG 2.0 W3C staðall: Web Content Accessibility Guidelines 2.0 Listi af tilmælum til að gera vefi aðgengilegri, ... Search Engine](https://reader033.vdocuments.mx/reader033/viewer/2022060320/5f0d1eb87e708231d438c6ff/html5/thumbnails/22.jpg)
LEITARVÉLABESTUN / SEOMeðhöndlun á efni til að það komi frekar fram íleitarniðurstöðum
Leitarvélar horfa á mörg hundruð breytur sem hafa áhrif
T.d. nýlega frá Google:
Engir galdrar heldur gott efni og merkingarfræðilegtHTML!
HTTPS as a ranking signal
![Page 23: HTMLosk1/vefforritun/2014/pdf/03.html.pdf · WCAG 2.0 W3C staðall: Web Content Accessibility Guidelines 2.0 Listi af tilmælum til að gera vefi aðgengilegri, ... Search Engine](https://reader033.vdocuments.mx/reader033/viewer/2022060320/5f0d1eb87e708231d438c6ff/html5/thumbnails/23.jpg)
EFNILýsandi titill
Skipulagt, læsilegt og einstakt
Ekki of mörg umfjöllunarefni í einu
Einstakar og hnitmiðaðar fyrirsagnir
![Page 24: HTMLosk1/vefforritun/2014/pdf/03.html.pdf · WCAG 2.0 W3C staðall: Web Content Accessibility Guidelines 2.0 Listi af tilmælum til að gera vefi aðgengilegri, ... Search Engine](https://reader033.vdocuments.mx/reader033/viewer/2022060320/5f0d1eb87e708231d438c6ff/html5/thumbnails/24.jpg)
EFNIAlt texti á myndum og engar myndir af texta
Lýsandi texti á tenglum
Skilgreina lýsingu á síðu með <metaname="description">
![Page 25: HTMLosk1/vefforritun/2014/pdf/03.html.pdf · WCAG 2.0 W3C staðall: Web Content Accessibility Guidelines 2.0 Listi af tilmælum til að gera vefi aðgengilegri, ... Search Engine](https://reader033.vdocuments.mx/reader033/viewer/2022060320/5f0d1eb87e708231d438c6ff/html5/thumbnails/25.jpg)
SLÓÐIRFallegar slóðir (ekki of langar eða flóknar)
http://www.example.is/x/product_detail/?ew_10_p_id=120409&serial=LGE960BLACK&ec_item_14_searchparam5=serial=LGE960BLACK&ew_13_p_id=
![Page 26: HTMLosk1/vefforritun/2014/pdf/03.html.pdf · WCAG 2.0 W3C staðall: Web Content Accessibility Guidelines 2.0 Listi af tilmælum til að gera vefi aðgengilegri, ... Search Engine](https://reader033.vdocuments.mx/reader033/viewer/2022060320/5f0d1eb87e708231d438c6ff/html5/thumbnails/26.jpg)
EIN, VIÐURKENND SLÓÐEfni ætti að vera aðgengilegt á einni, viðurkenndri slóð
Forðast dreift efni, t.d. á sér „m“ vef
Áframsenda og merkja með <link rel="canonical"href="...">
Building Smartphone-Optimized Websites
![Page 27: HTMLosk1/vefforritun/2014/pdf/03.html.pdf · WCAG 2.0 W3C staðall: Web Content Accessibility Guidelines 2.0 Listi af tilmælum til að gera vefi aðgengilegri, ... Search Engine](https://reader033.vdocuments.mx/reader033/viewer/2022060320/5f0d1eb87e708231d438c6ff/html5/thumbnails/27.jpg)
HJÁLPA TILVeftré fyrir leitarvélar (sitemap.xml)
Réttar skilgreiningar í robots.txt
Útbúa villusíður, t.d. fyrir 404 villur-síða fannst ekki
![Page 28: HTMLosk1/vefforritun/2014/pdf/03.html.pdf · WCAG 2.0 W3C staðall: Web Content Accessibility Guidelines 2.0 Listi af tilmælum til að gera vefi aðgengilegri, ... Search Engine](https://reader033.vdocuments.mx/reader033/viewer/2022060320/5f0d1eb87e708231d438c6ff/html5/thumbnails/28.jpg)
FYLGJAST MEÐFjölda heimsókna og hvaðan komið er
Villur sem koma upp, útiloka vandræða síður
Gera tilraunir!
![Page 29: HTMLosk1/vefforritun/2014/pdf/03.html.pdf · WCAG 2.0 W3C staðall: Web Content Accessibility Guidelines 2.0 Listi af tilmælum til að gera vefi aðgengilegri, ... Search Engine](https://reader033.vdocuments.mx/reader033/viewer/2022060320/5f0d1eb87e708231d438c6ff/html5/thumbnails/29.jpg)
VARAST...Faldir tenglar á síðu
Engin örugg leið til að vera #1
Skuggaleg sambönd, ef það er of gott til að vera satt...
![Page 30: HTMLosk1/vefforritun/2014/pdf/03.html.pdf · WCAG 2.0 W3C staðall: Web Content Accessibility Guidelines 2.0 Listi af tilmælum til að gera vefi aðgengilegri, ... Search Engine](https://reader033.vdocuments.mx/reader033/viewer/2022060320/5f0d1eb87e708231d438c6ff/html5/thumbnails/30.jpg)
NÁNARSearch Engine Optimization Starter Guide frá Google
Beginners Guide to SEO