{"id":230361,"date":"2022-05-27T12:30:19","date_gmt":"2022-05-27T10:30:19","guid":{"rendered":"http:\/\/makeitmax.design\/?p=230361"},"modified":"2022-05-27T12:34:03","modified_gmt":"2022-05-27T10:34:03","slug":"digitale-toegankelijkheid-wat-heb-je-nodig","status":"publish","type":"post","link":"https:\/\/makeitmax.design\/nl\/digitale-toegankelijkheid-wat-heb-je-nodig\/","title":{"rendered":"Digitale toegankelijkheid: wat heb je nodig voor een toegankelijke website?"},"content":{"rendered":"

Wat is digitale toegankelijkheid?<\/span><\/h2>\n

Digitale toegankelijkheid (of accessibility in het Engels) betekent dat een digitaal product of dienst op meerdere manieren en voor alle bevolkingsgroepen te gebruiken is. Denk maar eens aan een ingang van een groot gebouw. Soms zie je een trap met daarnaast een helling, <\/span>de helling maakt het gebouw toegankelijk voor mensen die gebruik maken van een rolstoel<\/b>.<\/span><\/p>\n

Zo is dat ook met digitale producten als websites. Je staat er niet altijd bij stil, maar<\/span> een website navigeren met muis en toetsenbord is niet voor iedereen zo vanzelfsprekend<\/b>. Daarom wil je de digitale toegankelijkheid van een website op zoveel mogelijk manieren vergroten.<\/span><\/p>\n

Wanneer is digitale toegankelijkheid voor een website nodig?<\/span><\/h2>\n

Natuurlijk zou je altijd een voor iedereen toegankelijke website moeten ontwerpen. Toch is dat in de praktijk (helaas) nog vaak niet het geval. Bij sommige websites ligt de prioriteit voor digitale toegankelijkheid hoger, denk aan websites voor (semi-) overheidsinstanties zoals Rijksoverheid, ziekenhuizen en gemeenten. Maar ook scholen, vervoersbedrijven en wooncorporaties moeten een hoge mate van digitale toegankelijkheid hebben.<\/span><\/p>\n

Voor een kledingwebshop lijkt het misschien minder noodzakelijk,<\/span> maar wees je er wel van bewust dat je mogelijk een grote groep uitsluit<\/b> die anders maar al te graag je dienst of product zouden gebruiken.<\/span><\/p>\n

De mate waarin je de digitale toegankelijkheid van een website vergroot kent ook grote verschillen Zo is het voor (semi-) overheidsinstanties <\/span>tegenwoordig verplicht volledig aan de <\/b>WCAG 2.2<\/b><\/a> regels te voldoen. <\/b>In de WCAG (Web Content Accessibility Guidelines) zie je in een oogopslag aan welke digitale toegankelijkheidsrichtlijnen een bepaalde website moet voldoen.<\/span><\/p>\n

In het volgende hoofdstuk leggen we uit <\/span>welke elementen bijdragen aan het vergroten van de digitale toegankelijkheid <\/b>van je website.<\/span><\/p>\n

Elementen voor een digitaal toegankelijke website<\/span><\/h2>\n

Het visuele gedeelte lijkt erg belangrijk tijdens het ontwerpen van je website, maar dit is slechts het puntje van de ijsberg voor de digitale toegankelijkheid! Hieronder beschrijven we met <\/span>welke visuele en codeaanpassingen<\/b> je een website digitaal toegankelijk maakt.<\/span><\/p>\n

We nemen je mee door de volgende elementen:<\/b><\/p>\n

Contrast<\/span><\/a><\/p>\n

Diapositief of dark mode<\/span><\/a><\/p>\n

Layout<\/span><\/a><\/p>\n

Cards<\/span><\/a><\/p>\n

Menu<\/span><\/a><\/p>\n

Buttons<\/span><\/a><\/p>\n

Lettertypes<\/span><\/a><\/p>\n

Visuele feedback – interacties<\/span><\/a><\/p>\n

Extra hulpmiddelen<\/span><\/a><\/p>\n

Leeslijn<\/span><\/a><\/p>\n

Voorleesfunctie – screenreader<\/span><\/a><\/p>\n

Tab functie<\/span><\/a><\/p>\n

Skip to content<\/span><\/a><\/p>\n

Content<\/span><\/a><\/p>\n

Contrast<\/span><\/h3>\n

Voor mensen met een visuele beperking is het contrast op een beeldscherm heel belangrijk. Ze moeten kunnen zien wat ze selecteren en de tekst moet duidelijk en leesbaar zijn. Met de <\/span>WebAIM Contrast Checker<\/span><\/a> controleer je of het kleurencontrast op jouw website afdoende <\/b>is voor mensen met bijvoorbeeld kleurenblindheid. Tevens controleert het programma ook op andere punten zoals de tekstgrootte.<\/span><\/p>\n

\"Tekst<\/p>\n

Diapositief of dark mode<\/b><\/h4>\n

Dark mode op je website werkt minder vermoeiend voor de ogen. Anno 2022 gebruiken mensen steeds vaker deze modes. Hebben ze de voorkeur voor dark mode aangegeven in hun browser, dan verwachten ze ook dat websites hierin voorzien.<\/span><\/p>\n

Je zet dit eenvoudig op <\/span>door een functie op je website te implementeren waarbij het switcht tussen light en dark mode<\/b>. Dan heb je ook zelf het design en het effect op je huisstijl ervan in eigen handen. Een extern programma maakt alle kleuren namelijk diapositief. Blauw wordt dan oranje en rood wordt lichtblauw. <\/span><\/p>\n

\"Voorbeeld<\/p>\n

Door middel van een CSS media query pas je op een vrij eenvoudige manier de stijl aan van een website met de\u00a0 \u2018light of dark mode\u2019 voorkeur van de bezoeker.<\/span><\/p>\n

Voorbeeld CSS only code:<\/strong><\/p>\n

body{
\ncolor: <\/span>#282828;<\/span>
\nbackground: <\/span>#FFF;<\/span>
\n}<\/code>
\n
\na {
\ncolor: <\/span>#0033cc;<\/span>
\n}<\/code>
\n
\n@media (prefers-color-scheme: dark) {
\nbody {
\ncolor: <\/span>#FFF<\/span>
\nbackground: <\/span>#282828;<\/span>
\n}<\/code>
\n
\nbody a {
\ncolor: <\/span>#FFF;<\/span>
\n}
\n}<\/code><\/p>\n

Layout<\/span><\/h3>\n

Veel mensen met een hogere mate van visuele beperking gebruiken een screenreader. Deze software leest een website voor aan de bezoeker. Je kunt je voorstellen dat <\/span>de volgorde waarin het de content voorleest dus heel belangrijk<\/b> is. Je houdt hier dan ook al rekening mee tijdens de ontwerpfase van je website wil je digitale toegankelijkheid nastreven.<\/span><\/p>\n

Cards<\/b><\/h4>\n

Cards zijn elementen op een website die content onderdelen die bij elkaar horen bundelt. Denk aan een nieuwsitem met een titel, foto, datum en link naar het nieuwsbericht. Het beste is om een card zo te ontwerpen de link, of call-to-action, een duidelijk element vormt. Dit is herkenbaar en maakt het voor screenreaders makkelijker voor te lezen. Is de gehele kaart aanklikbaar, dan komt de screenreader daarmee in de problemen met als gevolg dat een bezoeker de link erachter voorgelezen krijgt. En daar wordt niemand veel wijzer van!<\/span><\/p>\n

\"Kaart<\/p>\n

<\/h4>\n

Menu<\/b><\/h4>\n

Alleen icoontjes als menu staat misschien mooi, maar het voegt weinig toe aan de digitale toegankelijkheid van je website. <\/span>Gebruik dus nooit alleen iconen<\/b> (zoals een hamburger, schoen of kalender),<\/span> maar onderbouw ze altijd met tekst.<\/b> Daarmee maak je het voor iedereen begrijpelijk en dus toegankelijk.<\/span><\/p>\n

\"Twee<\/p>\n

Ook wil je dat gebruikers duidelijk zien waar in het menu ze zich bevinden ten opzichte van de andere menu-items. Voor een screenreadergebruikers is het handig dat het menu eerst wordt voorgelezen. Dus plaats het menu bij voorkeur bovenaan.<\/span><\/p>\n

Buttons<\/b><\/h4>\n

Een button (knop) moet eruit zien als een button, en een link als een link. Klinkt simpel, toch? Het zal je verbazen hoe vaak websites hiermee de mist in gaan. In de basis is een button een knop waarmee je een bepaalde actie uitvoert op een website. Denk aan een login button, verzend button of (de soms alles behalve gebruiksvriendelijke) pop-ups. Deze acties onderscheiden zich van buttons met \u2018Ga naar onze blog\u2019 of \u2018Bekijk item\u2019, die brengen je namelijk naar een andere plek op de website.<\/span><\/p>\n

Het verschil is soms lastig te bepalen. Belangrijkste is dat je <\/span>door de gehele website consistent bent met je buttons en links. In zowel kleur, design en bewoording.<\/b><\/p>\n

\"Log<\/p>\n

<\/h4>\n

Lettertypes (fonts)<\/b><\/h4>\n

Het ene lettertype (of font op z\u2019n Engels) is beter leesbaar dan het andere. Voor het vergroten van de digitale toegankelijkheid van je website let je zowel op <\/span>de vorm en doorsnede, als op de hoogte, breedte en afstand tot de volgende letter.<\/b> Een dun (light) lettertype is over het algemeen minder goed leesbaar dan een vettere.<\/span><\/p>\n

Kies geen lettertypes die zeer contrasterende vormen hebben, zoals Bodoni. De lezer moet zo min mogelijk moeite hebben om letters te herkennen. En hoe meer karakter er in een lettertype zit, des te slechter deze vaak te lezen is.<\/span><\/p>\n

\"3<\/p>\n

Voor mensen met dyslexie is veel contrast tussen de letters dan juist wel weer belangrijk. Een \u2018o\u2019 mag bijvoorbeeld niet teveel op een \u2018a\u2019 lijken. Sommige lettertypes gebruiken een ronde \u2018a\u2019 zoals Comfortaa. Hierbij lijkt de letter teveel op een \u2018o\u2019 en <\/span>wat de digitale toegankelijkheid flink onderuithaalt voor mensen met dyslexie.<\/b><\/p>\n

\"Letter

De \u2018o\u2019 en de \u2018a\u2019 van Comfortaa<\/p><\/div>\n

 <\/p>\n

Visuele feedback – interacties<\/b><\/h4>\n

Om zoveel mogelijk rekening te houden met alle gebruikers, moet je ook de groep bedienen die tussen goedziendheid en blindheid in zit. <\/span>De mate van slechtziendheid kan namelijk sterk wisselen<\/b>. Dat kan het maken van een digitaal toegankelijke website uitdagender maken, maar met de elementen uit dit artikel ben je al goed op weg!<\/span><\/p>\n

We hebben het al gehad over contrast en lettertypes, maar voor deze groep is de visuele feedback essentieel voor de digitale toegankelijkheid. De locatie van je muis of tab (<\/span>Tabs worden\u00a0 in het hoofdstuk <\/span><\/i>Tab functie<\/span><\/i><\/a>)<\/span><\/i> moet duidelijk naar voren komen. De feedback met het gebruik van tabs noemen we \u2018Focus state\u2019. Met het gebruik van een muis noemen we het \u2018Hover state\u2019. Wanneer je met de tab of muis over een element gaat <\/span>wil je dat een klikbaar element zichzelf bij wijze van aankondigt.<\/b> Een praktische methode laten oplichten van een element door middel van een andere kleur (die uiteraard voldoende contrasteert).<\/span><\/p>\n

\"2<\/p>\n

Extra hulpmiddelen<\/span><\/h3>\n

Leeslijn<\/b><\/h4>\n

Sommige gebruikers hebben baat bij een soort liniaal om teksten makkelijker te lezen. Zie het als een boekenlegger die je van boven naar beneden over een bladzijde schuift. Je realiseert zo\u2019n hulpmiddel met een klein beetje JavaScript, HTML en CSS. <\/span><\/p>\n

Hierbij een voorbeeld:<\/strong><\/p>\n

HTML<\/b><\/h4>\n

<button<\/span> class<\/span>=\"active_liniaal\" <\/span>aria-label<\/span>=\"open liniaal\"<\/span>>Activeer een liniaal<\/button<\/span>>
\n<\/code><\/p>\n

<\/div>\n

 <\/p>\n

CSS<\/b><\/h4>\n

body{
\n#liniaal {
\nposition: <\/span>absolute;<\/span>
\nheight: <\/span>10px;<\/span>
\nwidth: <\/span>100vw;<\/span>
\nleft: <\/span>0px!important;<\/span>
\nborder-radius: <\/span>50%;<\/span>
\nborder: <\/span>2px solid black;<\/span>
\nborder-radius: <\/span>0px;<\/span>
\nbackground: <\/span>black;<\/span>
\nbox-sizing: <\/span>border-box;<\/span>
\nz-index: <\/span>9;<\/span>
\npointer-events: <\/span>none;<\/span>
\ntransition: <\/span>opacity 0.3 ease-in-out;<\/span>
\n}<\/code>
\n#liniaal.inactive{
\nopacity: <\/span>0;<\/span> \/* state before activating the liniaal *\/<\/span>
\n}<\/code>
\n#liniaal.active{
\nopacity: <\/span>1;<\/span> \/* state after activating the liniaal *\/<\/span>
\n}<\/code><\/p>\n

 <\/p>\n

JS<\/b><\/h4>\n

$( document ).ready<\/span>(function<\/span>() {
\n\/\/ button onclick toggleClass .active to make the liniaal visible<\/span>
\n$(\".active_liniaal\"<\/span>).click<\/span>(function<\/span>(){
\n$(\".inactive\"<\/span>).toggleClass<\/span>(\"active\"<\/span>);
\n});
\n<\/code>
\n\/\/ liniaal div follows mouse movement<\/span>
\nlet<\/span> liniaal<\/span> = <\/span>document.getElementById<\/span>('liniaal'<\/span>);
\n<\/code>
\nconst<\/span> onMouseMove<\/span> =<\/span> (e<\/span>) =><\/span>{
\nliniaal<\/span>.style<\/span>.top = <\/span>e<\/span>.pageY + <\/span>'px'<\/span>;
\n}
\n<\/code>
\ndocument.addEventListener<\/span>('mousemove'<\/span>, onMouseMove<\/span>);
\n});
\n<\/code><\/p>\n

<\/h4>\n

 <\/p>\n

Voorleesfunctie – screenreader<\/b><\/h4>\n

Bij het vergroten van de digitale toegankelijkheid van je website wil je in je code al rekening houden met screenreaders. <\/span>De manier waarop je de HTML opbouwt kan hierin een groot verschil maken.<\/b> Het volledig programmeren van een screenreader die werkt voor iedere bezoeker is veel werk, gelukkig zijn hiervoor ook externe libraries beschikbaar.<\/span><\/p>\n

Vaak is het echter zo dat deze mensen al beschikken over een eigen software. <\/span>Implementeer in ieder geval de volgende HTML punten voor een digitaal toegankelijke website voor screenreaders:<\/b><\/p>\n

De Title Tag<\/span><\/h5>\n

Gebruik een duidelijke <title><\/span>Hier komt unieke en informatieve titel<\/span><\/i><\/title> tag. Dit is het eerste wat gebruikers te horen krijgen wanneer ze op een pagina landen.<\/span><\/p>\n

De titel komt in de <head> van de HTML te staan. <\/span><\/p>\n

Landmarks<\/span><\/h5>\n

Niet alleen voor een nette code, maar ook <\/span>voor de digitale toegankelijkheid wil je duidelijke HTML5-structuur gebruiken<\/b>. Hier zijn wel voorbeelden van te vinden die je kunt combineren met ARIA landmark. Bijvoorbeeld bij het gebruiken van een <nav> sectie vertelt de screenreader de gebruiker dat dit een navigatie-element betreft.<\/span><\/p>\n

Met een ARIA label licht je dit nog verder uit zodat de gebruiker weet dat het om een hoofdnavigatie gaat. <\/span>Daarnaast is het met de ARIA landmarks mogelijk om een screenreader iets meer over een Div te vertellen. <\/b>Een Div kan normaal gesproken niet door een screenreader worden uitgelezen, nu wel. <\/span><\/p>\n

Voorbeeldcode:<\/strong><\/p>\n

<nav <\/span>aria-label<\/span>=\"hoofd navigatie\"<\/span>>
\n<ul<\/span>>
\n<li<\/span>>Homepagina<\/li<\/span>>
\n<li<\/span>>Over ons<\/li<\/span>>
\n<li<\/span>>Contact<\/li<\/span>>
\n<\/ul<\/span>>
\n<\/nav<\/span>><\/code>
\n
\n<footer<\/span>>
\n<div <\/span>class<\/span>=\"adresgegevens\" <\/span>aria-label<\/span>=\"Adresgegevens\"<\/span>>
\n<span<\/span>>Plaats<\/span<\/span>>
\n<span<\/span>>Straat<\/span<\/span>>
\n<\/div<\/span>>
\n<\/footer<\/span>><\/code><\/p>\n

(<\/span>Bron<\/span><\/a>)<\/span><\/p>\n

Roles<\/span><\/h5>\n

Soms komt het voor dat een link op een website niet gedefinieerd is als een <button> met HTML, maar inline staat met een <a> tag. <\/span>Om de screenreader toch duidelijk te maken dat dit een button betreft, kun je er een \u2018role\u2019 aan toevoegen. <\/b>Dit kan overigens ook met navigaties, enzovoort. <\/span><\/p>\n

Voorbeeldcode:<\/strong><\/p>\n

<a<\/span> href<\/span>=\"#\" <\/span>role<\/span>=\"button\"<\/span>>button link<\/a<\/span>>
\n<div<\/span> role<\/span>=\"navigation\" <\/span>aria-label<\/span>=\"hoofd\"<\/span>><\/div<\/span>>
\n<\/code><\/p>\n

(<\/span>Bron<\/span><\/a>)<\/span><\/p>\n

Afbeeldingen leesbaar maken<\/span><\/h5>\n

Title en alt tags worden vaak vergeten of niet serieus genomen bij het uploaden van afbeeldingen op een website. <\/span>Een screenreader gebruikt de alt tags om een gebruiker iets te vertellen over een afbeelding<\/b>. Sla je deze over, dan kan er soms flink wat context ontbreken voor de screenreadergebruikers.\u00a0<\/span><\/p>\n

Vul dus altijd netjes je tags in en omschrijf de afbeelding zo duidelijk mogelijk.\u00a0 En sta dan even stil bij de digitale toegankelijkheid voor \u00e1lle gebruikers. <\/span>Bonus: <\/b>het invullen van de title en alt tags draagt bij aan de Image Search Optimization voor Google. Win-win, dus!<\/span><\/p>\n

De title tag wordt alleen weergeven als een tooltip wanneer je met je muis over het element gaat. Deze gebruik je in principe alleen wanneer het logisch is en goed uitkomt.<\/span><\/p>\n

Je alt tags zijn dus onmisbaar voor screenreaders. Tevens gebruikt Google deze tags om de afbeelding beter te begrijpen, en deze vervolgens op de juiste plekken voor te schotelen aan potenti\u00eble gebruikers. Zie de alt tag als een alternatief stukje tekst. <\/span>Mocht de afbeelding niet voor iedereen goed zichtbaar zijn<\/b>, dan is het extra fijn voor deze gebruiker als er een duidelijke alt tag achter staat.<\/span><\/p>\n

Voorbeeldcode:<\/strong><\/p>\n

<img<\/span> src<\/span>=\"oranje-voetbal.jpg\" <\/span>title<\/span>=\"\" <\/span>alt<\/span>=\"Oranje voetbal op een groen voetbalveld\"<\/span>\/>
\n<\/code><\/p>\n

<\/h5>\n

 <\/p>\n

Navigatie\u00a0<\/span><\/h5>\n

Soms wordt er gebruik gemaakt van zo\u2019n mooi megamenu, supertof! <\/span>Alleen zijn deze vaak slecht toegankelijk voor screenreaders. <\/b>Deze groep zal dus hoogstwaarschijnlijk de website op een van de volgende manier doorlopen:<\/span><\/p>\n

Headings<\/h5>\n

Correct gebruik van een hi\u00ebrarchie in de headings <h1> t\/m <h6> maakt voor iemand met een screenreader duidelijk waar een pagina over gaat.<\/span><\/p>\n

<h1><\/span>Je titel of belangrijkste onderwerp<\/span><\/i><\/h1>, zie het als de titel van een boek waarna een introductie volgt.<\/span><\/p>\n

<h2><\/span>Een Subkop van de H1 waar je verder op het onderwerp ingaat<\/span><\/i><\/h2> zoals de hoofdstukken in een boek.<\/span><\/p>\n

<h3><\/span>Een Subkop van de H2 wanneer je nog iets wilt toevoegen<\/span><\/i><\/h3> bijvoorbeeld een samenvatting, opsommingen, enzovoort.<\/span><\/p>\n

Dit kan tot de H6 doorgaan, zolang je geen levels overslaat. Bovendien helpt deze hi\u00ebrarchie Google bij het indexeren van de pagina\u2019s <\/span>wat de autoriteit en SEO van een website ten goede komt.<\/b><\/p>\n

Tevens is het handig om op basis van de tussenkoppen een<\/span> inhoudsopgave aan de bovenkant van de pagina<\/b> te plaatsen. Deze maak je op de volgende manier scrolbaar:<\/span><\/p>\n

Voorbeeldcode:<\/strong><\/p>\n

<h1<\/span>>hoofd onderwerp<\/h1<\/span>>
\n<div<\/span> class<\/span>=\"table_of_content\" <\/span>aria-label<\/span>=\"inhoudsopgave\"<\/span>>
\n<h2<\/span>>Inhoudsopgave<\/h2<\/span>>
\n<ol<\/span>>
\n<li<\/span>><a<\/span> href<\/span>=\"#onderwerp\"<\/span>>Sub heading h2<\/a<\/span>><\/li<\/span>>
\n<ol<\/span>>
\n<li<\/span>><a<\/span> href<\/span>=\"#sub-onderwerp\"<\/span>>Sub heading h3<\/a<\/span>><\/li<\/span>>
\n<ol<\/span>>
\n<li<\/span>><a<\/span> href<\/span>=\"#sub-sub-onderwerp\"<\/span>>Sub heading h4<\/a<\/span>><\/li<\/span>>
\n<\/ol<\/span>>
\n<\/ol<\/span>><\/code>
\n
\n<li<\/span>><a<\/span> href<\/span>=\"#onderwerp2\"<\/span>>Sub heading h2<\/a<\/span>><\/li<\/span>>
\n<\/ol<\/span>><\/code>
\n
\n<h2<\/span> id<\/span>=\"onderwerp\"<\/span>>Sub heading h2<\/h2<\/span>>
\n<p<\/span>>content<\/p<\/span>>
\n<h3<\/span> id<\/span>=\"sub-onderwerp\"<\/span>>Sub heading h3<\/h3<\/span>>
\n<p<\/span>>content<\/p<\/span>>
\n<h4<\/span> id<\/span>=\"sub-sub-onderwerp\"<\/span>>Sub heading h4<\/h4<\/span>>
\n<p<\/span>>content<\/p<\/span>>
\n<h2<\/span> id<\/span>=\"onderwerp2\"<\/span>>Sub heading h2<\/h2<\/span>>
\n<\/code><\/p>\n

 <\/p>\n

Tab functie<\/b><\/h4>\n

Aangezien niet iedereen een muis gebruikt, is het noodzakelijk om ze te kunnen laten \u2018tabben\u2019 met de tab-key op het toetsenbord. Dit is in de basis vaak zonder een visuele feedback zoals een border rondom de link. Met een klein stukje CSS vergroot je dan al vrij snel de digitale toegankelijkheid.<\/span><\/p>\n

Voorbeeldcode: <\/strong><\/p>\n

:root {
\n--webkit-focus-ring-color: <\/span>011E41;<\/span>
\n}<\/code>
\na:-webkit-any-link:focus-visible {
\noutline-offset: <\/span>1px;<\/span>
\n}<\/code>
\n:focus-visible {
\noutline: <\/span>-webkit-focus-ring-color auto 1px;<\/span>
\n}<\/code><\/p>\n

 <\/p>\n

Skip to content<\/b><\/h4>\n

De tab functie is super, maar als je veel links hebt op je website dan duurt het een eeuwigheid voor deze bezoekers om bij je \u2018main\u2019 content te komen. Je kunt ze hier een handje bij helpen door een skip to content button te implementeren. Je voegt dan een tabindex=\u201d-1\u201d toe aan het HTML element voor extra digitale toegankelijkheid.<\/span><\/p>\n

Voorbeeldcode:<\/span><\/p>\n

HTML<\/b><\/h4>\n

<a<\/span> class<\/span>=\"skip-to-content\" <\/span>href<\/span>=\"#main \"<\/span>aria-label<\/span>=\"skip content\"<\/span>>Skip to content<\/a<\/span>>
\n<\/code><\/code><\/p>\n

<p<\/span> id<\/span>=\"main \" <\/span>tabindex<\/span>=\"-1\"<\/span>>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.<\/p<\/span>><\/code><\/p>\n

 <\/p>\n

CSS<\/b><\/h4>\n

.skip-to-content {
\nbackground: <\/span>#e91e63;<\/span>
\nleft: <\/span>50%;<\/span>
\npadding: <\/span>8px;<\/span>
\nborder-radius: <\/span>5px;<\/span>
\nposition: <\/span>absolute;<\/span>
\ntransform: <\/span>translateY(-100vh);<\/span>
\ntransition: <\/span>transform 0.3s;<\/span>
\ncolor: <\/span>#FFF;<\/span>
\ntext-decoration: <\/span>unset;<\/span>
\nfont-family: <\/span>arial;<\/span>
\nbox-shadow: <\/span>0px 10px 20px #e91e63;<\/span>
\n}<\/code>
\n.skip-to-content:focus {
\ntransform: <\/span>translateY(0%);<\/span>
\n}<\/code><\/p>\n

Content<\/span><\/h3>\n

Ook je schrijftechniek draagt bij aan de digitale toegankelijkheid van je website. Je wilt dat de teksten op je website prettig leesbaar zijn voor iedere bezoeker. Met de volgende richtlijnen vergroot je de toegankelijkheid van je tekst:<\/span><\/p>\n