WCAG 2.1 Uudet kriteerit

Samankaltaiset tiedostot
Mitä direktiivi käytännössä velvoittaa?

Saavutettavuus > Tapio Haanperä Saavutettavuusasiantuntija tel

Oulun kaupungin verkkosivuston saavutettavuuden arviointi (WCAG 2.0)

Verkkosisällön saavutettavuusohjeet 2.0: hyviä ohjeita monimuotoisen sisällön suunnitteluun ja arviointiin

Verkkosivustojen saavutettavuuden tarkistuslista

Muutama sana saavutettavuudesta Virpi Jylhä, Näkövammaisten liitto ry

Hyvinkään kaupungin verkkosivuston saavutettavuuden arviointi (WCAG 2.0)

Lupa opetuskäyttöön pyydettävä. Näppäimistö. Kohdistimen ohjausnäppäimistö. Funktionäppäimistö. Kirjoitusnäppäimistö

Suoritusten seuranta ja opiskelijan edistyminen

H T M L eli kuinka laadin itselleni päheät kotisivut. Janne Käki

CSS-kielen avulla määritellään HTML-dokumentin tyyli. CSS avulla voidaan tarkemmin määritellä eri elementtien ominaisuuksia.

ESTEETTÖMYYSTESTAUSRAPORTTI / VIRTU.FI/ LOMAKKEET. Annanpura Oy /

ARVO - verkkomateriaalien arviointiin

Saavutettavuus verkkopalveluissa

H T M L eli kuinka laadin itselleni päheät kotisivut. Janne Käki

Verkkopalveluiden saavutettavuus

Suoritusten seuranta ja opiskelijan edistyminen

Ulkoasun muokkaus CSS-tiedostossa

Saavutettavuuswebinaari

Kuvat. 1. Selaimien tunnistamat kuvatyypit

Entiteetit erotetaan muusta tekstistä & ja puolipiste. esim. copyright-merkki näkyy sivulla

Helppokäyttöisyyttä Windows Vista käyttöjärjestelmän asetuksilla

KSAO Liiketalous 1. Asiakirjan ulkoasuun vaikuttavat tekstin muotoilut ja kappale muotoilut. Kappaleen ulkoasuun vaikuttavia tekijöitä:

Liite 1: Käyttöliittymäprototyypin esittely


ESTEETTÖMYYSTESTAUSRAPORTTI ETUSIVU JA FINRISKI-LASKURI / THL.FI

Riikka Marttinen, Helsingin Tikoteekki, Windows 7:n helppokäyttötoiminnot

ESTEETTÖMYYSTESTAUSRAPORTTI / THL. Annanpura Oy /

THL - Kansalaispalvelujen graafiset tunnisteet. Lasse Tammilehto Creative Director, Solita & Jarmo Valmari Head of Design, Arcusys

Tee html-sivu, jossa on yllä olevat kaksi taulukkoa.

Kuva xhtml-sivulla. Mirja Jaakkola

Ohjeita informaation saavutettavuuteen

TAULUKOINTI. Word Taulukot

Opintopolun esteettömyyshaasteet

Suvi Junes Tampereen yliopisto /Tietohallinto 2012

5. Alaindeksi 6. Yläindeksi 7. Poista muotoilut 8. Tasaa teksti vasemmalle

Taulukkolaskentaa selkokielellä EXCEL

PERUSLASKUJA. Kirjoita muuten sama, mutta ota välilyönti 4:n jälkeen 3/4 +5^2

ARVO - verkkomateriaalien arviointiin

Pikanäppäin Yhdistelmiä. Luku 6 Pikanäppäimet

Asemointi. 1. Lohkon korkeus ja leveys

Saavutettavuuskiertue 2018 Saavutettavan verkkopalvelun hankinta Virpi Blom, North Patrol Oy

ESTEETTÖMYYSKATSAUS / LIPPU.FI Annanpura Oy /

Miten näkövammainen eroaa 'tavallisesta' käyttäjästä?

Symbol for Windows Blisskoostaja ( Versio 2.3 )

Graafinen ohjeisto* KESKENERÄINEN PIRAATTIPUOLUE. Visuaalisen suunnittelun ja viestinnän ohjeita Piraattipuolueen sisäiseen ja ulkoiseen viestintään

Laki digitaalisten palvelujen tarjoamisesta Digitaalisten palvelujen saavutettavuus Koulutus tiedottajille ja verkkotoimittajille, HAUS

ESTEETTÖMYYSTESTAUSRAPORTTI TAPAHTUMAKALENTERI JA BLOGI / THL.FI

