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 WordPress

Sonsa: WordPress-teema valokuvaajille

Jos Munsa-teema on tyylikäs teema luoville tyypeille, niin kyllä sitä on myös Sonsa. Olkoon he vaikka serkuksia. Molemmissa teemoissa kuvat, videot ja äänitiedostot ovat pääroolissa typografiaa unohtamatta.

Sonsa soveltuu hyvin myös kahviloiden tai baarien ulkoasupohjaksi. Klikkaa alla olevista kuvista jompaa kumpaa demolinkkiä, niin saat paremman kuvan miltä teema näyttää.

Teeman suunnittelusta

Elokuun (2015) lopussa huomasin tunnetun designerin Tung Don luonnoksia teemasta ja ihastuin siihen välittömästi.

Sonsa-teeman ulkoasu

Ulkoasu näytti omaperäisen tyylikkäältä ja päätin ostaa ulkoasupohjan. Siitä alkoi pitkä, haastava ja useita kuukausia kestävä koodausjakso. Opin jälleen kerran paljon uutta ja viimein joulukuussa 2015 sain teeman valmiiksi.

Amanda J. Rush antoi kullanarvoisia vinkkejä esteettömyyden parantamiseen. Varsinkin ns. fly-out sivupalkki vaati paljon pientä hienosäätöä. Kiitokset ja tuhannet halaukset hänelle!

Sonsa saatavilla myös WordPress.com-palvelussa

Sain teeman myyntiin myös WordPress.com-sivuille, jossa on äärimmäisen tiukka ja intensiivinen tarkastusprosessi.

Tarkastusprosessin tuloksena teema oli huomattavasti parempi ja kas kummaa, opin taas itse jotakin uutta.

Tässä vielä tärkeimmät linkit Sonsa-teemaan liittyen:

Toivottavasti tykästyt teemaan yhtä paljon kuin minä.

Kategoriat
WordPress

Munsa: WordPress-teema luoville ihmisille

Munsa on minimaalinen WordPress-teema luoville ihmisille. Se soveltuu hyvin valokuvaajille, artisteille ja innokkaille bloggaajille. Ulkoasu on yksinkertaisen tyylikäs.

Miltä Munsa-teema näyttää kannettavassa

Ominaisuudet

Koitin pitää ulkoasun mahdollisimman yksinkertaisena mutta ominaisuuksia on kuitenkin riittävästi erilaisiin tarpeisiin.

Suunnitelun lähtökohtana oli ”mustavalkoinen” ja tyylikäs ulkoasu missä kuvat ja typografia ovat pääroolissa. Munsa on omalla tavallaan Pro-versio Simppeli-teemasta.

There are couple of Page Templates in this theme which you can manage from the Customizer. Demo site have good info about these features.

Teemassa on muutama sivupohja, joita hallitaan mukauttimessa.

Kuvagalleria

Munsa-teeman demosivuilla näet teeman koko loistossaan mutta ohessa myös muutama kuva höysteeksi.

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
WordPress

Mina olen WordPress teema julkaistu

mina-olen-screenshot

Monen kuukauden uurastuksen jälkeen uusi teema nimeltään Mina olen on valmis. Nimi juontaa juurensa musiikista ja Sinä olet teema voisi olla seuraavan teeman nimi. Mina olen teema on business-sivustoille suunniteltu WordPress-teema, ja siinä on tuki mm. Easy Digital Dowloads ja Portfolio-lisäosille.

Teeman ominaisuudet

Teemassa on sivupohja, johon voi kerätä kaikki tärkeimmät sivusi, viimeisimmät artikkelit, Easy Digital Downloads-tuotteet, Portfoliot ja suositukset. Näitä valintoja voi tehdä teeman asetuksissa.

Katso kaikki Mina olen -teemaan liittyvät ohjeet. Teeman voit hankkia kotileipomosta nimeltään Foxland.

