fbpx
Magas Kontrasztú weboldalak készítése – a postCSS plugin története ShiwaForce Admin 2017. június 16

Magas Kontrasztú weboldalak készítése – a postCSS plugin története

Az Európai Unióban ma kb. 80 millió ember küzd valamilyen szervi problémával, ami hátrányos helyzetűvé teszi őket. Ez a szám napról napra nő. Ezek a hátrányos helyzetű emberek nem tudják kihasználni az internet nyújtotta lehetőségeket, mivel a webes szolgáltatások készítői rájuk nem gondolnak.

Mit tehetünk? Hogyan változtathatunk ezen?

Jó kérdés. A technológia ma már lehetővé teszi, hogy segíteni tudjunk azoknak, akiknek különleges segítségre van szükségük. Egyre több szervezet, cég és kormányzat kapcsolódik be a hátrányos helyzetű emberek támogatását célzó munkákba.

A webes akadálymentesítési törvény

Nemrég az EU-ban elfogadásra került a webes akadálymentesítési törvény. A törvény a közszféra weboldalaival és mobil alkalmazásaikkal foglalkozik, olyan közigazgatási területeket fed le mint pl. a kormányzati adminisztráció, rendőrségek, nyilvános kórházak, felsőoktatási intézmények és könyvtárak. Megköveteli, hogy ezen területek online felületei elérhetőek legyenek minden állampolgár számára, különös tekintettel a vakokra és látássérültekre, a hallássérültekre és egyéb szervi betegkre.

Az EU által elfogadott szabályok az alábbiak:

  • Minden EU tagállam tulajdonában lévő website és webes alkalmazás akadálymentes kell, hogy legyen. Az újonnan készülő website-ok már az akadálymentesség figyelembevételével kell, hogy készüljenek, a meglévő website-okat pedig frissíteni kell ezekkel a funkciókkal.
  • Archív anyagoknak és dokumentumoknak külön kérésre rendelkezésre kell állniuk akadálymentes formában.
  • A kormányzatok által készített videóknak feliratozva kell lenniük. Élő felvételeket a bemutatásuk után 14 napon belül feliratozni kell.
  • Az online felületek, ahol pl. díjak és büntetések befizetése történik, akadálymentesen kell lenniük.
  • EU-s kormányzati website-oknak a nem akadálymentesített szekcióikat jelölniük kell, illetve leírni, hogy azok miért nem akadálymentesítettek.
  • Az EU-s tagállamoknak rendszeresen monitorozniuk és jelenteniük kell mind a nyilvánosságnak mind az EC-nek, a website-juk akadálymentes státuszát.

 Günther H. Oettinger, a Digitális Gazdaság és Társadalom biztosa szerint:

“Nem elfogadható, hogy európai állampolgárok milliói hátrányt szenvednek a digiális társadalomban. A jelenleg elért megállapodás biztosítja, hogy mindenkinek megadatik a lehetőség, hogy azonos mértékben élvezhesse a webes és mobil alkalmazások előnyeit, ezáltal nagyobb mértékben vegyen részt a társadalmi tevékenységekben és függetlenebb életet vezessen.”

A fenti megállapításokat megerősítve Andrus Ansip, az Egységes Digitális Piac elnöke az alábbiakat mondja:

“Az internethez való hozzáférés mindenki valósága kell, hogy legyen. Milliónyi európait hátrahagyni nem szabad. A ma esti megállapodás fontos lépés egy Egységes Digitális Piactér felé, ami az akadályok lebontásáról szól, hogy minden európai a digitális világ legjobb szolgáltatásait kapja.”

Nagyon fontos megértenünk, hogy az internet az a hely, ahol mindenki egyenlő. És ma alapvető szabálynak kell lennie, hogy az internet a lehető legtöbb ember számára akadálymentesen elérhető legyen.

Meg szeretnék osztani egy történetet arról, hogy hogyan fejlesztettünk ki egy olyan szoftver eszközt, amely segítségével egy website magas kontrasztú változata állítható elő.

A kontraszt számít

A kontraszt teszi lehetővé, hogy könnyen meg tudjunk különböztetni egymás mellett lévő dolgokat. A web design-nál a kontraszt rendszerint a szöveg előtere és háttere közötti különbségre utal. Más szavakkal, mennyire különbözik a szöveg színe a háttér színétől.

A szöveg kontrasztjának mértéke egy fontos akadálymentességi kritérium. Az ember, amikor website-okat látogat meg és appokat használ nem olvas, hanem végigfutja a képernyőt. Amikor az ember végigfutja a képernyőt vagy gyorsan olvas, az egyes betűk formájának vagy nagyobb szerepe az értelmezésben mint annak, hogy minden egyes betűt az adott szóban, vagy sorban kielemezzen. Most is, amikor ezt a szöveget olvasod, valószínűleg ezt teszed. Olyan szöveget olvasol, ahol a kontraszt magas, vagyis a betűk formáját azonnal fel tudod ismerni.

