Conforme : Des liens d'accès rapide cachés visibles à la prise de focus.
Cliquez sur ce lien pour placer votre focus, puis tabulez pour voir apparaître les liens d'accès rapide.
Contenu principal
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus gravida risus id fermentum pellentesque. Maecenas sem nisi, facilisis vitae congue ac, dignissim vel diam. Aliquam fermentum non lorem in varius. Vivamus pulvinar massa leo, ut lacinia sem suscipit sit amet. Fusce placerat tincidunt convallis. Nullam in massa eu ipsum posuere cursus. Etiam id ligula massa. Interdum et malesuada fames ac ante ipsum primis in faucibus. Vestibulum et enim lobortis, lobortis justo quis, sodales ante. Phasellus dapibus elit ex. Aliquam erat volutpat. Donec blandit mi ac justo consectetur tempor. Etiam quam mi, blandit ac turpis vel, tincidunt convallis dolor. Nunc ullamcorper placerat quam in pulvinar. Curabitur tempor ultrices dui sit amet volutpat.
a{
position:absolute;
top:-10000px;
}
a:focus{
top:0;
}
Conforme : Des liens d'accès rapide toujours visibles.
Cliquez sur ce lien pour placer votre focus, puis tabulez sur les liens.
Contenu principal
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus gravida risus id fermentum pellentesque. Maecenas sem nisi, facilisis vitae congue ac, dignissim vel diam. Aliquam fermentum non lorem in varius. Vivamus pulvinar massa leo, ut lacinia sem suscipit sit amet. Fusce placerat tincidunt convallis. Nullam in massa eu ipsum posuere cursus. Etiam id ligula massa. Interdum et malesuada fames ac ante ipsum primis in faucibus. Vestibulum et enim lobortis, lobortis justo quis, sodales ante. Phasellus dapibus elit ex. Aliquam erat volutpat. Donec blandit mi ac justo consectetur tempor. Etiam quam mi, blandit ac turpis vel, tincidunt convallis dolor. Nunc ullamcorper placerat quam in pulvinar. Curabitur tempor ultrices dui sit amet volutpat.
a{
position:static;
top:-10000px;
}
/**pas de positionnement particulier,
les liens restent dans le flux normal
des éléments HTML**/
Non conforme : Des liens d'accès rapide cachés et inaccessibles
Cliquez sur ce lien pour placer votre focus, puis tabulez sur les liens. Les liens d'accès rapide n'apparaissent jamais.
Contenu principal
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus gravida risus id fermentum pellentesque. Maecenas sem nisi, facilisis vitae congue ac, dignissim vel diam. Aliquam fermentum non lorem in varius. Vivamus pulvinar massa leo, ut lacinia sem suscipit sit amet. Fusce placerat tincidunt convallis. Nullam in massa eu ipsum posuere cursus. Etiam id ligula massa. Interdum et malesuada fames ac ante ipsum primis in faucibus. Vestibulum et enim lobortis, lobortis justo quis, sodales ante. Phasellus dapibus elit ex. Aliquam erat volutpat. Donec blandit mi ac justo consectetur tempor. Etiam quam mi, blandit ac turpis vel, tincidunt convallis dolor. Nunc ullamcorper placerat quam in pulvinar. Curabitur tempor ultrices dui sit amet volutpat.
a{
display:none;
}
a:focus{
display:block;
/** le focus ne pourra jamais être pris,
le lien est caché par la propriété
display:none **/
}