Fronteers — vakvereniging voor front-end developers

Er zijn in totaal 66 posts geplaatst onder de categorie webrichtlijnen. Je vindt ze hieronder.

Webrichtlijnen en nieuwe internationale regels: wat gaat er gebeuren?

Dankzij een aantal internationale ontwikkelingen is toegankelijkheid voor mensen met een beperking recentelijk hoger op de agenda komen te staan. Dat is dus goed nieuws!

Verplichting "Principe Universeel" kan komen te vervallen bij vervanging Webrichtlijnen

Enige tijd geleden is een Europese standaard voor de toegankelijkheid van ICT-producten en -diensten ontwikkeld. Deze standaard is op veel punten breder dan de webrichtlijnen, maar bevat net als de webrichtlijnen heel WCAG 2. Het Forum Standaardisatie is een procedure gestart om de verplichting (op overheidswebsites) voor het gebruik van de Webrichtlijnen te vervangen met de verplichting voor het gebruik van de nieuwe Europese standaard.

Commissie Webrichtlijnen weer actief

Het is een poosje stil geweest vanuit de Commissie Webrichtlijnen van Fronteers. Hoog tijd dus voor een update.

WCAG 2.0 : Betekenisvolle volgorde

Van volgorde van belangrijkheid naar betekenisvolle volgorde.

WCAG 2.0: Blokken omzeilen met of zonder skip links

Ze staan er nog steeds in, de skip links, bovenaan bij de afdoende technieken voor het WCAG2.0 succescriterium 2.4.1. Blokken omzeilen: Er is een mechanisme beschikbaar om blokken content die op meerdere webpagina's worden herhaald te omzeilen. (Niveau A). Is het echt nog nodig met al onze semantische markup en html5 om hiervoor nog extra markup toe te voegen?

WCAG 2.0 : Datatabellen

Volgens de Accessibility Monitor 2011 heeft 69% van de gemeenten toegankelijkheidsproblemen met datatabellen. Wat is er toch zo moeilijk aan het toegankelijk maken daarvan?

WCAG 2.0: Voorspelbaar gedrag en overlays

Richtlijn 3.2 Voorspelbaar: Maak het uiterlijk en de bediening van webpagina's voorspelbaar.

WCAG 2.0: Toegankelijke formulieren

Richtlijn 2.1 Toetsenbordtoegankelijk: Maak alle functionaliteit beschikbaar vanaf een toetsenbord.

WCAG 2.0: regels voor tekstschaalbaarheid achterhaald?

Richtlijn 1.4 Onderscheidbaar: Maak het voor gebruikers gemakkelijker om content te horen en te zien, waaronder scheiding van voorgrond en achtergrond.

WCAG 2.0: Richtlijn 1.3 Aanpasbare presentatie zonder verlies van informatie of structuur

Richtlijn 1.3 Aanpasbaar: Creëer content die op verschillende manieren gepresenteerd kan worden (bijvoorbeeld eenvoudiger lay-out) zonder verlies van informatie of structuur.

WCAG 2.0: Richtlijn 1.2 Op tijd gebaseerde media

Richtlijn 1.2 Op tijd gebaseerde media: Lever alternatieven voor op tijd gebaseerde media.

WCAG 2.0: Richtlijn 1.1 Tekstalternatieven

In navolging van de serie blogposts over webrichtlijnen vanaf nu een reeks artikelen over WCAG 2.0, die ook een integraal onderdeel gaan vormen van de Webrichtlijnen versie 2.

Seminar: Alles over WCAG 2.0 en Webrichtlijnen 2

De officiële Nederlandse vertaling van WCAG en Webrichtlijnen 2 zijn (bijna) klaar. Stichting Accessibility organiseert met W3C ter gelegenheid hiervan een seminar in twee delen over de belangrijkste verschillen en verbeteringen: Wat betekenen de nieuwe richtlijnen voor uw site of voor u als bouwer. Moeten er zaken aangepast of blijft alles hetzelfde t.o.v. de huidige versies van deze documenten. Het seminar vindt plaats op vrijdag 10 december. Op beide dagdelen is apart in te schrijven. Dit seminar is een vervolg op het seminar dat we vorig jaar december hebben georganiseerd.