PERUSLASKUJA. Kirjoita muuten sama, mutta ota välilyönti 4:n jälkeen 3/4 +5^2 3

TIEDEJUTTUKURSSI FM VILLE SALMINEN

Saavutettavat verkkosivut Miten ne tehdään?

SAAVUTETTAVUUSRAPORTTI / finna.fi. Annanpura Oy /

TAMPEREEN JA PIRKANMAAN KULTTUURIPÄÄKAUPUNKIHAUN 2026 TUNNUKSEN KÄYTTÖOHJE

SATAKUNNAN AMMATTIKORKEAKOULU. Hakala Toni Varpelaide Heidi TEKSTINKÄSITTELYN OHJEET CASE: OPINNÄYTETYÖN RAPORTOINTI WORDILLA

E s i t y s g r a f i i k k a a s e l k o k i e l e l l ä MICROSOFT. PowerPoint. P e t r i V a i n i o P e t r i I l m o n e n TIKAS-SARJA

ATK-taitojen päivitys luento 1. Maaningan seurakunta Hannu Räisänen 2013

Lahden, Pohjois Karjalan ja Kemi Tornion AMK Effective Reading > 80 % % % < 50 % Suhteellinen osuus maksimiarvosta (%)

Vesa Ollikainen, päivitys Juha Haataja

Matemaattista mallintamista

Pikaopas. The New Black. Kesäkuu Datscha Pikaopas The New Black ( ) 1 (14)

Muotoilumaailman hahmottaminen - Tuotesemantiikka

1 Yleistä Kooste-objektista Käyttöönotto Kooste-objektin luominen Sisällön lisääminen Kooste objektiin Sivut...

Digi arkeen -neuvottelukunnan kokous: saavutettavuusdirektiivi ja siihen liittyvä kansallinen lainsäädäntö Kommenttipuheenvuoro, Sami Älli

ETAPPI ry JOOMLA 2.5 Mediapaja. Artikkeleiden hallinta ja julkaisu

K ä y t t ö j ä r j e s t e l m ä s e l k o k i e l e l l ä WINDOWS MICROSOFT. Petri Ilmonen ja Juha Hällfors. -sarja

Elisa Kirja. PDF e-kirjojen käsittelyohjeet

1. HARJOITUS harjoitus3_korjaus.doc

Espoo.fi-sivuston Saavutettavuus huomioitu -leima, auditointiraportti 2017

Harjoitus 1: Perusteet, navigointi ja tekstinsyöttö ( )!

SISÄLLYS JOHDANTO 5. KUVAT 1. TUNNUS - SANOMA 6. VERKKOSIVUT 2. TUNNUS - KÄYTTÖ 7. TUOTEKORTIT JA ESITTEET. 2.1 Suoja-alue. 7.

TAULUKON TEKEMINEN. Sisällysluettelo

TALLENNETAAN MUISTITIKULLE JA MUISTIKORTILLE

Action Request System

Aloitusohje versiolle 4.0

KÄYTTÖLIITTYMÄT. Visuaalinen suunnittelu

Omahoitopolut.fi Toteutuksen tilannekatsaus

Aktivoi dokumentin rakenteen tarkistamiseksi piilomerkkien näyttäminen valitsemalla valintanauhasta Kappale-kohdasta painike Näytä kaikki.

OHJE -LIPPUKUNTASIVUN MUOKKAAMISEEN

TAMK Ohjelmistotekniikka G Graafisten käyttöliittymien ohjelmointi Herkko Noponen Osmo Someroja. Harjoitustehtävä 2: Karttasovellus Kartta

Tekstinkäsittelyn jatko. KSAO Liiketalous 1

STELLARIUM KÄYTTÖOHJE

Saavutettavuusdirektiivi ja sen kansallinen toimeenpano. Markus Rahkola, VM,

WORD TYYLILLÄ. Tietohallintokeskus Miksi tyylit? Tyylien lisääminen: joko jälkikäteen tai etukäteen

Näkymä ja aktivointi

Backup Premium Pikakäyttöopas

VERKOSTO GRAAFINEN OHJE

SYÖTTÖPOHJA LUKUJEN SYÖTTÖÖN ERI TARKOITUKSIIN

ESTEETTÖMYYSKATSAUS / KANSALLISMUSEO.FI Annanpura Oy /

Verkkosivut perinteisesti. Tanja Välisalo

9. Kappale -ryhmä - Kappalemuotoilut

CSS. Tekstin muotoilua

