htmlosk1/vefforritun/2014/pdf/03.html.pdf · wcag 2.0 w3c staðall: web content accessibility...
TRANSCRIPT
HTMLFYRIRLESTUR 3, 1. SEPTEMBER 2014ÓLAFUR SVERRIR KJARTANSSON, [email protected]
AÐGENGI
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
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
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/
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.
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/
AÐ NOTA SKJÁLESARA
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
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
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
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>
FORM
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
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
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">
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
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"
ARIA NÁNARMDN — ARIA
The WAI Forward
ARIA Examples
The Web Ahead: Accessibility with Dale Cruse
The Web Ahead: WCAG and Accessibility with LukeMcGrath
SEOSTUTT YFIRFERÐ
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
EFNILýsandi titill
Skipulagt, læsilegt og einstakt
Ekki of mörg umfjöllunarefni í einu
Einstakar og hnitmiðaðar fyrirsagnir
EFNIAlt texti á myndum og engar myndir af texta
Lýsandi texti á tenglum
Skilgreina lýsingu á síðu með <metaname="description">
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=
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
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
FYLGJAST MEÐFjölda heimsókna og hvaðan komið er
Villur sem koma upp, útiloka vandræða síður
Gera tilraunir!
VARAST...Faldir tenglar á síðu
Engin örugg leið til að vera #1
Skuggaleg sambönd, ef það er of gott til að vera satt...
NÁNARSearch Engine Optimization Starter Guide frá Google
Beginners Guide to SEO