Vandaag gaan we kijken naar toegankelijkheid en semantiek. Laten we beginnen met een vraag: heb je ooit een schermlezer gebruikt? Als het antwoord is Nee, u zou het moeten proberen - het zou de manier waarop u uw HTML-opmaak voor altijd benadert, kunnen veranderen!
In dit artikel gaan we kijken naar de structuur van een webpagina, de manier waarop schermlezers die structuur interpreteren en verbeteringen die we kunnen aanbrengen in onze eigen markup om de toegankelijkheid te verbeteren.
Een snel woord over de demo
Ik heb een voorbeeldwebpagina samengesteld om aan te tonen hoe specifieke markeringen door schermlezers worden verwerkt. Ik wilde ook semantische HTML5-markeringen op de meest elementaire manier demonstreren, iets waarvan ik hoop dat je het handig vindt. Ten slotte weet ik hoe veel van het downloaden van bronbestanden komt met een zelfstudie, dus geniet ervan om het uit elkaar te halen!
De demo
De demo is een eenvoudige, flexibele pagina met één kolom. Het is niet responsief, maar is goed ingesteld om te worden gemaakt, dus zou u het willen: het gebruikt relatieve horizontale eenheden (%), en relatieve eenheden (em) voor de lettertypen. Afbeeldingen zijn flexibel en veranderen in grootte volgens de afmetingen van hun bovenliggende container. Het maakt ook gebruik van een aantal groovy Google-lettertypen. Lichtgewicht en schoon.
Het webstandaardenmodel
Als u een regelmatige bezoeker van de site bent, heeft u keer op keer gehoord dat het bij het bouwen van een website belangrijk is om zorgen weg te nemen. Dit is allemaal onderdeel van wat we herkennen als de webstandaardenmodel; bestaat uit structuur, presentatie en gedrag.
Structuur we bouwen in de vorm van onze HTML-markup, presentatie is onze vormgeving (hoe de inhoud wordt weergegeven in een bepaalde user-agent) die we aanpakken met CSS, en de gedrag van een webpagina, front-end interactiviteit, die we meestal bereiken met javascript.
Het gescheiden houden van deze drie aspecten van webontwerp is in praktische termen nuttig voor ons - het is veel gemakkelijker om content te onderhouden die op deze manier verdeeld is en niet allemaal door elkaar gegooid.
Het scheiden van zorgen is ook gunstig in termen van begrip. Wij, mensen, verwerken meestal een webpagina dankzij de manier waarop deze wordt afgeleverd via een browser. Maar er zijn andere manieren waarop een webpagina wordt geopend, niet het minst door zoekmachines, die de ruwe structuur van pagina's crawlen om de inhoud nauwkeurig te categoriseren en te rangschikken.
Dan hebben we Assistive Technologies (AT), zoals schermlezers. Schermlezers interpreteren computerinterfaces en zeggen wat ze zien, zodat visueel gehandicapten deze kunnen gebruiken. Webpagina's zijn zo'n voorbeeld van interfaces en schermlezers lezen de inhoud zoals deze in de opmaak wordt gepresenteerd. Verwarrende en rommelige opmaak resulteert logischerwijze in toegankelijkheidsproblemen, ook al lijkt de weergegeven website foutloos in de browser.
Notitie: Het is belangrijk om in gedachten te houden dat, terwijl deze tut zich richt op visueel gehandicapten, het optimaliseren toegankelijkheid voordelen gebruikers beperkt op andere manieren (motor, auditieve, cognitieve etc.)
Semantiek
Zelfs als je niet begrepen hebt wat ermee bedoeld wordt Semantiek je hebt waarschijnlijk gehoord dat de term veel wordt gegooid. Semantiek in webdesign verwijst naar de betekenis gegeven aan HTML-markup. De overgang van op tabellen gebaseerde lay-outs zag enorme verbeteringen in de semantische waarde van (X) HTML-markeringen, tabelcellen maakten plaats voor
tags (divisies), ongeordende lijsten (
) werd gemeengoed en we begonnen dingen als te gebruiken (nadruk) in plaats van (cursief) om onze markup verder van de presentatiecode te verwijderen.
Momenteel maakt de webontwerpgemeenschap kennis met HTML5-markup en dankzij een groot aantal nieuwe elementen kunnen we onze opmaak gedetailleerder beschrijven dan ooit. Primaire navigatie neemt nog steeds meestal de vorm aan van een ongeordende lijst, maar deze kan nu genest binnenin worden bewaard tags, die perfect beschrijven wat het daar doet.
Voor hulp bij de juiste semantische HTML5, ga je na wat de jongens van HTML5Doctor.com aan het doen zijn.
Heb je ooit een schermlezer gebruikt??
Het is verrassend hoe weinig webontwerpers daadwerkelijk schermlezers hebben gebruikt. Het testen van je werk vanuit het perspectief van iemand met een visuele beperking kan net zo lonend zijn als frustrerend, maar ik raad je aan het minstens een keer te proberen. Schermlezer-tools kunnen behoorlijk moeilijk te bevatten zijn, dus zorg ervoor dat je het verschil herkent tussen slechte toegankelijkheid en eenvoudige incompetentie om de software te gebruiken?
Schermlezers gebruiken alternatieve navigatie (via het toetsenbord) om verschillende elementen op het scherm te markeren, verwerken en gebruiken. Springen tussen de bedieningselementen in uw browser en de bedieningselementen binnen een webpagina kan moeilijk zijn om mee te beginnen! Zodra u echter de tools heeft leren gebruiken, wordt de (on) toegankelijkheid van uw markeringen duidelijk.
Er zijn verschillende veelgebruikte voorbeelden, hier zijn er slechts een paar voor uw referentie:
JAWS
NVDA
Window-Eyes
SAToGo
Voice over
Notitie: Interessant is dat, volgens demografisch onderzoek uitgevoerd door webaim.org, het grootste deel van de gebruikers van schermlezers Internet Explorer aanhaalt als de browser die ze vaak gebruiken bij het lezen van webpagina's. Microsoft's interpretatie van de CSS-specificatie die daar niet in de weg zit, denk ik?
Voorbeeld opmaak
Ik krijg vaak instructies voor tutorials voor het bouwen van webpagina's. Hoewel ze er in de browser prima uitzien en ze het juiste doctype gebruiken, laten ze het vaak voor HTML5 staan. Dat is jammer, want het kost niet veel moeite om wat HTML5-semantische markup in te brengen.
Laten we beginnen met een voorbeelddocument. Om te beginnen, bevrijd jezelf van elk doctype dat er ongeveer zo uitziet:
Voor geldige HTML5 hebben we niets ingewikkelder nodig dan dit:
Laten we nu de rest van onze basiswebpagina invullen:
Wat is uw markup die aan u zegt?
Wat is uw markup die aan u zegt?
Huis
Meer kaas
Meer Bavianen
Auteursrechten ? Ian Yates 2011
Dit is vrij typerend voor hoe we een pagina zouden hebben gestructureerd voordat HTML5-elementen onze kant op zouden gaan. Het is perfect in orde en kan zonder echte problemen worden gestyled.
We hebben een home-main div, die zelf genest is binnen een wikkel div. Binnen home-main we vinden een paar artikel-divs, en we gaan de dingen binnen een seconde verder compliceren door wat meer div's erin te jammen? kijk dit?
Wat is uw markup die aan u zegt?
Wat is uw markup die aan u zegt?
Huis
Meer kaas
Meer Bavianen
Wisconsin Cheese History
"Cheeses" met dank aan Graeme Maclean op Flickr
Het verhaal van de zuivelindustrie in Wisconsin heeft wortels in de prehistorie. De natuur zette het toneel voor de Amerikaanse Dairyland tijdens de laatste ijstijd, toen gletsjers doorsneden wat nu Wisconsin is. Toen ze zich terugtrokken, de massief ijsbergen achtergelaten op een platteland van glooiende heuvels en weelderige weilanden.
Miljoenen jaren later, toen Europese immigranten naar het westen trokken, vonden ze het kernland van het land, dat veel van hun thuislanden deed denken. Klimatologische omstandigheden leken goed te werken en aanvankelijk kweekte de boeren tarwe, hop en andere granen. Melkveehouderij volgde vanzelf, en melkveehouders produceerden al snel een overvloed aan melk van topkwaliteit. Om overtollige melk te behouden, maakten boeren kaas. De overstap van het produceren van kaas voor gezinsgebruik naar het maken van kaas om te verkopen was een kleine stap. De commerciële productie van kaas in Wisconsin begon echter op kleine schaal.
Genomen uit www.eatwisconsincheese.com
Sociale systemen binnen een bavianen-troep
"Baboon billen" met dank aan Prakhar Amba op Flickr
De meeste bavianen leven in hiërarchische troepen. Groepsgroottes variëren van 5 tot 250 dieren (vaak ongeveer 50 of zo), afhankelijk van specifieke omstandigheden, met name soorten en de tijd van het jaar. De structuur binnen de troep varieert aanzienlijk tussen hamadryasbavianen en de overgebleven soorten, soms samen savannebavianen genoemd.
De hamadryasbaviaan verschijnen vaak in zeer grote groepen die zijn samengesteld uit vele kleinere harems (een mannetje met vier of zo wijfjes), waarbij vrouwtjes van elders in de troep worden gerekruteerd terwijl ze nog te jong zijn om te broeden. Andere bavianensoorten hebben een meer promiscue structuur met een strikte dominantiehiërarchie op basis van de matriline. De hamadryas baviaan groep zal meestal een jongere man bevatten, maar hij zal niet proberen te paren met de vrouwtjes tenzij de oudere man is verwijderd.
Genomen van wikipedia.com
Auteursrechten ? Ian Yates 2011
Zie je? Aan elke artikel-div hebben we een afbeelding toegevoegd, genest in een div om hem te binden aan zijn bijschrift, plus een ander div die onderaan als voettekst fungeert.
Laten we er nu wat toevoegen presentatie; sommige CSS-stijlen. Allereerst enkele resetstijlen, volledig genomen van Eric Meyer:
Daarna voegen we onze eigen stijlen toe. U zult een paar buitenaardse lettertypen opmerken, worden gepakt uit de Google Fonts-API en toegepast met @ Font-face. De rest spreekt voor zich en het resultaat toont weinig complicaties aan.
In minder dan 200 (niet-gecondenseerde) CSS-regels hebben we onze pagina mooi gestileerd. Geen al te fancy-gecentreerde koppen en menu-items, een mooie grote lettergrootte (100% van de standaardinstelling van de browser, meestal 16px) en afbeeldingen waarvan de containers naar rechts zweven. De meest gecompliceerde van de stijlen is aantoonbaar de dubbele doosschaduwen op de menu-items en de beeldcontainers. Hoe dan ook, styling valt niet binnen het bereik van deze tut, maar voel je vrij om het uit elkaar te halen zoals je wilt.
Verbeterde toegankelijkheid
Er zijn verschillende gebieden waar we de toegankelijkheid in onze opmaak zouden kunnen verbeteren. Om te beginnen, de tags missen de alt attribuut. Onder normale omstandigheden browsen op de site zou dat probleem in de weg zitten, maar iedereen met beelden die zijn uitgeschakeld, zou zich er niet van bewust zijn dat er ooit een afbeelding is geweest. Schermlezers zullen op zijn best stellen dat er een afbeelding aanwezig is, maar ze kunnen de gebruiker niet meer vertellen dan dat.
Gebruik de alternatieve tekst als een kans om de afbeelding te beschrijven. Dit komt ten goede aan gebruikers, zoekmachines en dus ook aan u.
Het document heeft ook geen semantische betekenis, gebruikers die op uw pagina navigeren met een schermlezer kunnen geen hiërarchische waarde binnen de tekst bepalen. Een div met een klasse van footer zegt absoluut niets over de inhoud aan iemand (behalve u), het staat eenvoudig toe dat uw CSS-bestand het target.
In termen van onderhoud is het ook moeilijk om alle geneste te onderscheiden
aanwezige elementen; het enorme aantal van hen vereist verder de noodzaak om commentaar te geven op uw sluitende elementen. Proberen om de orde te handhaven in delen van markup zoals deze is lastig!
Laten we dan enkele van de overbodige div-tags vervangen voor meer semantische elementen:
Vaarwel?
Wat is uw markup die aan u zegt?
Huis
Meer kaas
Meer Bavianen
? Hallo
Wat is uw markup die aan u zegt?
Vaarwel?
Wisconsin Cheese History
"Cheeses" met dank aan Graeme Maclean op Flickr
Het verhaal van Wisconsin's? weelderig weiland.
Miljoenen jaren later? een kleine schaal.
Genomen uit www.eatwisconsincheese.com
? Hallo
Wisconsin Cheese History
"Cheeses" met dank aan Graeme Maclean op Flickr
Het verhaal van Wisconsin's? weelderig weiland.
Miljoenen jaren later? een kleine schaal.
Dit is de volledige HTML-markering, opgepoetst met glorieuze semantiek:
Wat is uw markup die aan u zegt?
Wat is uw markup die aan u zegt?
Wisconsin Cheese History
"Cheeses" met dank aan Graeme Maclean op Flickr
Het verhaal van de zuivelindustrie in Wisconsin heeft wortels in de prehistorie. De natuur zette het toneel voor de Amerikaanse Dairyland tijdens de laatste ijstijd, toen gletsjers doorsneden wat nu Wisconsin is. Toen ze zich terugtrokken, de massief ijsbergen achtergelaten op een platteland van glooiende heuvels en weelderige weilanden.
Miljoenen jaren later, toen Europese immigranten naar het westen trokken, vonden ze het kernland van het land, dat veel van hun thuislanden deed denken. Klimatologische omstandigheden leken goed te werken en aanvankelijk kweekte de boeren tarwe, hop en andere granen. Melkveehouderij volgde vanzelf, en melkveehouders produceerden al snel een overvloed aan melk van topkwaliteit. Om overtollige melk te behouden, maakten boeren kaas. De overstap van het produceren van kaas voor gezinsgebruik naar het maken van kaas om te verkopen was een kleine stap. De commerciële productie van kaas in Wisconsin begon echter op kleine schaal.
Sociale systemen binnen een bavianen-troep
"Baboon billen" met dank aan Prakhar Amba op Flickr
De meeste bavianen leven in hiërarchische troepen. Groepsgroottes variëren van 5 tot 250 dieren (vaak ongeveer 50 of zo), afhankelijk van specifieke omstandigheden, met name soorten en de tijd van het jaar. De structuur binnen de troep varieert aanzienlijk tussen hamadryasbavianen en de overgebleven soorten, soms samen savannebavianen genoemd.
De hamadryasbaviaan verschijnen vaak in zeer grote groepen die zijn samengesteld uit vele kleinere harems (een mannetje met vier of zo wijfjes), waarbij vrouwtjes van elders in de troep worden gerekruteerd terwijl ze nog te jong zijn om te broeden. Andere bavianensoorten hebben een meer promiscue structuur met een strikte dominantiehiërarchie op basis van de matriline. De hamadryas baviaan groep zal meestal een jongere man bevatten, maar hij zal niet proberen te paren met de vrouwtjes tenzij de oudere man is verwijderd.
Dus wat zijn de verbeteringen die we hebben aangebracht? Welnu, naast het toevoegen van alt-attributen aan onze afbeeldingen, hebben we de volgende zeven elementen gebruikt:
: We hebben dit bovenaan ons document gebruikt waar onze hoofdrubriek en navigatie zijn. We kunnen deze tag ook gebruiken als een koptekst voor subsecties van de markup (zoals artikelen).
: Deze tag speelt de host voor alles dat als navigatie op een webpagina fungeert. Onze primaire navigatie is het perfecte voorbeeld, maar nav-tags kunnen ook paginering inpakken (bijvoorbeeld).
: We hebben slechts de ene sectie, maar dit is een geweldige tag voor het groeperen van bijbehorende inhoud.
: Een artikel kan worden omschreven als een stuk informatie dat onafhankelijk van de omringende inhoud kan staan, zonder betekenis te verliezen. In ons geval hebben we twee artikelen, elk bestaande uit een titel, wat tekst, accreditatie en een relevant beeld.
: Met het figuurlabel kunnen we onze afbeeldingen bevatten en vervolgens ook meta-informatie zoals?
: Ons bijschrift is nu zo geplaatst dat het wordt geassocieerd met het beeld van zijn broer of zus.
: We hebben een voettekst aan de voet van onze pagina (hmmmm) maar, net als koptags, deze kunnen ook in subsecties worden gebruikt, zoals we hebben aangetoond in onze artikelen.
Probeer zo mogelijk elementen zoals deze te gebruiken. Gebruik div-tags in elk geval, maar alleen als u geen beter geschikt semantisch element kunt bedenken. Qua vormgeving kun je niet echt fout gaan, en op dit moment is het geen misdaad als je elementen op de verkeerde plek gebruikt. Je moet ergens beginnen, dus wees niet bang om artikelen en secties gebrekkig te gebruiken.
Met wat licht bewerkte CSS, is het resultaat in de browser? geen verschil.
Hoe ziet een schermlezer het??
Dit is ons ontwerp, gezien door de ogen van de schermlezeruitbreiding van Google Chrome en VoiceOver van OSX.
Wanneer VoiceOver wordt overgelaten om een hele webpagina te verwerken (Control-Option-A), loopt het achtereenvolgens door de DOM en dicteert het de inhoud die het tegenkomt. Met de nieuwste versies kunt u punten opgeven op favoriete webpagina's waarnaar u kunt springen, maar of de cursor zelf naar een link, een lijst, een alinea of een afbeelding kijkt, leest deze zo goed als het kan.
Onze inspanningen zijn onopgemerkt gebleven!
Misschien merk je, afgezien van de vreemd aantrekkelijke stem, dat VoiceOver er geen melding van maakte dat onze navigatie in een tag en negeerde volledig elke aanwezigheid van artikelen. Dit is de realiteit van de situatie op dit moment; HTML5 wordt nog niet goed ondersteund op schermlezers, onze inspanningen zijn onopgemerkt gebleven! Op vrijwel dezelfde manier dat opmaak- en stylingsstandaarden langzaam (maar zeker) worden geïmplementeerd door browserleveranciers, dus ontwikkelaars van schermlezers bevinden zich in dezelfde situatie.
Om op de hoogte te blijven van de status van HTML5-toegankelijkheid en de ontwikkeling van schermlezers, kunt u veel erger doen dan Bruce Lawson in de gaten houden. Hij pusht het vaak, blogt erover en praat erover. U kunt ook naar www.accessibleculture.org gaan voor het testen van de schermlezer.
Hulp in de vorm van WIA-ARIA
WIA-ARI-WAT?! Het WIA (Web Accessibility Initiative) ARIA (Accessible Rich Internet Applications) is een specificatie die ondersteunende technologieën helpt bij het interpreteren van HTML-markeringen. Het gebruikt attributen om elementen op verschillende manieren te beschrijven:
Rol: Het doel van een element (ja, ok, zijn rol)
Staat: De huidige status van een element (denk aangevinkt selectievakje)
Eigendom: Een van een ton van eigenschappen (zoals de horizontale positie van een schuifregelaar)
Vooral als het gaat om toestanden en eigenschappen, kun je je voorstellen dat het anders moeilijk zou zijn voor hulptechnologieën om te interpreteren. We kunnen gelukkig ARIA-kenmerken toevoegen (binnen de limieten) aan onze markup, en cruciaal, ze valideren als onderdeel van de HTML5-specificatie.
WAI-ARIA is bedoeld als overbruggingstechnologie. Het verduidelijkt de semantiek voor ondersteunende technologieën wanneer auteurs nieuwe typen objecten maken, via stijl en script, die nog niet rechtstreeks worden ondersteund door de taal van de pagina. www.w3.org
Hier is een voorbeeld van hoe we onze markup verder kunnen verbeteren - we nemen dit:
? en we voegen dit toe:
Nogmaals, dit is geldige HTML5.
We hebben een rolkenmerk toegevoegd van navigatie naar onze nav element, dat misschien contra-intuïtief lijkt, maar voorlopig helpt het. (Sommige) schermlezers zullen onze navigatie nu goed herkennen. Verderop in de rij, wanneer de HTML5-specificatie op de juiste manier is overgenomen door apparaten van alle soorten, is het element nav zal een ARIA-attribuut van impliceren navigatie (en idem voor andere elementen), waardoor het overbodig wordt.
We kunnen ook een rol toevoegen aan onze header:
En ten slotte krijgt ons artikel enige verdiende erkenning:
Voor meer informatie over beschikbare rollen en hoe deze te gebruiken, bekijk Virginia DeBolt's uitgebreide introductie tot ARIA-rollen.
Daarom hebben we onze opmaak eindelijk bijgewerkt om de toegankelijkheid te verbeteren. Kijk eens naar het voltooide artikel, maar om echt een verschil te zien dat je nodig hebt om het te bekijken met een geschikte schermlezer natuurlijk. Uw beste weddenschap zou op dit moment zijn om te testen met JAWS of NVDA, aangezien deze hoog scoren voor hun omgang met zowel HTML5-semantiek als ARIA-kenmerken.
Conclusie
Ik hoop dat dit artikel u heeft geholpen een beter inzicht te krijgen in de rol die u kunt spelen bij het verbeteren van de toegankelijkheid op internet. Oefen op standaarden gebaseerd webdesign, besteed aandacht aan ontwikkeltechnologieën en zelfs als uw inspanningen nog niet volledig kunnen worden benut, bent u in ieder geval in de toekomst voorbereid op uw werk. Bedankt voor het lezen (of luisteren)!
Accentsconagua
Share
De demo 
