Kategoriat
WordPress

Jyväskylän WordPress-miitissä aiheena esteettömyys navigaatiossa

Uusia WordPress-meetuppeja on perustettu viime aikoina mukavaan tahtiin eri puolille Suomea. Jyväskylä ja Turku ovat uusimmat paikkakunnat, missä vaihdetaan ajatuksia milloin mistäkin WordPress-aiheesta. Itse vierailin Jyväskylässä 16.2.2016 ja aiheena oli esteettömyys navigatiossa.

Esteettömyys navigaatiossa -esitelmän alustusta
Kuvan otti Mikko Virenius

Tavoitteeni oli tuoda esille esteettömyyteen liittyviä asioita ja pohtia miten pienilläkin asioilla voit parantaa sivuston esteettömyyttä. Tämä vaatii tietynlaisen ajattelutavan mutta monimutkaisista toimenpiteistä ei onneksi ole kysymys:

  • Voinko selata ja saavuttaa kaikki navigaation linkit pelkästään käyttäen näppäimistöä? Testaa käyttämällä Tab, Shift+Tab ja Enter painikkeita.
  • Käytäthän painikkeita (<button> elementti), jos  painike aktivoi jonkin toimenpiteen? Esim. avaat tai suljet valikon.
    • Linkkien tarkoitus on viedä käyttäjä jollekin muulle sivulle tai samalle sivulle eri kohtaan.
    • Älä kaytä painikkeena DIV tai SPAN elementtejä. Niillä ei ole esteettömyyteen liittyvää APIa ollenkaan.
  • Onnistuuko kaikkien elementtien fokusoiminen?
  • Älä hukkaa fokusta.
  • Screen reader -käyttäjille on hyvä lisäapu .screen-reader-text class.
  • Joistakin ARIA merkinnöistä on apua.
  • Testaa oikeilla käyttäjillä mikäli mahdollista.

Tässä linkki esitelmän dioihin.

Accessible-Navigation-Patterns

Jyväskylässä vierailu

Olen aikoinaan valmistunut Jyväskylän yliopistosta ja sieltä on todella paljon hyviä muistoja. Suurin osa nykyisistä kavereistakin on noilta ajoilta. Those were the days!

Oli siis enemmän kuin nastaa lähteä Jyväskylään, käydä tutuissa paikoissa, puhua esteettömyydestä ja tutustua uusiin ihmisiin. Olin etukäteen nähnyt livenä vain yhden kaverin meetup-ryhmästä, joten vihdoinkin Twitter-profiilit muuttuivat lihaksi ja vereksi!

Pakko mainita tähän väliin, että oli hienoa törmätä Mattilanniemessä Pekka Koskelaan, silloiseen matematiikan laitoksen johtajaan. Hieno mies.

Jyväskylän meetup-ryhmässä oli todella rento mutta ammattimainen ote. Ryhmä meikäläisen makuun.

Jyväskylän meetup-ryhmä
Kuvan otti Antti Kuosmanen

Toivottavasti monilla heräsi kiinnostus esteettömyydestä. Rolle kirjoittikin jo älyttömän hyvän koosteen esteettömyydestä, jonka ydin mielestäni tiivistyy seuraavaan lauseeseen:

Web kuuluu kuitenkin kaikille ja sivuston pitäisi olla esteetöntä ihan samalla tavalla kuin esimerkiksi responsiivinen

Kuvagalleria aurinkoisesta Jyväskylästä

Aamulenkki aurinkoisessa Jyväskylän tutuissa maisemissa oli aivan parasta.

[envira-gallery id=”2963″]

Kategoriat
Uutiset

Esteettömyys aiheena WordPress meetup -tapahtumassa

Tampereella on ollut jo pidemmän aikaa aktiivinen WordPress-yhteisö, joka on kokoontunut säännöllisesti WordPress-meetupin merkeissä. Nyt myös Helsinkiin on saatu aktiivisten järjestäjien ansiosta oma WordPress Meetup. Tervetuloa kaikki mukaan! Tapahtumissa on vapautunut ilmapiiri ja varmasti aihepiirit tulevat vaihtelemaan laidasta laitaan.

WordPress Helsinki

Helsinki, FI
1,347 Members

We’re a group of local WordPress developers, designers, and publishers who get together to share our knowledge and experience, and to meet other WordPress users in the area. T…

Next Meetup

WordPress Helsinki Meetup

Wednesday, Jan 6, 2021, 5:30 PM
3 Attending

Check out this Meetup Group →

 

Minulla oli kunnia pitää esitys otsikolla How to create better, more accessible WordPress themes.

Esityksen sisältö

Esitys piti sisällään seuraavia aiheita:

  • Mitä on esteettömyys?
  • Miksi meidän pitäisi välittää esteettömyydestä?
  • Screen reader -ohjelmat.
  • Hyppää sisältöön -linkki.
  • Esteettömyys käyttäen vain näppäimistöä.
  • Otsikoinnin hierarkia.
  • ARIA-roolit.
  • Vältä toistuvia tekstejä.
  • Käytä kuvaavia linkin tekstejä, title attribuuttia ei välttämättä tarvita.
  • Värien kontrasti.
  • Painikkeet ovat painikkeita ja linkit linkkejä.

Vai miltä sinusta tuntuisi, jos verkkosivusi näyttäisivät tältä.

Kaikki eivät näe samalla tavalla
Kaikki eivät näe samalla tavalla

Tässä vielä esitys katsottavaksi, muista myös tutustua linkkeihin ja koodiesimerkkeihin Post Status sivustolla.

Kategoriat
WordPress

Toivo: esteettömyyteen panostava WordPress-teema

