Kleine Tweaks, Dat Kan een Enorme Impact hebben op de Toegankelijkheid van Uw Website

0
62

Voor een beginner, toegankelijkheid kan ontmoedigend zijn. Met de beste bedoelingen in de wereld, de leercurve te ontwikkelen dat voldoet, volledig toegankelijke websites en apps is enorm. Het is ook moeilijk om te vinden van het juiste advies, omdat het een steeds veranderende en steeds drukkere landschap.

Ik heb geschreven in deze post geven u enkele tips over de kleine dingen die een groot verschil kunnen maken, terwijl hopelijk niet van invloed op uw ontwikkelingsproces te veel.

Duik in!

Document Structuur en Semantiek

Het waarschijnlijk niet komen als een verrassing dat het structureren van HTML in een georganiseerde, semantische manier zal een groot verschil maken. Screen readers rekenen op een goed gestructureerd document voor het volgen van een samenhangend verhaal, dus zorg ervoor dat u de elementen die de HTML5 spec biedt responsively en effectief.

Als u niet zeker bent over hoe markup je werk goed, check out middelen zoals HTML5 Arts, Code Academy en natuurlijk CSS-Tricks. U kunt ook kijken op de artikelen zoals “het Schrijven van HTML met toegankelijkheid in het achterhoofd” en “Semantische Structuur” om je verder te helpen in de goede richting.

Laten we eens kijken naar drie specifieke dingen die kunnen helpen zorgen voor een goed gestructureerde en semantische document.

Gebruik Één <main> Element

Een goed voorbeeld van het bouwen van een verantwoordelijk, semantische document structuur is het gebruik van slechts één <main> element. Dit moet dienen als een wegwijzer voor de belangrijkste inhoud van de pagina voor uw gebruikers.

Voeg een ID aan en bieden een skip-link in uw hoofd <header> zo:

<header rol=”banner”>
<h1>De belangrijkste pagina titel</h1>
<a href=”#hoofd-inhoud”>Ga naar de inhoud</a>
</header>

<!– Verder naar het document –>
<id=”main-content”>
<!– Zet uw belangrijkste orgaan van de inhoud in de hier-en andere echt belangrijke dingen –>
</main>

Dit trucje moet helpen uw screen reader gebruikers uit in een grote weg, omdat ze kunnen gaan en het overslaan van de fancy bits en duiken recht in uw belangrijke inhoud. Het is ook geweldig voor toetsenbord gebruikers voor dezelfde reden.

Een ander leuk detail is het toevoegen van een :focus stijl om de skip-link dat maakt het zichtbaar. Probeer het indrukken van de tab-toets op dit bericht. Best netjes toch?

Gebruik Elementen Correct

Zo, de knop <> elementen zijn een pijn in de kont te stijl? Dat betekent niet dat je moet bevestig uw JavaScript-events om een <div> of een <a href=”#”>. Ziet u, wanneer u een toets<>, krijg je toetsenbord evenementen gratis. Je bent ook het helpen van gebruikers van een schermlezer want het zal kondigen het element correct. Bekijk dit voorbeeld:

document.getElementsByTagName(‘button’)[0].addEventListener(‘klik’, evt => {
alert(‘Oh, hé daar!’);
});

Als een gebruiker zich gericht op die knop en druk op de enter-toets, in dat geval zou een brand. Dat maakt zowel de jouwe en de gebruikers van het leven een beetje gemakkelijker te maken. Zeker de moeite waard, toch?

Zie de Pen klik op de Knop voorbeeld van Andy Bell (@hankchizljaw) op CodePen.

Uw Post Hiërarchie Locked-Down

Het is echt gebruikelijk voor screen reader gebruikers om te navigeren van een pagina met behulp van de rubriek structuur. Dat betekent dat we moeten hen helpen en het maken van een mooi hiërarchie voor hen. Laten we een kijkje nemen op een standaard blog post:

<id=”main-content”>
<artikel>
<!– De titel van de pagina is in de <header> in dit geval –>
<h2>Mijn awesome blog post</h2>
<p>Vestibulum id ligula porta felis euismod semper.</p>
<p>Vestibulum id ligula porta felis euismod semper.</p>

<h3>Een sub-sectie van deze post</h3>
<p>Vestibulum id ligula porta felis euismod semper.</p>

