<img height="1" width="1" src="https://www.facebook.com/tr?id=1272750026111903&amp;ev=PageView &amp;noscript=1">

Slik kommer du i gang med test av WCAG 2.0-krav

Øystein Rose

Øystein Rose | 23. juni 2019

I denne artikkelen kommer jeg med flere tips om hvordan du kan enkelt spare masse tid og likevel sikre et universelt utformet nettsted.

For en tid tilbake skrev jeg en artikkel om universell utforming og hva man først og fremst måtte være oppmerksom på for å tilfredsstille kravene.

WCAG 2.0-kravene er mange, og teksten er gjerne flere kilometer lang. I det hele tatt er det ganske mye å sette seg inn i. Heldigvis har det kommet noen gode utviklingsverktøy som hjelper deg et godt stykke på vei mot å tilfredsstille kravene. Med på veien får du en god innføring i hvilke krav som finnes og hvordan du tilfredsstiller disse, uten å måtte lese retningslinjene fra perm til perm.

Innholdsmessige krav

Et universelt utformet nettsted krever at du gjør en grundig teknisk jobb, men også innholdsmessig. Med innholdsmessige krav mener jeg WCAG-krav som går på blant annet godt og lettfattelig språk, gode lenketekster og informative beskrivelser av bilder og annet ikke-tekstlig innhold slik som video og lyd. Hvor godt disse kravene er ivaretatt, er vanskelig å avgjøre for et analyseverktøy. Her må nesten hver enkelt redaktør kontinuerlig sørge for at innholdet er vedlikeholdt. Å ha webredaktører med god kompetanse på dette området i organisasjonen er derfor veldig viktig.

Å holde et nettsted universelt utformet er en kontinuerlig oppgave som pågår gjennom hele levetiden til nettstedet.

Men kanskje er det aller viktigste å huske på er at nettstedet kan godt følge alle krav til punkt og prikke, men likevel være vanskelig å bruke. Brukertester underveis i utviklingen er derfor essensielt. Inviter personer med forskjellige funksjonsnedsettelser til test av din løsning. En snodig sak som Funkify gir deg ideer til hvem man kanskje skulle invitert. Funkify simulerer en rekke utfordringer man måtte ha og du kan teste nettstedet ditt med disse. Verktøyet installerer du som en plugin i nettleseren.

Logo Funkify
Funkify kan gi deg en idé om hvordan nettopp din nettløsning oppleves for personer med forskjellige funksjonsnedsettelser.

Spe gjerne på med flere tester jevnlig i løpet av produktets levetid. Det kan være fort gjort at nettstedets fokus på universell utforming visner litt bort etter at akseptansetestene har passert.

Når det gjelder de mer tekniske kravene så finnes flere verktøy som kan hjelpe.

Manuell test direkte i nettleseren

axe er et verktøy som blir utviklet av Deque Labs. Du kommer raskest igang dersom du installerer axe som en plugin i nettleseren. Besøk nettsiden du ønsker å teste, klikk på en knapp, og vips har du en komplett liste over hva du må utbedre. I tillegg git axe en forklaring på hva som er feil, hvordan du utbedrer den og også en forklaring på hvem som er berørt av feilen.

Hjelp underveis i utviklingen

For å hjelpe en stakkars programmerer i utviklingen av en universell utformet React-app, finnes det en rekke lint-verktøy. Dersom man bruker Create React App, er for eksempel en eslint-plugin med det klingende navnet eslint-plugin-jsx-a11y allerede satt opp. Denne pluginen hjelper med å luke ut feil i JSX-koden din med tanke på WCAG-2.0-retningslinjene. Ulempen med denne pluginen er at den ikke tester på den ferdig rendrede HTML-koden.

axe-core er redningen!

Axe-core er selve teste-motoren som ligger i bunnen av de fleste produktene til Deque Labs. Du kan bruke axe som en del av enhets- og integrasjonstestene eller ved manuell test direkte i nettleseren. Å introdusere test av universell utforming så tidlig som mulig i utviklingsløpet, vil spare masse deg masse tid. Mest sannsynlig vil du også unngå kjipe overraskelser når du nærmer deg produksjonssetting og personen fra "brukskvalitet" spør om vi har oppfylt alle WCAG 2.0-kravene.

react-axe

React-axe er en wrapper rundt axe-core til bruk ved utvikling av React-applikasjoner. Biblioteket gir deg gode feilmeldinger i Chrome Devtools Console mens du lager applikasjonen din. Utrolig nyttig!

Slik gjør du det:

$ npm install --save-dev react-axe

I index.js legger du inn følgende kodesnutt:

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';

if (process.env.NODE_ENV === 'development') {
  const axe = require('react-axe');
  axe(React, ReactDOM, 1000);
}
ReactDOM.render(<App />, document.getElementById('root'));
chrome-devtools
Eventuelle feil i Appen din vil dukke opp i Console i Chrome Devtools

Automatisk test med tanke på universell utforming

I tillegg til tilbakemeldinger i Chrome Devtools, kan man også bruke aXe i testene du skriver mens du utvikler løsningen din. Det finnes et fiffig bibliotek som lar deg bruke aXe sammen med Jest, nemlig jest-axe.

Slik kommer du i gang:

Installer react-axe:

$ npm install --save-dev jest-axe

Testen din kan du skrive slik:

import React from 'react';
import ReactDOMServer from 'react-dom/server';
import { axe, toHaveNoViolations } from 'jest-axe';

import App from './App';

expect.extend(toHaveNoViolations);

it('should have no a11-violations', async () => {
  const html = ReactDOMServer.renderToString();

  const results = await axe(html);

  expect(results).toHaveNoViolations();
});
feil
Du får gode feilmeldinger dersom du ikke gjør ting etter boka.

Som du ser så kan du med ganske små grep få inn test av universell utforming på et tidlig stadium. Det vil spare deg og teamet ditt for mye tid. Du sikrer at den tekniske delen av produktet du leverer vil være i henhold til WCAG-kravene.

Likevel er det veldig viktig å brukerteste løsningen din grundig. Et analyseverktøy er ingen garanti for et brukervennlig nettsted for alle!

Lykke til!

Del på sosiale medier: