Tillgänglighet ≠ Overlay: när en modal dialog blockerar tangentbordsnavigering
En modal dialog kan hjälpa någon att bekräfta ett köp, logga in eller läsa viktig information. Felaktig fokushantering och tangentbordsstyrning kan däremot hindra personen från att slutföra uppgiften.
Ett hinder som dyker upp
Du aktiverar Fortsätt och en dialog öppnas. Skärmläsaren fortsätter läsa sidan bakom, eller så går det inte att nå Stäng med tangentbordet. Uppgiften avbryts.
Vad är en modal dialog?
En modal dialog samlar tillfälligt interaktionen kring en uppgift. Så länge den är öppen ska bakgrundens innehåll inte få fokus. Alla popup-fönster behöver inte vara modala.
Fokus ska följa användaren
När dialogen öppnas flyttas fokus till ett lämpligt element i den. Tab och Skift+Tab går mellan dialogens kontroller utan att hamna i bakgrunden. När den stängs återgår fokus normalt till öppningsknappen.
Tydliga namn och begripliga kontroller
Dialogen behöver ett tillgängligt namn, ofta kopplat till rubriken. Knappar ska tydligt säga Spara, Avbryt eller Stäng. En X-ikon utan etikett kan vara svår att förstå.
Stäng utan att fastna
Vanligtvis ska Escape stänga dialogen. Viktiga bekräftelser kan behöva särskild hantering, men valen måste förbli begripliga.
Vanliga problem
Fokus hamnar bakom dialogen, bakgrundskontroller är aktiva, meddelanden läses inte upp eller knappar blir svåra att nå när texten förstoras.
Så testar du
Öppna dialogen med bara tangentbordet. Kontrollera startfokus, Tab, Skift+Tab, Escape där det passar och att fokus återställs. Upprepa med skärmläsare och mobila enheter.
Så hjälper Blind Reader
Blind Reader ger stöd för orientering och navigering tillsammans med vanliga skärmläsare. Riktade korrigeringar kan förbättra vissa moment; själva dialogen måste också hantera fokus korrekt.
En dialog ska hjälpa dig vidare
En tillgänglig modal dialog gör det möjligt att förstå, välja och återgå till uppgiften.
Källor och referenser
Del 20 · Tillgänglighet ≠ Overlay