<h4>Een sub-sectie van de sub-sectie</h4>
<p>Vestibulum id ligula porta felis euismod semper.</p>
</article>
</main>

Met dit voorbeeld kan de gebruiker navigeren naar de start van “Mijn awesome blog post” en dan de mogelijkheid hebben om verder te gaan naar sub-secties en geneste sub-secties gemakkelijk. Ze kunnen ook het overslaan van een back-up. Het is gewoon een leuke manier om ze te helpen consumeren van de inhoud die u hebt geproduceerd, net zo eenvoudig als mogelijk.

Het kan aanbevolen worden dat een pagina heeft één <h1> element, hoewel de W3C HTML5-specificatie stelt u kunt veel hebben. Ik persoonlijk akkoord met het gebruik van één <h1>, maar je kan veel, zolang je volgt een mooie structuur en hiërarchie. Dat is de sleutel hier.

Uw Kleur Contrast Recht

Om de WCAG 2.0-AA-compliant, je nodig hebt om een contrast ratio van 4:5:1 voor normale tekst. Dit is uw alinea ‘ s, knoppen, navigatie, enz. Moet u gaan voor een verhouding van 3:1 voor grotere tekst, zoals koppen. Ik zou zeggen dit moet je minimum omdat het ongelooflijk is haalbaar met hulpmiddelen zoals Tota11y, het Contrast en de WebAim contrast checker. U kunt nog steeds veel van de kleur van evenwicht en variatie in uw ontwerp.

De reden dat het contrast zo belangrijk is, is omdat er zo veel variatie in de omgeving die u waarschijnlijk niet eens overwegen, zoals fel zonlicht en slechte kwaliteit toont. Voeg dit toe aan een visuele beperking of, zeg, een migraine en je mogelijk problemen veroorzaakt voor uw gebruikers.

Aan het contrast recht zal hebben op een groot, positief effect over een breed spectrum van uw gebruikers.

Verantwoordelijk Tekst Labels

We hebben allemaal opgebouwd uit een lijst van items met een niet-beschrijvende, maar ook visueel aantrekkelijk “More” knop, right? Meer wat? We moeten meer verantwoordelijk met deze en een aantal context.

Een manier om dit te bereiken is door visueel te verbergen beschrijvende tekst met CSS en het verbergen van de niet-beschrijvende tekst van een screenreader. Het is verleidelijk om te gebruiken display: none;, maar een schermlezer kan negeren elementen met die set, dus we moeten creatiever zijn. Ik gebruik iets als dit little helper:

.visueel verborgen {
display: block;
hoogte: 0px;
breedte: 0px;
overflow: hidden;
clip: rect(1px, 1px, 1px, 1px);
visibility: hidden;
}

Met deze CSS is op zijn plaats, kunnen we zoiets als dit doen:

<a href=”/link-naar-uw-pagina”>
<!– Deze is verborgen in een schermlezer, maar zichtbaar visueel –>
<span aria-hidden=”true”>Meer</span>

<!– Dit is zichtbaar op een scherm lezer, maar visueel verborgen –>
<span class=”visueel-hidden”>Verder lezen: “Uw titel bericht hier”</span>
</een>

Een ziende gebruiker ziet alleen “Meer” en een scherm lezer zal horen “Verder lezen: ‘Uw titel bericht hier.'” Beide sets van de gebruikers zijn tevreden.

U kunt ook het bereiken van de hierboven door het gebruik van een aria-label op de <a> – tag. Hiermee overschrijft u de tekst in een schermlezer:

<a href=”/link-naar-uw-pagina” aria-label=”Verder lezen: ‘Uw titel bericht hier'”>
Meer
</een>

Kleine Typografie Tweaks Met een Grote Impact

Het is altijd de moeite waard te onthouden dat mensen met een visuele handicap of leerstoornis kunnen proberen om de inhoud te lezen, dus een paar kleine aanpassingen aan uw typografie kan een lange weg te gaan.

Een lichaam van content, zoals een artikel moet worden gedimensioneerd op 16px (of equivalent unit) op een minimum. Het is ook de moeite waard om het verhogen van uw line-height tot ongeveer 1,5. De ruimte tussen de lijnen kunnen lezers met dyslexie om uw inhoud te begrijpen beter. De combinatie van de grootte en de ruimte is ook zeer geschikt voor oudere mensen en/of korte-of-sight mensen. Zelfs kleine samenvattingen en naast de inhoud moet ten minste 12px (of equivalent unit). Alles wat kleiner is dan dat zal vervreemden van de gebruikers die moeite hebben om te lezen.

