Wat zijn goede tools voor het testen op toegankelijkheid, voor web en app?

[rianrietveld]

Deel hier je tools. Wat gebruik je, wat is handig, waar gebruik je een bepaalde tool voor en hoe test je ermee?
Dan helpen we elkaar aan goede tools en ideeen om te testen op toegankelijkeheid.

[rianrietveld]

Mijn toolset:

• Mijn toetsenbord, duh.
• Axe Devtools in de browser, haalt al veel toegankelijkheidsfouten uit een gegenereerde webpagina.
• HeadingsMap laat op een overzichtlijke manier de koppenstructuur van een webpagina zien.
• Landmarks toont de landmarkstructuur van een webpagina.
• text spacing bookmarklet van Steve Faulkner voor het testen van WCAG succescriterium 1.3.12.
• A11y Colour contrast table voor het testen van veel kleuren tegelijk.

[MeesoPost]

• Colorblindly om te kijken hoe een webpagina eruit ziet met verschillende types Kleurenblindheid. dit is er vaak eentje die ik vergeet dus om er een browser extensie voor te hebben help heel erg.
• ARC Toolkit Deze werkt vrijwel hetzelfde als Axe Devtools maar geeft vaak nog andere resultaten, dus om deze te combineren is echt heel fijn.
• Taba11y
  is een extensie voor chrome (en chromium based browsers)die de tab order visualiseert, erg handig om de flow van een website te testen

[jeffreylauwers]

• Naast de al genoemnde Axe Devtools soms ook de WAVE Evaluation Tool-extensie voor Google Chrome.
• Accessibility Scanner van Android.
• Schermlezer van Apple: VoiceOver.
• Schermlezer van Android: Talkback.
• Toetsenbord.
• Tekst vergroten via instellingen browser.

En specifiek voor kleur...

• Accessible Palette - Eugene Fedorenko.
  Online tool waarmee je een kleurenpalet kunt genereren en direct contrast kunt checken.
• Contrast grid - Eightshapes
  Online tool waarbij je meerdere kleuren kunt invullen. Vervolgens ontstaat er een tabel waardoor je het contrast kunt checken.
• Color review - Anton Robsarve
  Online tool waarbij je twee kleuren kunt invullen. Vervolgens kun je checken hoeveel contrast deze kleurcombinatie oplevert. Daarnaast heb je de mogelijkheid om via een colorpicker naar voldoende contrast op zoek te gaan.
• Who can use - Corey Ginnivan
  Online tool waarbij je twee kleuren kunt invullen. Vervolgens kun je checken hoe deze kleurcombinatie overkomt bij verschillende visuele beperkingen.
• Viz palette - Elijah Meeks & Susie Lu
  Online tool waarbij je meerdere kleuren kunt invullen specifiek voor data visualisatie. Vervolgens kun je checken hoe deze kleurcombinatie overkomt bij verschillende visuele beperkingen.

[scar055]

polypane gebruik ik. Het is wel betaald, maar je krijgt als developer er veel uit want je krijgt dev tools.

• de site te zien in 3 verschillende vensters (telefoon, tablet en desktop).
• Kleurblindheid simulatie.
• visuele beperking simulatie als voorbeeld tunnel visie.
• verschillende helderheid van scherm als voorbeeld de zon schijnt er op
• en dyslexie simulatie
• color picker met ingebouwde contrast checker

[Wilco-acato]

Ik zie al hele goede tips en links naar nieuwe en voor mij al bekende tools. Super!
Graag wil ik er nog een aan toevoegen die ik gebruik tijdens het ontwerpen, namelijk de Stark plugin voor Figma: https://www.getstark.co/figma/
Deze gebruik ik in Figma om op 'contrast', 'typografie', 'hierarchie' en 'touch-targets' te testen tijdens de designfase.

Voor developers is er ook een versie beschikbaar: https://www.getstark.co/for-developers/

[rianrietveld]

Focus-indicatorberekening van Robbert toevoegen als die af is, zie
#628 (comment)
Voorbeeld van berekening (work in progress!) van focus outline area. https://frameless.studio/design/focus-indicator

Dingen die nog ontbreken uit de berekening:

• achtergrondkleur container contrast ratio
• achtergrondkleur button contrast ratio
• border color contrast ratio
• box-shadow ring oppervlakte meetellen en contrast ratio berekenen