Olen viimeisen vuoden aikana oppinut ymmärtämään kuinka tärkeää esteettömyys on myös verkkosivuilla. Kuorinka-teema oli ensimmäinen virallinen esteettömyys-merkinnän saanut teemani. Tästä innostuneena kaikki tulevat teemani pyrkivät täyttämään viralliset esteettömyys-kriteerit.

Ja tästä vielä enemmän innostuneena sain kunnian kirjoittaa WordPress-teemojen esteettömyydestä artikkelin Post Status -sivustolle.

Toivo

Toivo-teema on nimetty kahden kummipoikani nimen mukaan. Ja toki onhan meillä kaikilla aina toivoa!

Toivo-teema

Toivo on täydellinen teema sivuillesi oli se sitten yrityssivu tai henkilökohtainen blogi. Teemassa on upea Etusivu, jossa voit näyttää tärkeimmän sisällön, suositukset ja Callout-linkkejä. Teema on saanut virallisen saavutettavuus (Accessibility Ready) merkinnän ja siinä on paljon ominaisuuksia kuten tuki oikealta vasemmalle -kielille ja tuki Schema.org merkkauskielelle.

Ominaisuudet

Mielestäni teemoissa ei saa olla liikaa ominaisuuksia, kuten monia eri Slider-vaihtoehtoja. Vastaavasti teemojen tulee olla helppokäyttöisiä, esteettömiä ja tyylikkään näköisiä.

Toivo-teemassa on mm. seuraavia ominaisuuksia:

  • Otsakkeen kuvan vaihtaminen.
  • Etusivu, jota voit hallita teeman mukauttimessa (the Customizer). Etusivulle voit mm. nostaa haluamasi vimpaimet ja tehdä Callout-osioita. Demosivulla näet parhaiten mitä kaikkea etusivulla voi tehdä.
  • Voit vaihtaa myös alapalkin taustakuvan -ja värin samalla tavalla kuin otsakkeessakin.
  • Voit vaihtaa ulkoasun yhdestä sarakkeesta kahteen sarakkeeseen, sisältö joko oikealla tai vasemmalla.
  • Teemassa on kolme eri navigaatiota, joista yksi on ns. some-valikko. Päänavigaatio tukee myös menulinkkien kuvaustekstejä.
  • Aktivoimalla Jetpack-lisäosan saat muutamia lisäominaisuuksia:
  • Voit vaihtaa yksittäisen sivun kuvaus-tekstejä otsakkeessa. Saman voi tehdä myös suosituksien ja portfolion arkistosivuilla.
  • Teema tukee Schema.org merkkauskieltä.

Teeman tarkastaminen

Ennen kuin lähetin Toivo Lite -version WordPress.org sivustolle, niin teeman tarkastivat Justin Tadlock ja Emil Uzelac. He tarkastavat teemoja ja lisäosia työkseen omalla sivustollaan ja lisäksi ovat vapaaehtoisia admin-henkilöitä WordPress.org teemasivustolla.

Mielestäni kaikkien teemojen tekijöiden tulisi tarkastaa teemansa heidän palvelussaan, oli kyseessä sitten julkinen teema tai teema asiakkaalle.

  • He tarkastavat rivi riviltä teeman koodin, joka on äärimmäisen tärkeää jo tietoturvankin kannalta.
  • Itse ei tarvitse kaikkea osata. He neuvovat ja antavat vinkkejä, jos jokin asia on pahasti pielessä.

Omalta osaltani teeman tarkastus meni läpi ilman suurempia moitteita.

Tämän jälkeen teeman tarkasti David A. Kennedy, joka on erikoistunut nimenomaan esteettömyyteen WordPress-teemoissa. Sain häneltä muutaman korjausehdotuksen värien kontrasteihin liittyen ja Toivo-teema oli sen jälkeen valmis.

Toivottavasti löydät teemalle käyttöä omilla sivuillakin. Malliesimerkki mitä teemalla voi tehdä on mielestäni Reinar Svendsen:in www-sivut.

Kategoriat
Opastukset

Esteettömyys WordPress-teemoissa

Minulla oli kunnia kirjoittaa Post Status -sivulle artikkeli WordPress-teemojen esteettömyydestä. Vapaasti käännettynä artikkelin nimi on Miten teet parempia, esteettömämpiä WordPress-teemoja.

Lyhyesti kuvattuna esteettömyys tarkoittaa sitä, että kaikki voivat käyttää www-sivuja millä tahansa päätelaitteella. Artikkelissa keskitymme enimmäkseen ihmisiin, joilla voi olla esimerkiksi

  • motorisia tai kognitiivisia rajoitteita
  • näkö- tai kuulovammoja

Täten haastan teidät tekemään parempia ja esteettömämpiä sivustoja kun aloitat seuraavan projektin. Tai testaa nykyisen sivustosi toimivuus pelkästään näppäimistöä käyttäen ja aloita pienin askelin.

Malliesimerkkejä omista teemoista ovat Toivo ja Kuorinka -teemat. Jatkossa kaikki esteettömät teemani löydät accessibility-ready avainsanalla.

Esteettömyys WordPress-teemoissa

Artikkelin sisältö

Tässä vielä kuvaus artikkelin sisällöstä:

  • .screen-reader-text määreen käyttäminen, kun haluat piilottaa tekstiä
  • Otsikointi ja otsikkohierarkia
  • ARIA-roolit
  • Linkin tekstit
  • Painikkeet ja linkit
  • Näppäimistöllä navigointi
  • Värisävyt
  • Hyppää sisältöön -linkit
  • Lomakkeet
  • Kuvat ja alt-teksti
  • Media
  • Kielletyt asiat