Een andere truc is om de belangrijkste woorden en zinnen als je de inhoud is vrij complex. Dit heeft niet alleen voordelen voor gebruikers die iets minder is bij de verwerking van de inhoud, maar het helpt ook mensen die graag om te scannen over een artikel, zoals ik dat doe.

Tot slot op dit punt, zou ik u adviseren om voorzichtig te zijn met uw lettertype keuze. Lettertypen met complexe ligaturen en decoratieve elementen zijn erg afleidend, dus misschien beperken het gebruik van die sleutel, grote koppen. Het is ook aangeraden dat sans-serif fonts zijn beter voor de lezers met dyslexie. Check dit artikel voor meer informatie en andere tips voor het opmaken van tekst.

Verbeteren Toetsenbord Ondersteuning

Er zijn een paar kleine aanpassingen u kunt doen om te helpen gebruikers die voornamelijk gebruik het toetsenbord om te navigeren van uw website.

Zeggen je hebt een beetje knop toont een dialoog wanneer je er op klikt. Je moet het koppelen van een gebeurtenis op de escape-toets verbergen. Hier is een voorbeeld van een fragment:

document.addEventListener(‘keyup’, (evt) => {
als(evt.keyCode === 27) {
// Voer welke code verbergt uw dialoog
}
});

Zie de Pen Escape-toets demo van Andy Bell (@hankchizljaw) op CodePen.

Een andere tweak kunt u doen voor ons toetsenbord-navigeren buddies is niet verbergen focus van hen. Browsers geven ons concentreren staten voor gratis met overzicht. Ik weet dat het kan lelijk kijken, maar hot-damn het is handig voor gebruikers van een toetsenbord. Als u wilt om zich te ontdoen van die blauwe gloed, ik krijg het gebruik van de :focus pseudo selector toe te voegen een voor de hand liggende wijziging staat in plaats. Hier is een voorbeeld:

.uw-element {
background: red;
}

.uw-element:focus {
outline: none; /* Reset de standaard */
box-shadow: 0 0 0 3px black; /* Een zeer voor de hand liggende wijziging staat */
}

Vertrouw niet op de Kleur Alleen al om te Communiceren Staat van Wijzigingen

Laten we een einde aan een heel belangrijke. De kleur mag niet worden gebruikt bij alleen communiceren van status veranderingen. Neem dit scenario als voorbeeld:

Je hebt een knop die berichten een formulier. U schreef een aantal nette JavaScript dat maakt het ga grijs terwijl het versturen van de data. Het is dan groen of rood, afhankelijk van wat de status is.

Voor een kleurenblind gebruiker, dit is een nachtmerrie. Aan hen de knop mag hebben nauwelijks veranderd genoeg voor hen om te zien, dus ze kunnen gewoon blijven klikken en te klikken terwijl je echt gefrustreerd. Dit is niet ideaal.

Dus, in plaats van te vertrouwen op kleur, laten we versterken die met een status bericht dat ondersteunt de knop staat op de respons.

Zie de Pen verhoogde staat change communication demo van Andy Bell (@hankchizljaw) op CodePen.

Dat monster is een geweldige manier om snel te communiceren naar de gebruiker dat er iets is veranderd en het gebruik van kleur, tekst en iconografie duidelijk communiceert dat veranderen. Het uitschakelen van de knop terwijl u de reactie is verwerkt, is ook een grote hulp voor de gebruiker.

Inpakken

Deze kleine tips kunnen een groot verschil maken voor uw gebruikers, en ik hoop dat u een duik in uw projecten en voert een aantal van hen.

U moet ook leren over de toegankelijkheid. Ik raden u de volgende mensen zoals Heydon Pickering, Scott O ‘ Hara, Laura Kalbag, en Rob Dobson op . Ik adviseer ook dat je middelen zoals Inclusive Componenten en de A11y Project.

Hoe groter je kennis krijgt, hoe beter uw websites en producten zal worden voor een veel breder publiek. Dat kan alleen maar een goede zaak, toch?