<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Select a11y - demo</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Filter component: multi select transformed to suggestions list with search input. WCAG and RGAA compliant.">
<link rel="stylesheet" href="assets/css/style.css">
</head>
<body class="scampi-stuff">
<noscript>
<p class="js-off">Javascript is disabled in your browser.</p>
</noscript>
<header role="banner" class="banner">
<div class="container">
<h1 class="banner-title">select-a11y - demo</h1>
<p class="baseline">Filter component: multi select transformed to suggestions list with search input. <abbr title="Web Content Accessibility Guidelines">WCAG</abbr> and <abbr lang="fr" title="Référentiel général d'accessibilité pour les administrations">RGAA</abbr> compliant.</p>
</div>
</header>
<main role="main" id="main" class="main">
<div class="container main-container">
<p>select-a11y transforms multi select into suggestions list with search input. It is compliant with Web Content Accessibility Guidelines (WCAG) and General repository for improving accessibility (Référentiel général d'amélioration de l'accessibilité - RGAA).</p>
<h2 class="sr-only">Demo</h2>
<form action="#" method="post">
<h3>Example 1</h3>
<div class="form-group">
<label for="select-option">Is your website…</label>
<select class="form-control" id="select-option" data-select-a11y>
<option>Perceivable</option>
<option>Operable</option>
<option>Understandable</option>
<option>Robust</option>
</select>
</div>
<h3>Example 2</h3>
<div class="form-group label">
<label for="select-label">Is your website…</label>
<select class="form-control" id="select-label" data-select-a11y data-select-a11y-label>
<option>Perceivable</option>
<option>Operable</option>
<option>Understandable</option>
<option>Robust</option>
</select>
</div>
<h3>Example 3</h3>
<div class="form-group">
<label for="select-label-selected">Is your website…</label>
<select class="form-control" id="select-label-selected" data-select-a11y data-select-a11y-label>
<option selected>Perceivable</option>
<option>Operable</option>
<option>Understandable</option>
<option>Robust</option>
</select>
</div>
<h3>Example 3</h3>
<div class="form-group">
<label for="select-label-selected">Is your website…</label>
<select class="form-control" id="select-label-selected" data-select-a11y data-select-a11y-clearable>
<option selected value="">Perceivable</option>
<option>Operable</option>
<option>Understandable</option>
<option>Robust</option>
</select>
</div>
<h3>Example 4</h3>
<p>As seen in this second example, one or more <code>option</code> may have already an attribute <code>selected</code> in source.</p>
<div class="form-group multiple">
<label for="select-element">What do you want to do today?</label>
<select class="form-control" id="select-element" multiple data-select-a11y>
<option>Sleeping</option>
<option>Climbing trees</option>
<option>Knitting socks</option>
<option selected>Riding bikes</option>
<option>Eating cupcakes</option>
</select>
</div>
<h3>Example 5</h3>
<p>As seen in this third example, you can add data-image to options.</p>
<div class="form-group images">
<label for="select-image">What do you want to do today?</label>
<select class="form-control" id="select-image" multiple data-select-a11y>
<option data-image="https://placekitten.com/g/200/200">Sleeping</option>
<option data-image="https://placekitten.com/g/200/200">Climbing trees</option>
<option data-image="https://placekitten.com/g/200/200">Knitting socks</option>
<option data-image="https://placekitten.com/g/200/200" selected>Riding bikes</option>
<option data-image="https://placekitten.com/g/200/200">Eating cupcakes</option>
</select>
</div>
<p class="form-buttons">
<button type="reset">Reset filters</button>
<button type="submit">Submit button</button>
</p>
</form>
<p>To be transformed by select-a11y.js, the <code>select</code> element must be passed to the <code>Select()</code> constructor:</p>
<p><code>new Select(HTMLSelectElement);</code></p>
<p>Accessibility texts can be passed; the following texts are the defaults:</p>
<pre><code>new Select(HTMLSelectElement, {
text:{
help: 'Utilisez la tabulation (ou la touche flèche du bas) pour naviguer dans la liste des suggestions',
placeholder: 'Rechercher dans la liste',
noResult: 'Aucun résultat',
results: '{x} suggestion(s) disponibles',
deleteItem: 'Supprimer {t}',
delete: 'Supprimer'
}
});</code></pre>
<p>The simpliest way to use the plugin is to add a data-attribute on the selects that you want to transform, like <code>data-select-a11y</code> and add the following lines in one of your JavaScript file:</p>
<pre><code>var selects = document.querySelectorAll('select[data-select-a11y]');
Array.prototype.forEach.call(selects, function(select){
new Select(select);
});</code></pre>
</div>
</main>
<footer class="footer" role="contentinfo">
<div class="pidila-footer">
<div class="container">
<div class="footer-content">
<p><strong>select-a11y</strong> is part of the <abbr title="Pôle intégration html de la Direction de l'information légale et administrative" lang="fr">PiDILA</abbr>’s accessible and responsive UI components library <svg class="svg-icon" viewBox="0 0 20 20" focusable="false" aria-hidden="true"><image xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="assets/img/scampi.svg" x="0" y="0" width="100%" height="100%"></image></svg> <a href="https://pidila.gitlab.io/scampi">Scampi</a>.
It was primarily developed for <a href="https://service-public.fr">service-public.fr</a> : see filter boxes on <a href="https://www.service-public.fr/demarches-silence-vaut-accord/recherche">this page</a>.</p>
<p>Licence: MIT - CeCILL-B. Feel free to use it or contribute: <a href="https://gitlab.com/pidila/select-a11y">Gitlab repository</a>.</p>
</div>
<div class="pidila-logo">
<a href="https://pidila.gitlab.io">
<svg class="svg-logo" width="100" height="40" viewBox="0 0 100 40" aria-describedby="title" focusable="false">
<title id="title">Pidila website</title>
<image xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="assets/img/pidila.svg" x="0" y="0" width="100%" height="100%"></image>
</svg>
</a>
</div>
</div>
</div>
</footer>
<script src="assets/scripts/index.js"></script>
</body>
</html>