Verslag Webrichtlijnendag 15 november in Amersfoort

Op 15 november was er een "terugkomdag" voor gemeenten die hadden deelgenomen aan een training webrichtlijnen. Er waren presentaties, workshops en een informatiemarkt. Mijn collega-fronteer Wim van Iersel en ik waren gevraagd om onze vereniging te vertegenwoordigen.

Publieke review Webrichtlijnen versie 2

Iedereen die affiniteit heeft met de Webrichtlijnen kan tijdens de publieke review van versie 2 tot en met 13 september 2010 een reactie geven op (onderdelen van) de Webrichtlijnen. Heb je dus wat tijd over? Neem dan even een kijkje op http://review.wrv2.nl/, waar goed uitgelegd wordt hoe je mee kunt helpen.

Aanpassing Normdocument Webrichtlijnen doorgevoerd

Op voorstel van de Normcommissie heeft het bestuur van de stichting Drempelvrij.nl vandaag een aantal wijzigingen vastgesteld, waarmee voortaan bij de inspecties van websites voor het Waarmerk Drempelvrij of de Webrichtlijnen rekening dient te worden gehouden.

Bijeenkomst op 2 september, in Leiden

In september zijn we te gast bij KeesTM uit Leiden. Het doel van deze avond is om front-enders en de Webrichtlijnen dichter bij elkaar te laten komen.

Webrichtlijn 86 en 87: Formulieren en JavaScript

Vermijd automatische doorverwijzing bij interactie met formulieren. (R-pd.13.4) Gebruik geen client-side script of formulieren als de enige manier om informatie op de site te bereiken. (R-pd.13.5)

Front-end vraagstukken: Best practice voor 'superscript'

In het kader van front-end vragen uit de vereniging (vragen blijven welkom) zoekt Jules Ernst advies over best practices inzake subscript en superscript.

Webrichtlijn 84 en 85: Volgorde en groeperen van invoervelden

Gebruik het tabindex attribuut om van de standaard tab-volgorde op formuliervelden af te wijken wanneer deze volgorde niet toereikend is voor correct gebruik van het formulier door toetsenbordgebruikers. (R-pd.13.2) Breng groepering van invoervelden aan door middel van het fieldset element. (R-pd.13.3)

Enquête verkoopbaarheid webrichtlijnen

Interessant om de discussies over de Webrichtlijnen hier te lezen! Ze sluiten goed aan op mijn onderzoek naar het verkoopbaar maken van de Webrichtlijnen.

Front-end vraagstukken: Communicatie over Webrichtlijnen

De commissie online community is bezig een forum voor Fronteers op te zetten. Omdat dit alles niet zo snel gaat als we graag zouden willen, en we toch af en toe vragen langs zien komen waarbij we het idee hebben van "dat zou perfect op het forum gevraagd kunnen worden," willen we tot de tijd dat het forum live gaat het weblog gebruiken om leden toch in staat te stellen in één keer een breed publiek te bereiken met hun front-end vragen. Mocht je zelf een front-end vraag uit de praktijk hebben waar je graag input vanuit de hele vereniging over zou hebben—algemeen, om een brede discussie over een onderwerp los te maken, danwel specialistisch, waarbij je zoekt naar iemand die ervaring heeft met het preciese onderwerp waar je meer over wil weten—stuur hem dan in. We zullen regelmatig één van de ingezonden vragen uitkiezen om op het weblog te plaatsen.

Webrichtlijn 83: Invoervelden en labels

Gebruik het label element om tekst expliciet met een invoerveld in een formulier te associëren. (R-pd.13.1)

Webrichtlijn 82: Het gebruik van frames

Gebruik geen frames op websites. Dit geldt voor zowel reguliere frames binnen framesets, als zogenaamde iframes. (R-pd.12.1)

Webrichtlijn 79, 80 & 81: Tabellen voor lay-out

