08-programming.html

<section id="programming">

    <section>
        <h2>Programmation</h2>
    </section>

    <section>
        <h3>Tester les préférences</h3>
        <p>
            Avec Google Chrome, vous pouvez tester les préférences d'accessibilité en utilisant les DevTools.
        </p>
        <p>
            Ouvrez les DevTools, allez dans l'onglet "Rendering" et cochez les options
            "Emulate CSS media feature prefers-color-scheme", "Emulate CSS media feature prefers-reduced-motion"...
        </p>
        <p>
            Pour ouvrir l'onglet "Rendering", cliquez sur les trois points dans le coin supérieur droit des DevTools,
            sélectionnez "More tools" puis "Rendering".
        </p>
        <footer>
            <a href="https://developer.chrome.com/docs/chromium/cvd" class="info" target="_blank">
                Chrome DevTools - Simulating color vision deficiencies
            </a>
        </footer>
    </section>

    <section>
        <h3>JavaScript - Gestion du focus</h3>
        <p>
            Lors de l'ouverture d'une modale ou d'un changement de contexte, il est important de
            <strong>gérer le focus</strong> correctement :
        </p>
        <pre><code class="language-javascript">// Ouvrir une modale
function openModal(modal) {
    modal.showModal();
    // Déplacer le focus vers la modale
    modal.querySelector('button, input, [tabindex="0"]')?.focus();
}

// Fermer et restaurer le focus
function closeModal(modal, previousFocus) {
    modal.close();
    previousFocus?.focus();
}</code></pre>
    </section>

    <section>
        <h3>HTML - L'élément &lt;dialog&gt;</h3>
        <p>
            L'élément <code class="language-html">&lt;dialog&gt;</code> est une balise HTML native qui gère
            automatiquement de nombreux aspects d'accessibilité :
        </p>
        <ul>
            <li>Le rôle ARIA <code>dialog</code> est <strong>implicite</strong>.</li>
            <li>Le <strong>focus est piégé</strong> (focus trap) à l'intérieur de la modale.</li>
            <li>La touche <span class="keyboard-key">Échap</span> ferme la modale.</li>
            <li>Le contenu en arrière-plan est marqué comme <strong>inerte</strong> (non interactif).</li>
            <li>L'attribut <code>autofocus</code> permet de définir quel élément reçoit le focus à l'ouverture.</li>
        </ul>
        <pre><code class="language-html">&lt;dialog id="confirm"&gt;
    &lt;h2&gt;Confirmer la suppression&lt;/h2&gt;
    &lt;p&gt;Cette action est irréversible.&lt;/p&gt;
    &lt;button onclick="this.closest('dialog').close('ok')"&gt;Confirmer&lt;/button&gt;
    &lt;button onclick="this.closest('dialog').close()"&gt;Annuler&lt;/button&gt;
&lt;/dialog&gt;</code></pre>
        <p>
            Utiliser <code class="language-html">&lt;dialog&gt;</code> évite de devoir recréer manuellement
            ces comportements avec ARIA et JavaScript.
        </p>
        <footer>
            <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/dialog" class="info" target="_blank">
                MDN - The Dialog element
            </a>
        </footer>
    </section>

    <section>
        <h3>HTML - Popover API</h3>
        <p>
            L'attribut <code class="language-html">popover</code> permet de créer des éléments flottants
            (tooltips, menus, popovers) de manière <strong>native</strong>, sans JavaScript ni ARIA :
        </p>
        <pre><code class="language-html">&lt;button popovertarget="infos"&gt;Aide&lt;/button&gt;
&lt;div id="infos" popover&gt;
    &lt;p&gt;Voici des informations complémentaires.&lt;/p&gt;
&lt;/div&gt;</code></pre>
        <p>
            Le navigateur gère automatiquement :
        </p>
        <ul>
            <li>L'<strong>affichage et la fermeture</strong> (clic extérieur, touche <span class="keyboard-key">Échap</span>).</li>
            <li>Le positionnement au-dessus du reste du contenu (<strong>top layer</strong>).</li>
            <li>L'association entre le bouton déclencheur et le contenu affiché.</li>
        </ul>
        <footer>
            <a href="https://developer.mozilla.org/en-US/docs/Web/API/Popover_API" class="info" target="_blank">
                MDN - Popover API
            </a>
        </footer>
    </section>

    <section>
        <h3>CSS - prefers-color-scheme</h3>
        <p>
            La media query <code class="language-css">prefers-color-scheme</code> permet de détecter si l'utilisateur
            a configuré son système pour utiliser un <strong>thème clair ou sombre</strong>.
        </p>
        <pre><code class="language-css">/* Thème clair par défaut */
body {
    background-color: white;
    color: black;
}

/* Thème sombre si l'utilisateur le préfère */
@media (prefers-color-scheme: dark) {
    body {
        background-color: #1a1a1a;
        color: white;
    }
}</code></pre>
        <footer>
            <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme" class="info" target="_blank">
                prefers-color-scheme
            </a>
        </footer>
    </section>

    <section>
        <h3>CSS - prefers-reduced-motion</h3>
        <p>
            La media query <code class="language-css">prefers-reduced-motion</code> permet de détecter si l'utilisateur
            a demandé à <strong>réduire les animations</strong>. Cela concerne les personnes souffrant de
            troubles vestibulaires (vertiges), d'épilepsie ou de migraines.
        </p>
        <pre><code class="language-css">/* Animation par défaut */
