Trei componente apar pe aproape orice site și concentrează cele mai multe probleme de accesibilitate raportate de scanner: meniul de navigare cu submeniuri, fereastra modală și acordeonul. Pattern-urile corecte sunt standardizate de ani de zile în ARIA Authoring Practices: le rezumăm cu deciziile practice.
Meniul cu submeniuri
Butonul care deschide submeniul e <button> cu aria-expanded comutat la deschidere/închidere, nu un link gol, nu un div pe hover. Submeniul se deschide la click/Enter, nu doar la hover (hover nu există pe tastatură și ecrane tactile); Escape îl închide și întoarce focusul pe buton. Elementul paginii curente poartă aria-current="page". Capcana clasică: meniul „mega" care la hover funcționează superb și de la tastatură e complet mort.
Fereastra modală
Elementul <dialog> nativ cu showModal() rezolvă azi gratuit ce se implementa greșit ani de zile: focus capturat în fereastră, Escape funcțional, fundal inert. Dacă rămâi pe implementare proprie, lista obligatorie: focusul intră în modal la deschidere, nu poate ieși cu Tab cât e deschis, revine pe declanșator la închidere; role="dialog" și aria-labelledby către titlu; fundalul marcat inert. Criteriul încălcat de modalele rele e 2.1.2: capcana de tastatură, una dintre cele mai grave erori posibile.
Acordeonul
Antetul e un <button> în interiorul unui heading (<h3><button>): astfel apare și în navigarea prin titluri, și e operabil. aria-expanded pe buton reflectă starea; conținutul ascuns e ascuns real (hidden sau display:none), nu doar mutat în afara ecranului, ca să nu fie citit fantomatic. Iconița plus/minus e decorativă (aria-hidden): starea o transmite atributul, nu desenul. Exact așa sunt construite acordeoanele FAQ de pe acest site: vezi sursa la pagina de întrebări frecvente.