Bij het aanpassen van een bestaande website: gebruik CSS voor de presentatie en lay-out van webpagina’s en zie af van tabellen voor lay-out. (R-pd.11.8) Bij het gebruik van tabellen voor lay-out: gebruik niet meer dan één tabel en gebruik zoveel mogelijk CSS voor de vormgeving van deze tabel. (R-pd.11.9) Bij het gebruik van tabellen voor lay-out: pas geen toegankelijkheidsmarkup toe. (R-pd.11.10)

Webrichtlijn 73 t/m 78: Anatomie en toegankelijkheid van een tabel

Gebruik het th (table header) element voor het beschrijven van een kolom of rij in een tabel met relationele informatie. (R-pd.11.2) Groepeer rijen met alleen th (table header) cellen met het thead (table head) element. Groepeer de rest van de tabel met het tbody (table body) element. (R-pd.11.3) Gebruik het scope attribuut voor het associëren van tabellabels (th cellen) met kolommen of rijen. (R-pd.11.4) Gebruik het header [sic] en id element [sic] voor het associëren van tabellabels (th cellen) met individuele cellen in complexe tabellen. (R-pd.11.5) Geef afkortingen voor tabellabels (th cellen) via het abbr (abbreviation) attribuut wanneer de lengte van de inhoud van het tabellabel zodanig van lengte is dat herhaling in een spraakbrowser irritatie kan wekken. (R-pd.11.6) Gebruik het caption element of heading markup voor het geven van een koptekst boven een tabel. (R-pd.11.7)

Webrichtlijnen verplichten?

Heet van de pers: SP-kamerlid Ronald van Raak wil dat de Webrichtlijnen verplicht worden voor alle overheden.

Webrichtlijn 72: Tabellen voor relationele informatie

Gebruik tabellen voor het weergeven van relationele informatie en niet voor lay-out. (R-pd.11.1)

Webrichtlijn 69, 70 & 71: Kleurgebruik

Zorg ervoor dat communicatieve elementen hun betekenis niet uitsluitend door kleur overbrengen. (R-pd.10.1) Wees consistent met kleurgebruik bij het geven van betekenis. (R-pd.10.2) Zorg voor voldoende helderheidscontrast tussen tekst- en achtergrondkleur. (R-pd.10.3)

Webrichtlijn 67 & 68: Richtlijnen voor het gebruik van CSS

CSS dient in gelinkte bestanden geplaatst te worden en niet gemengd te worden met de HTML broncode. (R-pd.9.1) Pagina's dienen bruikbaar te blijven wanneer CSS door een webbrowser niet ondersteund wordt. (R-pd.9.2)

Webrichtlijn 63 t/m 66: Links naar downloadbare bestanden

Bij het aanbieden van downloadbare bestanden, informeer de bezoeker over hoe deze te downloaden en vervolgens te gebruiken. (R-pd.8.20) Serveer bestanden met het correcte MIME type. (R-pd.8.21) Open links naar downloadbare bestanden niet in een automatisch nieuw venster. (R-pd.8.22) Serveer downloadbare bestanden niet met opzet een onbekend of incorrect MIME type om de browser tot een bepaald gedrag te dwingen. (R-pd.8.23)

Aanpassing Normdocument Webrichtlijnen

  • Normcommissie Stichting Waarmerk drempelvrij
  • 7 november 2008

In de praktijk blijkt het soms een onhaalbare opgave om een bestaande website volledig in overeenstemming met de Webrichtlijnen te brengen. Dat doet zich met name voor bij hele grote websites of websites met heel veel oude content. De kosten die verbonden zijn aan het aanpassen van dergelijke oude content kunnen dan in de praktijk te hoog zijn. Een officiële toets door een van de inspectie-instellingen van de Stichting Waarmerk drempelvrij zal in de huidige situatie daarom altijd negatief uitpakken.

Webrichtlijn 59 t/m 62: Links naar e-mailadressen

Links naar e-mailadressen: het e-mailadres waaraan het te versturen bericht is gericht dient zichtbaar te zijn in de linktekst. (R-pd.8.16) Links naar e-mailadressen: de URL in het href attribuut van een link naar een e-mailadres, mag alleen het mailto protocol en een e-mailadres bevatten. (R-pd.8.17) Pas geen technische maatregelen toe op de website om een e-mailadres te verhullen voor spam robots. (R-pd.8.18) Ga uiterst voorzichtig om met het publiceren van e-mailadressen van bezoekers van de website. Informeer de bezoeker over welke gegevens worden gepubliceerd op de site, of publiceer het e-mailadres van de bezoeker niet. (R-pd.8.19)

Webrichtlijn 57 & 58: Links en nieuwe vensters

Links op overheidswebsites dienen niet zonder waarschuwing automatisch nieuwe vensters te openen. (R-pd.8.14) Open geen automatische nieuwe vensters, behalve wanneer de locatie van de link behulpzame informatie bevat die nodig kan zijn tijdens een belangrijk, niet te onderbreken proces. (R-pd.8.15)

Webrichtlijn 55 & 56: Links voor seriële navigatie

Geef blinde bezoekers extra mogelijkheden om lange lijsten met links over te slaan. (R-pd.8.12) Geef boven aan pagina’s met veel onderwerpen een pagina-index met links om naar de verschillende onderwerpen te navigeren. (R-pd.8.13)

Webrichtlijn 54: Sneltoetskoppelingen

Ontzie het accesskey attribuut. Als toch besloten wordt dit attribuut toe te passen, gebruik het alleen op links die door de hele site onveranderd blijven (bijvoorbeeld hoofdnavigatie) en beperk de sneltoetscombinaties tot nummers. (R-pd.8.11)

Webrichtlijn 52 & 53: Tabben tussen links

Voorzie in een logische volgorde van de links op de pagina. Gebruik het tabindex attribuut om van de standaard tabvolgorde van links af te wijken wanneer deze volgorde niet toereikend is voor correct gebruik van de pagina door toetsenbordgebruikers. (R-pd.8.9) Maak het tabben naar links niet onmogelijk. Verwijder niet de focus rectangle rondom een link of de mogelijkheid tot focus op een link. (R-pd.8.10)

Webrichtlijnen zoekt proefkonijnen

Zoals bij menig front-end ontwikkelaar bekend zal zijn, heeft de Nederlandse overheid Webrichtlijnen ontwikkeld. Voor toegankelijke, snelle en beter te onderhouden websites, zullen alle websites van de Rijksoverheid eind 2010 aan deze Webrichtlijnen moeten voldoen.

Webrichtlijn 51: Kleuren en stijlen van links

Links moeten duidelijk te onderscheiden zijn van andere tekst. (R-pd.8.8)

Webrichtlijn 48, 49 & 50: Links en client-side scripts

Bij het gebruik van client-side script in combinatie met een link: maak de scriptfunctionaliteit een uitbreiding op de basisfunctionaliteit van de link. (R-pd.8.5) Bij het gebruik van client-side script in combinatie met een link: indien de link nergens naartoe leidt, confronteer de bezoeker zonder ondersteuning voor client-side script dan niet met een niet-werkende link. (R-pd.8.6) Bij het gebruik van client-side script in combinatie met een link: indien noodzakelijk, gebruik client-side script als een uitbreiding op server-side functies. (R-pd.8.7)

Webrichtlijn 44, 45, 46 & 47: Linktekst

Beschrijf niet het mechanisme achter het volgen van een link. (R-pd.8.1) Schrijf heldere, beschrijvende tekst voor links. (R-pd.8.2) Gebruik het minimum aan tekst dat nodig is om te begrijpen waar de link naartoe leidt. (R-pd.8.3) Geef voldoende informatie over de bestemming van een link om onaangename verrassingen voor de bezoeker te voorkomen. (R-pd.8.4)

Webrichtlijn 42 & 43: Achtergrondafbeeldingen

Decoratieve afbeeldingen dienen zoveel mogelijk door CSS geplaatst te worden. Informatieve afbeeldingen dienen door HTML geplaatst te worden. (R-pd.7.6) Het gebruik van CSS Image Replacement technieken die worden toegepast op essentiële informatie wordt afgeraden. (R-pd.7.7)

Webrichtlijn 39: Het longdesc attribuut en d-links

Gebruik geen d-links op overheidswebsites. Het gebruik van het longdesc (long description) attribuut verdient de voorkeur wanneer de alternatieve tekst op het alt attribuut ontoereikend is voor het begrip van de informatie in de afbeelding. (R-pd.7.3)

Webrichtlijn 37, 38, 40 & 41: Het alt attribuut

Het alt (alternative) attribuut dient te worden gebruikt op ieder img (image) en area element en dient te worden voorzien van een effectieve alternatieve tekst. (R-pd.7.1) Gebruik geen alt attribuut voor het oproepen van tooltips. (R-pd.7.2) Afbeeldingen die staan geplaatst binnen een link dienen een niet-lege alternatieve tekst te hebben om bezoekers die de afbeelding niet zien in staat te stellen de link te volgen. (R-pd.7.4) Geef bij het gebruik van image maps voor zowel het img element als ieder area element een effectieve alternatieve tekst aan via het alt attribuut. (R-pd.7.5)

Webrichtlijn 36: Volgorde van belangrijkheid

Zet de inhoud van de pagina in de HTML broncode op volgorde van belangrijkheid. (R-pd.6.2)

Webrichtlijn 35: De DocType Declaratie

Elk HTML of XHTML document moet beginnen met een geldige DocType Declaratie. (R-pd.6.1)

Webrichtlijn 34: Open standaarden

In het geval dat belangrijke informatie via een gesloten standaard wordt aangeboden, dient men dezelfde informatie ook via een open standaard aan te bieden. (R-pd.5.1)

Webrichtlijn 27 t/m 33: URL's

Produceer unieke, onveranderende URL's (R-pd.4.1) Dynamisch gegenereerde URL's dienen nog steeds naar dezelfde inhoud te verwijzen als inhoud wordt gewijzigd of toegevoegd. (R-pd.4.2) Vermijd het gebruik van sessies in URL's. (R-pd.4.3) Zorg voor doorverwijzing naar de nieuwe locatie bij het verplaatsen van informatie. (R-pd.4.4) Automatische doorverwijzing dient, indien mogelijk, uitgevoerd te worden door de server. (R-pd.4.5) Gebruik vriendelijke URL's, die leesbaar en herkenbaar zijn. (R-pd.4.6) Zet een leesbare, uitbreidbare directory-structuur op. (R-pd.4.7)

Webrichtlijn 27: betekenisvolle namen voor id en class attributen

Geef betekenisvolle namen aan id en class attributen. (R-pd.3.15)

Webrichtlijn 25 & 26: Lijsten

Gebruik ol (ordered list) en ul (unordered list) elementen voor het aangeven van lijsten. (R-pd.3.13) Gebruik het dl (definition list), het dt (definition term) en dd (definition data) element voor het aangeven van een lijst met definities. (R-pd.3.14)

Webrichtlijn 22, 23 & 24: Referenties en citaten

Gebruik het cite element voor referenties naar personen en titels. (R-pd.3.10) Vermijd het gebruik van het q (quotation) element. (R-pd.3.11) Gebruik het blockquote element voor het aangeven van (lange) citaten. (R-pd.3.12)

Webrichtlijn 19, 20 & 21: Tekstopmaak, definities, wijzigingen, superscript en subscript

Gebruik het dfn (definition) element voor het aangeven van termen, elders gedefiniëerd in een definitielijst. (R-pd.3.7) Gebruik het ins (insertion) en del (deletion) element voor het aangeven van regelmatige wijzigingen in de inhoud van een pagina. (R-pd.3.8) Vermijd het gebruik van het sup (superscript) en sub (subscript) element waar mogelijk. (R-pd.3.9)

Webrichtlijn 18: Tekstopmaak, afkortingen

Gebruik het abbr (abbreviation) element voor afkortingen indien er onduidelijkheid zou kunnen ontstaan over de betekenis ervan, de afkorting een zeer belangrijke rol speelt in de tekst of wanneer de afkorting niet voorkomt in het Nederlands woordenboek. (R-pd.3.6)

Webrichtlijn 17: Tekstopmaak, het aangeven van nadruk

Gebruik het em (emphasis) en strong element voor het aangeven van nadruk. (R-pd.3.5)

Webrichtlijn 16: Paragrafen, nieuwe regels en alinea’s

Gebruik het p (paragraph) element voor het aangeven van paragrafen. Gebruik niet het br (linebreak) element voor het scheiden van paragrafen. (R-pd.3.4)

Webrichtlijn 13, 14 & 15: Beschrijvende markup, kopregels

Schrijf zowel grammaticaal correcte, als beschrijvende markup. (R-pd.3.1) Gebruik markup voor kopregels die de hiërarchie van de informatie op de pagina uitdrukken. (R-pd.3.2) Sla in de markup geen niveaus in de hiërarchie van kopregels over. (R-pd.3.3)

Webrichtlijn 12: Web Content Accessibility Guidelines (WCAG) 1.0

Bouw een website volgens de richtlijnen van de Web Content Accessibility Guidelines (WCAG 1.0) van het W3C. (R-pd.2.9)

Webrichtlijn 10 & 11: Gebruik ECMAScript en het W3C DOM volgens de specificatie

Indien client-side script wordt gebruikt, gebruik ECMAScript volgens de specificatie. (R-pd.2.7) Indien men elementen in de HTML hiërarchie manipuleert, maak gebruik van de W3C DOM volgens de specificatie. (R-pd.2.8)

Webrichtlijn 9: Cascading Style Sheets (CSS) Level 2.1

Gebruik CSS Level-2.1 volgens de W3C specificatie voor het vormgeven van overheidswebsites. (R-pd.2.6)

Webrichtlijn 7 & 8: Gebruik de Strict variant voor nieuwe websites, en ontwijk de Frameset variant

Bij de bouw van een nieuwe website: gebruik van HTML 4.01 of XHTML 1.0 de Strict variant. (R-pd.2.4) Gebruik geen frames op overheidswebsites. Gebruik daarom ook niet van HTML 4.01 of XHTML 1.0 de Frameset variant. (R-pd.2.5)

Webrichtlijn 6: Gebruik bij voorkeur alleen de Strict variant (R-pd.2.3)

Bij het aanpassen van een bestaande website: gebruik van HTML 4.01 of XHTML 1.0 alleen de Transitional variant als het gebruik van de Strict variant onmogelijk of onwenselijk is. (R-pd.2.3)

Webrichtlijn 5: Gebruik geen deprecated markup (R-pd.2.2)

Gebruik geen markup die in de W3C specificaties staat aangemerkt als deprecated (achterhaald). (R-pd.2.2)

Webrichtlijn 4: Gebruik HTML 4.01 of XHTML 1.0 (R-pd.2.1)

Gebruik HTML 4.01 of XHTML 1.0 volgens de W3C specificaties voor de markup van overheidswebsites. (R-pd.2.1)

Webrichtlijn 3: Niet rekenen op optionele technologie (R-pd.1.3)

Maak de functie van de website niet afhankelijk van optionele technologie, zoals CSS en client-side script: optionele technologie dient de informatie op de site en het gebruik ervan te complementeren en niet de toegang ertoe te belemmeren wanneer deze technologie niet ondersteund wordt. (R-pd.1.3)

Webrichtlijn 2: Gelaagd bouwen (R-pd.1.2)

Deze week de tweede richtlijn: Bouw websites volgens het principe van gelaagd bouwen. (R-pd.1.2)

Webrichtlijn 1: Scheiding tussen structuur en vormgeving (R-pd.1.1)

Het leek ons leuk (Gelukkig nieuwjaar overigens!) om een discussie aan te zwengelen over de webrichtlijnen van de overheid. Niet in het wilde weg: wat vind je nou van die richtlijnen, maar juist per richtlijn: hoe waardevol, correct, belangrijk is hij? 125 richtlijnen, iedere week 1. Zo zijn we wel even bezig! :P Deze week de eerste richtlijn: Houd structuur en vormgeving zoveel mogelijk gescheiden: gebruik HTML of XHTML voor de structuur van de site en CSS voor de vormgeving ervan. (R-pd.1.1)