Når blir nettavisene universelt utformet?

Alle nettløsninger rettet mot allmennheten utviklet etter 1. juli 2014 er lovpålagt å være universelt utformet. Eksisterende løsninger ved denne datoen anses som nye løsninger per forskriften dersom:

Nye funksjonar eller større endringar i struktur eller design, er døme på endringar som tilseier at IKT-løysinga blir ny.

Det vil si at de fleste nettaviser i Norge vil anses som "nye" og gjenstand for forskriftens regler, da de fleste har fått vesentlig endring av design de siste to årene.

Og hvis det skulle være noen tvil om at nettaviser rammes av forskriften:

Døme på verksemder som er retta mot allmenta er nettaviser, nettbutikkar, tog og taxi, bankar- og finansinstitusjonar, offentlege etatar, hotell, restaurantar- og serveringsstader, advokatfirma, røyrleggjarar, arkitektar, idrettslag og organisasjonar.

Likevel er det mange nettaviser som enn så lenge gir blaffen i å utvikle nettsidene sine på en måte som oppfyller kravene til WCAG 2.0.

Dessverre er nok dette resultat av at tilsynet for forskriften ikke har definert nettaviser som et prioritert område. DIFI forklarer på nettsidene sine at følgende type løsninger skulle være prioritert:

I 2014 og 2015 vil tilsynet særleg arbeide med område og tenester med stort bruksvolum, og tenester som har vesentleg innverknad for samfunnsdeltaking

Her burde nettaviser ringe en bjelle – men de er ikke på listen av prioriterte områder for tilsynet.

Anyways, la oss ta et kjapt eksempel på hva dette betyr i praksis.

Hvem er "denne mannen", Aftenposten?

På forsiden til Aftenposten.no kan man nå lese denne saken:

Dersom man er blind, ser man ikke at Donald Trump er avbildet, og at "denne mannen" henviser til Trump.

Har Aftenposten tatt høyde for at de som bruker skjermleser får dette med seg? La oss ta en titt på HTML-en:

<div class="df-article-content">
    <div class="df-img-container" style="width: 280px;">
      <div class="df-img-container-inner">
        <a href=
        "http://www.aftenposten.no/verden/Nye-tall-avdekker-hvor-livredde-vi-er-for-Donald-Trump-608117b.html">
        <img src=
        "http://ap.mnocdn.no/drfront/images/b869dc44492dda98457551d19781c502.jpg" alt=""
        title="" class="df-article-img" width="280" height="147" /><span class=
        "df-img-layer">&nbsp;</span></a>
      </div>
    </div>
    <h3><a href=
    "http://www.aftenposten.no/verden/Nye-tall-avdekker-hvor-livredde-vi-er-for-Donald-Trump-608117b.html">
    <span class="df-style-StikkTittel">Nye tall avdekker:</span></a></h3>
    <h3><a href=
    "http://www.aftenposten.no/verden/Nye-tall-avdekker-hvor-livredde-vi-er-for-Donald-Trump-608117b.html">
    <span class="df-blk df-fs-23">S&aring; mange nordmenn ville stemt p&aring; denne
    mannen</span></a></h3>
    <div class="df-clearer"></div>
</div>

Det eneste som gir beskjed om at dette har noe med Trump å gjøre, er URL-en til saken. I tillegg får en med skjermleser beskjed om at det er hele tre – 3! – lenker her, selv om alle går til samme sak.

Skal vi ta og rydde opp litt?

<div class="df-article-content">
	<div class="df-img-container" style="width: 280px;">
		<div aria-hidden="true" class="df-img-container-inner">
			<a href="http://www.aftenposten.no/verden/Nye-tall-avdekker-hvor-livredde-vi-er-for-Donald-Trump-608117b.html"><img alt="" class="df-article-img" height="147" src="http://ap.mnocdn.no/drfront/images/b869dc44492dda98457551d19781c502.jpg" title="" width="280"><span class="df-img-layer">&nbsp;</span></a>
		</div>
	</div>
	<a href="http://www.aftenposten.no/verden/Nye-tall-avdekker-hvor-livredde-vi-er-for-Donald-Trump-608117b.html" aria-label="Nye tall avdekker: S&aring; mange nordmenn ville stemt p&aring; Donald Trump">
		<h3><span class="df-style-StikkTittel">Nye tall avdekker:</span></h3>
		<h3><span class="df-blk df-fs-23">S&aring; mange nordmenn ville stemt p&aring; denne mannen</span></h3>
	</a>
	<div class="df-clearer"></div>
</div>

Her har jeg gjort følgende:

• Satt aria-hidden rundt bildet, siden denne uansett ikke formidler noe av verdi for skjermlesere, da slipper de å bli plaget av en lenke uten lenketekst
• Lagt om til én lenke på resten av overskriften, fremfor to
• Lagt til en aria-label på lenken rundt overskriften som formidler en annen tekst til de med skjermleser

De med skjermleser får nå med seg at det er snakk om Donald Trump.

En alternativ løsning, der man benytter alt-tekst på bildet og skjuler den tekstlige overskriften fra skjermlesere i stedet:

<div class="df-article-content">
	<div class="df-img-container" style="width: 280px;">
		<div class="df-img-container-inner">
			<a href="http://www.aftenposten.no/verden/Nye-tall-avdekker-hvor-livredde-vi-er-for-Donald-Trump-608117b.html">
				<img alt="Nye tall avdekker: S&aring; mange nordmenn ville stemt p&aring; Donald Trump" class="df-article-img" height="147" src="http://ap.mnocdn.no/drfront/images/b869dc44492dda98457551d19781c502.jpg" title="" width="280">
				<span class="df-img-layer">&nbsp;</span>
			</a>
		</div>
	</div>
	<a href="http://www.aftenposten.no/verden/Nye-tall-avdekker-hvor-livredde-vi-er-for-Donald-Trump-608117b.html" aria-hidden="true">
		<h3><span class="df-style-StikkTittel">Nye tall avdekker:</span></h3>
		<h3><span class="df-blk df-fs-23">S&aring; mange nordmenn ville stemt p&aring; denne mannen</span></h3>
	</a>
	<div class="df-clearer"></div>
</div>

Her finnes det mange veier i mål – hvis man vil.

Tilsynet hos DIFI bør kanskje sette i gang med å kreve at nettavisene leverer den samme opplevelsen for alle.