{"id":14381,"date":"2022-03-23T11:25:45","date_gmt":"2022-03-23T10:25:45","guid":{"rendered":"https:\/\/hesmid.nl\/test\/?p=14381"},"modified":"2022-03-23T11:25:46","modified_gmt":"2022-03-23T10:25:46","slug":"a11y-dialog-lightweight-dialog-windows","status":"publish","type":"post","link":"https:\/\/hesmid.nl\/test\/a11y-dialog-lightweight-dialog-windows\/","title":{"rendered":"A11y Dialog &#8211; lightweight dialog windows"},"content":{"rendered":"\n<p><a href=\"https:\/\/github.com\/KittyGiraudel\/a11y-dialog\">https:\/\/github.com\/KittyGiraudel\/a11y-dialog<\/a><\/p>\n\n\n\n<p><a href=\"https:\/\/a11y-dialog.netlify.app\/\">documentation<\/a><\/p>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/hesmid.nl\/test\/wp-content\/uploads\/2022\/03\/image-6.png\" alt=\"\" class=\"wp-image-14382\" width=\"342\" height=\"282\" srcset=\"https:\/\/hesmid.nl\/test\/wp-content\/uploads\/2022\/03\/image-6.png 774w, https:\/\/hesmid.nl\/test\/wp-content\/uploads\/2022\/03\/image-6-300x247.png 300w, https:\/\/hesmid.nl\/test\/wp-content\/uploads\/2022\/03\/image-6-150x124.png 150w, https:\/\/hesmid.nl\/test\/wp-content\/uploads\/2022\/03\/image-6-768x633.png 768w\" sizes=\"(max-width: 342px) 100vw, 342px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Installation<\/h3>\n\n\n\n<p><strong>Using a bundler (recommended)<\/strong>:<\/p>\n\n\n\n<p>If you\u2019re using a bundler (such as Webpack or Rollup), you can install <code>a11y-dialog<\/code> through npm or yarn like any other dependency:<\/p>\n\n\n\n<pre class=\"wp-block-code has-small-font-size\"><code>npm install a11y-dialog\nyarn add a11y-dialog<\/code><\/pre>\n\n\n\n<!--more-->\n\n\n\n<p>Then you can import the library in your JavaScript codebase to access the <code>A11yDialog<\/code> class and instantiate your dialogs as you intend to.<\/p>\n\n\n\n<pre class=\"wp-block-code has-small-font-size\"><code>import A11yDialog from 'a11y-dialog' \n\nconst container = document.querySelector('#my-dialog-container')\nconst dialog = new A11yDialog(container)<\/code><\/pre>\n\n\n\n<p>If you rely on the <code>data-a11y-dialog<\/code> attribute to automate the dialog <a href=\"https:\/\/a11y-dialog.netlify.app\/usage\/instantiation\">instantiation<\/a> in order not to write JavaScript at all, you could simplify the import as such:<\/p>\n\n\n\n<pre class=\"wp-block-code has-small-font-size\"><code>import 'a11y-dialog'<\/code><\/pre>\n\n\n\n<p><a href=\"https:\/\/codesandbox.io\/s\/a11y-dialog-cp3rz?file=\/index.html\">codesandbox<\/a>:<\/p>\n\n\n\n<p>This page demonstrates how to make a dialog window as accessible as possible to assistive technology users. Dialog windows are especially problematic for screen reader users. Often times they are able to \u201cescape\u201d the window and interact with other parts of the page when they should not be able to. This is partially due to the way screen reader software interacts with the browser.<\/p>\n\n\n\n<p>To see this in action, you just need to<\/p>\n\n\n\n<p>. Once it\u2019s open, you should not be able to interact with other links on the main page like <a href=\"https:\/\/github.com\/HugoGiraudel\/a11y-dialog\">going to the main GitHub page<\/a>. The focus is said to be \u201ctrapped\u201d inside the dialog until the user explicitely decides to leave it.<\/p>\n\n\n\n<p>On top of that, this implementation provides all the usual mandatory bits from a dialog window: correct usage or ARIA landmarks, absolute freedom in regard to the styling, closing when pressing <code>ESC<\/code>, closing when clicking the background overlay, closing when clicking the close button, a simple yet powerful DOM API, for 1.3Kb of JavaScript. Oh, and also it is fully tested using Cypress to make sure it works as intended.<\/p>\n\n\n\n<p><strong>No more excuse now. Make your dialog windows accessible.<\/strong><\/p>\n","protected":false},"excerpt":{"rendered":"<p>https:\/\/github.com\/KittyGiraudel\/a11y-dialog documentation Installation Using a bundler (recommended): If you\u2019re using a bundler (such as Webpack or Rollup), you can install a11y-dialog through npm or yarn like any other dependency:<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[7],"tags":[37,745,101,746],"acf":[],"_links":{"self":[{"href":"https:\/\/hesmid.nl\/test\/wp-json\/wp\/v2\/posts\/14381"}],"collection":[{"href":"https:\/\/hesmid.nl\/test\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/hesmid.nl\/test\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/hesmid.nl\/test\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/hesmid.nl\/test\/wp-json\/wp\/v2\/comments?post=14381"}],"version-history":[{"count":1,"href":"https:\/\/hesmid.nl\/test\/wp-json\/wp\/v2\/posts\/14381\/revisions"}],"predecessor-version":[{"id":14383,"href":"https:\/\/hesmid.nl\/test\/wp-json\/wp\/v2\/posts\/14381\/revisions\/14383"}],"wp:attachment":[{"href":"https:\/\/hesmid.nl\/test\/wp-json\/wp\/v2\/media?parent=14381"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/hesmid.nl\/test\/wp-json\/wp\/v2\/categories?post=14381"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/hesmid.nl\/test\/wp-json\/wp\/v2\/tags?post=14381"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}