A magas kontraszt

A legtöbb ország kormányzati weboldalain megköveteli, hogy legyen elérhető az oldalakból magas kontraszttú verzió is, ahol a színek meg vannak fordítva. Az alábbi (nemzetközi) jelből ismerhető fel az ilyen verzió.

A megfordított színű (legtöbbször fekete alapon világos betű) verzió nagyon segíti a gyengénlátókat.

A kihívás

Nemrég a mi szoftverfejlesztő csapatunk is kapott egy olyan feladatot, hogy készítse el a webes projekt felületének magas kontraszttú változatát. Ez nagy kihívásnak bizonyult.

Első lépésben keresztül kasul kerestük a neten, hogy mit is jelent a magas kontraszt és hogyan is kellene működnie egy ilyen website-nak. Sajnos nem találtunk elegendő információt. Minden nagyon általános és szegényes volt. Néhány dolgot viszont fontosnak ítéltünk. A háttér sötét (fekete) kell, hogy legyen, a szöveg színe a háttér színének ellentétes párja kell, hogy legyen, és a linkeknek sárga vagy zöld színűeknek kell lenniük.

Néhány website még a képeket is invertálja, mások a képeket egyszerűen meg sem jelenítik a magas kontraszttú oldalakon.

CSS pre-processzorok

Magas kontraszttú verzió készítésének egyik módja, ha ún. Pre-processzorokat használunk, mint például a Less, Sass, vagy a Stylus. A pre-processzorok arra is adnak megoldásokat, hogy hogyan készítsünk két változatot a website-ból. Például használhatunk változókat:

$high-contrast: true;
$background-color: #fff;
$background-high-contrast-color: #000;
$text-color: #000;
$text-high-contrast-color: #fff;

body {
  …
  @if $high-contrast == true {
    background-color: $background-high-contrast-color;
  } else {
    background-color: $background-color;
  }
  …
}
…
.text {
  @if $high-contrast == true {
    color: $text-color;
  } else {
    color: $text-high-contrast-color;
  }
}

Ez a módszer működik ugyan, de a CSS-ünket túl összetetté teszi, így azt nehéz a jövőben karbantartani. Egy másik módszer a mixin-ek használata:

$high-contrast: true;
$background-color: #fff;
$background-high-contrast-color: #000;
$text-color: #000;
$text-high-contrast-color: #fff;

@mixin background-color {
  @if $high-contrast == true {
    background-color: $background-high-contrast-color;
  } @else {
    background-color: $background-color;
  }
}

@mixin text-color {
  @if $high-contrast == true {
    color: $text-high-contrast-color;
  } @else {
    color: $text-color;
  }
}

body {
  …
  @include background-color;
  …
}
…
.text {
  @include text-color;
}

Ez a módszer már valamivel jobb, de még mindig vannak hátrányai. Számos más módja is van a magas kontrasztú verzió készítésének. Mindegyiknek megvan a maga előnye és hátránya.

De mi van, ha nem használsz pre-processzort? Vagy már a projekt közepén jársz és a szükséges változókat és mixin-eket nem jól használjátok, netán még teljesen hiányoznak?

Ez utóbbi helyzettel néztünk mi is szembe. Míg a csapat egyik fele még javában kutatta a témát, a másik fele már kódot írt. Plusz, nem használtak pre-processzorokat.

Egy plugin ötlete

Szerencsére, ezen a ponton mi már tudtunk a PostCSS létezéséről és a lehetőségeiről. A PostCSS nagyszerű tulajdonsága, ami nekünk nagyon segített, hogy az alapértékeket szabadon módosíthattuk az igényeink szerint, és minden mást változatlanul hagyva egyszerűen haladhattunk tovább. Hát nem szuper? Ezért döntöttünk úgy, hogy egy plugin-t írunk hozzá.

A PostCSS plugin fejlesztése

Először ez is kihívást jelentett, hiszen közülünk senki sem tudta, hogyan is kell plugin-t írni a PostCSS-hez. Miután kicsit utánanéztünk, meglepett minket, hogy mennyire egyszerű. A PostCSS jól dokumentált és a közösség a szoftver körül is nagyon segítőkész, így nagy segítség volt ez nekünk, kezdőknek.

Egy órányi kutatás után már hozzá is tudtunk kezdeni a plugin-hez. Az API nagyszerű. Nézzük csak meg a következő példát:

css.walkRules( function (rule) {
  if (rule.selector === 'body') {
    // do something…
  }
});

A sorok magukért beszélnek!

De még így is adódott számunkra jónéhány nyitott kérdés:

  • Mely színeket változtassuk meg, és mellyeket hagyjuk eredetiként?
  • Mi van az öröklött színekkel, amelyek a szülőktől származnak?
  • Mi van, ha adott színek már eredetileg is megfelelnek a magas kontrasztú követelményeknek?
  • Mi van azokkal a komplex elemekkel, amelyeket nem olyan egyszerű megváltoztatni, vagy a háttérszínén változtatni?