.element {
    transition: transform 0.3s ease;
}

/* Désactiver les animations si l'utilisateur le souhaite */
@media (prefers-reduced-motion: reduce) {
    .element {
        transition: none;
    }
}</code></pre>
        <footer>
            <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion" class="info" target="_blank">
                prefers-reduced-motion
            </a>
        </footer>
    </section>

    <section>
        <h3>CSS - prefers-contrast</h3>
        <p>
            La media query <code class="language-css">prefers-contrast</code> permet de détecter si l'utilisateur
            a demandé un <strong>contraste plus élevé ou plus faible</strong>. Utile pour les personnes malvoyantes.
        </p>
        <pre><code class="language-css">/* Style par défaut */
.button {
    background-color: #6200ee;
    border: none;
}

/* Contraste élevé : ajouter des bordures visibles */
@media (prefers-contrast: more) {
    .button {
        background-color: #000;
        border: 3px solid white;
    }
}</code></pre>
        <p>
            Les valeurs possibles sont : <code>no-preference</code>, <code>more</code>, <code>less</code> et <code>custom</code>.
        </p>
        <footer>
            <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-contrast" class="info" target="_blank">
                prefers-contrast
            </a>
        </footer>
    </section>

    <section>
        <h3>CSS - prefers-reduced-transparency</h3>
        <p>
            La media query <code class="language-css">prefers-reduced-transparency</code> permet de détecter si l'utilisateur
            a demandé à <strong>réduire les effets de transparence</strong>. Cela aide les personnes ayant des
            difficultés à lire du texte sur des fonds semi-transparents.
        </p>
        <pre><code class="language-css">/* Style par défaut avec transparence */
.modal-backdrop {
    background-color: rgba(0, 0, 0, 0.5);
}

/* Fond opaque si l'utilisateur préfère */
@media (prefers-reduced-transparency: reduce) {
    .modal-backdrop {
        background-color: #000;
    }
}</code></pre>
        <footer>
            <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-transparency" class="info" target="_blank">
                prefers-reduced-transparency
            </a>
        </footer>
    </section>

    <section>
        <h3>CSS - forced-colors</h3>
        <p>
            La media query <code class="language-css">forced-colors</code> permet de détecter si l'utilisateur
            utilise un <strong>mode de couleurs forcées</strong> (comme le mode contraste élevé de Windows).
            Dans ce mode, le navigateur remplace les couleurs par celles définies par l'utilisateur.
        </p>
        <pre><code class="language-css">/* Ajouter une bordure visible en mode forced-colors */
@media (forced-colors: active) {
    .button {
        border: 2px solid currentColor;
    }

    /* Empêcher le navigateur de modifier certaines couleurs */
    .icon {
        forced-color-adjust: none;
    }
}</code></pre>
        <footer>
            <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/@media/forced-colors" class="info" target="_blank">
                forced-colors
            </a>
        </footer>
    </section>

    <section>
        <h3>CSS - :focus-visible</h3>
        <p>
            La pseudo-classe <code class="language-css">:focus-visible</code> permet d'appliquer un style
            <strong>uniquement lorsque le focus est pertinent</strong> pour l'utilisateur (navigation clavier).
            Contrairement à <code>:focus</code>, elle ne s'applique pas lors d'un clic souris.
        </p>
        <pre><code class="language-css">/* Supprimer l'outline par défaut */
button:focus {
    outline: none;
}

/* Afficher l'outline uniquement pour la navigation clavier */
button:focus-visible {
    outline: 3px solid #005fcc;
    outline-offset: 2px;
}</code></pre>
        <p>
            Cela permet de garder une <strong>indication visuelle pour les utilisateurs clavier</strong>
            tout en évitant l'outline lors des clics souris.
        </p>
        <footer>
            <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-visible" class="info" target="_blank">
                :focus-visible
            </a>
        </footer>
    </section>

    <section>
        <h3>CSS - any-pointer</h3>
        <p>
            La media query <code class="language-css">any-pointer</code> permet de détecter la
            <strong>précision du dispositif de pointage</strong> disponible (souris, tactile, stylet).
        </p>
        <pre><code class="language-css">/* Agrandir les zones cliquables pour les écrans tactiles */
@media (any-pointer: coarse) {
    button, a {
        min-height: 44px;
        min-width: 44px;
        padding: 12px 16px;
    }
}</code></pre>
        <p>
            Les valeurs possibles sont : <code>none</code> (pas de pointeur), <code>coarse</code> (pointeur imprécis comme le doigt)
            et <code>fine</code> (pointeur précis comme la souris).
        </p>
        <footer>
            <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/@media/any-pointer" class="info" target="_blank">
                any-pointer
            </a>
        </footer>
    </section>

    <section>
        <h3>Ressources</h3>
        <ul>
            <li>
                <a href="https://www.a11yproject.com/checklist/" target="_blank">A11y Project - Checklist</a>
            </li>
            <li>
                <a href="https://webaim.org/" target="_blank">WebAIM - Web Accessibility In Mind</a>
            </li>
            <li>
                <a href="https://inclusive-components.design/" target="_blank">Inclusive Components</a>
            </li>
            <li>
                <a href="https://www.deque.com/axe/" target="_blank">Axe - Outil de test d'accessibilité</a>
            </li>
        </ul>
    </section>

</section>