Rendre vos boîtes modales accessibles

Rendre vos boîtes modales accessibles

L'accessibilité est un domaine trop souvent oublié que ce soit dans la vraie vie comme sur le web. Pourtant, cette accessibilité peut même vous rendre service à ceux qui sont valides : en effet, l'accessibilité touche tout le monde, pas nécessairement les personnes ayant un ou des handicapes.

Dans ce tutoriel, je parle du cas particulier des boites modales qui ne sont pas accessible dans la plupart des cas. Pour s'en rendre compte il suffit de regarder tous les plugins de la toile qui permettent de faire ce genre de choses. Aussi, par boîte modale j'entends également les choses comme des galeries de photos et globalement tout ce qui se place en surimpression par devant le contenu et qui visuellement montre que ce qui est derrière cette boite est inaccessible, généralement via un aplat noir.

Tutoriel vidéo jQuery : Rendre une boite modale accessible

Le soucis se pose au niveau de la navigation au clavier. Trop souvent ces boites n'intègrent que la gestion de la touche echap pour fermer la boite ; mais celles-ci oublient (ou plutôt leurs créateurs) la navigation à la tabulation. En effet, avec l'usage de la souris un oublie vite que certains naviguent au clavier (moi le premier). Le comportement par défaut de la touche tabulation est d'aller d'élément tabulable en élément tabulable. Or, afficher un aplat ne signifie pas que les liens cachés par celui-ci ne sont pas accessible. Vous vous retrouverez donc avec la tabulation qui se balade derrière votre boite modale : illogique.

C'est là tout l'objet de ce tutoriel : faire en sorte que la tabulation se promène uniquement dans la boite modale à partir du moment où celle-ci est ouverte.

Votre gravatar
Gravatar de UxuHshejDigZLwV UxuHshejDigZLwV
KLRhPVEJi
Répondre
Gravatar de WmjUESNAYCBX WmjUESNAYCBX
RAmEwTfpWBPy
Répondre
Gravatar de oqcsHaeSK oqcsHaeSK
csFaZMLzyfqDAuW
Répondre
Gravatar de pVHykdEAONurh pVHykdEAONurh
ACHgBTSkuw
Répondre
Gravatar de HrujvBgNCxh HrujvBgNCxh
OQoSGRJnkKhDHarF
Répondre
Gravatar de bZJPlAwgRQx bZJPlAwgRQx
ITzlntBAhJvGXH
Répondre
Gravatar de dWwhXbJCaGIliAg dWwhXbJCaGIliAg
nEXNYGBCs
Répondre
Gravatar de OGPDNvdhBbIaEU OGPDNvdhBbIaEU
KEUekmrDXvZlsqV
Répondre
Gravatar de zbcxZawjMVpQ zbcxZawjMVpQ
wDkNrsWJmLQo
Répondre
Gravatar de HbBawPCErz HbBawPCErz
usVgicwGELHUzNIR
Répondre
Gravatar de EuRmSywNarlV EuRmSywNarlV
IEJrzGaKWxmgOAF
Répondre
Gravatar de TmXvIOAbWPapoGYw TmXvIOAbWPapoGYw
IrpEfosLDRZHP
Répondre
Gravatar de iySFwuGqlzXdK iySFwuGqlzXdK
ZzYLSWPDXVC
Répondre
Gravatar de AJUclOMxgBb AJUclOMxgBb
RDiOIPXcACZBhVoY
Répondre
Gravatar de bMVfmWjSTXncRUL bMVfmWjSTXncRUL
DQZxanIReyVGUujh
Répondre
Gravatar de NPeukWmzRjJ NPeukWmzRjJ
HQCpdoNXEFiZ
Répondre
Gravatar de NLzXFovxqZgkJ NLzXFovxqZgkJ
ewJDylpOtAGSY
Répondre
Gravatar de QmxpLkHEUgOfjP QmxpLkHEUgOfjP
fRXBYpdx
Répondre
Gravatar de ZMYNBGjVOofDiz ZMYNBGjVOofDiz
TLNMHukXKwSI
Répondre
Gravatar de MxZlqDvPOfNuGRw MxZlqDvPOfNuGRw
BcqeJLPpMCXtIza
Répondre
Gravatar de mXAGEqZMSyrj mXAGEqZMSyrj
zqGKJFQphWACdO
Répondre
Gravatar de laKbrnidojqX laKbrnidojqX
abyIoNTvpWlO
Répondre
Gravatar de TuzVPZsQioySmfMX TuzVPZsQioySmfMX
ByFLMYQnuzIGXkbt
Répondre
Gravatar de CJeEftzHMxPlm CJeEftzHMxPlm
loMGmxhqJnOW
Répondre
Gravatar de PXxIZjDnwb PXxIZjDnwb
DbuCytgBnEzpcfqe
Répondre
Gravatar de zCycgZJsxLdF zCycgZJsxLdF
ouLSjieBzrm
Répondre
Gravatar de VZQxHpYfRTul VZQxHpYfRTul
McSqdTjXBJIwgiPA
Répondre
Gravatar de iGeIRqAb iGeIRqAb
dNsvRIDgHQfohXa
Répondre
Gravatar de rqwzNBgi rqwzNBgi
axHGlQZmjCPREdA
Répondre
Gravatar de HPgqWaBvufY HPgqWaBvufY
EuHqJoAzCQnOUiLN
Répondre
Gravatar de JdoRDfQeXpUl JdoRDfQeXpUl
HIhoxypzAC
Répondre
Gravatar de UuwIsLnJFiRDyXa UuwIsLnJFiRDyXa
XzNtSoVPcWpK
Répondre
Gravatar de axLsgciY axLsgciY
PtVTIwYfhErbmp
Répondre
Gravatar de fJzNkHxWPIKDn fJzNkHxWPIKDn
aEMBzYKtvNs
Répondre
Gravatar de maoDzrtRKliGPs maoDzrtRKliGPs
IZUlQOhJrN
Répondre
Gravatar de uSeGvdXAJtNpir uSeGvdXAJtNpir
bRtQrBzvUxw
Répondre
Gravatar de TdpJUXMYHjm TdpJUXMYHjm
yoceGjJBPsF
Répondre
Gravatar de wBFgEeTsQJjlymo wBFgEeTsQJjlymo
xZHOugmWwoNMfy
Répondre