pages.ariaComponents.whatIsAria.title

pages.ariaComponents.whatIsAria.introARIA (Accessible Rich Internet Applications)

pages.ariaComponents.principles.roles.title

pages.ariaComponents.principles.roles.description

pages.ariaComponents.principles.roles.example

pages.ariaComponents.principles.states.title

pages.ariaComponents.principles.states.description

pages.ariaComponents.principles.states.example

pages.ariaComponents.principles.properties.title

pages.ariaComponents.principles.properties.description

pages.ariaComponents.principles.properties.example

pages.ariaComponents.goldenRules.title

pages.ariaComponents.goldenRules.rule

pages.ariaComponents.forms.title

components.exampleToggle.badExample

pages.ariaComponents.forms.bad.title

pages.ariaComponents.forms.bad.description

<!-- pages.ariaComponents.codeExamples.forms.badNoLabel -->
<input type="text" placeholder="pages.ariaComponents.forms.bad.emailPlaceholder">

<!-- pages.ariaComponents.codeExamples.forms.badIconNotAccessible -->
<button>
  <span class="icon">🔍</span>
</button>

<!-- pages.ariaComponents.codeExamples.forms.badErrorNotAssociated -->
<input type="password">
<div class="error">pages.ariaComponents.forms.bad.errorMessage</div>
pages.ariaComponents.forms.bad.errorMessage
pages.ariaComponents.forms.good.termsLabel pages.ariaComponents.forms.good.termsLink

components.exampleToggle.goodExample

pages.ariaComponents.forms.good.title

pages.ariaComponents.forms.good.description

<!-- pages.ariaComponents.codeExamples.forms.goodAriaLabel -->
<input
  type="text"
  aria-label="pages.ariaComponents.forms.good.emailLabel"
  aria-describedby="email-desc"
  aria-required="true">
<span id="email-desc">pages.ariaComponents.forms.good.emailHint</span>

<!-- pages.ariaComponents.codeExamples.forms.goodButtonLabel -->
<button aria-label="pages.ariaComponents.forms.good.submitLabel">
  <span aria-hidden="true">🔍</span>
</button>

<!-- pages.ariaComponents.codeExamples.forms.goodErrorAssociated -->
<input
  type="password"
  aria-label="pages.ariaComponents.forms.good.passwordLabel"
  aria-invalid="true"
  aria-describedby="pwd-error"
  autocomplete="new-password">
<div id="pwd-error" role="alert">
  pages.ariaComponents.forms.good.passwordError
</div>
pages.ariaComponents.forms.good.emailHint
pages.ariaComponents.forms.good.passwordRequirements
pages.ariaComponents.forms.good.notificationOptions
pages.ariaComponents.forms.good.emailNotificationHint
pages.ariaComponents.forms.good.smsNotificationHint
pages.ariaComponents.ariaAttributes.title
  • pages.ariaComponents.ariaAttributes.ariaLabel
  • pages.ariaComponents.ariaAttributes.ariaDescribedby
  • pages.ariaComponents.ariaAttributes.ariaRequired
  • pages.ariaComponents.ariaAttributes.ariaInvalid
  • pages.ariaComponents.ariaAttributes.ariaLabelledby
  • pages.ariaComponents.ariaAttributes.roleAlert
  • pages.ariaComponents.ariaAttributes.ariaHidden
  • pages.ariaComponents.ariaAttributes.ariaLive

components.exampleToggle.explanation pages.ariaComponents.forms.explanation

pages.ariaComponents.accordion.title

components.exampleToggle.badExample

pages.ariaComponents.accordion.bad.title

pages.ariaComponents.faq.questions.q1.title+
pages.ariaComponents.faq.questions.q2.title+
pages.ariaComponents.faq.questions.q3.title+
<!-- pages.ariaComponents.codeExamples.accordion.badComment -->
<div class="accordion-header" @click="toggle">
  <span>Title</span>
  <span>+</span>
</div>
<div v-if="open">
  Content
</div>

components.exampleToggle.goodExample

