Skip to content

Instantly share code, notes, and snippets.

@devlint

devlint/a11y.html

Last active September 21, 2017 15:17
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save devlint/1ac67fe3b4b9d0bd5a0fae09d866317f to your computer and use it in GitHub Desktop.
Save devlint/1ac67fe3b4b9d0bd5a0fae09d866317f to your computer and use it in GitHub Desktop.
Download ZIP
A11Y Pattern
Raw
a11y.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Accessible HTML Content Patterns</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
</head>
<!-- // TIPS
On peut trouver plusieurs balises header, mais le role="banner doit être unique dans la page.
La balise main et le role="main" sont uniques dans la page.
On peut trouver plusieurs balises footer, mais le role="contentinfo" doit être unique dans la page.
On peut trouver plusieurs balises nav et plusieurs role="navigation"
Le role="search" est unique dans la page.
-->
<body>
<!-- Si besoin de raccrocher la NAV du HEADER, ajout d'un wrapper (<div class="header"> comprenant les 2) -->
<!-- HEADER -->
<header role="banner" aria-label="Purpose of header">
<!-- Page header -->
...
</header>
<!-- HEADER -->
<nav role="navigation" aria-label="Site">
<!-- Screen readers would announce this as "Site navigation" -->
<ul>
<!-- List items with links -->
<li><a href="">Label</a></li>
</ul>
</nav>
<div role="search" aria-label="Explain where we are going to search">
<form>...</form>
</div>
<!-- MAIN CONTENT -->
<main aria-label="Content">
<h1>Sections and Articles</h1>
<p>The section element defines a section in a document. It should contain a heading. It should not be used as a stylistic wrapper as it has meaning.</p>
<section>
<h2>This is a list of articles</h2>
<header>
<nav role="navigation" aria-label="Article">
...
</nav>
</header>
<article>
<h3>Article title</h3>
<p>And he <em>looked</em> over at <strong>the alarm clock</strong>, ticking on the <i>chest</i> of <b>drawers</b>. "God in <u>Heaven</u>!" he <s>thought</s>. It was <small>half past six</small> and the <abbr>hands</abbr> were <q>quietly moving forwards</q>, it was even later <cite>than half past</cite>, more <dfn>like quarter to seven</dfn>. Had the <sub>alarm</sub> clock not <sup>rung</sup>? He <time>could</time> see from the <code>bed that it had been set</code> for four <kbd>o'clock</kbd> as it <samp>should</samp> have <var>been</var>; it <mark>certainly</mark> must have rung.</p>
<!-- CITATION -->
<blockquote>
<p>"Yes, mother, yes, thank-you, I'm getting up now."</p>
<footer>
<cite>Gregor Samsa</cite>
</footer>
</blockquote>
<!-- EMOJI ;-) -->
<ul>
<li><span role="img" aria-label="Peach emoji">🍑</span></li>
<li><span role="img" aria-label="Smiling cat face emoji">😺</span></li>
<li><span role="img" aria-label="Tophat emoji">🎩</span></li>
<li><span role="img" aria-label="Snowman emoji">⛄️</span></li>
<li><span role="img" aria-label="Beer emoji">🍺</span></li>
</ul>
<!-- COMPLETE TABLE -->
Academy Awards for Best Picture
<span class="table__summary">Descriptions of the film title, production company(s), and producers for the years 1980-1989.</span>
</caption>
<colgroup>
<col />
<col />
<col span="2" />
</colgroup>
<thead>
<tr>
<th scope="col">Year</th>
<th scope="col">Film</th>
<th scope="col">Production Company(s)</th>
<th scope="col">Producer(s)</th>
</tr>
</thead>
<tbody>
<tr>
<td scope="row">1980</td>
<td>Ordinary People</td>
<td>Paramount</td>
<td>Ronald L. Schwary</td>
</tr>
<tr>
<td scope="row">1981</td>
<td>Chariots of Fire</td>
<td>Enigma Film Productions</td>
<td>David Puttnam</td>
</tr>
<tr>
<td scope="row">1982</td>
<td>Gandhi</td>
<td>Columbia</td>
<td>Richard Attenborough</td>
</tr>
<tr>
<td scope="row">1983</td>
<td>Terms of Endearment</td>
<td>Paramount</td>
<td>James L. Brooks</td>
</tr>
<tr>
<td scope="row">1984</td>
<td>Amadeus</td>
<td>Orion</td>
<td>Saul Zaentz</td>
</tr>
<tr>
<td scope="row">1985</td>
<td>Out of Africa</td>
<td>Universal, Mirage Enterprises</td>
<td>Sydney Pollack</td>
</tr>
<tr>
<td scope="row">1986</td>
<td>Platoon</td>
<td>Orion, Hemdale</td>
<td>Arnold Kopelson</td>
</tr>
<tr>
<td scope="row">1987</td>
<td>The Last Emperor</td>
<td>Recorded Picture Company, Yanco Films, TAO Films, AAA, Soprofilms</td>
<td>Jeremy Thomas</td>
</tr>
<tr>
<td scope="row">1988</td>
<td>Rain Man</td>
<td>United Artists</td>
<td>Mark Johnson</td>
</tr>
<tr>
<td scope="row">1989</td>
<td>Driving Miss Daisy</td>
<td>Warner Bros.</td>
<td>Richard D. Zanuck, Lili Fini Zanuck</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="4" scope="rowgroup">For the first six ceremonies, the eligibility period spanned two calendar years.</td>
</tr>
</tfoot>
</table>
<!-- FORM -->
<form>
<fieldset role="region" aria-labelledby="profile_information" class="form-group">
<legend id="profile_information" role="heading" aria-level="3">Profile information</legend>
<div class="form-field">
<label for="input_address">Text:</label>
<input type="text" id="input_address" name="input_address" placeholder="Placeholder" required>
</div>
<div class="form-field">
<label for="input_email">Email:</label>
<input type="email" id="input_email" name="input_email" aria-describedby="helper_email_address"
placeholder="name@example.com" autocapitalize="off" autocorrect="off" required>
<span id="helper_email_address">Must be a valid email address. Example: user@domain.com</span>
</div>
<div class="form-field">
<label for="input_password">Password:</label>
<input type="password" id="input_password" name="input_password" aria-describedby="helper_password"
autocapitalize="off" autocorrect="off">
<span id="helper_password">Must be a string of 6 digits</span>
</div>
<div class="form-field">
<label for="input_select">Select:</label>
<select id="input_select" name="select">
<option value="corgis">Corgis</option>
<option value="dachshunds">Dachshunds</option>
<option value="shiba-inus">Shiba Inus</option>
</select>
</div>
<div class="form-controls">
<button type="submit">Save information</button>
<button type="button">Cancel</button>
<button aria-busy="true">Loading</button>
</div>
</fieldset>
<fieldset role="region" aria-labelledby="form_autocomplete" class="form-group">
<legend id="form_autocomplete" role="heading" aria-level="3">Autocomplete</legend>
<div class="form-field">
<label for="input__autocomplete-on">Browser</label>
<input type="text" id="input__autocomplete-on" name="autocomplete-on" autocomplete="on">
<!--
Name (Full name)
=> autocomplete="name" autocorrect="off"
Honorific Prefix (Mr., Ms., Dr., etc.)
=> autocomplete="honorific-prefix" autocapitalize="on"
Additional Name
=> autocomplete="additionalname" autocorrect="off"
Email
=> autocomplete="email" autocapitalize="off" autocorrect="off"
Organization
=> autocomplete="organization" autocapitalize="on"
Street Address
=> autocomplete="street-address" autocorrect="off"
Address Line 1
=> autocomplete="address-line1" autocorrect="off"
Country
=> autocomplete="country"
Postal Code
=> novalidate autocomplete="postal-code" autocorrect="off" type="number"
URL
=> autocomplete="url" autocapitalize="off" autocorrect="off" type="url"
-->
</fieldset>
</form>
<!-- FIGURE -->
<figure>
<img src="chart-01-apples.png" alt="46% apples" aria-describedby="chart-caption">
<img src="chart-01-oranges.png" alt="54% oranges" aria-describedby="chart-caption">
<figcaption id="chart-caption">Ratios and percentages comparing apples to oranges</figcaption>
</figure>
</article>
...
<footer>
...
</footer>
<!-- PAGINATION -->
<nav role="navigation" class="pagination">
<p class="visually-hidden" id="pagination-label">Navigation dans les résultats de recherche</p>
<ol aria-labelledby="pagination-label">
<li>
<a href="#"> <span class="visually-hidden">Pages précédentes</span> <span aria-hidden="true" role="presentation">&laquo;</span> </a>
</li>
<li>
<a href="#"><span class="visually-hidden">Page</span> 1</a>*
</li>
<li class="selected">
<a href="#"><span class="visually-hidden">Page courante</span> 2</a>
</li>
<li>
<a href="#"><span class="visually-hidden">Page</span> 3</a>
</li>
<li>
<a href="#"><span class="visually-hidden">Page</span> 4</a>
</li>
<li>
<a href="#"><span class="visually-hidden">Page</span> 5</a>
</li>
<li>
<a href="#"> <span class="visually-hidden">Pages suivantes</span> <span aria-hidden="true" role="presentation">&raquo;</span> </a>
</li>
</ol>
</nav>
</section>
</main>
<div role="complementary" aria-label="Description si nécessaire">
...
</div>
<!-- OR -->
<aside role="complementary" aria-label="Description si nécessaire">
...
</aside>
<!-- FOOTER -->
<footer>
...
</footer>
<!-- OR -->
<div role="contentinfo" aria-label="Website footer">
<!-- Copyright, privacy, terms, etc. -->
...
</div>
</body
</html>
Raw
composants-ARIA.html
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8" />
<title>Composants ARIA</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
</head>
<body>
<header>
<h1>Composants WAI-ARIA</h1>
</header>
<main>
<div class="note">
<p>Note&nbsp;: Dans cette page, vous trouverez des notices d’utilisation de composants riches basés sur WAI-ARIA. Recopiez les notices qui vous sont nécessaires dans la page <a href="aide.html">Aide</a> de votre site, à la section concernée.</p>
<p>Pour entendre les informations telles qu'elles sont restituées dans cette page d'aide, il est nécessaire de s'assurer du paramétrage suivant pour les différents lecteurs d'écran&nbsp;:</p>
<ul>
<li>Avec NVDA, lorsqu'on arrive sur un composant, entrer en mode application avec <kbd>NVDA</kbd> + <kbd>Espace</kbd>.</li>
<li>Avec <span lang="en">Jaws</span>, s'assurer que le mode formulaire est activé en appuyant sur <kbd>Entrée</kbd>.</li>
<li><span lang="en">VoiceOver</span> utilise ses propres modes de déplacement avec les combinaisons de touches <kbd>VO+flèches de direction</kbd>. Afin d'utiliser les raccourcis décrits dans cette page, s'assurer que le mode de navigation rapide est désactivé (se reporter à la documentation de VoiceOver pour plus de détails).</li>
</ul>
<p>Si NVDA ou Jaws ne sont pas en mode application ou formulaire, certaines informations décrites ci-dessous pourraient ne pas être vocalisées correctement.</p>
<p>La documentation ci-dessous repose sur des tests effectués sur les configurations suivantes&nbsp;:</p>
<ul>
<li>NVDA 2016.2.1 / Firefox 48</li>
<li><span lang="en">Jaws</span> 16 / Internet Explorer 11</li>
<li>Safari / VoiceOver sur OSX El Capitan</li>
</ul>
</div>
<section id="tabpanel" class="article">
<h2>Système d’onglets</h2>
<p>Un système d’onglets est une liste de panneaux activables via des liens (onglets) qui vont afficher des contenus. Un seul panneau peut être visible à la fois : quand un onglet est activé, les autres ne sont pas visibles.<p>
<p>Une fois que le contenu est rendu visible, la touche <kbd>TAB</kbd> vous permet d'atteindre le contenu du panneau sélectionné.</p>
<ul>
<li>Lorsque vous arrivez sur un système d’onglets, vous êtes placés sur le titre du premier onglet (par défaut, c'est le premier onglet du système qui est apparent)&nbsp;; </li>
<li>Si vous utilisez un lecteur d’écran :
<ul>
<li>NVDA annonce <i>onglet, [nom], onglet sélectionné 1 sur X »</i>, où « X » est le nombre total d’onglets&nbsp;; </li>
<li><span lang="en">Jaws</span> annonce <i>« onglet [nom] sélectionné »</i>&nbsp;;</li>
<li><span lang="en">VoiceOver</span> annonce <i>« Panneau 1, sélectionné 1 sur X »</i>, où « X » est le nombre total d’onglets.</li>
</ul>
</li>
<li>Les flèches <kbd>DROITE</kbd> et <kbd>GAUCHE</kbd> vous permettent de naviguer d’un titre d’onglet à l’autre, activant leurs contenus associés&nbsp;; </li>
<li>La touche <kbd>TAB</kbd> vous permet d'atteindre le panneau affiché ou l'un de ses composants&nbsp;; </li>
<li>À ce moment, vous pouvez parcourir le contenu de l’onglet actif, la touche <kbd>TAB</kbd> vous permet d’atteindre les éléments interactifs du contenu&nbsp;; </li>
<li>Pour parcourir la liste des titres d’onglets à nouveau, tabuler en arrière jusqu’à ce que le focus se place sur le titre de l’onglet actif.</li>
<li>Autres interactions au clavier (à ne documenter que si elles sont implémentées)&nbsp;:
<ul>
<li><kbd>DÉBUT</kbd> vous permet d'accéder au premier panneau&nbsp;;</li>
<li><kbd>FIN</kbd> vous permet d'accéder au dernier panneau&nbsp;;</li>
<li><kbd>ALT + PAGE SUIVANTE</kbd>, à partir d'un panneau, vous permet d'accéder au panneau suivant&nbsp;;</li>
<li><kbd>ALT + PAGE PRÉCÉDENTE</kbd>, à partir d'un panneau, vous permet d'accéder au panneau précédent.</li>
</ul>
</li>
</ul>
</section>
<section id="slider" class="article">
<h2>Potentiomètre</h2>
<p>Un potentiomètre est un curseur que vous pouvez faire varier entre un point minimal et un point maximal, afin de déterminer une valeur.</p>
<ul>
<li>Si vous utilisez un lecteur d’écran, lorsque vous atteignez le potentiomètre&nbsp;:
<ul>
<li>NVDA annonce « <i>[Nom], potentiomètre, [valeur]</i> »&nbsp;;</li>
<li><span lang="en">Jaws</span> annonce « <i>[Nom], potentiomètre horizontal, [valeur]</i>. La version 16 n'annonce plus la valeur lorsqu'on la modifie. Ce problème est réparé dans la version 17 de ce lecteur d'écran. »&nbsp;; </li>
<li><span lang="en">VoiceOver</span> annonce « <i>[Valeur], [nom], curseur</i> ». Interagir avec ce composant en appuyant sur les touches <kbd>VO+majuscule+flèche bas</kbd>. Pour utiliser les flèches de contrôle du curseur, ne pas oublier de désactiver la navigation rapide.</li>
</ul>
</li>
<li>Les flèches <kbd>HAUT</kbd> et <kbd>DROIT</kbd> vous permettent d’augmenter la valeur du potentiomètre&nbsp;;</li>
<li>Les flèches <kbd>BAS</kbd> et <kbd>GAUCHE</kbd> vous permettent de diminuer la valeur du potentiomètre.</li>
<li>Autres interactions au clavier (à ne documenter que si elles sont implémentées)&nbsp;:
<ul>
<li><kbd>DÉBUT</kbd> met la valeur à son minimum&nbsp;;</li>
<li><kbd>FIN</kbd> met la valeur à son maximum&nbsp;;</li>
<li><kbd>ALT + PAGE SUIVANTE</kbd>, augmente rapidement la valeur&nbsp;;</li>
<li><kbd>ALT + PAGE PRÉCÉDENTE</kbd>, diminue rapidement la valeur.</li>
</ul>
</li>
</ul>
</section>
<section id="dialogmodal" class="article">
<h2>Fenêtre modale</h2>
<p>Une fenêtre modale est un élément de la page qui vient se placer en surimpression du reste de la page, à la manière d’un message d’alerte. Ce n'est pas une nouvelle fenêtre ni un nouvel onglet. Une fenêtre modale est contenue dans la page en cours de consultation.</p>
<ul>
<li>Si vous utilisez un lecteur d’écran, lorsqu’une fenêtre modale s'ouvre&nbsp;:
<ul>
<li>NVDA annonce « <i>[Nom] dialogue</i> »&nbsp;;</li>
<li><span lang="en">Jaws</span> annonce « <i>[nom] Boîte de dialogue</i> »&nbsp;; </li>
<li><span lang="en">VoiceOver</span> annonce « <i>[Nom] avec X éléments, dialogue</i> ».</li>
</ul>
</li>
<li>Une fois qu’une fenêtre modale est ouverte, la touche <kbd>TAB</kbd> vous permet d’atteindre tous les éléments de la fenêtre modale. La navigation est restreinte à cette fenêtre tant qu’elle est ouverte&nbsp;; </li>
<li>Pour fermer la fenêtre, vous pouvez soit atteindre le bouton « Fermer », soit utiliser la touche <kbd>ESC</kbd>.</li>
</ul>
</section>
<section id="tooltip" class="article">
<h2>Infobulle (<span lang="en">tooltip</span>)</h2>
<p>Une infobulle est une information complémentaire placée sur un élément interactif qui apparaît et est restituée lorsque vous tabulez dessus, ou lorsque la souris le survole.</p>
<ul>
<li>Lorsque vous atteignez un élément qui contient une infobulle, une information supplémentaire apparaît ou vous est restituée si vous utilisez un lecteur d’écran.</li>
<li>L'infobulle disparaît et n'est plus accessible lorsque vous quittez l’élément concerné ou lorsque vous appuyez sur la touche <kbd>ESC</kbd>.</li>
</ul>
</section>
<section id="accordion" class="article">
<h2>Accordéon</h2>
<p>Un accordéon est un couple titre/contenu qui reprend le modèle de consultation d'un système d'onglets. Le titre vous permet de rendre visible et accessible le contenu relié, et inversement. Plusieurs accordéons peuvent être présents, et ils peuvent être ouverts simultanément.</p>
<p>Un seul panneau peut être visible à la fois : quand un onglet est activé, les autres ne sont pas visibles.<p>
<p>Une fois que le contenu est rendu visible, la touche <kbd>TAB</kbd> vous permet d'atteindre le contenu du panneau sélectionné.</p>
<ul>
<li>Lorsque vous atteignez un accordéon ou un système d’accordéons, vous êtes placés sur le titre du premier accordéon.</li>
<li>Si vous utilisez un lecteur d’écran, lorsque vous atteignez un accordéon&nbsp;:
<ul>
<li>NVDA annonce « <i>Panneau 1, onglet 1 sur x</i> »&nbsp;;</li>
<li><span lang="en">Jaws</span> annonce « <i>Panneau des onglets, onglet [nom], 1 sur x</i> »&nbsp;; </li>
<li><span lang="en">VoiceOver</span> annonce « <i>[Nom] avec X éléments, tableau d'onglet</i> ».</li>
</ul>
</li>
<li>Quand vous êtes sur un titre d’accordéon, les touches <kbd>ENTRÉE</kbd> et <kbd>ESC</kbd> vous permettent de déployer (ou replier) son contenu.</li>
<li>Une fois que le contenu est rendu visible, la touche <kbd>TAB</kbd> vous permet d’atteindre les éléments interactifs du contenu.</li>
<li>Depuis un titre d’accordéon :
<ul>
<li>les touches <kbd>BAS</kbd> et <kbd>DROITE</kbd> vous permettent d’atteindre les titres suivants du système d’accordéons&nbsp;;</li>
<li>les touches <kbd>HAUT</kbd> et <kbd>GAUCHE</kbd> vous permettent d’atteindre les titres précédents du système d’accordéons.</li>
</ul>
</li>
<li>Autres interactions au clavier (à ne documenter que si elles sont implémentées)&nbsp;:
<ul>
<li><kbd>CONTROL + HAUT</kbd> permet d'atteindre le titre de l'accordéon sélectionné&nbsp;;</li>
<li><kbd>CONTROL + PAGE PRÉCÉDENTE</kbd>, depuis le contenu d'un panneau, permet d'atteindre le titre de l'accordéon précédent&nbsp;;</li>
<li><kbd>CONTROL + PAGE SUIVANTE</kbd>, depuis le premier d'un panneau, permet d'atteindre le titre de l'accordéon&nbsp;;</li>
<li><kbd>DÉBUT</kbd> permet d'atteindre le premier accordéon&nbsp;;</li>
<li><kbd>FIN</kbd> permet d'atteindre le dernier accordéon&nbsp;;</li>
</ul>
</li>
</ul>
</section>
<section id="menu" class="article">
<h2>Menu</h2>
<p>Un menu est un système particulier de menu de navigation. Contrairement à l’utilisation habituelle de la touche tabulation dans les menus de navigation, un composant riche de type menu emploie une association des flèches de direction et de la touche <kbd>ENTRÉE</kbd>.</p>
<ul>
<li>Si vous utilisez un lecteur d’écran, lorsque vous atteignez un menu&nbsp;:
<ul>
<li>NVDA annonce « <i>[Nom] sous-menu 1 sur X</i> », où X est le nombre d'entrées du menu&nbsp;;</li>
<li><span lang="en">Jaws</span> annonce « <i>Barre de menu [nom]</i> »&nbsp;; </li>
<li><span lang="en">VoiceOver</span> annonce « <i>Menu [nom] commande de menu</i> ».</li>
</ul>
</li>
<li>La touche <kbd>DROITE</kbd> vous permet d’atteindre les entrées suivantes de premier niveau du menu&nbsp;;</li>
<li>La touche <kbd>GAUCHE</kbd> vous permet d’atteindre les entrées précédentes de premier niveau du menu&nbsp;;</li>
<li>Les touches <kbd>HAUT</kbd> et <kbd>BAS</kbd> vous permettent de déployer le sous-menu (s'il existe) et d’atteindre les entrées de ce sous-menu&nbsp;;</li>
<li>La touche <kbd>ENTRÉE</kbd> vous permet d’atteindre directement la première entrée d’un sous-menu (s'il existe)&nbsp;;</li>
<li>La touche <kbd>ENTRÉE</kbd> vous permet d’activer les liens.</li>
<li>Autres interactions au clavier (à ne documenter que si elles sont implémentées)&nbsp;:
<ul>
<li><kbd>ESC</kbd> ferme le sous-menu affiché&nbsp;;</li>
<li><kbd>LETTRE</kbd>, active l'entrée de sous-menu qui commence par la lettre tapée&nbsp;;</li>
</ul>
</li>
</ul>
</section>
<section id="tree" class="article">
<h2>Arborescence</h2>
<p>Une arborescence fonctionne à la manière d’un système de dossier sur un ordinateur. Il s'agit d’une liste imbriquée d’éléments que l’on peut déployer ou replier.</p>
<ul>
<li>Si vous utilisez un lecteur d’écran, lorsque vous atteignez une arborescence :
<ul>
<li>NVDA annonce « <i>Arborescence, [nom] réduit niveau 1</i> »&nbsp;;</li>
<li><span lang="en">Jaws</span> annonce « <i>Arborescence [nom] fermé sélectionné, 1 sur X</i> », où X est le nombre d'entrées de l'arborescence&nbsp;;</li>
<li><span lang="en">VoiceOver</span> annonce « <i>Tableau</i> ».</li>
</ul>
</li>
<li>Les touches de direction vous permettent de naviguer entre les entrées actives (déployées)&nbsp;;</li>
<li>La touche <kbd>DROIT</kbd> vous permet de déployer les sous-sections (si elles existent) d’une entrée&nbsp;; </li>
<li>La touche <kbd>GAUCHE</kbd> vous permet de replier les sous-sections d’une entrée.</li>
</ul>
</section>
<section id="datepicker" class="article">
<h2>Calendrier</h2>
<p>Un calendrier est un système qui vous permet de sélectionner une date dans un ensemble de grilles organisées comme un calendrier.</p>
<ul>
<li>Si vous utilisez un lecteur d’écran, lorsque vous atteignez un calendrier :
<ul>
<li>NVDA annonce « <i>Date tableau éditable cadre de texte »</i>&nbsp;;</li>
<li><span lang="en">Jaws</span> annonce « <i>[Nom] date <span lang="en">picker</span> région</i> »&nbsp;;</li>
<li><span lang="en">VoiceOver</span> annonce <i>application x éléments</i>.</li>
</ul>
</li>
<li>La touche <kbd>HAUT</kbd> vous permet d’atteindre le même jour dans la semaine précédente&nbsp;; </li>
<li>La touche <kbd>BAS</kbd> vous permet d’atteindre le même jour dans la semaine suivante&nbsp;; </li>
<li>La touche <kbd>DROIT</kbd> vous permet d’atteindre le jour suivant&nbsp;; </li>
<li>La touche <kbd>GAUCHE</kbd> vous permet d’atteindre le jour précédent&nbsp;; </li>
<li>La touche <kbd>ESC</kbd> vous permet de fermer le calendrier s'il est ouvert dans une autre fenêtre&nbsp;; </li>
<li>La touche <kbd>ENTRÉE</kbd> vous permet de valider la sélection en cours.</li>
<li>Autres interactions au clavier (à ne documenter que si elles sont implémentées)&nbsp;:
<ul>
<li><kbd>DÉBUT</kbd> sélectionne la première date du mois affiché&nbsp;;</li>
<li><kbd>FIN</kbd>, sélectionne la dernière date du mois affiché&nbsp;;</li>
<li><kbd>PAGE SUIVANTE</kbd>, passe au mois suivant&nbsp;;</li>
<li><kbd>PAGE PRECEDENTE</kbd>, passe au mois précédent&nbsp;;</li>
</ul>
</li>
</ul>
</section>
<section id="autocomplete" class="article">
<h2>Autocomplétion</h2>
<p>L’autocomplétion est disponible sur certains champs de texte de saisie. Le composant d’autocomplétion vous fournit des suggestions de saisie basées ou non sur les caractères que vous saisissez.</p>
<ul>
<li>Si vous utilisez un lecteur d’écran, lorsque vous atteignez un champ d’édition :
<ul>
<li>NVDA annonce « <i>éditable avec auto-complétion</i> »&nbsp;;</li>
<li><span lang="en">Jaws</span> annonce « <i>[Nom] édition tapez le texte.</i> »&nbsp;;</li>
<li><span lang="en">VoiceOver</span> n'implémente pas ce composant de façon satisfaisante. Il n'indique pas qu'une liste de proposition apparaît et qu'il faut en sélectionner une dans la liste.</li>
</ul>
</li>
<li>Les touches <kbd>HAUT</kbd> et <kbd>BAS</kbd> vous permettent de déplier la liste de choix et de naviguer dans les suggestions. À noter qu’à chaque fois que vous atteignez la fin de la liste des suggestions, vous retournez sur le champ de saisie.</li>
<li>La touche <kbd>ENTRÉE</kbd> vous permet de valider la suggestion sur laquelle vous êtes placés.</li>
</ul>
</section>
</main>
<footer>
<h2>Droits de reproduction</h2>
<div class="col-1-3">
<p>Ce document est placé sous <a href="https://www.etalab.gouv.fr/licence-ouverte-open-licence">licence ouverte 1.0 ou ultérieure</a>.</p>
<p class="clear">Vous êtes libres de :</p>
<ul>
<li>Reproduire, copier, publier et transmettre ces informations ;</li>
<li>Diffuser et redistribuer ces informations ;</li>
<li>Adapter, modifier, extraire et transformer ces informations, notamment pour créer des informations dérivées ;</li>
<li>Exploiter ces informations à titre commercial, par exemple en la combinant avec d’autres informations, ou en l’incluant dans votre propre produit ou application.</li>
</ul>
</div>
<div class="col-2-3">
<p>Ces libertés s'appliquent sous réserve de mentionner la paternité de l’information d’origine&nbsp;: sa source et la date de sa dernière mise à jour. Le réutilisateur peut notamment s'acquitter de cette condition en indiquant un ou des liens hypertextes (URL) renvoyant vers le présent site et assurant une mention effective de sa paternité.</p><p>Cette mention de paternité ne doit ni conférer un caractère officiel à la réutilisation de ces informations ni suggérer une quelconque reconnaissance ou caution par le producteur de l’information, ou par toute autre entité publique, du réutilisateur ou de sa réutilisation.</p>
</div>
<div class="col-3-3">
<img src="img/modernisation-logo.jpg" alt="Secrétariat général pour la modernisation de l’action publique" />
</div>
</footer>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment