Accentsconagua
Share
In een vorig artikel hebben we gesproken over de vraag waarom toegankelijkheid belangrijk is, in termen van zaken, SEO, bruikbaarheid en zelfs de wet. In dit artikel zal ik uitleggen hoe toegankelijke WordPress-thema's kunnen worden gemaakt, hoewel dezelfde ideeën van toepassing zijn op elk platform.
We kunnen onmogelijk alle mogelijke best practices in dit artikel behandelen, maar de basis blijft voor elke website gelden. Ik gebruik enkele bronnen als achtergrond in dit artikel:
We behandelen de volgende tips:
Ik kan het belang van semantische HTML niet genoeg benadrukken: het is de basis van uw toegankelijke website. Léonie Watson legt perfect uit wat semantiek betekent in haar artikelbegrip semantiek:
"HTML-semantiek is daarom op twee manieren belangrijk: we krijgen een consistent begrip van de inhoudsstructuur en het native gedrag en we krijgen een algemeen begrip van de betekenis en het doel van de inhoud. Het beste van alles is dat we die dingen gratis krijgen wanneer we HTML gebruiken zoals bedoeld. "
Wanneer we HTML-elementen schrijven, moeten we niet alleen nadenken over hoe ze zijn ontworpen, of hoe ze eruit zien. We moeten ook nadenken over hoe ze werken ...
Een heel gebruikelijk voorbeeld is het gebruik van Gebruik Notitie: achter de schermen biedt de API voor toegankelijkheid informatie aan ondersteunende technologieën over de naam, rol en status van elk element. Hier is een voorbeeldlink, Building a Inclusive Web: Why Accessibility Matters, met hoe een Accessibility Viewer het ziet: In de praktijk betekent dit dat schermlezers en andere AT het anker herkennen en de rol en naam van het element kunnen aankondigen. Bijvoorbeeld: "Link, een inclusief web bouwen: waarom de toegankelijkheid ertoe doet". Ze kunnen ook door de pagina navigeren met alleen de links: Gebruik Kortom, de Tip: In Chrome 64 is er een Toegankelijkheid paneel dat u de positie van een geselecteerd element in de toegankelijkheidsboom toont, evenals zijn ARIA-kenmerken en berekende eigenschappen. Gebruik Lees meer over links, knoppen, submits en divs van Adrian Roselli. In het volgende gedeelte bekijken we HTML5-segmentelementen en hoe semantische opmaak eruit ziet. Veel HTML5-elementen definiëren ARIA landmarkrollen standaard. Deze identificeren secties van een pagina en helpen AT-gebruikers om naar elke pagina te navigeren. Om deze reden moet alle inhoud binnen semantisch zinvolle elementen liggen, zodat deze niet wordt gemist door de gebruiker. Dit zijn de meest voorkomende herkenningspunten: Notitie: oudere browser- en AT-combinaties herkennen HTML5-elementen niet noodzakelijkerwijs en wijzen ze toe naar de juiste oriëntatiepuntrollen. In deze gevallen kunt u rollen op deze manier handmatig toevoegen: Raadpleeg voor meer informatie voorbeeldmarkering op de WordPress-handboekpagina over ARIA-oriëntatiepunten en de ARIA-voorbeeldmarkeringspagina. Heb je een heel lang artikel gelezen zonder kopjes? Heb je het moeilijk gevonden om te lezen? Dat heb ik zeker gedaan. Kopteksten helpen gebruikers om snel pagina-inhoud te scannen en te begrijpen. Tegelijkertijd geven koppen AT-gebruikers een manier om door de inhoud te navigeren en de paginastructuur te definiëren. Benaderingen variëren, maar mijn aanbeveling is dezelfde als die is geschetst in de koppenstructuur bij themaontwikkeling: Notitie: gebruikers kunnen de hiërarchie van de koppen breken wanneer ze hun eigen inhoud invoeren door H1 te gebruiken of de kopniveaus over te slaan. Adviseer ze door ze te verwijzen naar onze documentatie over het gebruik van koppen in de inhoud. Ik gebruik deze hulpmiddelen voor het controleren van de structuur van de koppen: Tot nu toe hebben we verschillende manieren genoemd om door de pagina te navigeren: links, koppen of herkenningspunten gebruiken. En hetzelfde geldt voor andere semantische HTML-elementen zoals lijsten, tabellen of afbeeldingen. Hulpverlenende gebruikers kunnen ook navigeren met behulp van deze elementen. Hier is een korte video waarin het gebruik van een Voiceover-schermlezer wordt gedemonstreerd, iets wat u zeker moet testen met uw thema met: Lees meer over het gebruik van Voiceover of bekijk dit soortgelijke artikel met NVDA. Regel nummer één: verwijder geen contourstijlen met behulp van Er zijn veel gebruikers die afhankelijk zijn van het toetsenbord en geen muis kunnen gebruiken. Voor toetsenbordgebruikers is het cruciaal om visuele focusstijlen te hebben op alle interactieve elementen: links, formuliervelden, knoppen enzovoort. Met andere woorden, gebruikers moeten kunnen zien welk interactief element de huidige toetsenbordfocus heeft bij het navigeren door de pagina. Meest gebruikelijke toetsenbordbesturingselementen voor navigatie zijn tab, Shift + Tab, invoeren, Ruimte, en pijltjestoetsen. Notitie: standaardstijlen voor browserfocus zijn niet altijd de meest toegankelijke oplossing - aangepaste omtrekstijlen zijn soms beter. Let ook op: Soms zijn omtrekstijlen niet de beste ontwerpbenadering omdat omtrek de randstraal van een element niet respecteert. Een oplossing is om te gebruiken Hier is een leuke truc die een transparante outline gebruikt voor de Windows High Contrast-modus. U kunt hier meer informatie over lezen van Gutenberg PR 5138 en Trac-ticket 41286. Aan de andere kant gaat toetsenbordnavigatie niet alleen over focusstijlen. Allemaal acties moet ook mogelijk zijn met het toetsenbord. Een bekend voorbeeld is wanneer een gebruiker niet naar submenu-items kan navigeren met behulp van de tab-toets of met behulp van de pijltoetsen. Underscores startersthema's hebben hiervoor een JavaScript-oplossing: elke keer dat een menulink is gefocust of wazig, zetten ze de Een ander voorbeeld is wanneer navigatie op dezelfde manier werkt als een modale dialoog, zoals een navigatie op volledig scherm. In deze gevallen is het belangrijk om de focus correct in te stellen. Ik zie nog steeds veel ontwerpen met een laag kleurcontrast. Dit kan het onmogelijk maken voor kleurenblinde gebruikers, gebruikers met een slecht gezichtsvermogen of gebruikers die monitors van lage kwaliteit gebruiken om de inhoud te lezen. Contrast tussen achtergrond- en voorgrondkleuren moet een contrastverhouding hebben van Er zijn veel hulpmiddelen om het kleurcontrast te controleren, zoals de controleur voor de contrastverhouding. U vindt meer informatie in artikelen zoals deze over het gebruik van kleuren en kleurcontrast als vereiste voor toegankelijkheidsgereedthema's. Een koppeling "naar inhoud overslaan" maakt het mogelijk om voorbij alle extra elementen te springen vóór de hoofdinhoud en rechtstreeks naar de inhoud te gaan. Je vraagt je misschien af waarom landmark In elk geval gebruiken AT-gebruikers skip-links nog steeds volgens deze enquête-enquête: Lees meer over het gebruik van skip-links in het handboek. Probeer herhalende linkteksten zoals "Meer lezen" of "Meer informatie" te vermijden. Voor gebruikers van schermlezers die met links navigeren, kan het resultaat er als volgt uitzien: Het Twenty Seventeen-thema heeft goede voorbeelden van hoe je de berichttitel in het fragment kunt toevoegen: % 2 $ s Voor schermlezers zou de linktekst dan als volgt worden gelezen "Lees verder over de titel van het bericht". Hier is een vergelijkbaar voorbeeld voor de inhoud: Klasse We hebben slechts de oppervlakte van toegankelijkheid in WordPress-thema's aangeraakt, maar hopelijk zal dit u op weg helpen. Semantische HTML en verstandig gebruik van CSS gaan een lange weg. Vergeet niet om alle toegankelijkheidsrichtlijnen voor thema's te controleren en lees meer tips in het handboek toegankelijkheid., , en . We zullen deze gebruiken om mijn punt te illustreren.Wanneer te gebruiken
(een ankertag) wanneer u een koppeling maakt naar een andere pagina, bestand, e-mail of een anker op dezelfde pagina.
Mozilla Terug naar boven.Menu. Dit zou moeten zijn .
Accessibility Viewer geeft linknaam, rol, staat en andere informatie weer
Lijst met paginakoppelingen in de voice-overWanneer te gebruiken
wanneer u een actie moet activeren, zoals het openen van een menu. Deze video van Rob Dodson legt uit waarom deze situatie vraagt in plaats van . element heeft al de volgende voordelen al ingebouwd:
knop, die AT-gebruikers helpen begrijpen dat het een interactief element is.invalide attribuut, voor wanneer de knop niet meer interactief zou moeten zijn.
Deelvenster Toegankelijkheid in Chrome met informatie over knopelementenWanneer te gebruiken
wanneer je een element nodig hebt voor stylingdoeleinden. Natuurlijk, controleer eerst of er native HTML-elementen zijn die beter zouden zijn. Bijvoorbeeld , , , , , of
2. Structuur met HTML5-sectieregels
HTML5-element Standaard oriëntatiepuntrol banier navigatie hoofd complementair contentinfo 3. Maak de koppenhiërarchie vrij
4. Navigeer op de pagina met behulp van ondersteunende technologie
Toegankelijkheid: wat is uw markup die aan u zegt?
Vandaag gaan we kijken naar toegankelijkheid en semantiek. Laten we beginnen met een vraag: heb je ooit een schermlezer gebruikt? Als het antwoord nee is, moet je proberen ... 5. Overweeg toetsenbordnavigatie en focusstijlen
: focus outline: none; !box-shadow in plaats daarvan, maar ... focusstijlen zouden in alle scenario's moeten werken, zoals in de Windows High Contrast-modus die box-shadow-stijlen verwijdert.: focus box-shadow: inzet 0 0 0 1px # 6c7781; / * Alleen zichtbaar in Windows Hoge contrastmodus * / outline: 2px effen transparant;
.focus klasse op de menulink. Zie de functie Focus in- of uitschakelen.
WordPress Theme Creation met underscores
Underscores startthema, door de makers van WordPress zelf, is ontworpen om u een "1000 uur voorsprong" te geven bij het maken van WordPress-thema's. Deze les… 6. Controleer op kleurcontrast
Basisbegrippen voor toegankelijkheid: ontwerpen voor visuele beperkingen
Nu 4,5% van de wereldbevolking kleurenblindheid heeft, 4% last heeft van slechtziendheid en nog eens 0,6% blind is, visuele problemen met het gebruik van ... 7. Vergeet Skip-links niet
is niet voldoende, omdat AT-gebruikers naar belangrijke inhoud kunnen navigeren met behulp van oriëntatiepunten? De belangrijkste doelgroep van de skip-link is toetsenbordgebruikers, die waarschijnlijk geen AT-apparaten gebruiken. Dus ze hebben geen snelkoppelingen naar of andere historische regio's."Het is belangrijk om op te merken dat terwijl het gebruik onder gebruikers van schermlezers is afgenomen," skip "-links nog steeds aanzienlijk voordeel opleveren voor andere toetsenbordgebruikers."
8. Vermijd Repetitive Link-tekst
Lijst met meer gelezen links helpt niet bij het navigeren/ ** * Vervangt "[...]" (toegevoegd aan automatisch gegenereerde fragmenten) met ... en * een link 'Doorgaan met lezen'. * * @since Twenty Seventeen 1.0 * * @param string $ link Link naar enkele bericht / pagina. * @return string 'Continue reading' link voorafgegaan met een ellips. * / function twentyseventeen_excerpt_more ($ link) if (is_admin ()) return $ link; $ link = sprintf ('/ * vertalers:% s: naam van huidige bericht * / the_content (sprintf (__ ('Verder lezen "% S"',' twentyseventeen '), get_the_title ())); screen-reader-text verbergt de titel van het bericht visueel, maar gebruikers van schermlezers hebben nog steeds toegang tot de tekst. Controleer het laatste codevoorbeeld van de schermlezertekst in het handboek.Conclusie