pages.ariaComponents.accordion.good.title

<!-- pages.ariaComponents.codeExamples.accordion.goodComment -->
<button
  id="accordion-button-1"
  aria-expanded="false"
  aria-controls="panel-1"
  @click="toggle"
  @keydown.enter="toggle"
>
  Title
</button>
<div
  id="panel-1"
  role="region"
  aria-labelledby="accordion-button-1"
  :hidden="!open"
>
  Content
</div>

components.exampleToggle.explanation pages.ariaComponents.accordion.explanation

pages.ariaComponents.tabindex.title

pages.ariaComponents.tabindex.intro

pages.ariaComponents.tabindex.positive.title

pages.ariaComponents.tabindex.positive.description

tabindex="0"
<!-- pages.ariaComponents.codeExamples.tabindex.goodInteractive -->
<div role="button" aria-label="Custom action" tabindex="0">
  Custom button
</div>

pages.ariaComponents.tabindex.negative.title

pages.ariaComponents.tabindex.negative.description

tabindex="-1"
<!-- pages.ariaComponents.codeExamples.tabindex.goodProgrammatic -->
<div role="alert" aria-live="assertive" tabindex="-1">
  Error message
</div>

pages.ariaComponents.tabindex.greaterThanZero.title

pages.ariaComponents.tabindex.greaterThanZero.description

tabindex="5"
<!-- pages.ariaComponents.codeExamples.tabindex.badBreaksOrder -->
<button tabindex="3">Third</button>
<button tabindex="1">First</button>
<button tabindex="2">Second</button>

pages.ariaComponents.tabindex.bestPractices.title

  • pages.ariaComponents.tabindex.bestPractices.practice1
  • pages.ariaComponents.tabindex.bestPractices.practice2
  • pages.ariaComponents.tabindex.bestPractices.practice3
  • pages.ariaComponents.tabindex.bestPractices.practice4

pages.ariaComponents.tabindex.interactive.title

pages.ariaComponents.tabindex.interactive.description

pages.ariaComponents.tabindex.focusable.title

pages.ariaComponents.tabindex.focusable.link
pages.ariaComponents.tabindex.focusable.customButton

pages.ariaComponents.tabindex.nonFocusable.title

pages.ariaComponents.tabindex.nonFocusable.simpleText
pages.ariaComponents.tabindex.nonFocusable.inlineText

pages.ariaComponents.tabindex.nonFocusable.paragraph

pages.ariaComponents.tabindex.testingTips.title

  • pages.ariaComponents.tabindex.testingTips.tip1
  • pages.ariaComponents.tabindex.testingTips.tip2
  • pages.ariaComponents.tabindex.testingTips.tip3
  • pages.ariaComponents.tabindex.testingTips.tip4
  • pages.ariaComponents.tabindex.testingTips.tip5

pages.ariaComponents.dropdown.title

components.exampleToggle.badExample

pages.ariaComponents.dropdown.bad.title

pages.ariaComponents.dropdown.bad.actions ▼
<!-- pages.ariaComponents.codeExamples.dropdown.badComment -->
<div @click="open = !open">
  Actions ▼
</div>
<div v-if="open">
  <div @click="action">Edit</div>
  <div @click="action">Delete</div>
</div>

components.exampleToggle.goodExample

pages.ariaComponents.dropdown.good.title

<!-- pages.ariaComponents.codeExamples.dropdown.goodComment -->
<button
  aria-haspopup="true"
  aria-expanded="false"
  aria-controls="menu"
  @keydown.escape="close"
>
  Actions
</button>
<div
  id="menu"
  role="menu"
  v-if="open"
>
  <button role="menuitem">Edit</button>
  <button role="menuitem">Delete</button>
</div>

components.exampleToggle.explanation pages.ariaComponents.dropdown.explanation

pages.ariaComponents.gallery.title

components.exampleToggle.badExample

pages.ariaComponents.gallery.title

<!-- pages.ariaComponents.codeExamples.gallery.badComment -->
<div class="thumbnails">
  <img v-for="image in images"
       :src="image.thumb"
       @click="selectImage(index)"
       :class="{ active: selected === index }" />
</div>
<div class="main-image">
  <img :src="images[selected].full" />
</div>

components.exampleToggle.goodExample

pages.ariaComponents.gallery.title

<!-- pages.ariaComponents.codeExamples.gallery.goodComment -->
<div role="tablist" aria-label="pages.ariaComponents.gallery.ariaLabel">
  <button v-for="(image, index) in images"
          :id="`tab-${index}`"
          role="tab"
          :aria-selected="selected === index"
          :aria-controls="`panel-${index}`"
          :tabindex="selected === index ? 0 : -1"
          @click="selectImage(index)"
          @keydown="handleKeydown($event, index)">
    <img :src="image.thumb" :alt="`${image.alt} - Miniature`" />
  </button>
</div>

<div :id="`panel-${selected}`"
     role="tabpanel"
     :aria-labelledby="`tab-${selected}`">
  <img :src="images[selected].full" :alt="images[selected].alt" />
  <p>{{ images[selected].description }}</p>
</div>

<!-- Bonnes pratiques :
- Pattern tablist/tab/tabpanel ARIA
- Navigation avec flèches, Home, End
- Focus management avec tabindex
- Descriptions détaillées pour chaque image -->

components.exampleToggle.explanation pages.ariaComponents.gallery.explanation

pages.ariaComponents.sortableTable.title

components.exampleToggle.badExample

pages.ariaComponents.sortableTable.columns.name ↑pages.ariaComponents.sortableTable.columns.email pages.ariaComponents.sortableTable.columns.role pages.ariaComponents.sortableTable.columns.status
pages.ariaComponents.sortableTable.users.alice.namealice@example.compages.ariaComponents.sortableTable.users.alice.rolepages.ariaComponents.sortableTable.users.alice.status
pages.ariaComponents.sortableTable.users.bob.namebob@example.compages.ariaComponents.sortableTable.users.bob.rolepages.ariaComponents.sortableTable.users.bob.status
pages.ariaComponents.sortableTable.users.charlie.namecharlie@example.compages.ariaComponents.sortableTable.users.charlie.rolepages.ariaComponents.sortableTable.users.charlie.status
pages.ariaComponents.sortableTable.users.diana.namediana@example.compages.ariaComponents.sortableTable.users.diana.rolepages.ariaComponents.sortableTable.users.diana.status

components.exampleToggle.goodExample

pages.ariaComponents.sortableTable.users.alice.namealice@example.compages.ariaComponents.sortableTable.users.alice.rolepages.ariaComponents.sortableTable.users.alice.status
pages.ariaComponents.sortableTable.users.bob.namebob@example.compages.ariaComponents.sortableTable.users.bob.rolepages.ariaComponents.sortableTable.users.bob.status
pages.ariaComponents.sortableTable.users.charlie.namecharlie@example.compages.ariaComponents.sortableTable.users.charlie.rolepages.ariaComponents.sortableTable.users.charlie.status
pages.ariaComponents.sortableTable.users.diana.namediana@example.compages.ariaComponents.sortableTable.users.diana.rolepages.ariaComponents.sortableTable.users.diana.status
pages.ariaComponents.table.instructions

components.exampleToggle.explanation pages.ariaComponents.sortableTable.explanation

pages.ariaComponents.liveRegions.title

components.exampleToggle.badExample

pages.ariaComponents.liveRegions.bad.title

pages.ariaComponents.liveRegions.bad.description

<!-- Mauvais : pas d'attribut aria-live -->
<div class="status-banner">
  <p></p>
</div>

pages.ariaComponents.liveRegions.bad.defaultContent

pages.ariaComponents.liveRegions.bad.problemsTitle

  • pages.ariaComponents.liveRegions.bad.problem1
  • pages.ariaComponents.liveRegions.bad.problem2
  • pages.ariaComponents.liveRegions.bad.problem3

components.exampleToggle.goodExample

