Statut
Component checklist
Usage
L’intégration des liens d’évitement est une obligation pour l’ensemble des sites.
Le composant doit toujours être placé au tout début de la page. Le composant est masqué par défaut
Le choix des liens à afficher dépend des éléments clés présents dans le site. Le lien minimum est “Accéder au contenu”, les autres liens doivent être choisis en fonction des fonctionnalité/zone clés.
Pour que les liens d'évitement soient efficaces, il faut en limiter le nombre.
<dsa-skip-links>
<dsa-skip-link-item href="#section-1">Aller à la section 1</dsa-skip-link-item>
<dsa-skip-link-item href="#section-2">Aller à la section 2</dsa-skip-link-item>
<dsa-skip-link-item href="#section-3">Aller à la section 3</dsa-skip-link-item>
</dsa-skip-links>
<script type="text/typescript">
import '@ds-autonomie/web-components/dist/components/skip-links/skip-links.js';
import '@ds-autonomie/web-components/dist/components/skip-link-item/skip-link-item.js';
import type { DSASkipLinks, DSASkipLinkItem } from '@ds-autonomie/web-components'
</script>
Code HTML à implémenter pour utiliser le composant lien d'accès rapide
import { Component } from '@angular/core';
import type { DSASkipLinks, DSASkipLinkItem } from '@ds-autonomie/web-components'
import '@ds-autonomie/web-components/dist/components/skip-links/skip-links.js';
import '@ds-autonomie/web-components/dist/components/skip-link-item/skip-link-item.js';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {}
app.component.ts
<dsa-skip-links>
<dsa-skip-link-item href="#section-1">Aller à la section 1</dsa-skip-link-item>
<dsa-skip-link-item href="#section-2">Aller à la section 2</dsa-skip-link-item>
<dsa-skip-link-item href="#section-3">Aller à la section 3</dsa-skip-link-item>
</dsa-skip-links>
app.component.html
À noter :
Les liens d'évitement pointent vers des ancres (#intitulé), qui doivent être présentes dans la page.
Par exemple, le lien <dsa-skip-link-item href="#section-1">Aller à la section 1</dsa-skip-link-item> ne peut fonctionner que si un élément avec l’id “section-1” est présent dans la page (comme <main id=”section-1”), à l’endroit souhaité.
Les liens d'évitement pointent vers des ancres (#intitulé), qui doivent être présentes dans la page.
Par exemple, le lien <dsa-skip-link-item href="#section-1">Aller à la section 1</dsa-skip-link-item> ne peut fonctionner que si un élément avec l’id “section-1” est présent dans la page (comme <main id=”section-1”), à l’endroit souhaité.
API