Op deze pagina over toegankelijkheidsvoorzieningen in Anthology Adopt-handleidingen ontdek je hoe je handleidingen alle gebruikers kunnen bereiken.
Overzicht
Deze suggesties zijn toegankelijkheidsaanbevelingen van Pendo op basis van de huidige set functies. Dit document is niet bedoeld als bewijs of als aanduiding van de naleving van WCAG 2.1 AA-toegankelijkheidsstandaarden of andere, vergelijkbare standaarden. De toegankelijkheidsvoorzieningen van Pendo zijn ontworpen om toegankelijke handleidingen te maken, maar Pendo garandeert niet dat de inhoud voldoet aan elke toegankelijkheidsstandaard.
De toegankelijkheid van webinhoud zorgt voor een rechtvaardige toegang tot het internet. Pendo-handleidingen bieden belangrijke informatie en communicatie over je toepassing voor gebruikers. De toegankelijkheidsvoorzieningen van handleidingen zorgen ervoor dat alle gebruikers je Pendo-handleidingen kunnen vinden en gebruiken.
In alle handleidingen worden bepaalde toegankelijkheidsvoorzieningen automatisch toegepast, zoals focus- en invoerkenmerken voor badges en toetsenbordnavigatie. Andere voorzieningen moeten worden geconfigureerd tijdens het maken van de handleiding. Voorzieningen zoals automatische focus, ARIA-labels, alt-tekst, titel en ARIA-rollen kunnen worden ingesteld in de Visual Design Studio als je een handleiding samenstelt. Sommige vereisten van toegankelijkheidsrichtlijnen, zoals het kleurcontrast, ondertitels voor ingesloten video of audio, en de grootte van klikbare elementen moeten door de ontwerper van de handleiding worden geïmplementeerd.
Aanbevelingen
Activering van de handleiding
- Door badges geactiveerde handleidingen zijn toegankelijker. Deze handleidingen zijn toegankelijker dan handleidingen met automatische elementen of doelelementen, omdat ze de gebruiker de mogelijkheid geven ze te activeren.
- Je moet de badgepositie altijd instellen op 'inline rechts' of 'inline links'. Dit beperkt de plek waar je de badge in de gebruikersinterface kunt plaatsen, maar zorgt ervoor dat er in een logische volgorde naar de badge genavigeerd kan worden met de toetsenbordnavigatie.
Creatie van de handleiding
- Voeg waar mogelijk beschrijvende alt-tekst of ARIA-labels toe. Deze worden gelezen door ondersteunende technologieën en bieden de benodigde context voor gebruikers.
- De ARIA-rollen Dialoog, Banner en Complementair zijn de meest voorkomende en nuttige voor Anthology Adopt-handleidingen.
- Automatische focus moet altijd worden geselecteerd voor de beste ervaring met de handleiding.
- Controleer of de kleurcontrastverhouding van de elementen van de handleiding voldoet aan de WCAG AA-standaard in het thema van de handleiding.
- Pas de grootte van badges aan naar 24 pixels. Dit is de WCAG 2.2 AA-vereiste voor de minimale doelgrootte.
Toegankelijkheid van de handleiding configureren
Configureer toegankelijkheidsvoorzieningen in de container- en Building Block-instellingen van een handleiding in Visual Design Studio. Als er toegankelijkheidsinstellingen beschikbaar zijn voor een element, bevinden deze zich op het tabblad Toegankelijkheid van Bewerken.
De Kleurcontrastcontrole is beschikbaar wanneer je een thema maakt of wijzigt in de Thema-instellingen in de Visual Design Studio.
Configureerbare kenmerken
Hieronder volgen kenmerken die je kunt bewerken in de container- en Building Block-instellingen om je handleidingen toegankelijker te maken. Elk kenmerk in de lijst bevat ook de plek waar ze kunnen worden bewerkt.
- Kleurcontrast. Achtergrond- en lettertypekleur van elementen met tekst.
- alt (Alt-tekst van afbeelding). Building Block van afbeelding.
- aria-label. Container, knop sluiten, knop, badge, tekst van Building Block.
- aria-modal. Container wanneer achtergrond is ingeschakeld.
- rol. Container voor elke stap in de handleiding.
- titel. Video van Building Block
- Deze stap automatisch focussen. Container voor elke stap in de handleiding.
Niet-configureerbare kenmerken (automatisch toegepast)
- h2, h3, p (semantische kopteksten). Titels, ondertitels en tekstblokken met alinea's worden automatisch toegewezen aan het juiste kop- of alinea-element.
- aria-labeldoor. Hiermee maak je een relatie tussen twee elementen die worden gebruikt door open tekst: ja/nee-, meerkeuze-, nummerschaal- en NPS-peilingen.
- aria-beschrevendoor. Hiermee maak je een relatie tussen twee elementen die worden gebruikt in nummerschaalpeilingen en NPS-enquêtes om de eerste en de laatste cijfers in de schaal te koppelen aan hun tekstbeschrijving.
- aria-uitgevouwen. Automatisch toegepast op badges voor handleidingen en het informatiecentrum.
- rol - rol="groep". Automatisch toegepast op ja/nee-knoppen en meerkeuzerondjes in Building Blocks van peilingen.
Thema-instellingen openen
1. Selecteer Handleidingenin het zijpaneel en selecteer vervolgens Thema beheren.
2. Selecteer in het gebied Typografie of Knop het potloodpictogram om het te bewerken.
3. De Kleurcontrastcontrole wordt weergegeven wanneer je het bestand bewerkt. Dit controleert of de kleurkeuzemogelijkheden die op je handleidingen worden toegepast, voldoen aan de vereisten voor de contrastverhouding van WCAG AA 4.5:1 of WCAG AAA 7:1. De weergave wordt in realtime bijgewerkt wanneer je de kleuren van achtergronden en lettertypen wijzigt. Als er niet wordt voldaan aan de vereiste contrastverhouding, worden de WCAG-tags rood. Als er wordt voldaan aan de vereiste, worden de WCAG-tags groen.
Toegankelijkheidsinstellingen van container bewerken
Selecteer de rand van een afzonderlijke stap in een handleiding om Container-instellingen te openen in Visual Design Studio.
Elke stap in de handleiding heeft unieke instellingen om de weergave en het gedrag van die stap te bepalen. Als je toegankelijke handleidingen met meerdere stappen maakt, moet het tabblad Toegankelijkheid worden geconfigureerd voor elke stap in de handleiding.
Toegankelijkheidsinstellingen van de container
- ARIA-label - Toegankelijke naam. Stel het ARIA-label in voor de hele container van de handleiding.
- Rol. Selecteer de ARIA-rol in een vervolgkeuzemenu met beschikbare rollen (geen rol, artikel, banner, complementair, inhoudsinfo, dialoogvenster, formulier, hoofdmenu, navigatie, presentatie en regio).
- Focus deze stap automatisch. Richt de focus van ondersteunende technologie op de handleiding.
- ARIA-label : knop Sluiten. Stel ARIA-labels in voor de standaardknop Sluiten, die ook in- of uitgeschakeld kan worden in de containerinstellingen.
Tekst- of knopinstellingen bewerken
Selecteer in Visual Design Studio de plusknop van het element dat je wilt bewerken. Het instellingenvenster Building Blocks wordt geopend.
Het ARIA-label kan geconfigureerd worden voor de tekst- en knoppen-Building Blocks.
Semantische HTML voor de tekst-Building Blocks
De tekst-Building Blocks wijzen automatisch semantische kopteksten toe in de HTML op basis van de geselecteerde themastijl in de Building Blocks-instellingen.
- Titel is een h2-element
- Subtitel is een h3-element
- Alinea is een p-element
- Aangepast behoudt de semantische kop voor de laatst toegewezen stijl (bijv. een tekstblok waarbij de alineastijl is gewijzigd in een aangepaste stijl, blijft een p-element)
Afbeeldingsinstellingen bewerken
Selecteer Building Block van de afbeelding om de Building Block-instellingen van de afbeelding te openen. De alt-tekst van de afbeelding kan geconfigureerd worden voor de Building Blocks van afbeelding. De alt-tekst heeft de voorkeursmethode voor het toevoegen van toegankelijke tekst aan afbeeldingen. De ARIA-labels worden over het algemeen niet gebruikt met afbeeldingen.
Video-instellingen bewerken
Selecteer Building Block van de video om de Building Block-instellingen van de video te openen. De titel kan geconfigureerd worden voor Building Blocks van de video. De titel heeft de voorkeursmethode voor het toevoegen van toegankelijke tekst aan video's.
Peilinginstellingen bewerken
De verschillende Building Blocks voor de peiling hebben een combinatie van configureerbare en niet-configureerbare instellingen om ze toegankelijk te maken.
Selecteer de antwoordvelden van de peiling om de Peilinginstellingen te openen. Tekst- en knopelementen in de peiling hebben ARIA-labelvelden.
De rollen ARIA-beschrevendoor, ARIA-labeldoor en groep worden automatisch toegepast om de antwoorden van de peiling te verbinden met de bijbehorende vraagtekst.
Badgegrootte bewerken
Een badge is een van de manieren waarop gebruikers een Adopt-handleiding kunnen activeren binnen Blackboard. De standaardgrootte van Anthology Adopt-badges is 14 pixels. De vereiste voor WCAG 2.2 AA voor een minimale doelgrootte is 24 pixels.
Selecteer Activering om de Activeringsinstellingen te openen als je de badgegrootte wilt wijzigen. Selecteer onder Badges de optie Instellingen bewerken.
Op het tabblad Styling, in het veld Grootte, kun je de pixelgrootte van de badge binnen een bereik van 8px tot 300px aanpassen. Wanneer je het getal in het veld wijzigt, verandert de grootte van de badge in realtime.
Schaal van de afbeelding
WCAG-richtlijnen bepalen dat inhoud moet worden aangeboden "zonder verlies van informatie of functionaliteit, en zonder dat iemand in twee dimensies moet scrollen." Containers van handleidingen schalen Building Blocks van afbeeldingen automatisch om aan deze vereiste te voldoen. Als een gebruiker inzoomt op een handleiding, wordt de afbeelding automatisch proportioneel geschaald met de breedte van de container en wordt de afbeelding niet afgesneden of worden er geen horizontale schuifbalken aan toegevoegd.
Best practices voor afbeeldingen met de volledige breedte
Containers van Pendo-handleidingen hebben standaard 40 pixel opvulling rond de buitenrand om de inhoud van de handleiding te verdelen en het ontwerp van de handleiding eenvoudiger te maken. Afbeeldingen met opvulling ingesteld op 100% blijven binnen de standaardwaarde van 40 pixels. Negatieve marges kunnen worden gebruikt om de afbeelding over de volledige breedte van de container te spreiden. Bij het schalen van de afbeelding wordt de afbeelding automatisch aangepast aan de breedte van de container als de gebruiker in- of uitzoomt.
Instellingen voor marge op de volledige breedte
Alle waarden zijn negatieve getallen
- Linkermarge -40px
- Rechtermarge -40px
- Als je de opvullingsinstellingen voor de container van de handleiding hebt gewijzigd, moet je de negatieve marge afstemmen op de waarden voor containeropvulling
Als je aangepaste opvulling en marges gebruikt om Building Blocks van afbeeldingen op creatieve wijze aan te passen op posities die niet worden ondersteund door de standaardplaatsing van Building Blocks, kan het schalen van afbeeldingen de presentatie en plaatsing van deze afbeeldingen vervormen. Bekijk de handleidingen op verschillende zoomniveaus om te zien of je aangepaste instellingen invloed hebben op de automatische schaling van afbeeldingen.
Focus
Met focusstatussen kunnen gebruikers apps gebruiken zonder dat ze een muis of touchpad nodig hebben. Een focusstatus kan als een ring rond een element weergegeven worden, afhankelijk van CSS-vormgeving. Met Chrome versie 83 en hoger kun je focuselementen in je app vormgeven. Je merkt misschien dat browsers een focusstatus toevoegen, zoals een omlijning rond het element, wanneer je op deze elementen klikt of een pagina met de Tab-toets doorloopt.
HTML-tag - Invoer
Badges gebruiken de input-tag in HTML. Ze nemen waarschijnlijk de eigenschappen over die aan input in je CSS-vormgeving zijn toegewezen. Voordat de toegankelijkheidsvoorzieningen werden toegevoegd, gebruikten badges de img-tag. Dit is een voorbeeld van de Informatiecentrum-badge die is gecontroleerd met de ontwikkelingstools van een Chrome-browser:
<input type=”image” id=”pendo-image-badge-ID" src=”image-URL” data-_pendo-image-1 class=“_pendo-image _pendo-badge-image _pendo-resource-center-badge-image" style=“display: block; height: 56px; width: auto; box-shadow: rgba(255, 255, 255, 0) 0px 0px 0px 0px; float: none; vertical-align: baseline;”>
Automatische focus
Automatisch focussen op deze stap houdt de focus van ondersteunende technologie op de stap in de handleiding totdat deze wordt gesloten. Deze instelling kan geconfigureerd worden in de Containerinstellingen voor elke stap in de handleiding.
ARIA-label, alt-tekst en titel
ARIA-labels, alt-tekst en titel worden gebruikt om elementen die niet in de UI worden beschreven op een toegankelijke manier te identificeren. Toegankelijkheidstools gebruiken deze eigenschappen op verschillende manieren. Een schermlezer kan het ARIA-label bijvoorbeeld hardop voorlezen aan de gebruiker. Het ARIA-label verwijst naar Building Blocks voor tekst en knoppen, alt-tekst is van toepassing op Building Blocks van de afbeelding en titel wordt gebruikt voor Building Blocks van de video. Dit is een voorbeeld van het label dat is gecontroleerd met de ontwikkelingstools van een Chrome-browser:
<div id=“pendo-guide-container" data-editing-id=“f3db5a53-a87a-49b3-949f-e14f9e0eaf" class=“class=“_pendo-guide-container-styles" aria-model=“false” aria-label=“New user walkthrough” role=“dialog” style=“border: 1px solid rgb(187, 187, 187); background-color: rgb(255, 255, 255); border-radius: 0px; box-shadow: rgb(136, 136, 136) 0px 0px 20px 0px; display: block; position: relative; float: none; vertical-align: baseline; padding: 40px;”>...</div>
ARIA-label, alt-tekst en titel worden toegevoegd aan elk afzonderlijk Building Block.
Zie voor meer informatie de W3C-definities voor ARIA-labels en alt-tekst voor afbeeldingen.
Toetsenbordnavigatie
Sommige gebruikers kunnen de pagina mogelijk niet gebruiken met de cursor of het touchscreen. Toetsenbordnavigatie is een belangrijk onderdeel voor de toegankelijkheid van inhoud. Gebruikers kunnen door de inhoud van een handleiding navigeren met het toetsenbord.
- Selecteer Esc om de huidige actieve handleiding te negeren
- Selecteer Tab om verder te gaan door de elementen in een stap in de handleiding
ARIA-rol van de handleiding
ARIA-rollen worden gebruikt om elementen voor ondersteunende technologieën te identificeren en zo de gebruiker de juiste hulp te bieden. Rollen worden gedefinieerd in het ARIA-rollenmodel en hebben specifieke doelen. Er zijn bijvoorbeeld verschillende rollen voor widgets die interactieve elementen identificeren en de structuur documenteren die inhoud organiseert op de pagina, die meestal niet interactief zijn.
De rol wordt ingesteld voor elke afzonderlijke stap in de handleiding.
<div id=“pendo-guide-container" data-editing-id=“f3db5a53-a87a-49b3-949f-e14f9e0eaf" class=“class=“_pendo-guide-container-styles" aria-model=“false” aria-label=“New user walkthrough” role=“dialog” style=“border: 1px solid rgb(187, 187, 187); background-color: rgb(255, 255, 255); border-radius: 0px; box-shadow: rgb(136, 136, 136) 0px 0px 20px 0px; display: block; position: relative; float: none; vertical-align: baseline; padding: 40px;”>...</div>
Beschikbare rollen
- Geen rol
- Artikel
- Banner
- Complementair
- Inhoudsinfo
- Dialoogvenster
- Formulier
- Hoofdmenu
- Navigatie
- Presentatie
- Regio
W3C adviseert rollen niet te laten veranderen door het gedrag van de gebruiker of in de loop van de tijd na het publiceren van inhoud aan gebruikers. Platforms en ondersteunende apparaten hebben in het algemeen geen API's die het mogelijk maken om rollen geleidelijk bij te werken. De eerste rol die ondersteunende technologie ziet, wordt meestal in de cache opgeslagen en wordt niet bijgewerkt. Als je de ARIA-rol van een gepubliceerde handleiding wilt wijzigen, moet je de handleiding klonen, de rol wijzigen, de bijgewerkte handleiding publiceren en de vorige versie uitschakelen. Het klonen van de handleiding genereert nieuwe ID's en de nieuwe inhoud in de handleiding wordt opgeslagen in het cachegeheugen van ondersteunende apparaten.