Rengeteg kérdésünk lett hirtelen. Nem tudtunk, hogyan lépjünk tovább.

Először is el kellett döntenünk, hogy mely színeket változtassuk meg, és melyeket hagyjunk meg. Megpróbáltuk megállapítani egy színről, hogy az magas kontrasztú-e a fényerejének és szaturációjának értékeiből.

var declColor = color(decl.value).hsl();    
if (declColor.s > 50 && declColor.l > 50){
  decl.value = '#000';
}

Néhány teszt után viszont kiderült, hogy nekünk nem ez lesz a járható út. Nagyon bonyolult volt, néhány esetben nem is működött és még a CSS-ünk fordítási ideje is nagyon megnőtt. Rájöttünk, hogy a legjobb módszer az, ha egyszerűen minden színt lecserélünk, függetlenül az eredeti értékeire.

if (decl.prop === 'background-color') {
  decl.value = #000;
}

if (decl.prop === 'color') {
  decl.value = #fff;
}

Ez a megközelítés úgy tűnt, hogy bevált. Már éppen ünnepeltük volna apró győzelmünket, amikor kiderült, hogy nem minden elem vette át a változtatásokat. A nyomozás során kiderült, hogy nem minden elem rendelkezik szín tulajdonságokkal. CSS öröklődés! A helyzet megoldásához úgy döntöttünk, hogy bevezetjük az “agresszív” módot.

Az “agresszív mód” egy szelektor listát fogad el, és függetlenül annak egyéb tulajdonságaitól egy szín tulajdonságot ad az elemhez.

postcss([
  require('postcss-high-contrast')({
    aggressiveHC: true,
    aggressiveHCDefaultSelectorList: ['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'p', 'li', 'th', 'td'],
    aggressiveHCCustomSelectorList: ['div', 'span'],
  })
])

Néhány teszt kör után úgy tűnt, hogy a dolog működik.

Hogyan működik?

Mielőtt befejezném a történetet, hadd magyarázzam el, hogyan is kell használni a PostCSS plugin-t. Remélem, a PostCSS alapjai és a meglévő PostCSS ökoszisztéma már ismerős. Ha nem, olvass utána a PostCSS website-ján. Bármi is legyen a kedven preprocesszorod, a PostCSS-t is nyugodtan használhatod mellette. Ez azt jelenti, hogy a PostCSS plugin bármilyen CSS-sel működik.

Íme, egy minta konfiguráció:

postcss([
  require('postcss-high-contrast')({
    aggressiveHC: true,
    aggressiveHCDefaultSelectorList: ['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'p', 'li', 'th', 'td'],
    aggressiveHCCustomSelectorList: ['div', 'span'],

    backgroundColor: '#000',
    altBgColor: '#fff',

    textColor: '#fff',

    linkColor: '#fcff3c',
    linkHoverColor: '#fcff3c',

    borderColor: '#fff',
    disableShadow: true,

    imageFilter: 'invert(100%)',
    imageSelectors: ['img'],

    removeCSSProps: false,
    CSSPropsWhiteList: ['background', 'background-color', 'color', 'border', 'border-top', 'border-bottom',
      'border-left', 'border-right', 'border-color', 'border-top-color', 'border-right-color',
      'border-bottom-color', 'border-left-color', 'box-shadow', 'filter', 'text-shadow']
  })
])

…egy normál mód példa:

/* Before */
body {
  background: #fff;
  color: #000;
}

a {
  color: #0b39e1;
}

/* After */
body {
  background: #000;
  color: #fff;
}

a {
  color: #fcff3c;
}

… és egy agresszív mód példa:

/* Before */
h1 {
  font-size: 48px;
  margin: 0;
  padding: 0 24px;
  width: 100%;
}

p {
  font-size: 48px;
  margin: 0 0 24px;
}

/* After */
h1 {
  color: #fff;
  font-size: 48px;
  margin: 0;
  padding: 0 24px;
  width: 100%;
}

p {
  color: #fff;
  font-size: 48px;
  margin: 0 0 24px;
}

A történet vége

Nagyon jó élmény volt a PostCSS plugin fejlesztése. Ezúton szeretném megköszönni a PostCSS csapatának ezt a nagyszerű eszközt, a dokumentációt és az API-t. Sosem képzeltük, hogy mindez ennyire egyszerű lesz ezzel az eszközzel.

Nagyszerű időkben élünk. Rengeteg technológia segít minket a mindennapokban és ezek közül az internet az egyik legfontosabb. Tegyük hát elérhetővé mindenki számára.

English version of this article: http://css-tricks.com/high-contrast-postcss-plugin-story/