The latest articles on DEV Community by HeloOwWeb (@heloowweb). https://dev.to/heloowweb https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F395591%2Fac4e59cf-52ca-4fb1-8d6b-92cf611282e6.jpg https://dev.to/heloowweb en HeloOwWeb Mon, 26 Feb 2024 07:00:00 +0000 https://dev.to/heloowweb/des-evenements-pour-promouvoir-la-decouverte-dangular-4dhm https://dev.to/heloowweb/des-evenements-pour-promouvoir-la-decouverte-dangular-4dhm <p><a href="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F2l5ezoot7d2iucx5qwum.jpg" class="article-body-image-wrapper"><img src="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F2l5ezoot7d2iucx5qwum.jpg" alt="Bonjour tout le monde! Aujourd'hui, je vous parle de notre incroyable aventure: l'organisation de l'atelier ngGirls." width="800" height="334"></a></p> <p><a href="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fge7oxzc9ilybx6ua4ihc.jpg" class="article-body-image-wrapper"><img src="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fge7oxzc9ilybx6ua4ihc.jpg" alt="Tout d'abord, je vous présente notre team Angular Devs France sur la session de Paris: Gérôme Grignon, Camille Pillot et Elodie Peloille." width="800" height="462"></a></p> <p><a href="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fm0ph6r1wnlc8cy3dkkei.jpg" class="article-body-image-wrapper"><img src="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fm0ph6r1wnlc8cy3dkkei.jpg" alt="Angular Devs France est un groupement de développeurs unis dans la volonté de faciliter l'accès au savoir avec comme cœur d'intérêt le framework Angular. Gérôme a créé Angular Devs France pour faciliter le partage de connaissance autour d'Angular pour la communauté francophone. C'est une démarche qu'il poursuit au travers de projets open-source comme RealWorld ou angular-checklist. Camille rejoint Angular Devs France car elle a à cœur de rendre accessible la connaissance à la communauté francophone. Pro-active dans la création de formation, elle démêle la complexité en des explications simples et limpides en un claquement de doigts. Elodie rejoint Angular Devs France car elle est passionnée d'enseignement: promouvoir la connaissance et partager. Elle tombe rapidement sous le charme d'Angular et aide à démystifier son utilisation dans le quotidien afin de répondre au besoin métier." width="800" height="336"></a></p> <p><a href="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F3zbjkjznvfu7e7ufretk.jpg" class="article-body-image-wrapper"><img src="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F3zbjkjznvfu7e7ufretk.jpg" alt="Nous avons formé un partenariat avec AngularGirls alias ngGirls. C'est une communauté à portée internationale qui a pour but d'initier les femmes à Angular afin de développer la diversité dans le monde du dev." width="800" height="369"></a></p> <p><a href="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fbi5s4euqi0x4nto89zfc.jpg" class="article-body-image-wrapper"><img src="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fbi5s4euqi0x4nto89zfc.jpg" alt="Gérôme les a contactés car la diversité dans les métiers du numérique est très importante pour lui. Avec toute la team d'Angular Devs France (Imad et Anthony aussi), nous avons été ravis de cette volonté. Nous avons donc travaillé tous ensemble pour mettre en place cette action dont l'atelier de Paris était la première date d'une longue série. Et ensuite ? Il a également fait un travail incroyable en rassemblant des mentors de qualité. Il a réuni sa team choc féminine pour prendre le relai sur l'orga." width="800" height="371"></a></p> <p><a href="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F7bj53t8ok7i7iqb6x57b.jpg" class="article-body-image-wrapper"><img src="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F7bj53t8ok7i7iqb6x57b.jpg" alt="Un événement 100% féminin jusqu'au bout. Un atelier qui a pour but d'initier les développeuses au framework Angular. Comment est-ce qu'on s'est dispatché les missions ?" width="800" height="319"></a></p> <p><a href="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F00rbzlpu5hbu45r2uyxe.jpg" class="article-body-image-wrapper"><img src="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F00rbzlpu5hbu45r2uyxe.jpg" alt="Gérôme: contact avec ngGirls, création des formulaires d'inscriptions, mise en place du projet Github et traduction de la formation. Camille: contact, gestion du lieu et des repas avec Takima, gestion des mentors et inscriptions participantes, mise en ligne des publications des posts, révision de la formation (adaptation et correction), gestion de l'atelier sur place et mentor. Elodie: création de la communication visuelle, templates des différents mails de réponse, création des badges participantes, livrets de formation et attestations de suivi de l'atelier, accueil et aide à la gestion de l'atelier, création du formulaire REX de la journée, photographe et caméraman à ses heures perdues. Et après ? Le jour J est arrivé." width="800" height="897"></a></p> <p><a href="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fv13tigiww1kn8x7lma91.jpg" class="article-body-image-wrapper"><img src="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fv13tigiww1kn8x7lma91.jpg" alt="D-day! Captures d'écran des posts et retours sur les réseaux sociaux." width="800" height="1116"></a></p> <p><a href="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fgdckwoacfgcpzk63rujx.jpg" class="article-body-image-wrapper"><img src="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fgdckwoacfgcpzk63rujx.jpg" alt="Une fois que l'événement est passé, qu'advient-il de l'équipe de choc? On se réunit pour faire le point sr les forces et faiblesses de l'événement. On prend en compte les retours des participantes et des mentors. On continue de travailler le contenu de la formation qui reste accessible à nos participantes. On planifie le prochain événement dans une autre ville. Hop! On remet ça." width="800" height="504"></a></p> <p><a href="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fvxrl7hcg8kwdw55fa9ox.jpg" class="article-body-image-wrapper"><img src="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fvxrl7hcg8kwdw55fa9ox.jpg" alt="Suivez notre actualité sur LinkedIn ou notre site web Angular Devs France. Un petit J'aime ou un repartage soutient notre démarche complètement bénévole. Bonne journée." width="800" height="464"></a></p> frontend angular coding learning HeloOwWeb Sun, 05 Nov 2023 14:53:42 +0000 https://dev.to/heloowweb/decouvrez-nx-avec-younes-jaaidi-p57 https://dev.to/heloowweb/decouvrez-nx-avec-younes-jaaidi-p57 <p><a href="https://res.cloudinary.com/practicaldev/image/fetch/s--sPiJZ101--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/euxbj2c1yubbh3zxb83d.jpg" class="article-body-image-wrapper"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--sPiJZ101--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/euxbj2c1yubbh3zxb83d.jpg" alt="Finies les apps, pensez libs avec Nx!" width="800" height="1141"></a></p> <p>Au DevFest de Nantes (2023), j'ai pu assister à l'excellent talk de Younes. Il nous explique la plus-value de l'eXtreme Programming avec un découpage du projet sous forme de librairie et l'utilisation d'Nx.</p> <p><a href="https://res.cloudinary.com/practicaldev/image/fetch/s--eevlEbCI--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ywk6t6o32fsklj78rp71.jpg" class="article-body-image-wrapper"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--eevlEbCI--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ywk6t6o32fsklj78rp71.jpg" alt="Plus d'Uluru" width="800" height="517"></a></p> <p><em>Avez-vous la réf ?</em> 🐼</p> <p>Exactement ! On va pouvoir travailler en mono-repo tout en découpant notre application en librairie indépendante et réutilisable. Nous serons accompagnés d'Nx pour la maîtrise du tout.</p> <h2> L'eXtreme Programming ? </h2> <p><em>est une méthode Agile.</em></p> <p><code>Equilibre entre réalisation et gestion de projet.</code></p> <p><a href="https://res.cloudinary.com/practicaldev/image/fetch/s--MnflF0U6--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r3hfar05h20gmilxzehe.jpg" class="article-body-image-wrapper"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--MnflF0U6--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r3hfar05h20gmilxzehe.jpg" alt="Description de l'eXtreme Programming" width="800" height="876"></a></p> <h2> Un constat simple </h2> <blockquote> <p>Comment éviter le plat de Spaghettis des différents composants et s'assurer d'une architecture maintenable, simple et évolutive tout au long du projet ?</p> </blockquote> <p><a href="https://res.cloudinary.com/practicaldev/image/fetch/s--DOaKdwJL--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mqncbgo401xeekg3ch7k.jpg" class="article-body-image-wrapper"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--DOaKdwJL--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mqncbgo401xeekg3ch7k.jpg" alt="Panda ne trouve pas ça simple." width="260" height="196"></a></p> <p><strong>Simple, simple... C'est ce qui est le plus complexe au final dans un projet !</strong></p> <p><a href="https://res.cloudinary.com/practicaldev/image/fetch/s--GYFPDDhd--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yber0c1m03b5n6mlfekq.jpg" class="article-body-image-wrapper"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--GYFPDDhd--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yber0c1m03b5n6mlfekq.jpg" alt="Questions" width="800" height="347"></a></p> <p><a href="https://res.cloudinary.com/practicaldev/image/fetch/s--fiFTFiKn--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3lx5038lo41sx0l297ew.jpg" class="article-body-image-wrapper"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--fiFTFiKn--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3lx5038lo41sx0l297ew.jpg" alt="Liaison en Spaghettis du code" width="800" height="488"></a></p> <blockquote> <p>Bref bien des soucis au fil du temps que l'on connaît que trop bien …</p> </blockquote> <h2> Une solution ? </h2> <ul> <li><p>Adopter une architecture sous forme de librairie vers un esprit plus hexagonal.</p></li> <li><p>Adopter un nouveau compagnon que ce soit pour un nouveau projet ou sur de l'existant (petit à petit 🐦‍⬛ …).</p></li> </ul> <p><a href="https://res.cloudinary.com/practicaldev/image/fetch/s--VsEJ0_w7--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/d3z9t5k3lecgjzpic1i9.jpg" class="article-body-image-wrapper"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--VsEJ0_w7--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/d3z9t5k3lecgjzpic1i9.jpg" alt="Nx love" width="800" height="444"></a></p> <p>Nx vous aidera à visualiser votre architecture, vos dépendances, à gagner du temps sur le run des tests, à développer rapidement des fonctionnalités via les librairies de différentes technologies, à ne publier qu'une partie de vos libs pour d'autres apps (si besoin), à intégrer des nouveaux devs efficacement, et bien d'autres avantages. </p> <p><em>(Psst ! 🐼 Prochainement, je vous partagerai un petit article BD focus sur les avantages Nx)</em> </p> <p>Je vous conseille d'aller voir la rediffusion du talk sur la chaîne Youtube du DevFest de Nantes: <strong>40 min de démo et d'humour</strong> !</p> <p>En attendant la vidéo ?<br> Suivez le travail de Younes et retrouvez ses workshops sur <strong><a href="https://marmicode.io/">marmicode.io</a></strong>.</p> <p><a href="https://res.cloudinary.com/practicaldev/image/fetch/s--O0X4v0_8--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/u4w9manslypq88e2azq3.jpg" class="article-body-image-wrapper"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--O0X4v0_8--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/u4w9manslypq88e2azq3.jpg" alt="Bonne journée !" width="800" height="517"></a></p> nx productivity architecture extremeprogramming HeloOwWeb Thu, 02 Nov 2023 23:31:05 +0000 https://dev.to/heloowweb/lux-accessible-avec-gerome-grignon-4930 https://dev.to/heloowweb/lux-accessible-avec-gerome-grignon-4930 <p><a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F155jxswoq15riom1ii9h.png" class="article-body-image-wrapper"><img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F155jxswoq15riom1ii9h.png" alt="UX définition"></a></p> <p>Prenons le <em>contexte d'un jeu vidéo</em>.</p> <p>Nous avons toujours un personnage secondaire qui nous aide à comprendre les mécanismes du jeu.<br> 🐼 Si nous faisons le parallèle sur le web, ce serait l'<strong>accessibilité</strong>.</p> <p>Nous retrouvons aussi l'interface du jeu qui sera pensée par l'UX Designer.<br> Pour finir, la performance du jeu doit être irréprochable pour une meilleure immersion.<br> 🐼 Les devs bichonnent leur code pour obtenir des bons scores sur les métriques des <strong>Core Web Vitals</strong>.</p> <p>Je vous laisserai approfondir le sujet des Core Web Vitals via le talk de Nicolas Frizzarin (rediffusion sur la chaîne Youtube du DevFest 2023 de Nantes).</p> <blockquote> <p>Aujourd'hui, nous allons regarder d'un peu plus près l'accessibilité avec la célèbre petite fée: Navi.</p> </blockquote> <p>Ces planches découlent de l'excellent talk de Gérôme Grignon.</p> <p><a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fbr1j1irxqcv1qb44nj5j.png" class="article-body-image-wrapper"><img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fbr1j1irxqcv1qb44nj5j.png" alt="Gérôme au DevFest de Nantes 23"></a></p> <h2> Imaginez ... </h2> <blockquote> <p>que <strong>Navi</strong> représente un lecteur d'écran utilisé sur votre site web par votre utilisateur.</p> </blockquote> <p><strong>ARIA</strong> (<strong>A</strong>pplications <strong>I</strong>nternet <strong>R</strong>iches et <strong>A</strong>ccessibles)</p> <p><a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Ffu0pzmtsqjzfih37e8t5.png" class="article-body-image-wrapper"><img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Ffu0pzmtsqjzfih37e8t5.png" alt="Navi pète un câble"></a></p> <p><a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fk6kfwy61tyz1lh4yv726.png" class="article-body-image-wrapper"><img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fk6kfwy61tyz1lh4yv726.png" alt="Calme toi Navi!"></a></p> <p>Les éléments sémantiques HTML disposent de fonctionnalités de navigation au clavier, de rôles et d'états définis en standard.</p> <p>🐼 Mal utilisé, cela devient une nuisance plus qu'une aide.</p> <p>Pensez à vous appuyer sur les <code>aria-attributes</code> pour compléter les éléments HTML et non re-coder ce qui est déjà présent nativement.</p> <blockquote> <p>Et sinon ?</p> </blockquote> <p><a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F2g4j3wqtnrrzr128w0zv.jpg" class="article-body-image-wrapper"><img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F2g4j3wqtnrrzr128w0zv.jpg" alt="Navi coupe la parole au discours principal."></a></p> <p><a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fu6lz683tpq8zoi342raq.jpg" class="article-body-image-wrapper"><img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fu6lz683tpq8zoi342raq.jpg" alt="La Grande Fée apprend à Navi à être polie."></a></p> <blockquote> <p>Pour les notifications et alertes, pensez <code>aria-live</code>avec <code>polite</code>/ <code>assertive</code>.<br> Plus d'infos pour gérer les changements intervenants dans sa page, <a href="https://developer.mozilla.org/fr/docs/Web/Accessibility/ARIA/ARIA_Live_Regions" rel="noopener noreferrer">cliquez ici</a>.</p> </blockquote> <blockquote> <p>Encore un exemple de cas ?</p> </blockquote> <p><a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Frmgpvh360impq4l7hk8p.jpg" class="article-body-image-wrapper"><img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Frmgpvh360impq4l7hk8p.jpg" alt="Navi n'arrête pas de décrire alors que le chargement n'est pas terminé."></a></p> <p><a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fqcm55x9sggd54qyvdawm.png" class="article-body-image-wrapper"><img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fqcm55x9sggd54qyvdawm.png" alt="Et si on demandait à Navi de patienter ?"></a></p> <blockquote> <p>Avec <code>aria-busy</code>, vous pouvez faire patienter les lecteurs d'écran lors d'un chargement de page. Ils liront les éléments une fois chargés.</p> </blockquote> <h2> Découvrez ... </h2> <blockquote> <p><code>aria-relevant</code>, <code>aria-atomic</code>, <code>aria-controls</code>, les arias de progression, <code>aria-current</code>, <code>aria-hidden</code>, <code>aria-disabled</code>, ... et bien plus ...</p> </blockquote> <p>Allez vite voir la rediffusion du talk de <strong>Gérôme Grignon</strong> sur la chaîne Youtube du DevFest de Nantes 2023: <strong>20 min de connaissance sur les attributs ARIA</strong>.</p> <p><strong>A vous la régie !</strong></p> a11y ux frontend html