Niet alle functies van deze website (gemaakt met super.so) zijn nog volledig toegankelijk. Zo werkt de toetsenbordnavigatie nog niet voor alle functies, zoals de zoekfunctie en de ‘donkere modus’ (het maan/zon symbool).
Ook uitklapbare lijsten en koppen zijn niet standaard met het toetsenbord te bedienen.
Voor een deel is dat zelf aan te passen. Op deze pagina proberen we wat specifieke code om de toegankelijkheid van de site te testen en te verbeteren.
Hieronder een ‘code block’ met css-code om onderstaande tekst aan te passen: de achtergrond van dit blok wordt niet donker.
/*keeps background-color default in dark mode*/
.notion-code code, .notion-code pre {
text-shadow: rgba(255,255,255,.1) 1px 1px !important;
color: black !important;
background-color: #ddd !important;
}Testcode om de zoekfunctie via de tab-toets aanklikbaar te maken
//een class toevoegen aan een bestaand element (lijkt niet te werken)
<div class="super-navbar__button super-navbar__search" tabindex="0"></div>//Tabindex via HTML toevoegen (lijkt niet te werken)
<span class="notion-semantic-string" tabindex="0">Uitklapbare lijst.</span>/* focus op toggle t.b.v. toetsenbordnavigatie */
.notion-toggle__summary::before:focus {
background-color: ivory;
}Een knop maken van een link naar een pagina
gebruikte bronnen:
Super CSS Classes Super CSS Classes
MDN Web Docs :focus - CSS: Cascading Style Sheets | MDN
Toegankelijk Online Toetsenbordbediening, de toegankelijke basis van je website