Avaa ohjelma ja tarvittaessa Tiedosto -> Uusi kilpailutiedosto

Graafinen ohjeisto 1

Canva CV NÄIN PÄÄSET ALKUUN CANVA CV:N TEOSSA: Canva on graafisen suunnittelun

Visma.net Approval. Versiosaate 1.40

ESTEETTÖMYYSKATSAUS / KAJAANI.FI Annanpura Oy /

Saavutettavuustestausraportti

Symbol for Windows Gold. Symboliposti. Modemo 2011 Handicom Handicom

ESTEETTÖMYYSKATSAUS / KUOPIO.FI Annanpura Oy /

Kun olet valmis tekemään tilauksen, rekisteröidy sovellukseen seuraavasti:

Transkriptio:

WCAG 2.1 Uudet kriteerit

Web Content Accessibility Guidelines 2.1 Verkkosisällön uudet saavutettavuuskriteerit (WCAG 2.1) Kimmo Sääskilahti Tero Pesonen

WCAG:n versiot 1.0 toukokuu 1999 2.0 joulukuu 2008 2.1 kesäkuu 2018

WCAG 2.1 sisältää 17 uutta kriteeriä A: 5 kriteeriä AA: 7 kriteeriä AAA: 5 kriteeriä

Uudet kriteerit huomioivat aiempaa paremmin Mobiilisovellusten ja -näkymien saavutettavuuden Heikkonäköiset käyttäjät Kognitiivisen saavutettavuuden

1.3.4 Asento (AA) Sisältöä ei ole rajoitettu vain tiettyyn laitteen asentoon, kuten vaaka- tai pystyasentoon, paitsi kun asento on olennainen.

1.3.4 Asento (AA)

1.3.5 Määrittele syötteen tarkoitus (AA) Kun syötekenttä kerää tietoja käyttäjästä, sen tarkoitus voidaan selvittää ohjelmallisesti seuraavissa tapauksissa: Tarkoitus lukeutuu WCAG 2.1:n Syötekenttien käyttötarkoitus osiossa listattuihin. Syöttökenttä on toteutettu käyttäen teknologiaa, joka mahdollistaa tarkoituksen kuvaamisen.

1.4.10 Responsiivisuus (AA) Sisältö voidaan esittää ilman kahdensuuntaista vierittämistä ilman, että sisällön osia tai toiminnallisuuksia menetetään Pystysuuntaan vieritettävässä sisällössä 320 CSS-pikselin levyisenä. Vaakasuuntaan vieritettävässä sisällössä 256 CSS-pikselin korkuisena. Lukuun ottamatta sisältöosia, joissa esitystapa on oltava kahdensuuntainen käytön tai merkityksen vuoksi.

1.4.11 Ei-tekstuaalinen kontrasti (AA) Seuraavien elementtien tummuuskontrastisuhde viereiseen väriin/väreihin tulee olla suurempi kuin 3:1: Käyttöliittymäkomponentit: Visuaalinen informaatio, joka vaaditaan käyttöliittymäkomponentin ja sen eri tilojen tunnistamiseen. Graafiset objektit: Grafiikan osat, joita vaaditaan sisällön ymmärtämiseksi, paitsi kun objektin ulkoasu välittää olennaista tietoa.

1.4.11 Ei-tekstuaalinen kontrasti (AA) Kontrastisuhdevaatimus ei koske komponentteja, jotka ovat epäaktiivisia, tai joiden ulkoasu on määritelty käyttäjäagentin toimesta ja joita sisällön tuottaja ei ole muokannut.

1.4.12 Tekstin välistys (AA) Kun sisältö on toteutettu käyttäen merkkauskieliä, joka mahdollistaa jäljempänä lueteltujen ominaisuuksien asettamisen, voidaan sisältö asetella menettämättä sen osia tai toiminnallisuutta seuraavasti:

1.4.12 Tekstin välistys (AA) Rivin korkeus (riviväli) vähintään 1,5 kertaa fontin kokoinen Kappaleen jälkeinen tyhjä tila vähintään 2 kertaa fontin kokoinen Kirjainten väli vähintään 0.12 kertaa fontin kokoinen Sanojen väli vähintään 0.16 kertaa fontin kokoinen

1.4.13 Sisältö osoitettaessa tai kohdistettaessa (AA) Jos hiiren osoittimen vieminen elementin päälle tai näppäimistökohdistuksen siirtäminen elementtiin tuo näkyviin lisää sisältöä, seuraavat ehdot pätevät: Piilotettavissa: Näkyviin tulleen sisällön saa piilotettua siirtämättä hiirtä tai näppäimistön fokusta. Ehto ei päde, jos sisältö on syötevirheestä kertova teksti, tai se ei peitä tai korvaa muuta sisältöä.

