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

WordCamp Finland 2016

Tervetuloa WordCamp Finland 2016 -tapahtumaan! WordPress-aiheinen seminaari järjestetään 15.-16.4.2016 Helsingissä. Perjantaina 15.4. on tarjolla erilaisia puheita ja lauantaina 16.4. järjestetään workshoppejaOsta lippu samointein, ne nimittäin loppuvat jo piakkoin.

Jos et ole aiemmin ollut WordCamp-tapahtumassa, niin tässä lyhyt esittely mistä oikein on kyse.

WordCampit ovat rentoja, paikallisesti järjestettyjä WordPress-aiheisia konferensseja. WordPress on ilmainen ja lähdekoodiltaan avoin henkilökohtainen julkaisualusta, joka pyörittää yli 75 miljoonaa www-sivustoa maailmanlaajuisesti. 15.-16. huhtikuuta Helsingissä järjestettävä WordCamp Finland on järjestyksessään toinen tapahtuma Suomessa. Ensimmäinen järjestettiin Tampereella toukokuussa 2015. Konferenssiesitysten aiheita on laidasta laitaan, WordPressin tehokkaammasta hyödyntämisestä ja lisäosien kehittämisestä edistyneempiin tekniikoihin, tietoturvakysymyksiin ja WordPress-liiketoimintaan. Tapahtuman kohderyhmänä ovat niin WordPress-harrastelijat kuin sitä työssään päivittäin hyödyntävät ammattilaiset, www-suunnittelijat, kehittäjät ja organisaatiot.

WordCamp Finland 2016

WordCampin järjestämisestä

Meillä on mukava ja ammattitaitoinen porukka järjestämässä WordCamp Finland -tapahtumaa. Kiva olla itsekin siinä mukana.

Olemme jo useamman kuukauden suunnitelleet tapahtumaa ja jokaiselle riittää paljon erilaisia tehtäviä:

  • Logistiikka tapahtumapäivänä
  • Sponsorit
  • Budjetti
  • Puhujat
  • Ruokailu ja muuta tarjoilut
  • T-paidat jne.
  • Vapaaehtoisten organisointi
  • Printti
  • Design (logo, nettisivut jne.)
  • Nettisivujen ylläpito
  • Sisällön tuottaminen
  • A/V
  • Bileet
  • Workshops / Contributors Day
  • Opastukset
  • Kommunikointi ja markkinointi (nettisivut, live-twiittailu)
  • Liput
  • ”Lavamanageri” (kannettava, audio, aika)
  • Valokuvaus

Pääarkkitehtinä toimii Marco Martins, joka pitää kaikkia lankoja käsissään. Hän myös kommunikoi Foundationin suuntaan.

Meillä on viikottainen palaveri Slack:ssä ja se on toiminut paremmin kuin Skype tai Hangout. Palaverit ollaan saatu pidettyä tunnissa. Joskus otamme riskin ja näemme jopa kasvotusten!

WordCamp järjestäjät
Joskus näemme jopa kasvotusten. Kyllä tämä aina Slackin voittaa.

En valitettavasti itse voi hakea puhumaan, mutta  workshoppeja voin onneksi suunnitella ja toteuttaa. Hain muuten puhumaan WordCamp Europe -seminaariin, joka on Euroopan isoin WordCamp.

Mutta nähdään sitä ennen Helsingissä WordCamp Finlandin merkeissä!

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
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
Kategoriat
Uutiset

WordCamp Finland Tampereella 8.-9.5.

WordPress on ilmainen ja lähdekoodiltaan avoin henkilökohtainen julkaisualusta, joka pyörittää yli 75 miljoonaa www-sivustoa maailmanlaajuisesti. 8.-9. toukokuuta järjestetään ensimmäinen suomalainen WordPress-konferenssi, WordCamp Finland Tampereen Hullu Poro -ravintolassa. Konferenssiesitysten aiheita on laidasta laitaan, WordPressin tehokkaammasta hyödyntämisestä ja lisäosien kehittämisestä edistyneempiin tekniikoihin, tietoturvakysymyksiin ja WordPress-liiketoimintaan.

Tapahtuman kohderyhmänä ovat niin WordPress-harrastelijat kuin sitä työssään päivittäin hyödyntävät ammattilaiset, www-suunnittelijat, kehittäjät ja organisaatiot. Myös opiskelijat ovat erittäin tervetulleita, tapahtuma on erinomainen tilaisuus tutustua alan työnantajiin.

Liput tapahtumaan maksavat 10 euroa ja sisältävät perjantain konferenssin, t-paidan, lounaan ja kahvitukset sekä pääsyn iltabileisiin. Lisäksi lauantaina järjestetään useampi WordPress-aiheinen workshop.

WordCamp Finland

 

Kategoriat
Uutiset

Asiakaspalautetta

Olen oikein tyytyväinen Paytrail Payment Gateway lisäosaan. Voin suositella sitä jokaiselle Easy Digital Downloads käyttäjälle, joka haluaa käyttää suomalaista pankkimaksamista Paytrailin kautta. Suomalainen maksujärjestely nostattaa luottamusta. Yhteensä paketti EDD, Paytrail Payment Gateway ja Paytrail ovat edullinen ja toimiva ratkaisu digitaalisen aineiston myyntiin ja jakeluun.

Heikki Luoma

Kategoriat
Uutiset

Kultaseppä Tarkkanen sai arvoisensa www-sivut

[envira-gallery id=”2711″]

Kultaseppä Tarkkanen sivujen työstäminen oli mielenkiintoista ja hieman erilaista kuin normaalisti. Ensinnäkin koko prosessi lähti liikkeelle tutustumalla Tarkkasen uljaaseen ateljeeseen ja showroomiin. Tämä tapaaminen antoi mukavan ja henkilökohtaisen vaikutelman. Tämän jälkeen sivujen työstämisellä oli yksi tärkeä tavoite: saavuttaa tarkka, huoliteltu ja tyylikäs sivusto, mikä kuvastaa Tarkkasen suhtautumista omaan työhönsä.

Mielestäni onnistuimme hyvin ja lopputulosta kannattaa ihailla kuvagalleriassa, joka toteutettiin loistavalla Envira Gallery -lisäosalla. Kauniiden kuvien lisäksi halusimme erottua muista kultaseppien sivuista kirjoittamalla blogiin ajatuksia korujen maailmasta sekä ilmoittamalla tapahtumista. Lisäksi sivut käännetään ainakin englanniksi ja venäjäksi.

Tervemenoa korujen ja sormusten kauniiseen maailmaan. Tarkkanen-Desktop_web