Plan du site Kortic

Accessibilité Numérique & Photographie: Kortic - Anthony Ladeuil. Consultant en accessibilité numérique WCAG/RGAA et qualité front-end. Accompagnement, conseil, suivi, formation). Et photographe. Bordeaux, France.

Photographie: Kortic - Regards sur l'autour et l'instant.; 20 pages , 467 photographies

Photographie page # 01

Photographie page # 02

Photographie page # 03

Photographie page # 04

Photographie page # 05

Photographie page # 06

Photographie page # 07

Photographie page # 08

Photographie page # 09

Photographie page # 10

Photographie page # 11

Photographie page # 12

Photographie page # 13

Photographie page # 14

Photographie page # 15

Photographie page # 16

Photographie page # 17

Photographie page # 18

Photographie page # 19

Photographie page # 20

Il y a des conférences, LinkedIn et plein de gens bons pour parler d'accessibilité, et puis il y a la vie vraie…

Le blog Kortic est un espace pour partager des idées et quelques solutions déployées et maintenues. On évite le bullshit théorique, le recyclage des poncifs WCAG, les copier-coller d'articles et les leçons de morale. Il n'y a pas de cours académiques. Pas non plus de librairies toutes faites qui s'adaptent magiquement sans rien faire à des environnements inconnus par définition. Il faudra bosser un peu et justifier son tarif de facturation journalier.

Par contre, du JavaScript qui fait le job, du CSS moderne qui pousse les limites, et de l'accessibilité qui va au-delà du simple respect de normes, on en propose. On partage des propositions pragmatiques de mise en œuvre, des astuces liées à l'accessibilité numérique, et tout ce qui touche au développement front sans compromis.

Pas de patterns copier-coller : juste une approche pour comprendre pourquoi ça marche (ou pas). Parce qu'un site 100% conforme peut être 100% inutilisable, et qu'un bouton qui fonctionne vaut mieux qu'une checklist cochée.

Et promis, on accepte de se planter !