pages.ariaComponents.liveRegions.good.title

pages.ariaComponents.liveRegions.good.description

<!-- Bon : avec aria-live="polite" pour informations -->
<div
  class="status-banner"
  aria-live="polite"
  aria-atomic="true"
  role="status"
>
  <p>Information : Données mises à jour</p>
</div>

<!-- Bon : avec aria-live="assertive" pour alertes -->
<div
  class="alert-banner"
  aria-live="assertive"
  aria-atomic="true"
  role="alert"
>
  <p>Attention : Action requise immédiatement</p>
</div>

pages.ariaComponents.liveRegions.good.politeZone

pages.ariaComponents.liveRegions.good.benefitsTitle

  • pages.ariaComponents.liveRegions.good.benefit1
  • pages.ariaComponents.liveRegions.good.benefit2
  • pages.ariaComponents.liveRegions.good.benefit3
  • pages.ariaComponents.liveRegions.good.benefit4

components.exampleToggle.explanation pages.ariaComponents.liveRegions.explanation

pages.ariaComponents.iconButtons.title

components.exampleToggle.badExample

pages.ariaComponents.iconButtons.heading

pages.ariaComponents.iconButtons.bad.description

pages.ariaComponents.iconButtons.bad.problemsTitle
  • pages.ariaComponents.iconButtons.bad.problem1
  • pages.ariaComponents.iconButtons.bad.problem2
  • pages.ariaComponents.iconButtons.bad.problem3
  • pages.ariaComponents.iconButtons.bad.problem4

components.exampleToggle.goodExample

pages.ariaComponents.iconButtons.good.title

pages.ariaComponents.iconButtons.good.description

pages.ariaComponents.iconButtons.good.approach1Title
pages.ariaComponents.iconButtons.good.approach2Title
pages.ariaComponents.iconButtons.good.approach3Title
pages.ariaComponents.iconButtons.good.bestPracticesTitle
  • pages.ariaComponents.iconButtons.good.practice1
  • pages.ariaComponents.iconButtons.good.practice2
  • pages.ariaComponents.iconButtons.good.practice3
  • pages.ariaComponents.iconButtons.good.practice4

components.exampleToggle.explanation pages.ariaComponents.iconButtons.explanation

pages.ariaComponents.combobox.title

components.exampleToggle.badExample

pages.ariaComponents.combobox.bad.title

components.exampleToggle.goodExample

pages.ariaComponents.combobox.good.title

pages.ariaComponents.combobox.good.resultsStatus

components.exampleToggle.explanation pages.ariaComponents.combobox.explanation

pages.ariaComponents.toast.title

components.exampleToggle.badExample

pages.ariaComponents.toast.bad.title

pages.ariaComponents.toast.bad.description

<!-- pages.ariaComponents.codeExamples.liveRegions.badComment -->
<div v-if="showToast" class="toast">
  Votre demande a été enregistrée
</div>

components.exampleToggle.goodExample

pages.ariaComponents.toast.good.title

pages.ariaComponents.toast.good.description

<!-- pages.ariaComponents.codeExamples.liveRegions.goodInfoComment -->
<div
  v-if="showToast"
  role="status"
  aria-live="polite"
  aria-atomic="true"
  class="toast"
>
  <p>Votre demande a été enregistrée</p>
  <button @click="dismiss" aria-label="Fermer notification">✕</button>
</div>

<!-- pages.ariaComponents.codeExamples.liveRegions.goodAlertComment -->
<div
  v-if="showError"
  role="alert"
  aria-live="assertive"
  aria-atomic="true"
  class="toast error"
>
  <p>Erreur : action impossible à exécuter</p>
  <button @click="dismiss" aria-label="Fermer alerte">✕</button>
</div>
pages.ariaComponents.toast.good.differencesTitle
  • pages.ariaComponents.toast.good.difference1
  • pages.ariaComponents.toast.good.difference2
  • pages.ariaComponents.toast.good.difference3

components.exampleToggle.explanation pages.ariaComponents.toast.explanation

common.copyright