Voit myös vaihtaa teeman ulkoasua asetuksista: ns. boxed layout, yhden sarakkeen tai kahden sarakkeen vaihtoehdot ovat tarjolla. Lisäksi voit ladata oman logon tai kirjoittaa kustomoidun tekstin alapalkkiin. Asetuksia ei ole ähkyksi asti, mutta kuitenkin riittävästi, jotta teema soveltuu moneen käyttöön. Olen lisäksi tehnyt muutamia alateemoja, joiden avulla alkuperäisiä teeman värisävyjä on helppo muuttaa. Näet demossa eri vaihtoehdot, kun valitset oikealta Preview Child Themes.

Miksi kotileipomosta?

Miksi teema kannattaisi ostaa minun kotileipomosta eikä esimerkiksi Theme Forest tai Woothemes sivuilta?

  • Ei mitään erityistä syytä. Theme Forestin teemat ovat kyllä tunnetusti näyttäviä mutta pintaa syvemmältä niiden tekotapa on vähintäänkin kyseenalainen. Onneksi tilanne on hiljalleen muuttumassa.
  • Kaikki teemani on tarkastettu ja syynätty. Kaupalliset teemat on tarkistanut Justin Tadlock. Hän on yksi admin WordPress.orgin ”theme review”-tiimissä. Julkiset teemani ovat käyneet saman prosessin läpi.
  • Kaikki teemani ovat valmiiksi käännetty Suomen kielelle, joten se vaiva on pois käyttäjältä.
  • En kyllä heitä mitään kotimaisuus-korttia tähän viimeiseksi.
  • Eikun kotileipomoon hankkimaan tuoreita teemoja.
Kategoriat
WordPress

Paytrail maksulisäosa demo

Lisäys 20.1.2014: Lisäosa on nyt valmis ja tarkemmat tiedot voi lukea julkaisutiedotteesta.

Olen jo pidemmän aikaa halunnut rakentaa Paytrail-maksulisäosan (payment gateway) Easy Digital Downloads -lisosalle. Jos et vielä tiennyt niin Easy Digital Downloads on ilmainen WordPress-lisäosa, jolla voi tehdä kauppaa millä tahansa digitaalisella tuotteella. Voit esimerkiksi myydä sähköisiä kirjoja, musiikkia, ohjelmistoja, lisäosia, teemoja, ilmoittautua tapahtumiin tai maksaa kurssimaksuja.

Kategoriat
WordPress

Live Wire -teema päivitetty

Live Wire WordPress-teema sai melko ison päivityksen hetki sitten ja tässä tärkeimmät päivitykseen liittyvät asiat.

  • Hybrid Core päivitettiin versioon 1.6.2.
  • Valikon ”alavalikon” plus-merkki oli aikaisemmin kuva, nyt se on html tagin + merkki.
  • .pot tiedosto lisätty
  • Suomenkielinen käännös päivitetty.
  • style.min.css-tiedosto lisätty.

Muutoksia voi katsoa tarkemmin myös Github:in sivulta.

Kategoriat
WordPress

Miten luodaan teeman tai lisäosan .pot-tiedosto

Olen miettinyt jo pitkään miten lisäosan ja teeman kaikki mahdolliset asiat olisivat käännettävissä. Tässä viimeisin version miten kannattaa luoda teeman tai lisäosan .pot-tiedosto.

Kategoriat
WordPress

Path WordPress-teema päivitetty

Path WordPress-teema sai melko ison päivityksen hetki sitten ja tässä tärkeimmät päivitykseen liittyvät asiat.

  • Hybrid Core päivitettiin versioon 1.6.
  • Valikon ”alavalikon” plus-merkki oli aikaisemmin kuva, nyt se on html tagin + merkki.
  • ”Chat” formaatti lisätty.
  • .pot tiedosto lisätty
  • Suomenkielinen käännös päivitetty.
  • style.min.css-tiedosto lisätty.

Muutoksia voi katsoa tarkemmin myös Github:in sivulta.

Kategoriat
WordPress

Uusi WordPress teema: Kalervo

Kalervo on hyvä WordPress teema monen makuun. Myönnettäköön, että kyseinen layout on tehty tuhansia kertoja ennenkin, mutta pakkohan se oli tehdä myös itse.

Tuetut lisäosat

Lisätietoja Foxnet Themes sivulta.

Kalervo