Liste des articles: J'ai challengé Claude sur la sémantique d'un landmark
J'ai demandé à Claude (Sonnet 5.5) de challenger. Il l'a fait, puis il a surtout montré comment une IA transforme une préférence en règle, sans prévenir.; Tester et contrôler le zoom texte et le responsive avec une extension Firefox
Contrôler le texte agrandi à 200% et une fenêtre de 1366x768 pendant un audit prend plusieurs manipulations. C'est pénible. Solution simple avec cette extension.; Canvas, CanvasText et compagnie : les couleurs (oubliées) système, du texte au SVG
color-scheme et prefers-color-scheme sont deux mécanismes différents, souvent confondus. Comprendre la différence ouvre la porte aux couleurs système CSS (CanvasText, Canvas, Highlight...), utilisables aussi bien sur du texte de contenu que sur les SVG.; J'ai demandé à Claude de me parler des articles sur le départ de Jacob Coxon d'Anthropic
Ancien d'OpenAI et d'Anthropic, Jacob Coxon annonce son départ d'Anthropic en se positionnant comme lanceur d'alerte.
Entre crainte réelle et coup de pub ?; Piéger les (bad) bots avec un honeypot et robots.txt
Piégez les robots malveillants qui scannent votre robots.txt à la recherche de cibles « protégées » : leurre Disallow, RewriteRule et .htaccess; J'ai demandé à Claude si l'intelligence artificielle nous faisait perdre notre capacité à réfléchir
Question sur l'atrophie de la réflexion par délégation systématique. L'IA Claude analyse pourquoi le « fais pour moi » n'a rien d'un accident.; Accordions HTML natifs et accessibles avec details et summary
Les balises details/summary couvrent le pattern disclosure sans une ligne de Javascript. Mais côté acessibilité, on peut améliorer la navigation.; J'ai demandé à Claude « Que penses-tu de ta Politique de confidentialité ? »
Anthropic informe par mail de la mise à jour de sa Politique de confidentialité à compter du 8 juillet 2026.
Qu'en dit Claude ?; J'ai demandé à Claude de synthétiser l'avertissement de Dario Amodei sur les risques de l'IA
L'humanité traverse une adolescence technologique : Dario Amodei cartographie les risques de l'IA puissante et esquisse un plan d'action.; Carte des régions et départements de France (Métropole et DROM)
Construire un SVG interactif et accessible ? Oui, c'est possible, avec un peu de Javascript, une organisation carrée.
Exemple avec une carte des régions et départements de France.; WTFetch : fetch piloté depuis le DOM, en 200 lignes, accessibilité native incluse
htmx est excellent si on en exploite vraiment la surface. Pour les patterns courants, load, scroll, clic, WTFetch fait le job en beaucoup plus léger, sans dépendance.
Accessibilité en plus.; Génération d'images placeholder en PHP - WebP et AVIF
Une classe PHP autonome pour générer des images placeholder colorées en WebP ou AVIF, sans dépendance externe, sans petits chats ni paysages bucoliques.
Et au passage un serveur utilisable directement…; Integration et optimisation des SVG (images vectorielles) en CSS et HTML
Pictogrammes, logos, images composites : le SVG s'est imposé comme standard. Mais entre le fichier unitaire, le sprite « symbol », l'inline et l'usage en CSS via « mask » ou « background-image », chaque méthode répond à des contraintes différentes de performance, d'accessibilité et de maintenabilité. Tour d'horizon.; Accessibilité numérique : procès ADA, EAA et premières condamnations en Europe (2025)
En 2025, 5 114 procès ont été intentés aux États-Unis contre des sites web inaccessibles.
Les overlays d'accessibilité n'ont pas ralenti les poursuites, la conformité native, dans le code, reste la seule protection sérieuse.
En Europe, les premières assignations en justice sont tombées dès novembre 2025.; Les couleurs web et l'accessibilité : WCAG et APCA. Opacité, contraste, luminance
Préparer la transition vers APCA (Accessible Perceptual Contrast Algorithm), comprendre ce que l'opacité fait au contraste, calculer le seuil de conformité pour n'importe quelle association de couleurs. Et les 147 couleurs nommées CSS en bonus.; Slider accessible : le scroll natif et la sémantique HTML remplacent le pattern ARIA carousel
SimCa (Simple Carousel), la liste défilante horizontale conforme WCAG, responsive par largeur de container, sans dépendance externe.; La balise HTML « data » : l'oubliée et son utilisation en e-commerce
La balise « data » existe dans la spec HTML depuis des années, elle est supportée partout, elle porte un nom on ne peut plus explicite, et pourtant elle végète dans l'ombre de ses cousins plus populaires.; Les vidéos décoratives : accessibilité et éco-conception
Une vidéo décorative, c'est une vidéo qui ne dit rien d'essentiel. Son contenu n'est pas indispensable à la compréhension.
En pratique, c'est une bombe à retardement pour les utilisateurs.; Six arbitres, coordination approximative : le chaos du contrôle de l'accessibilité numérique en France
Six autorités compétentes, aucune doctrine commune, et des associations qui finissent par faire le travail à leur place.
L'accessibilité numérique en France est encadrée, sur le papier.; Typographie fluide en CSS : clamp(), dvw et dvh sont vos amis
La gestion fluide des tailles de font, en 4 lignes… ou presque. Exit les requêtes media sur 10 viewports.
Ça, c'était avant.; EN 301 549 versus WCAG : la surcouche réelle
Et si on arrêtait de raconter n'importe quoi ? Les résumés d'agences sur EN 301 549 circulent, se copient, se citent — sans que personne ne semble avoir ouvert le tableau A.1.
Alors, lisons-le, mais vraiment…; Reset CSS autonome, universel et modernisé
Les resets standalone n'ont pas vraiment évolué depuis 2018. Cette proposition comble le vide avec ce que CSS permet nativement aujourd'hui : « @layer », nesting, spécificité CSS.
Sans dépendance et sans framework.; RGAA, BITV, RAWeb, EAA, WCAG : bienvenue dans le millefeuille normatif…
RGAA 4 et 5, EAA, WCAG 2.1, WCAG 2.2, EN 301 549, WCAG 3.0… Vous arrivez à suivre ? Non ? Bonne nouvelle : vous n'êtes pas seuls.
Accrochez-vous, c'est velu.; Compteur de caractères pour champs de saisie, conforme WCAG
Un champ de saisie sans compteur de caractères, c'est un formulaire qui joue à cache-cache avec ses utilisateurs. Petit script léger qui règle ça en une ligne, avec les aria qui vont bien.; Utilisation de content CSS et l'accessibilité
Exploiter le fallback `content` CSS pour l'accessibilité : gérer les contenus visuels et leur restitution.; Surveiller la qualité de connexion en temps réel et prévenir ses utilisateurs quand « ça va couper »
Quand le réseau se coupe ou se dégrade (vous avez déjà pris le train ?), prévenir les utilisateurs peut être assez utile pour éviter de la perte de données (CRM, PWA, dashboard en temps réel).; Utiliser l'extension Stylus pour repérer les premières erreurs d'accessibilité
Stylus : l'extension pour les premiers filtres et simplifier la revue de code accessibilité et qualité. Comment faire ?; Le mythe du `h1` unique : quand on réinvente les standards
Depuis des années, consultants SEO et outils d'audit nous martèlent qu'une page web ne doit contenir qu'un seul `h1`.
Pourtant, ni Google, ni le W3C, ni les WCAG ne mentionnent cette règle. Alors, mythe ou réalité ?
Spoiler : c'est du vent. Froid.; Menu d'accessibilité gratuit (ou presque)
Le fournisseur de widget d'accessibilité qui vous promet la conformité est un gros gag qui vous expose au lieu de vous protéger. La solution ? Le faire soi-même, ça coûtera toujours moins cher qu'un procès aux États-Unis, et en Europe dorénavant.
On vous explique.; Parcoursup et la lettre de motivation : l'IA n'est pas le problème, c'est le symptôme
L'IA ne triche pas, elle remplace le carnet d'adresses. Alors que l'institution s'offusque des lettres générées par ChatGPT, on oublie l'essentiel : former les élèves plutôt que de les piéger.
Analyse (très personnelle) d'une hypocrisie française.; Styliser les inputs radio et checkbox uniquement par CSS
Mise en forme des éléments de formulaire radio et case à cocher en CSS pur, sans JavaScript (ou presque).
Gérer l'accessibilité, le design, les différents états, le tout en une seule feuille de styles.; Les listes de filtres e-commerce extensibles accessibles : quand le « voir plus » devient utilisable
Les sidebars de filtres, communément appelées des « facettes », et l'accessibilité.
Vous avez déjà navigué au clavier dans ces composants ?
Implémentez des listes « Voir plus » réellement utilisables.; Évolution des Digital Accessibility Lawsuits aux États-Unis (2019-2025)
Les plaintes pour accessibilité numérique aux États-Unis ont connu une croissance soutenue depuis 2019, avec des fluctuations marquées par des événements réglementaires et économiques.
État des lieux en 2025 et prémonitions pour 2026…; Extension des prototypes Storage et Element en JavaScript
Parce que oui, on a le droit d'être fainéant ! Quatre méthodes utilitaires pour simplifier la manipulation du localStorage, sessionStorage et des attributs HTML en JavaScript vanilla.; Analyser les performances Core Web Vitals en temps réel sans extension navigateur
Monitorer les Core Web Vitals et métriques de performance en temps réel, quel que soit l'environnement. Comment ?
Avec ça : badge flottant, données en console, activation à la demande et aucune dépendance externe.; Validation W3C : pourquoi et comment intégrer la conformité HTML dans son workflow de développement
Valider son code HTML n'est pas une option. C'est la garantie d'un site compatible, accessible et maintenable.
Le validateur W3C détecte les erreurs qui nuisent à l'accessibilité, compromettent le SEO et créent de la dette technique. Voici pourquoi l'intégrer dans votre workflow quotidien. Et les outils pour le faire…; Accessibilité numérique : quand la théorie rencontre le terrain
Un site 100% conforme WCAG peut être 100% inutilisable.
Et un site non-conforme peut offrir une meilleure expérience utilisateur.
Cette nuance, personne ne veut l'entendre. Pourtant, c'est elle qui fait toute la différence entre cocher des cases et rendre un site vraiment accessible.; CSS Nesting : détection et utilisation
Vous avez toujours envié la syntaxe des préprocesseurs CSS ?
Bonne nouvelle : le nesting natif est là, et il simplifie radicalement l'écriture de vos feuilles de style.; Animation d'images purement décoratives en fondu enchainé sans framework
Un script vanilla JS pour animer vos images décoratives en fondu enchaîné, sans dépendance externe. Léger, configurable, et respectueux des préférences de mouvement WCAG. Parce que parfois, moins c'est plus.; Tronquer du texte côté serveur (PHP) : accessibilité et internationalisation
Implémentation PHP d'une méthode de troncature intelligente qui gère automatiquement les langues RTL (arabe, hébreu), les systèmes d'écriture sans espaces (chinois, japonais, thaï) et garantit l'accessibilité pour les lecteurs d'écran.; Automatiser et rendre accessibles les références et notes de bas de page
FootnoteManager : composant JavaScript léger qui automatise la création de liens entre références et notes de bas de page.
Gestion dynamique du contenu, accessibilité ARIA native et support i18n inclus.; CollapsibleText : système de troncature de texte Javascript, accessible et performant
Le composant JavaScript qui tronque tes contenus longs sans faire saigner les yeux des utilisateurs, tout en faisant plaisir aux lecteurs d'écran en respectant les standards d'accessibilité WCAG et le SEO.
Oui, c'est possible.; Créer une lightbox (diaporama) accessible (WCAG) en Vanilla JavaScript
La galerie de photos modale est un composant incontournable pour afficher des images en grand format sur un site web.
Beaucoup de solutions existantes négligent l'accessibilité ou nécessitent des dépendances externes lourdes.; Et si Google Pagespeed Insights nous racontait (parfois) des bêtises ?
Pourquoi les tests de performances Ligthouse doivent être interprétés avec beaucoup de précautions ?
Pour ne pas paniquer, pardi !; Filtrer et bloquer des bots avec .htaccess
Bloquez les bots indésirables et crawlers IA par htaccess : filtrage par User-Agent, plages IP et directive SetEnvIfNoCase pour Apache 2.2 et 2.4+.
C'est simple, mais il faut bien y réfléchir…; Créer un effet de parallaxe fluide, performant et accessible
Mettre un peu de fun sur son site, oui ! Mais pas au détriment de l'accessibilité et de la performance.; Améliorer la performance de chargement d'une page web avec content-visibility CSS
Performance de chargement d'une page web en utilisant la propriété CSS content-visibility et l'API IntersectionObserver.; Gestion de raccourcis clavier sur un site ou une application web
Comment faciliter la navigation sur un site internet ou une application avec des raccourcis ?
En utilisant l'attribut `aria-keyshortcuts`.; Utilisation de l'API et attribut popover, et création d'une infobulle (tooltip) accessible
L'API popover peut permettre de gérer facilement les bulles d'aide fréquement utilisées.
Tout en restant accessibles à la navigation clavier.; Détecter la version du navigateur et du système d'exploitation en Javascript
Certaines propriétés CSS ne sont utilisables que sur certains navigateurs. La détection du « user agent » peut être utile pour gérer finement l'interface.; Animer le contenu d'une balise HTML details en CSS
Comment animer l'ouverture et la fermeture d'une balise `details` sans utiliser Javascript ?; Personnaliser des boutons et liens CTA (Call To Action) via CSS
Mettre en forme des variantes de CTA, boutons et liens, avec ou sans icônes.
Particulièrement en environnement multi-sites, en abusant des variables CSS.; « Copier » du contenu texte dans une page web
Javascript de copie de texte dans le presse-papier, compatible avec tous les navigateurs sans modifier les paramètres d'autorisation. Et accessible…
Au passage, application sur un tableau des couleurs standards web, avec structuration des données sans balise table.; Détection du mode de navigation, clavier ou pointeur, et gestion de la visibilité du focus
Faire cohabiter l'accessibilité et le design n'est pas toujours simple. Notamment sur la question de la visibilité du focus.
Impossible et compliqué ? Oui, mais non !; EAA : inclusion ou peur du gendarme ?
Et si l’accessibilité numérique n’était pas une démarche inclusive sociale, mais avant tout une question de business ?; Dark mode CSS automatique
Concevoir un mode sombre automatique sans Javascript avec la requête média prefers-color-scheme et variables CSS.
Simple, efficace et sympa pour les utilisateurs.; Le bon usage de z-index et utilitaire de gestion de l'empilement CSS
Comment ne pas se perdre dans les niveaux de z-index et gérer la superposition d'éléments dans une page web ?
On a ce qu'il vous faut. Ça va être rapide…; Protection des formulaires avec Honeypot (ou Pot de miel)
Alternative aux CAPTCHAs pour la protection des formulaires avec Honeypot, Time Measuring et empreinte de navigateur.; Composant SnackBar (Toast) HTML/CSS accessibles
Snackbar et toast HTML accessibles : dialog natif, Vanilla JS, WCAG 2.2.
Positions, types, trap focus, fermeture automatique. Sans framework, sans dépendance.; Accessibilité et référencement d'un composant de notation 5 étoiles en CSS HTML
Extrait d'avis accessible. Créer un bloc d'évaluation 5 étoiles vectorielles avec CSS et buttons, conforme accessibilité (WAI-ARIA) avec navigation au clavier et lecteurs d'écrans.; Popin modale responsive et accessible
Construction HTML et CSS d'une popin modale responsive, accessible (WAI-ARIA), avec défilement vertical interne.
Contenu alimenté par contenu statique ou requête asynchrone.; A propos des (fausses) solutions de surcouches d'accessibilité
Que dire et que faire avec les pseudo-solutions magiques de widgets d'accessibilité ?
Réponse : ne surtout pas céder au chant des sirènes.
Par contre, on peut coder… parce que dans la vraie vie, ce n'est pas du tout compliqué !; Les skip links : automatiser les liens d'évitement de blocs
Les liens d'évitement permettent aux utilisateurs naviguant au clavier, ou équipés de lecteurs d'écran, d'accéder plus rapidement à des zones précises.
Mais il n'en faut pas qu'un…; Loader CSS asynchrone
Mise en oeuvre de chargement asynchrone de feuilles de styles avec stockage local et gestion du cache automatisée.
Mais pas seulement les CSS…; Gérer un retour vers le haut d'une page web
Créer un lien vers le haut d'une page web.
Et accessible, bien entendu. Ça a l'air simple ? Pas tant que ça… on a une solution.; Suivi de performance en phase de développement
Comment suivre en temps réel les impacts du développement sur la performance ?
En voulant le faire et en utilisant un script simple à mettre en oeuvre.
Et d'autres petites choses pour la qualité…; Breadcrumb accessible, compatible mobile et SEO
Le fil d'Ariane ne disparait pas en mobile ! Il est même recommandé et utile.
Comment intégrer un breadcrumb qui fonctionne sur PC et mobile ? Et accessible.; Comment une personne malvoyante voit un site internet ?
Exemple concret d'un utilisateur malvoyant en situation et quelques explications.
Vidéo en prime !; Les outils de test d'accessibilité… et de qualité
Synthèse non exhaustive de ressources pour l'accessibilité.
Référentiels et outils de tests. Le minimum syndical…; Obfuscation des liens et accessibilité
L'obfuscation de liens peut améliorer le référencement, mais bloque souvent l'accessibilité. Une solution JavaScript légère et conforme WCAG permet de satisfaire les deux : les robots ne voient rien, et c'est transparent pour les utilisateurs et les technologies d'assistance.; Le marquage des liens d'ouverture de nouvelle fenêtre (ou onglet)
Au-delà de la conformité pure et dure, il y aussi l'usage courant et les bonnes pratiques.
Autant rendre service à tout le monde.; Accessibilité des dates abrégées
Raccourcir l'affichage des dates, c'est tentant. Mais ça peut vite devenir incompréhensible avec les technologies d'assistance.
Proposition en PHP.; L'accessibilité avance… Aux États-Unis
Une première condamnation d'un fournisseur de sur-couche d'accessibilité.
Et pas une petite !; Surveillance du DOM en phase de développement
Des petits outils de suivi pour améliorer la qualité, la performance et l'expérience utilisateur.
Utiliser la console pour surveiller les viewports, le nombre de noeuds dans le DOM, etc.; Produire un code HTML de qualité
Coder, c'est bien. Livrer un code « propre », c'est encore mieux !
Il suffit d'un clic pour en être certain.
Conversion Scalable Vector Graphics/Cascading Style Sheets: Convertisseur en ligne de Scalable Vector Graphics pour intégration directe dans des fichiers Cascading Style Sheets.
Accessibilité des formulaires: Conception et accessibilité des formulaires web, avec prise en charge des erreurs de saisie.
Tab panels (onglets): Construction d'un système de panneaux d'onglets permettant la navigation au clavier (accessibilité Web Accessibility Initiative-Accessible Rich Internet Applications) compatible terminaux mobiles et Search Engine Optimization
Vérifier un numéro de carte bancaire: Script complet de vérification de numéro de carte bancaire avec algorithme de Luhn. Prend en charge les cartes Visa, Mastercard, Maestro, Carte Bancaire, Discover Card, American Express, JCB Cards.
Scalable Vector Graphics drapeaux International Organization for Standardization 3166: Drapeaux nationaux vectoriels normés ISO alpha 1, alpha 2, alpha 3. Drapeaux SVG pour internationalisation de sites multilingues.
Optimisation sprite Scalable Vector Graphics: Comment concevoir et optimiser un fichier « sprite » Scalable Vector Graphics et améliorer les performance ?
Contrôle de code postal: Contrôler le format d'un code postal selon le pays en fonction des patterns de code postaux par pays ? Avec des expressions régulières, barbares !

Simulateur d'emprunt: Simulateur de mensualités d'emprunt et tableau d'amortissement.

Contact: Formulaire de contact. Des questions, des remarques, juste un mot gentil. Kortic - Regards sur l'autour et l'instant.

À propos

C'est quoi Kortic ?. Kortic, c'est quoi, c'est qui ?

Le fichier humans.txt: HumansTXT We are people, not machines

Accessibilité: À propos de l'accessibilité au numérique. Quelques bases… Configuration des options d'affichage de Kortic.

Mentions - cgu: Mentions légales, conditions d'utilisation.

Gabarit de page sans contenu: Page de test de gabarit complet