1.4.13 Sisältö osoitettaessa tai kohdistettaessa (AA) Osoitettavissa: Jos hiiren osoittimen vieminen elementin päälle tuo näkyviin uutta sisältöä, kohdistin voidaan viedä tämän uuden sisällön päälle ilman, että sisältö katoaa. Pysyvä: Uusi sisältö pysyy näkyvissä, kunnes hiiren kohdistin tai näppäimistöfokus siirretään pois, tai käyttäjä piilottaa sisällön, tai sisältö ei ole enää validia.

2.1.4 Kirjainnäppäin oikotiet (A) Jos sisältöön on toteutettu näppäinoikotie, joka käyttää vain yhtä kirjain- (mukaanlukien pienet ja isot kirjaimet), välimerkki-, numero- tai symbolinäppäintä, vähintään yksi seuraavista pätee:

2.1.4 Kirjainnäppäin oikotiet (A) Pois päältä: Näppäinoikotien voi kytkeä pois päältä. Uudelleenmäärittely: Näppäinoikotie voidaan määritellä uudelleen niin, että se käyttää yhtä tai useampaa muokkausnäppäintä (Ctrl, Alt, jne.) Aktiivinen vain kohdistettaessa: Näppäinoikotie on käytössä vain, kun elementillä on fokus.

2.5.1 Osoitineleet (A) Jos toiminnallisuus hyödyntää monipiste- tai reittiin perustuvia ohjauseleitä, voidaan sitä käyttää myös yhdellä osoittimella ja ilman reittiin perustuvaa elettä, paitsi kun ohjaustapa on toiminnolle olennainen.

2.5.1 Osoitineleet (A) Monipiste-eleitä käytetään mm. kosketusnäytöllisissä laitteissa. Esimerkkejä ovat kuvan suurentamiseen käytettävä nipistysele tai usean sormen pyyhkäisyeleet. Reittiin perustuvat ohjauseleet tarkoittavat pyyhkäisyeleitä, hiirellä raahaamista tai eleitä, joissa kohdistinta täytyy liikuttaa monimutkaisen polun mukaisesti.

2.5.2 Osoittimen peruutus (A) Kun toiminnallisuutta voidaan käyttää yhden osoittimen avulla, siihen pätee vähintään yksi seuraavista: Ei down-eventiä: Mikään toiminnon osa ei käytä down-eventiä.

2.5.2 Osoittimen peruutus (A) Keskeytä tai kumoa: Toiminnon päättäminen tapahtuu up-eventillä. Lisäksi toiminto voidaan perua ennen sen päättämistä, tai se voidaan kumota päättämisen jälkeen. Vastakkaisuus: Up-event kumoaa tapahtuman, jonka sitä edeltävä down-event aiheutti. Olennainen: Toiminnon päättäminen downeventillä on olennaista.

2.5.3 Nimilappu nimessä (A) Kun käyttöliittymäkomponentilla on nimilappu, joka on tekstiä tai tekstiä esittävä kuva, komponentin tekninen nimi (jonka mm. avustavat teknologiat näkevät) sisältää saman tekstin, kuin mikä esitetään myös visuaalisesti komponentin yhteydessä.

<a href= " > <img src= title="tilaa Helka-kortti!" alt= Tilaa Helka-kortti! width="343" height="123"> </a>

2.5.4 Liikeohjaus (A) Kun toiminto perustuu laitteen liikuttamiseen, voidaan se suorittaa myös pelkkien käyttöliittymäkomponenttien avulla. Liikeaktivointi voidaan myös kytkeä pois päältä (vahingossa aktivoinnin välttämiseksi). Ehto ei koske seuraavia tapauksia:

2.5.4 Liikeohjaus (A) Liikeaktivointi on toteutettu rajapinnan kautta, joka on saavutettava. Liike on olennainen. Jos liikeaktivointi poistetaan, toiminto menettää merkityksensä.

4.1.3 Tilasta kertovat viestit (AA) Kun sisältö on toteutettu merkkauskielellä, sen tilasta kertoville viesteille voidaan määrittää rooli tai ominaisuus, jonka avulla avustavat teknologiat osaavat esittää viestit käyttäjälle, ilman, että käyttäjän tarvitsee kohdistaa viestiä.

Kysymyksiä, kommentteja?