Accentsconagua
Share
Wilt u uw site beter toegankelijk maken? Of wilt u het gemakkelijker maken om uw site over het algemeen te doorkruisen met behulp van browsers en andere interfaces? Met ARIA kunt u beide doen. Laten we eens kijken naar wat ARIA is en hoe het kan profiteren van een eCommerce-site. We zullen ook stap voor stap enkele voorbeelden bespreken.
WAI-ARIA staat voor de internettoegankelijkheid rijke internettoepassingen van het webtoegankelijkheidsinitiatief. Dit initiatief neemt de vorm aan van een set richtlijnen en attributen die door het W3C worden onderhouden. Met behulp van deze kenmerken kunnen we relaties creëren tussen onze site-elementen die niet alleen via HTML kunnen worden uitgedrukt. Het belangrijkste voor ons gebruik hier is dat we elementrelaties kunnen definiëren buiten de ouder-kindrelatie, en duidelijker UI-elementen kunnen verbinden voor onze gebruikers..
Op dit moment is het misschien een goed idee om onze originele inleiding op ARIA te bekijken om een aantal fundamenten op te frissen.
Eerder hebben we gesproken over het toepassen van ARIA op een algemene website die leek op een algemene startpagina voor kleine bedrijven. Deze keer gaan we nader in op hoe ARIA de gebruikerservaring voor grote eCommerce-sites kan verbeteren.
We gaan ons concentreren op vier belangrijke gebieden van eCommerce die unieke situaties opleveren: productpagina's, categoriepagina's (of productaggregaatpagina's), multi-level navigatie en facet navigatie. We zullen deze twee wireframes gebruiken om ons door het proces te leiden:
Een zeer eenvoudig productmodel
Voorbeeld van een paginamodel van een productvermeldingIn het geval van de meeste websites is het toevoegen van ARIA een redelijk eenvoudig proces. U definieert de stukken van uw site, splitst ze op in landmarks en elementen en voegt de benodigde code toe.
We gaan een soortgelijk proces volgen met onze eCommerce-site, maar we hebben nu een nieuwe laag van ingewikkeldheid. Door de complexiteit van eCommerce-sites kan ARIA in veel gevallen een konijnenhol worden. Hoewel het belangrijk is om de toegankelijkheid van uw site zo veel mogelijk te verbeteren, zullen we helaas vaak zakelijke beperkingen tegenkomen. Daarom willen we eerst een beetje meer plannen, waarbij we prioriteit geven aan elk van onze ARIA-toevoegingen.
Door deze prioriteiten te stellen, kunnen we ervoor zorgen dat de belangrijkste aspecten van onze site eerst worden verbeterd, waardoor de gebruikerservaring zo goed als we kunnen in de beschikbare tijd.
Laten we beginnen met het bekijken van enkele productpagina's.
Deze pagina's zijn een nietjespagina voor elke eCommerce-site en tonen meestal een product, de beschikbare varianten en een manier om het item aan een winkelwagentje toe te voegen. Elk van deze interactieve elementen moet afzonderlijk worden beschouwd.
Laten we voor onze productpagina dit in stukjes splitsen: onze kernproductinformatie, interactieve elementen die van invloed zijn op het product, onze knop Toevoegen aan winkelwagentje en een uitgebreid inhoudgedeelte.
Als we prioriteit zouden moeten geven aan de implementatie op deze pagina, willen we het als volgt groeperen:
De belangrijkste factor die hier speelt, is iets waar we in een vorig artikel over spraken: ARIA helpt de intentie van een element te definiëren. In het geval van de uitgebreide inhoud hebben de meeste HTML-elementen die worden gebruikt elementen met een semantische betekenis en bedoeling die overeenkomst. Dit betekent dat hoewel het nuttig is om aanvullende ARIA-informatie te plaatsen als dat mogelijk is, dit waarschijnlijk minder belangrijk is dan de andere drie gebieden te voltooien.
Laten we beginnen door ARIA toe te voegen aan onze belangrijkste productinformatie. Dit is vrij eenvoudig vanwege de eenvoud van de elementen die hier worden gebruikt. De code ziet er zo uit:
Een mooie tas
Zak grootte:
100x150mm
Om te beginnen voegen we een rol toe aan de hoofd-div, en een relatie tussen de afbeelding en de titel van het product.
Een mooie tas
...
Dit is waar productpagina's een beetje lastig kunnen worden. Producten op een eCommerce-site kunnen nogal wat verschillende soorten variaties bevatten. Naast de typen die beschikbaar zijn, voegt het aantal dat tegelijkertijd kan worden gebruikt een nieuwe laag van complexiteit toe. In ons voorbeeld hebben we drie elementen die in het spel komen: grootte, kleur en hoeveelheid.
Laten we eens kijken hoe je dat kunt markeren. Hier is de code voor de ARIA-enhanced selectie en checkbox elementen:
De cart-knop lijkt op een standaardknop, maar we gaan er alles aan doen om deze duidelijker te markeren dan bij andere knoppen:
Ten slotte wordt het uitgebreide inhoudsgebied behandeld als een typisch inhoudsgebied. Afhankelijk van uw productpagina's kan het echter een goed idee zijn om uw belangrijkste inhoudsoriëntatiepunten te scheiden van uw aanvullende content-oriëntatiepunten. De tabbladen voegen hier ook een extra laag aan de code toe. Dit is hoe we het in ons voorbeeld zouden doen:
- Product informatie
Meer productinfo ...
Hoewel productpagina's in de meeste opzichten als een alternatieve vorm van inhoudspagina kunnen worden beschouwd, zijn de categoriepagina's van een site, ook wel Product Listing Pages (PLP's) genoemd, een heel ander beest. Ze werken als een grote navigatiestructuur, waardoor gebruikers honderden of zelfs duizenden producten kunnen sorteren.
Hierdoor worden ze steeds complexer en worden ze des te meer naarmate extra lagen content en filters worden toegevoegd (in de volgende sectie zullen we het hebben over faceted navigatie en filters). Laten we naar de twee hoofdgebieden van onze PLP kijken buiten de filters: de productblokken en de paginering.
Dit is ons startcodeframe:
Pagina met productvermeldingen
Kleur sorteren
Rood Groen ZwartGrootte sorteren
Groot klein...Een mooie tas
1 2 3 ... Laatste
Paginering is de naam die wordt gegeven aan de kleine links onderaan onze productvermeldingen hier. Meestal worden ze weergegeven met cijfers of pijlen, maar ze kunnen verschillende vormen aannemen. HTML-kant van dingen, paginatielinkjes zien er net als normale links. We zullen zeggen dat de onze de productvermeldingen beheert zonder om te leiden naar een andere pagina.
Om bekend te maken dat het op deze manier een inhoudsgebied bestuurt, moeten we het als een controller declareren, definiëren wat het controleert en vervolgens dat inhoudsgebied als levend markeren. Dit is hoe dat eruit ziet in ons geval:
...
Wanneer we ons leefgebied hier creëren, gebruiken we de "beleefd" instelling die ARIA beschikbaar stelt. Als uw wijzigingen relevant zijn en snel door de gebruiker moeten worden aangepakt, of als u prioriteit moet geven aan meerdere woongebieden, kunt u de waarde gebruiken "Assertief" ook.
Een unieke uitdaging voor productlandingspagina's is de intensieve navigatiecomplexiteit binnen de productvermeldingen zelf. Visueel gezien kan het eenvoudig genoeg zijn om de informatie te groeperen met visuele aanwijzingen om te bepalen welke informatie van toepassing is op welk product.
Doen met ARIA heeft een paar meer lagen dan de vorige toepassingen die we hebben behandeld. Als u een knop "Nu kopen" markeert, kan een standaardknop verwarring veroorzaken wanneer er 20 van deze knoppen op een pagina staan. Om dit op te lossen, moeten we duidelijke verbindingen maken tussen elk product en de bijbehorende elementen.
Dit doen we als volgt:
...Een mooie tas
Hoewel dit een beetje helpt bij het verduidelijken van relaties voor de gebruiker, is het nog steeds niet de beste implementatie. Een betere manier zou zijn om een aria-label dynamisch te genereren door het producttitelelement aaneen te rijgen met een extra woordgroep zoals "voeg toe aan winkelwagen".
Gefacetteerde navigatie verwijst naar de filters en opties die vaak worden weergegeven op eCommerce-sites, waardoor u uw zoekresultaten kunt verfijnen. Deze zijn er in vele smaken, van formaten tot kleuren en nog veel meer. Voor ons voorbeeld gaan we twee aannames doen:
Onze facetnavigatie actualiseert de producten live op de pagina. Dit is niet altijd het geval, omdat eCommerce-sites soms een nieuwe pagina genereren wanneer een filter wordt toegepast, maar we zullen werken alsof de site inhoud live bijwerkt.
Onze faceted navigatie maakt de selectie van meerdere filters mogelijk. Niet elke eCommerce-site doet dit en er zijn zeker gevallen waarin dit niet zou mogen. Dit creëert echter een extra laag van complexiteit buiten het bereik van dit artikel.
De HTML achter onze filters is vergelijkbaar met die van paginering en wordt in de code weergegeven als standaardkoppelingen. Voor ons gebruik is het echter de bedoeling van de filters om informatie te wijzigen die zich momenteel op de pagina bevindt. Daarom willen we de hele container rondom de filters markeren, zodat duidelijk wordt dat dit een controller is voor een ander gebied op de pagina:
Net als paginering, deze updates gebeuren live op de pagina. Daarom willen we de belangrijkste inhoud op onze pagina als 'live' markeren. Merk op dat we dit eerder in de paginering hebben gedaan, maar we herhalen de stap hier voor consistentie.
De code zou er als volgt uit moeten zien:
...Een mooie tas
Onze implementaties zijn nu allemaal op zijn plaats, dus laten we ze een aantal tests uitvoeren. Mijn favoriete hulpprogramma's hiervoor zijn Google's Accessibility Developer Tools of IBM Dynamic Assistant Plugin, maar afhankelijk van de schaal van je project, moet je misschien je eigen testscript maken.
Als u een tool nodig heeft die buiten Chrome werkt, of gewoon niet de voorkeur geeft aan de twee bovengenoemde, heeft W3C een lijst met andere toegankelijkheidstools die beschikbaar zijn.
Met deze nieuwe toevoegingen aan uw ARIA-toolset, zou u nu bijna elke eCommerce-site kunnen markeren. Om de beste gebruikerservaring met een eCommerce-site te garanderen, moet u uw navigatie zo eenvoudig mogelijk houden en de bedoelingen duidelijk kenbaar maken.
Heeft u nog vragen over dit onderwerp? Heb ik iets belangrijks gemist? Vertel me in de reacties hieronder!
