1(this["webpackJsonpexplore-a11y"]=this["webpackJsonpexplore-a11y"]||[]).push([[0],Array(19).concat([function(e,t,a){e.exports=a(43)},,,,,function(e,t,a){},,,,,,function(e,t,a){},function(e,t,a){},function(e,t,a){},function(e,t,a){},function(e,t,a){},function(e,t,a){},function(e,t,a){},function(e,t,a){},function(e,t,a){},function(e,t,a){},function(e,t,a){},function(e,t,a){},function(e,t,a){},function(e,t,a){"use strict";a.r(t);var n=a(0),l=a.n(n),o=a(17),i=a.n(o),r=(a(24),a(9)),c=a(6),s=[{to:"/",label:"Home"},{to:"/introduction",label:"Introduction"},{navLabel:"Examples",links:[{to:"/button",label:"Button"},{to:"/modal",label:"Modal"},{to:"/event-handling",label:"Event handling"},{to:"/page-title",label:"Page titles"},{to:"/announce-details",label:"Announce details"},{to:"/animation",label:"Animation"},{to:"/dark-mode",label:"Dark mode"},{to:"/carousels",label:"Carousels"},{to:"/info-and-data-viz",label:"Information and Data Visualization"}]},{to:"/disabilities",label:"Disabilities resources"},{to:"/testing",label:"Testing"},{to:"/about",label:"About"},{to:"/contact",label:"Contact"}],u=function(){var e=Object(n.useState)(!0),t=Object(r.a)(e,2),a=t[0],o=t[1];return l.a.createElement("nav",{"aria-label":"main",className:"nav-links",id:"main-nav",tabIndex:"-1"},l.a.createElement("ul",null,s.map((function(e,t){return e.navLabel?l.a.createElement("li",{key:e.navLabel+t},l.a.createElement("nav",{"aria-label":e.navLabel,className:"nav-"+e.navLabel},l.a.createElement("button",{className:"nav-sub-division transparent-button",onClick:function(){return o(!a)}},l.a.createElement("i",{className:"fa fa-chevron-".concat(a?"down":"right"),"aria-hidden":!0}),e.navLabel),l.a.createElement("ul",{className:a?"":"is-hidden","aria-hidden":!a},e.links.map((function(e,t){return l.a.createElement("li",{key:e.label+t},l.a.createElement(c.b,{to:e.to,activeClassName:"active-nav",exact:!0},e.label))}))))):l.a.createElement("li",{key:e.label+t},l.a.createElement(c.b,{to:e.to,activeClassName:"active-nav",exact:!0},e.label))}))))},m=function(e){return l.a.createElement("header",{className:"app-header",id:"app-header"},l.a.createElement("a",{href:"#main-content",className:"skip-to-main-link"},"Skip to main content"),l.a.createElement("h1",null,"Explore Web Accessibility (a11y)",e.toggleDarkModeButton))},d=function(){return l.a.createElement("footer",{className:"app-footer"},l.a.createElement("p",null,l.a.createElement("a",{href:"https://www.linkedin.com/in/anuradha15/",target:"_blank",rel:"noopener noreferrer","aria-label":"Linkedin",className:"icon-links"},l.a.createElement("i",{className:"fa fa-linkedin fa-lg","aria-hidden":!0})),l.a.createElement("a",{href:"https://twitter.com/miracle_404",target:"_blank",rel:"noopener noreferrer","aria-label":"Twitter",className:"icon-links"},l.a.createElement("i",{className:"fa fa-twitter fa-lg","aria-hidden":!0}))),l.a.createElement("p",null,"Built with ",l.a.createElement("strong",null,"Love"),", coded in ",l.a.createElement("strong",null,"React"),", hosted on ",l.a.createElement("strong",null,"Netlify")),l.a.createElement("p",null,l.a.createElement("a",{href:"#app-header",className:"go-to-top"},"Go to top")))},b=a(3),h=a(4),p=a(5),f=a(7),E=a(1);function g(e){var t={};return e.hideAriaLabel||(t["aria-label"]=(e.ariaLabel||e.label)+" - opens in new tab"),l.a.createElement("a",Object.assign({href:e.href,target:"_blank",rel:"noopener noreferrer"},t),e.label,l.a.createElement("i",{className:"fa fa-external-link","aria-hidden":"true",style:{marginLeft:"3px"}}))}var y=function(e){var t=e.level,a=void 0===t?2:t,n=e.fromLocation,o=e.children,i="h".concat(a);return[l.a.createElement("a",{key:"skip-to-nav",className:"skip-to-nav-link",href:"#".concat(n||"main-nav"),"aria-label":"Skip to navigation"},"Back to navigation"),l.a.createElement(i,{key:"header-key"},o)]},v=function(){return Object(n.useEffect)((function(){document.title="Explore accessibility"}),[]),l.a.createElement("section",null,l.a.createElement(y,null,"Web is accessible by default"),l.a.createElement("p",null,l.a.createElement(g,{label:"World's first website",href:"http://info.cern.ch/hypertext/WWW/TheProject.html"})," is accessible. ","In words of"," ",l.a.createElement("cite",null,"Tim Berners-Lee, W3C Director and inventor of the World Wide Web")),l.a.createElement("blockquote",null,"\u201cThe power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect.\u201d"),l.a.createElement("p",null,"So what makes the websites and applications inaccessible?"),l.a.createElement("h3",null,"The answer is us. "),l.a.createElement("p",null,"We are making the web inaccessible through bad design, bad coding practices and bad testing. And one of the important reasons for this is lack of awareness around accessibility."),l.a.createElement("p",null,"This website has been created to help spread awareness about accessibility through examples and reference links which can be used to get started."),l.a.createElement("p",null,"It is initial phase and more resources and examples will be added over time. If you have some suggestions or feedbacks, you can reach out to me b
1y filling the"," ",l.a.createElement(c.b,{to:"/contact",activeClassName:"active-nav",exact:!0},"contact form here.")))},w=function(){return l.a.createElement(y,null,"Page not found!")},k=[{href:"https://www.w3.org/standards/webdesign/accessibility",label:"W3 accessibility documentation"},{href:"https://www.w3.org/TR/wai-aria-practices-1.1/",label:"WAI-ARIA Authoring practices"},{href:"https://www.microsoft.com/design/inclusive/",label:"Microsoft Inclusive Design"},{href:"https://developers.google.com/web/fundamentals/accessibility/",label:"Google Developers group accessibility fundamentals"},{href:"https://webaim.org/standards/wcag/checklist",label:"WebAIM checklist for web accessibility"},{href:"https://www.getstark.co/library/collections/",label:"Stark library collections"},{href:"http://book.inclusive-components.design/",label:"Inclusive Components book by Heydon Pickering"},{href:"https://www.deque.com/axe-con/about/",label:"Conference axe-con"},{href:"https://a11yrules.com/",label:"Podcast a11y rules"},{href:"https://a11ytalks.com/",label:"Virtual meetup - a11y talks"},{href:"https://www.a11yproject.com/",label:"The a11y project"},{href:"https://accessible-advent-2020.vercel.app/",label:"Accessible advent 2020"},{href:"https://a11y-style-guide.com/style-guide/section-resources.html",label:"a11y style guide resources"},{href:"https://www.websiteplanet.com/blog/website-accessibility-made-easy-ultimate-guide/",label:"Website accessibility ultimate guide"},{href:"https://github.com/atalan/a11y-resources/blob/master/list-of-a11y-resources.md",label:"Github repository with list of a11y resources"}],x=[{href:"https://www.smashingmagazine.com/2018/07/web-with-just-a-keyboard/",label:"Web with just a keyboard"},{href:"https://webaim.org/techniques/keyboard/",label:"Keyboard accessibility"},{href:"https://webaim.org/articles/screenreader_testing/",label:"Testing with Screen Readers"},{href:"https://webaim.org/resources/",label:"WebAIM resources"}],N=function(){return Object(n.useEffect)((function(){document.title="Explore accessibility - Introduction"}),[]),l.a.createElement("section",null,l.a.createElement(y,null,"What is accessibility?"),l.a.createElement("p",null,"Accessibility means all resources and services are available and usable by all people."),l.a.createElement("p",null,"Web accessibility means that websites, applications, tools, and technologies are designed and developed in a way that they are accessible and usable by all different kinds of users, irrespective of their disabilities."),l.a.createElement("p",null,"More specifically, people can"," ",l.a.createElement("strong",null,"perceive, understand, navigate, and interact")," with the Web as well as contribute to the Web."),l.a.createElement("section",null,"The different types of disabilities include, but are not limited to:",l.a.createElement("ul",null,l.a.createElement("li",null,"Visual"),l.a.createElement("li",null,"Speech"),l.a.createElement("li",null,"Hearing"),l.a.createElement("li",null,"Motor"),l.a.createElement("li",null,"Congnitive"),l.a.createElement("li",null,"Neurological"))),l.a.createElement("section",null,"Normally whenever we hear about accessibility, we associate it with disability. But. that's not all that is to a11y. The impact of accessibility expands more than disability and it benefits everyone.",l.a.createElement("div",null,"Some of the examples include:",l.a.createElement("ul",null,l.a.createElement("li",null,"Technical issues - like slower internet connection"),l.a.createElement("li",null,"User could be accessing the content on smaller devices (mobiles, tablets, etc.), or older machines, or older browsers"),l.a.createElement("li",null,"External environment - user is trying to listen to any video in a noisy environment. In this situation they won't be able to hear properly and having captions for videos will help a lot."),l.a.createElement("li",null,"Progressive - there are some abilities which decrease with aging, like sight or hearing abilities, motor abilities. I might be able to see properly today, but over time my eye sight can decrease and I might need to use screen magnifiers or screen readers to be able to underatnd and operate on the webistes and applications.")))
1),l.a.createElement("section",null,l.a.createElement("h3",null,"Resources:"),l.a.createElement("ul",null,k.map((function(e,t){return l.a.createElement("li",{key:t},l.a.createElement(g,{label:e.label,href:e.href}))})))),l.a.createElement("section",null,l.a.createElement("h3",null,"Read about Assistive Technologies (ATs):"),l.a.createElement("ul",null,x.map((function(e,t){return l.a.createElement("li",{key:t},l.a.createElement(g,{label:e.label,href:e.href}))})))))},A=function(){return l.a.createElement("h1",null,"Examples")},I=function(e){Object(f.a)(a,e);var t=Object(p.a)(a);function a(){return Object(b.a)(this,a),t.apply(this,arguments)}return Object(h.a)(a,[{key:"componentDidMount",value:function(){var e=document.getElementById("in-button-1"),t=document.getElementById("in-button-2"),a=document.getElementById("in-button-3"),n=document.getElementById("in-result");e.addEventListener("click",(function(){return n.innerHTML="Register now"})),t.addEventListener("click",(function(){return n.innerHTML="Login to buy"})),a.addEventListener("click",(function(){return n.innerHTML="Cart"}))}},{key:"render",value:function(){return l.a.createElement("section",null,l.a.createElement("h4",null,"Inaccessible button 'Login'"),l.a.createElement("button",{id:"in-button-1"},"Register now"),l.a.createElement("div",{id:"in-button-2",className:"div-as-button"},"Login to buy"),l.a.createElement("button",{id:"in-button-3"},"Cart"),l.a.createElement("br",null),l.a.createElement("div",{id:"in-result",className:"result-space"}))}}]),a}(n.Component),S=function(e){Object(f.a)(a,e);var t=Object(p.a)(a);function a(){return Object(b.a)(this,a),t.apply(this,arguments)}return Object(h.a)(a,[{key:"componentDidMount",value:function(){var e=document.getElementById("acc-button-1"),t=document.getElementById("acc-button-2"),a=document.getElementById("acc-button-3"),n=document.getElementById("acc-result");e.addEventListener("click",(function(){return n.innerHTML="Register now"})),t.addEventListener("click",(function(){return n.innerHTML="Login to buy"})),t.addEventListener("keydown",(function(e){" "!==e.key&&"Enter"!==e.key||(n.innerHTML="Login to buy - using keyboard",e.preventDefault())})),a.addEventListener("click",(function(){return n.innerHTML="Cart"}))}},{key:"render",value:function(){return l.a.createElement("section",null,l.a.createElement("h4",null,"Accessible button 2"),l.a.createElement("button",{id:"acc-button-1"},"Register now"),l.a.createElement("div",{tabIndex:"0",role:"button",id:"acc-button-2",className:"div-as-button"},"Login to buy"),l.a.createElement("button",{id:"acc-button-3"},"Cart"),l.a.createElement("br",null),l.a.createElement("div",{id:"acc-result",className:"result-space"}))}}]),a}(n.Component),j=function(e){Object(f.a)(a,e);var t=Object(p.a)(a);function a(){return Object(b.a)(this,a),t.apply(this,arguments)}return Object(h.a)(a,[{key:"componentDidMount",value:function(){var e=document.getElementById("result-space-icon"),t=document.getElementById("toggle-icon"),a=t.children[0];t.addEventListener("click",(function(n){console.log(t.getAttribute("aria-label")),"Enable light mode"===t.getAttribute("aria-label")?(t.setAttribute("aria-label","Enable dark mode"),a.classList.remove("fa-lightbulb-o"),a.classList.add("fa-moon-o"),e.innerHTML="Enable dark mode"):(t.setAttribute("aria-label","Enable light mode"),a.classList.remove("fa-moon-o"),a.classList.add("fa-lightbulb-o"),e.innerHTML="Enable light mode")}))}},{key:"render",value:function(){return l.a.createElement("section",null,l.a.createElement("h4",null,"Toggle button for enabling dark/light mode for webpage or application"),l.a.createElement("button",{"aria-label":"Enable light mode",id:"toggle-icon"},l.a.createElement("i",{className:"fa fa-lightbulb-o","aria-hidden":"true"})),l.a.createElement("div",{id:"result-space-icon",className:"result-space"}))}}]),a}(n.Component),L=(a(30),function(e){return Object(n.useEffect)((function(){document.title="Explore accessibility - Button example"}),[]),l.a.createElement("section",null,l.a.createElement(y,null,"Use semantic button tags instead of divs for interactivity"),l.a.createElement("p",null,"Many times, when we have some requirement where we need to show beautiful buttons, we end up using div tags instead of button. And this could lead to highly inaccessible code if we do not think about assistive tech users."),l.a.createElement("p",null,"HTML 5 has a semantic element called ",l.a.createElement("code",null,"button")," which should be used for any click through action."),l.a.createElement("p",null,"Alternatively, if we really need to use any non-semantic tag instead of"," ",l.a.createElement("code",null,"button")," tag, we need to provide extra attributes and event handlers to make to accesible to assistive tech users."),l.a.createElement("p",null,l.a.createElement("a",{href:"#make-accessible-button"},"Jump to code tips to make accessible buttons")),l.a.createElement("h3",null,"Demo:"),l.a.createElement(I,null),l.a.createElement(S,null),l.a.createElement("br",null),l.a.createElement("div",{id:"make-accessible-button"},l.a.createElement("h3",null,"How to create accessible buttons with divs (or any other non-semantic HTML)?"),l.a.createElement("div",null,"Please note that ",l.a.createElement("em",null,"always")," try to use button tags to create buttons. But, for already existing websites and applications, if you have used div or span to create buttons, and if you find it expensive to use a button tag to fix the accessibility for those elements, you can use the steps as described
1in below list to make those buttons accessible."),l.a.createElement("ul",null,l.a.createElement("li",null,l.a.createElement("code",null,"tab-index"),": to make the button reachable by keyboard through tab key"),l.a.createElement("li",null,l.a.createElement("code",null,"keydown event listener"),": to enable triggering the button action from keyboard"),l.a.createElement("li",null,l.a.createElement("code",null,"role"),": to enable acreen readers understand that it is a button"),l.a.createElement("li",null,l.a.createElement("code",null,"aria-attributes")," if needed",l.a.createElement("br",null),"For example: If the button contains only icon or image without any text, we need to add ",l.a.createElement("code",null,"aria-label")," so that screen readers and other assistive technologies can understand what exactly does that button do."," ",l.a.createElement("a",{href:"#aria-demo"},"Check demo for icon only button"),"."))),l.a.createElement("section",null,l.a.createElement("h3",null,"Sample code for buttons with label:"),l.a.createElement("label",{htmlFor:"button-html-code"},"HTML"),l.a.createElement("textarea",{id:"button-html-code",rows:"10",readOnly:"readonly",className:"code-container",value:'\n <div\n tab-index="0"\n role="button"\n id="acc-button"\n class="div-as-button"\n >\n Login\n </div>\n '}),l.a.createElement("label",{htmlFor:"button-js-code"},"JavaScript"),l.a.createElement("textarea",{id:"button-js-code",rows:"18",readOnly:"readonly",className:"code-container",value:'\n const buttonEle = document.getElementById("acc-button");\n\n buttonEle.addEventListener("click", () => {\n // your code here on what should happen when button is clicked\n }\n );\n\n buttonEle.addEventListener("keydown", (event) => {\n if (event.key === \' \' || event.key === \'Enter\') {\n // your code here on what should happen when button is pressed\n\n // prevent default so that pressing spacebar key does not scroll the content\n event.preventDefault();\n }\n });\n '})),l.a.createElement("section",null,l.a.createElement("h3",{id:"aria-demo"},"Demo for icon only buttons:"),l.a.createElement(j,null),l.a.createElement("h3",null,"Sample code using aria attributes:"),l.a.createElement("label",{htmlFor:"button-html-aria-code"},"HTML"),l.a.createElement("textarea",{id:"button-html-aria-code",rows:"4",readOnly:"readonly",className:"code-container",value:'<button aria-label="Enable light mode" id="toggle-icon">\n <i className="fa fa-lightbulb-o" aria-hidden="true"></i>\n </button>'}),l.a.createElement("label",{htmlFor:"button-js-aria-code"},"JavaScript"),l.a.createElement("textarea",{id:"button-js-aria-code",rows:"20",readOnly:"readonly",className:"code-container",value:"\nconst toggleButton = document.getElementById(\"toggle-icon\");\nconst toggleIcon = toggleButton.children[0];\n\ntoggleButton.addEventListener(\"click\", event => {\n // toggle aria-label and icon class based on current mode\n if (toggleButton.getAttribute('aria-label') === 'Enable light mode') {\n toggleButton.setAttribute('aria-label', 'Enable dark mode');\n toggleIcon.classList.remove(\"fa-lightbulb-o\");\n toggleIcon.classList.add(\"fa-moon-o\");\n } else {\n toggleButton.setAttribute('aria-label', 'Enable light mode');\n toggleIcon.classList.remove(\"fa-moon-o\");\n toggleIcon.classList.add(\"fa-lightbulb-o\");\n }\n // more code here\n \n});"})))}),D=function(e){Object(f.a)(a,e);var t=Object(p.a)(a);function a(){return Object(b.a)(this,a),t.apply(this,arguments)}return Object(h.a)(a,[{key:"componentDidMount",value:function(){var e=document.querySelector(".inaccessible-modal .modal"),t=document.querySelector(".inaccessible-modal .open-modal-button"),a=document.querySelector(".inaccessible-modal .close-modal-button"),n=document.querySelector(".inaccessible-modal .submit-modal-button"),l=function(){e.classList.toggle("show-modal")};t.addEventListener("click",l),a.addEventListener("click",l),n.addEventListener("click",l),window.addEventListener("click",(function(t){t.target===e&&l()}))}},{key:"render",value:function(){return l.a.createElement("section",{className:"inaccessible-modal"},l.a.createElement("h3",null,"Inaccessible Modal"),l.a.createElement("button",{className:"open-modal-button"},"Add burger to cart"),l.a.createElement("button",{className:"button-other"},"Add fries"),l.a.createElement("div",{className:"modal"},l.a.createElement("div",{className:"modal-content"},l.a.createElement("button",{className:"close-modal-button","aria-label":"Close modal"},l.a.createElement("i",{className:"fa fa-close fa-lg","aria-hidden":!0})),l.a.createElement("h3",null,"Customize your spicy burger"),l.a.createElement("p",{className:"modal-checklist"},l.a.createElement("label",null,l.a.createElement("input",{type:"checkbox",name:"custom-items"}),"Extra cheese"),l.a.createElement("label",null,l.a.createElement("input",{type:"checkbox",name:"custom-items"}),"Lettuce add-on"),l.a.createElement("label",null,l.a.createElement("input",{type:"checkbox",name:"custom-items"}),"Onion add-on")),l.a.createElement("button",{className:"submit-modal-button"},"Add to cart"))))}}]),a}(n.Component),O=function(e){Object(f.a)(a,e);var t=Object(p.a)(a);function a(){return Object(b.a)(this,a),t.apply(this,arguments)}
1return Object(h.a)(a,[{key:"componentDidMount",value:function(){var e,t=document.querySelector(".accessible-modal .modal"),a=document.querySelector(".accessible-modal .open-modal-button"),n=document.querySelector(".accessible-modal .close-modal-button"),l=document.querySelector(".accessible-modal .submit-modal-button"),o=function(){t.classList.toggle("show-modal")},i=function(){o(),e.focus()},r=function(e){return Array.from(e.querySelectorAll("button"))},c=r(t),s=c[0],u=c[c.length-1];t.addEventListener("keydown",(function(e){"Tab"===e.key?e.shiftKey?document.activeElement===s&&(e.preventDefault(),u.focus()):document.activeElement===u&&(e.preventDefault(),s.focus()):"Escape"===e.key&&i()})),a.addEventListener("click",(function(a){console.log("Open modal button clicked"),e=document.activeElement,o(),function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:"document",t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:0,a=r(e);return a[t]}(t).focus()})),n.addEventListener("click",(function(){console.log("Close icon on modal clicked"),i()})),l.addEventListener("click",(function(){console.log("Submit button on modal clicked"),i()})),window.addEventListener("click",(function(e){e.target===t&&i()}))}},{key:"render",value:function(){return l.a.createElement("section",{className:"accessible-modal"},l.a.createElement("h3",null,"Accessible modal"),l.a.createElement("button",{className:"open-modal-button"},"Add burger to cart"),l.a.createElement("button",{className:"button-other"},"Add fries"),l.a.createElement("div",{className:"modal",role:"dialog","aria-modal":"true"},l.a.createElement("div",{className:"modal-content"},l.a.createElement("button",{className:"close-modal-button","aria-label":"Close modal"},l.a.createElement("i",{className:"fa fa-close fa-lg","aria-hidden":!0})),l.a.createElement("h3",null,"Customize your spicy burger"),l.a.createElement("p",{className:"modal-checklist"},l.a.createElement("label",null,l.a.createElement("input",{type:"checkbox",name:"custom-items"}),"Extra cheese"),l.a.createElement("label",null,l.a.createElement("input",{type:"checkbox",name:"custom-items"}),"Lettuce add-on"),l.a.createElement("label",null,l.a.createElement("input",{type:"checkbox",name:"custom-items"}),"Onion add-on")),l.a.createElement("button",{className:"submit-modal-button"},"Add to cart"))))}}]),a}(n.Component),M=(a(31),function(){return Object(n.useEffect)((function(){document.title="Explore accessibility - Modals example"}),[]),l.a.createElement("section",{id:"modal-demo"},l.a.createElement(y,null,"Focus management for Modals"),l.a.createElement("p",null,"When working with modals or dialogs, we need to manage the focus on current active element through JavaScript code, so that it is accessible through keyboard too."),l.a.createElement(D,null),l.a.createElement(O,null),l.a.createElement("section",null,l.a.createElement("h3",null,"Sample code:"),l.a.createElement("h4",null,"HTML"),l.a.createElement("textarea",{rows:"20",readOnly:"readonly",className:"code-container",defaultValue:'\n <section class="accessible-modal">\n <button class="open-modal-button">Click here to open modal</button>\n <button class="button-other">Some other button</button>\n\n <div class="modal" role="dialog" aria-modal="true">\n <div class="modal-content">\n <button class="close-modal-button" aria-label="Close modal">\n <i class="fa fa-close fa-lg" aria-hidden="true"></i>\n </button>\n <h1>Hello, the modal has opened!</h1>\n \n <button class="submit-modal-button">\n Submit\n </button>\n </div>\n </div>\n </section>\n '}),l.a.createElement("h4",null,"JavaScript"),l.a.createElement("textarea",{rows:"35",readOnly:"readonly",className:"code-container",defaultValue:'\n const modal = document.querySelector(".accessible-modal .modal");\n const openModalButton = document.querySelector(\n ".accessible-modal .open-modal-button"\n );\n const closeModalButton = document.querySelector(\n ".accessible-modal .close-modal-button"\n );\n const submitButton = document.querySelector(\n ".accessible-modal .submit-modal-button"\n );\n let previousActiveElement;\n\n const toggleModal = () => {\n modal.classList.toggle("show-modal");\n };\n\n const toggleModelWithFocusRestored = () => {\n toggleModal();\n previousActiveElement.focus();\n };\n\n const getAllFocusableElements = context =>\n Array.from(context.querySelectorAll("button"));\n\n const getFocusableElement = (context = "document") => {\n let focusable = getAllFocusableElements(context);\n return focusable[0];\n };\n\n openModalButton.addEventListener("click", () => {\n previousActiveElement = document.activeElement;\n toggleModal();\n getFocusableElement(modal).focus();\n });\n\n closeModalButton.addEventListener("click", () => {\n console.log("Close icon on modal clicked");\n toggleModelWithFocusRestored();\n });\n\n submitButton.addEventListener("click", () => {\n console.log("Submit button on modal clicked");\n toggleModelWithFocusRestored();\n });\n\n window.addEventListener("click", event => {\n if (event.target === modal) {\n toggleModelWithFocusRestored();\n }\n });\n\n // code to trap focus inside modal and close modal on ESC keypress\n let focusableElementsInModal = getAllFocusableElements(modal);\n var firstFocusableElement = focusableElementsInModal[0];\n var lastFocusableElement = focusableElementsInModal[focusableElementsInModal.length - 1];\n\n const handleKeyDownInModal = event => {\n // code to trap focus inside modal\n if (event.key === "Tab") {\n if (event.shiftKey) {\n if (document.activeElement === firstFocusableElement) {\n event.preventDefault();\n lastFocusableElement.focus();\n }\n } else {\n if (document.activeElement === lastFocusableElement) {\n event.preventDefault();\n firstFocusableElement.focus();\n }\n }\n } else if (event.key === "Escape") {\n // close modal on ESC keypress\n toggleModelWithFocusRestored();\n }\n };\n\n modal.addEventListener("keydown", handleKeyDownInModal);\n '})),l.a.createElement("section",null,l.a.createElement("h3",null,"Reference:"),l.a.createElement("ul",null,l.a.createElement("li",null,l.a.createElement(g,{label:"WAI ARIA practices for a modal/dialog",href:"https://www.w3.org/TR/wai-aria-practices/#dialog_modal"})),l.a.createElement("li",null,l.a.createElement(g,{href:"https://gist.github.com/anuk79/e201d775725b6779e5e004b976835411",label:"Manage focus on Modals"})))))}),T=(a(32),function(){var e=Object(n.useState)(!1),t=Object(r.a)(e,2),a=t[0],o=t[1];Object(n.useEffect)((function(){document.title="Explore accessibility - Animation example"}),[]);var i=matchMedia("(prefers-reduced-motion)").matches?"":"animate-balls";return l.a.createElement("section",{className:i},l.a.createElement(y,null,"Animations"),l.a.createElement("p",null,"Animations look so good, so attractive and might make our websites more likable. However, do you know that animations and flashy content might turn out as disturbing for several people."),l.a.createElement("p",null,"People with conditions like"," ",l.a.createElement(g,{label:"vestibular motion disorder",href:"https://vestibular.org/understanding-vestibular-disorder/symptoms#:~:text=The%20vestibular%20system%20includes%20the,Vertigo%20and%20dizziness",ariaLabel:"vestibular motion disorder"})," ","might find it troubling to watch animations."),l.a.createElement("p",null,"Our devices have setting which can be enabled to reduce the motion of the content. You can check the reference links to find out more about how to enable those settings. But how does our code know if the user has these settings enabled? Let's see an example before proceeding further:"),l.a.createElement("h3",null,"Instru
1ctions:"),l.a.createElement("p",null,"Click on ",l.a.createElement("strong",null,"Inaccessible example")," to see it. It's hidden by default to prevent causing discomfort to any audience."),l.a.createElement("h3",null,"Demo:"),l.a.createElement("section",{className:"animation-demo"},l.a.createElement("div",{className:"acc-animation-ex"},l.a.createElement("div",{className:"acc-ex-label"},"Accessible example"),l.a.createElement("div",{className:"animated-items"},l.a.createElement("div",{className:"balls",id:"red"}),l.a.createElement("div",{className:"balls",id:"green"}),l.a.createElement("div",{className:"balls",id:"blue"}))),l.a.createElement("div",{className:"inacc-animation-ex"},l.a.createElement("button",{className:"transparent-button",onClick:function(){return o(!a)}},"Inaccessible example (click to check)"),l.a.createElement("div",{className:"animated-items "+(a?"":"is-hidden")},l.a.createElement("div",{className:"balls",id:"red1"}),l.a.createElement("div",{className:"balls",id:"green1"}),l.a.createElement("div",{className:"balls",id:"blue1"})))),l.a.createElement("section",null,l.a.createElement("h3",null,"How to honor user's settings?"),"We can achieve this through two ways:",l.a.createElement("br",null),l.a.createElement("label",{htmlFor:"css-media-query-code"},"CSS media query: "),l.a.createElement("textarea",{id:"css-media-query-code",rows:"34",className:"code-container",readOnly:"readonly",defaultValue:"\n .balls {\n border-radius: 50%;\n position: absolute;\n width: 40px;\n height: 40px;\n top: 60%;\n }\n\n @media (prefers-reduced-motion: no-preference) {\n .animate-balls {\n animation: jump infinite 2s linear;\n animation-iteration-count: infinite;\n }\n }\n \n @keyframes jump {\n 50% {\n top: 30%;\n }\n }\n \n #red {\n background: red;\n left: 25%;\n }\n #blue {\n background: blue;\n left: 75%;\n }\n #green {\n background: green;\n left: 50%;\n animation-timing-function: cubic-bezier(0.311, 0.441, 0.444, 1.649);\n }\n"}),l.a.createElement("label",{htmlFor:"animation-js-code"},"JavaScript:"),l.a.createElement("textarea",{id:"animation-js-code",rows:"5",readOnly:"readonly",className:"code-container",defaultValue:'\n const animationClassName = matchMedia("(prefers-reduced-motion)").matches\n ? ""\n : "animate-balls";\n'})),l.a.createElement("div",null,l.a.createElement("h3",null,"Reference for animation example:"),l.a.createElement("ul",null,l.a.createElement("li",null,l.a.createElement(g,{label:"Freecodecamp - animate elements at variable rates",href:"https://www.freecodecamp.org/learn/responsive-web-design/applied-visual-design/make-motion-more-natural-using-a-bezier-curve"})))),l.a.createElement("div",null,l.a.createElement("h3",null,"Resources:"),l.a.createElement("ul",null,l.a.createElement("li",null,l.a.createElement(g,{label:"MDN documentations on prefers-reduced-motion",href:"https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion"})),l.a.createElement("li",null,l.a.createElement(g,{label:"Reduced motion",href:"https://a11y-101.com/development/reduced-motion"})))))}),W=(a(33),function(e){return l.a.createElement("section",null,l.a.createElement("h3",null,e.heading),l.a.createElement("div",{className:"page-title-demo"},e.tabs.map((function(e,t){return l.a.createElement("button",{title:e.title,key:t,className:1===t?"current-tab":""},e.title)})),l.a.createElement("hr",null),l.a.createElement("div",{className:"url-bar"},"https://explore-a11y.netlify.app/home"),l.a.createElement("hr",null),l.a.createElement("div",{className:"page-demo-content"},l.a.createElement("p",null,"Home page"),l.a.createElement("p",null,"Welcome to explore accessibility website"))))}),C=function(){return Object(n.useEffect)((function(){document.title="Explore accessibility - Page titles"}),[]),l.a.createElement("section",null,l.a.createElement(y,null,"Page titles"),l.a.createElement("p",null,"Goal: attach page titles on each route."),l.a.createElement("p",null,"All the different pages of the website should have dedicated page title so that the assistive technologies can notify the user about the current active page. This is helpful when multiple tabs are open in browser and user is trying to access a particular tab. This is helpful for all users even if we are not using any assitive technologies."),l.a.createElement("h3",null,"Demo:"),l.a.createElement(W,{heading:"With same title for all pages",tabs:[{title:"Explore a11y"},{title:"Explore a11y"},{title:"Explore a11y"},{title:"Explore a11y"},{title:"Explore a11y"}]}),l.a.createElement("br",null),l.a.createElement(W,{heading:"With dedicated title for all pages",tabs:[{title:"Explore a11y: Introduction"},{title:"Explore a11y: Home page"},{title:"Explore a11y: Testing"},{title:"Explore a11y: Contact us"},{title:"Explore a11y: Button tags"}]}),l.a.createElement("br",null),l.a.createElement("section",null,l.a.createElement("h3",null,"Sample code:"),"Assign document title for each route, like below:",l.a.createElement("br",null),l.a.createElement("code",null,"document.title = 'your page title here'")))},B=[{href:"https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key",label:"MDN documentation on keyboard event key"},{href:"https://www.w3.org/TR/uievents-key/",label:"Keyboard event key values"},{href:"https://w3c.github.io/uievents/tools/key-event-viewer.html",label:"W3C keyboard event viewer"},{href:"https://developers.google.com/web/fundamentals/accessibility/",label:"Google Developers group accessibility fundamentals"}
1,{href:"https://www.w3.org/WAI/policies/",label:"Web Accessibility Laws & Policies"}],q=function(){var e=Object(n.useState)(""),t=Object(r.a)(e,2),a=t[0],o=t[1];return Object(n.useEffect)((function(){document.title="Explore accessibility - Event Handling"}),[]),l.a.createElement("section",null,l.a.createElement(y,null,"Event Handling"),l.a.createElement("p",null,"Goal: attaching device-independent event handlers to interactive elements."),l.a.createElement("p",null,"When using semantic html tags, these are generally taken care of. But when we use non-semantic html for tags for creating interactive elements, like using ",l.a.createElement("strong",null,"div")," to create buttons or dropdowns, etc., we need to attach explicit event handlers to make them accessible to assistive technologies."),l.a.createElement("section",null,l.a.createElement("h3",null,"Demo:"),l.a.createElement("div",{tabIndex:"0",role:"button",className:"div-as-button",onClick:function(){return o("Button 1 activated thorugh click")},onMouseUp:function(){return o("Button 1 activated thorugh keyup")}},"With onMouseUp event"),l.a.createElement("div",{tabIndex:"0",role:"button",className:"div-as-button",onClick:function(){return o("Button 2 activated thorugh click")},onKeyDown:function(e){" "!==e.key&&"Enter"!==e.key||(o("Button 2 activated through keyboard"),e.preventDefault())}},"With onKeyDown event"),l.a.createElement("p",{className:"result-space"},a)),l.a.createElement("br",null),l.a.createElement("section",null,l.a.createElement("h3",null,"Best practices:"),l.a.createElement("ul",null,l.a.createElement("li",null,"Use ",l.a.createElement("code",null,"onkeyup")," instead of ",l.a.createElement("code",null,"onmouseup")),l.a.createElement("li",null,"Use ",l.a.createElement("code",null,"onkeydown")," instead of ",l.a.createElement("code",null,"onmousedown")),l.a.createElement("li",null,"Use ",l.a.createElement("code",null,"onclick")," instead of ",l.a.createElement("code",null,"onkeypress")))),l.a.createElement("br",null),l.a.createElement("section",null,l.a.createElement("h3",null,"Sample code (taken from"," ",l.a.createElement(g,{label:"Keyboard event keys",ariaLabel:"MDN docs for keyboard event keys",href:"https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key"}),")"),l.a.createElement("textarea",{rows:"30",readOnly:"readonly",className:"code-container","aria-label":"Sample JavaScript code",defaultValue:'\n window.addEventListener("keydown", function (event) {\n if (event.defaultPrevented) {\n return; // Do nothing if the event was already processed\n }\n \n switch (event.key) {\n case "Down": // IE/Edge specific value\n case "ArrowDown":\n // Do something for "down arrow" key press.\n break;\n case "Up": // IE/Edge specific value\n case "ArrowUp":\n // Do something for "up arrow" key press.\n break;\n case "Left": // IE/Edge specific value\n case "ArrowLeft":\n // Do something for "left arrow" key press.\n break;\n case "Right": // IE/Edge specific value\n case "ArrowRight":\n // Do something for "right arrow" key press.\n break;\n case "Enter":\n // Do something for "enter" or "return" key press.\n break;\n case "Esc": // IE/Edge specific value\n case "Escape":\n // Do something for "esc" key press.\n break;\n default:\n return; // Quit when this doesn\'t handle the key event.\n }\n \n // Cancel the default action to avoid it being handled twice\n event.preventDefault();\n }, true);\n '})),l.a.createElement("section",null,l.a.createElement("h3",null,"Resources:"),l.a.createElement("ul",null,B.map((function(e,t){return l.a.createElement("li",{key:t},l.a.createElement(g,{label:e.label,href:e.href}))})))))},R=function(){return Object(n.useEffect)((function(){document.title="Explore accessibility - Contact us"}),[]),l.a.createElement("section",{className:"contact-details"},l.a.createElement(y,null,"Contact Form:"),l.a.createElement("p",null,"If you have any suggestions/feedbacks for the content, or any questions in general, I
1would love to hear from you!"),l.a.createElement("p",null,"Drop in your message and I will get back to you ASAP!"),l.a.createElement("form",{name:"contact-us-form",method:"POST","data-netlify":"true"},l.a.createElement("input",{type:"hidden",name:"form-name",value:"contact-us-form"}),l.a.createElement("p",null,l.a.createElement("label",null,"Your Name* ",l.a.createElement("input",{type:"text",name:"name",placeholder:"Name",required:!0}))),l.a.createElement("p",null,l.a.createElement("label",null,"Your Email* ",l.a.createElement("input",{type:"email",name:"email",placeholder:"Email",required:!0}))),l.a.createElement("p",null,l.a.createElement("label",null,"Message* ",l.a.createElement("textarea",{rows:"8",name:"message",placeholder:"Please include any relevant details with the message.",required:!0}))),l.a.createElement("p",null,l.a.createElement("button",{type:"submit"},"Send"))))},H=[{href:"https://a11yproject.com/checklist/",label:"Accesibility checklist"},{href:"https://inclusivedesignprinciples.org/",label:"Inclusive Design Principles"},{href:"https://stripe.com/blog/accessible-color-systems",label:"Designing accessible color systems"}],F=[{href:"https://www.npmjs.com/package/eslint-plugin-jsx-a11y",label:"eslint-plugin-jsx-a11y"},{href:"https://github.com/dequelabs/react-axe",label:"React axe"},{href:"https://angular.io/guide/accessibility",label:"Accessibility in Angular"},{href:"https://marketplace.visualstudio.com/items?itemName=MaxvanderSchee.web-accessibility",label:"Web Accessibility Extension - Visual Studio Code"},{href:"https://developers.google.com/web/tools/chrome-devtools/accessibility/reference#audits",label:"Audit a page's accessibility"},{href:"https://developers.google.com/web/tools/chrome-devtools/accessibility/reference#pane",label:"The Accessibility pane"},{href:"https://chrome.google.com/webstore/detail/wave-evaluation-tool/jbbplnpkjmmeebjpijfedlgcdilocofh",label:"WAVE Evaluation Tool"},{href:"https://accessibilityinsights.io/",label:"Accessibility insights"}],z=[{href:"https://www.w3.org/WAI/ER/tools/",label:"Web Accessibility Evaluation Tools List"},{href:"https://dynomapper.com/blog/27-accessibility-testing/246-top-25-awesome-accessibility-testing-tools-for-websites",label:"Accessibility testing tools for websites"},{href:"https://a11yproject.com/posts/getting-started-with-nvda/",label:"Getting started with NVDA"},{href:"https://a11yproject.com/posts/getting-started-with-voiceover/",label:"Getting started with OS X VoiceOver"},{href:"https://webaim.org/techniques/keyboard/",label:"Keyboard accessibility"},{href:"https://www.digitala11y.com/accessibility-plug-ins-ie-chrome-firefox-browsers/",label:"42 Browser Extensions to Perform Accessibility Testing Effectively"}],V=function(){return Object(n.useEffect)((function(){document.title="Explore accessibility - Testing mechanisms"}),[]),l.a.createElement("section",null,l.a.createElement(y,null,"How to test for accessibility?"),l.a.createElement("p",null,"Accessibility should not be an afterthought. Instead, we should think and plan for it from the very start."),l.a.createElement("p",null,"This means that from the decision makers to the testing team, everyone would work with accessibility perspective."),l.a.createElement("p",null,"The following section contains some dedicated tools and resources that can be used by designers, developers and testers in order to test if the content they are designing, developing and testing is accessible for the end users."),l.a.createElement("section",{tabIndex:"0","aria-label":"Resources for designers"},l.a.createElement("h2",null,"For designers"),l.a.createElement("ul",null,H.map((function(e,t){return l.a.createElement("li",{key:t},l.a.createElement(g,{label:e.label,href:e.href}))})))),l.a.createElement("section",{tabIndex:"0","aria-label":"Resources for developers"},l.a.createElement("h2",null,"For developers"),l.a.createElement("ul",null,F.map((function(e,t){return l.a.createElement("li",{key:t},l.a.createElement(g,{label:e.label,href:e.href}))})))),l.a.createElement("section",{tabIndex:"0","aria-label":"Resources for testers"},l.a.createElement("h2",null,"For testers"),l.a.createElement("ul",null,z.map((function(e,t){return l.a.createElement("li",{key:t},l.a.createElement(g,{label:e.label,href:e.href}))})))))},P=(a(34),[{src:"https://images.unsplash.com/photo-1543852786-1cf6624b9987?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=634&q=80",alt:"Cats",id:1},{src:"https://images.unsplash.com/photo-1526336024174-e58f5cdd8e13?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=600&q=60",alt:"Cat with butterfly on its nose",id:2},{src:"https://images.unsplash.com/photo-1592400794069-fe4f735437ad?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=600&q=60",alt:"",id:3},{src:"https://images.unsplash.com/photo-1593096386859-10031354a168?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=600&q=60",alt:"",id:4},{src:"https://images.unsplash.com/photo-1548878811-cddbc06f9d4c?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=600&q=60",alt:"",id:5}]),U=function(){Object(n.useEffect)((function(){document.title="Explore accessibility - Carousels example"}),[]);var e=!matchMedia("(prefers-reduced-motion)").matches&&3e3;return l.a.createElement("section",null,l.a.createElement(y,null,"Carousels"),l.a.createElement("div",{id:"demo",className:"carousel slide","data-ride":"carousel","data-interval":e},l.a.createElement("a",{className:"carousel-control-prev",href:"#demo","data-sli
1de":"prev","aria-label":"previous slide"},l.a.createElement("i",{className:"fa fa-chevron-circle-left fa-lg","aria-hidden":!0})),l.a.createElement("div",{className:"carousel-inner"},P.map((function(e,t){return l.a.createElement("div",{className:"carousel-item "+"".concat(0===t&&"active"),key:e.id},l.a.createElement("img",{src:e.src,alt:e.alt||""}))}))),l.a.createElement("a",{className:"carousel-control-next",href:"#demo","data-slide":"next"},l.a.createElement("i",{className:"fa fa-chevron-circle-right fa-lg","aria-hidden":!0}))),l.a.createElement("section",null,l.a.createElement("h3",null,"Sample code:"),l.a.createElement("label",{htmlFor:"carousel-html-code"},"React JSX"),l.a.createElement("textarea",{id:"carousel-html-code",rows:"30",readOnly:"readonly",className:"code-container",defaultValue:'\n <div\n id="demo"\n className="carousel slide"\n data-ride="carousel"\n data-interval={slideInterval}\n >\n <a className="carousel-control-prev" href="#demo" data-slide="prev" aria-label="previous slide">\n <i className="fa fa-chevron-circle-left fa-lg" aria-hidden></i>\n </a>\n\n <div className="carousel-inner">\n {imageDetails.map((image, index) => {\n return (\n <div\n className={"carousel-item "}\n key={image.id}\n >\n <img src={image.src} alt={image.alt || \'\'} />\n </div>\n );\n })}\n </div>\n <a className="carousel-control-next" href="#demo" data-slide="next" aria-label="next slide">\n <i className="fa fa-chevron-circle-right fa-lg" aria-hidden></i>\n </a>\n </div>\n'}),l.a.createElement("label",{htmlFor:"carousel-js-code"},"JavaScript (to set slide interval for animation)"),l.a.createElement("textarea",{id:"carousel-js-code",rows:"3",readOnly:"readonly",className:"code-container",defaultValue:'\n const slideInterval = !matchMedia("(prefers-reduced-motion)").matches && 3000;\n'})))},J=(a(35),function(){return Object(n.useEffect)((function(){document.title="Explore accessibility - Dropdown example"}),[]),l.a.createElement("section",null,l.a.createElement(y,null,"Dropdown"),l.a.createElement("p",null,"text here"),l.a.createElement("section",null,l.a.createElement("h3",null,"Sample code:"),l.a.createElement("h4",null,"HTML"),l.a.createElement("textarea",{rows:"20",readOnly:"readonly",className:"code-container",defaultValue:"\n"}),l.a.createElement("h4",null,"JavaScript"),l.a.createElement("textarea",{rows:"3",readOnly:"readonly",className:"code-container",defaultValue:"\n \n"})))}),_=(a(36),function(){return Object(n.useEffect)((function(){document.title="Explore accessibility - Checkbox example"}),[]),l.a.createElement("section",null,l.a.createElement(y,null,"Checkbox"),l.a.createElement("p",null,"text here"),l.a.createElement("section",null,l.a.createElement("h3",null,"Sample code:"),l.a.createElement("h4",null,"HTML"),l.a.createElement("textarea",{rows:"20",readOnly:"readonly",className:"code-container",defaultValue:"\n"}),l.a.createElement("h4",null,"JavaScript"),l.a.createElement("textarea",{rows:"3",readOnly:"readonly",className:"code-container",defaultValue:"\n \n"})))}),K=(a(37),function(){return Object(n.useEffect)((function(){document.title="Explore accessibility - Radio example"}),[]),l.a.createElement("section",null,l.a.createElement(y,null,"Radio"),l.a.createElement("p",null,"text here"),l.a.createElement("section",null,l.a.createElement("h3",null,"Sample code:"),l.a.createElement("h4",null,"HTML"),l.a.createElement("textarea",{rows:"20",readOnly:"readonly",className:"code-container",defaultValue:"\n"}),l.a.createElement("h4",null,"JavaScript"),l.a.createElement("textarea",{rows:"3",readOnly:"readonly",className:"code-container",defaultValue:"\n \n"})))}),G=(a(38),function(){return Object(n.useEffect)((function(){document.title="Explore accessibility - About"}),[]),l.a.createElement("section",{className:"about-page"},l.a.createElement(y,{className:"about-title"},"Who is behind this website?"),l.a.createElement("div",{className:"head-shot"},l.a.createElement("img",{src:"/assets/images/AnuradhaKumari.jpg",alt:"Anuradha's pic"})),l.a.createElement("div",{className:"intro"},"Hi! I'm Anuradha."),l.a.createElement("div",{className:"sub-details"},l.a.createElement("p",null,"I am a frontend developer from India. I love JavaScript and I am extremely passionate about coding."),"When I am not working for my day job, I am either exploring new technologies, or trying to create resources like blogs, speeches or websites. I am a firm advocate for test driven development and accessibility, so you will find me talking mostly about these. Apart from tech, I watch a lot of movies and series and I love to read a lot.",l.a.createElement("p",null,"My journey with accessibility started in 2019. I had heard the term before, but never really knew what it was all about. When I learned about accessibility in May 2019, I realized how ignorant I was towards a large section of digital users. And this was just because I had no awareness about accessibility. As I explored more and more on it, I found that majority of web developers are unknowingly writing inaccessible code. So, I decided to share my experience and my findings around it to spread awareness and empowering the developers' community towards achieving the common goal of inclusion."),l.a.createElement("p",null,"This website, Explore a11y (accessibility), is a one of such projects which I created to spread awareness around accessibility. The goal is to provide people with examples which will help them get started with accessibility and then a list of resources which can be referred for more information."),l.a.createElement("p",null,"If you would like to reach out to me, you can either",l.a.createElement(c.b,{to:"/contact",activeClassName:"active-nav",exact:!0}," send me a message here "),"or connect with me over",l.a.createElement(g,{label:" linkedin ",href:"https://www.linkedin.com/in/anuradha15/",ariaLabel:"linkedin @anuradha15"}),"or",l.a.createElement(g,{label:" twitter ",href:"https://twitter.com/miracle_404",ariaLabel:"twitter @miracle_404"}),".")))}),Q=(a(39),function(){return Object(n.useEffect)((function(){document.title="Explore accessibility - Dark mode example"}),[]),l.a.createElement("section",null,l.a.createElement(y,null,"Dark mode"),l.a.createElement("p",null,"You would have seen or heard lots of debates on light vs dark modes, and you too might have a preference. For example, I prefer dark mode personally because it feels easier on my eyes, but many of my friends prefer light mode. When we are designing our websites and applications, dark mode is one of the features you should consider implementing."),l.a.createElement("p",null,"Our devices have setting which can be enabled to select a particular color schema. Check the reference links to find out more about how to enable those settings. But how does our code know if the user has these settings enabled? Let's see an example before proceeding further:"),l.a.createElement("h3",null,"Demo:"),l.a.createElement("section",{className:"dark-mode-
1demo"},l.a.createElement("div",null,"This is some test content."),l.a.createElement("div",null,"The color scheme will change based on the user device settings for color scheme.")),l.a.createElement("section",null,l.a.createElement("h3",null,"How to honor user's settings?"),"We can achieve this through two ways:",l.a.createElement("br",null),l.a.createElement("label",{htmlFor:"dark-mode-media-query-code"},"CSS media query: "),l.a.createElement("textarea",{id:"dark-mode-media-query-code",rows:"16",className:"code-container",readOnly:"readonly",defaultValue:"\n.dark-mode-demo {\n min-height: 70px;\n padding: 20px;\n font-size: 1.4em;\n line-height: 1.5;\n}\n\n@media (prefers-color-scheme: dark) {\n .dark-mode-demo { background: #333; color: white; }\n}\n\n@media (prefers-color-scheme: light) {\n .dark-mode-demo { background: #eee; color: black; }\n}\n"}),l.a.createElement("label",{htmlFor:"dark-mode-js-code"},"JavaScript:"),l.a.createElement("textarea",{id:"dark-mode-js-code",rows:"2",readOnly:"readonly",className:"code-container",defaultValue:' const userPrefersDarkMode = matchMedia && matchMedia("(prefers-color-scheme: dark)").matches;\n'})),l.a.createElement("div",null,l.a.createElement("h3",null,"Resources:"),l.a.createElement("ul",null,l.a.createElement("li",null,l.a.createElement(g,{label:"MDN article on prefers-color-scheme",href:"https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme"})),l.a.createElement("li",null,l.a.createElement(g,{label:"Web dev article on prefers-color-scheme",href:"https://web.dev/prefers-color-scheme/"})),l.a.createElement("li",null,l.a.createElement(g,{label:"Understanding contrast",href:"https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html"})))))}),Y=(a(40),[{href:"https://en.wikipedia.org/wiki/Autism_spectrum",label:"Autism spectrum wikipedia"},{href:"https://www.boia.org/blog/how-web-accessibility-affects-people-with-autism",label:"How Web Acce
1ssibility Affects People with Autism - by Bureau of Internet Accessibility"},{href:"http://www.ala.org/asgcla/sites/ala.org.asgcla/files/content/asclaprotools/accessibilitytipsheets/tipsheets/6-ASD.pdf",label:"People with Autism Spectrum Disorders (ASD): What You Need to Know (pdf)"},{href:"https://www.autismspectrum.org.au/accessibility",label:"Autism Spectrum Australia - a nice example of how to provide accessible content"},{href:"https://www.maxability.co.in/2018/12/03/web-accessibility-autism/",label:"Web accessibility and autism by Maxability"}]),X=[{href:"https://www.storytellingwithdata.com/blog/2018/6/26/accessible-data-viz-is-better-data-viz",label:"Accessible data viz is better data viz"},{href:"https://medium.com/nightingale/accessibility-is-at-the-heart-of-data-visualization-64a38d6c505b",label:"Why Accessibility Is at the Heart of Data Visualization"},{href:"https://fossheim.io/writing/posts/accessible-dataviz-design/",label:"An intro to designing accessible data visualizations"},{href:"http://nda.ie/resources/accessibility-toolkit/make-your-information-more-accessible/",label:"Make your information more accessible"},{href:"https://blog.interactivethings.com/how-does-this-data-sound-945ed27a1a95",label:"How does this data sound?"},{href:"http://colorsafe.co/",label:"Create a contrast accessible color palette"},{href:"https://webaim.org/resources/contrastchecker/",label:"Color contrast checker"},{href:"https://chrome.google.com/webstore/detail/colorblinding/dgbgleaofjainknadoffbjkclicbbgaa?hl=en",label:"Colorblinding extension to simulate color blindness in browser"}],$=[{path:"/",component:v,title:"Explore accessibility: Home"},{path:"/introduction",component:N,title:"Explore accessibility: Introduction"},{path:"/about",component:G,title:"Explore accessibility: About page"},{path:"/examples",component:A,title:"Explore accessibility: Examples"},{path:"/button",component:L,title:"Explore accessibility: Button example"},{path:"/modal",component:M,title:"Explore accessibility: Modal example"},{path:"/animation",component:T,title:"Explore accessibility: Animations"},{path:"/page-title",component:C,title:"Explore accessibility: Page titles"},{path:"/event-handling",component:q,title:"Explore accessibility: Event handling"},{path:"/contact",component:R,title:"Explore accessibility: Contact details"},{path:"/testing",component:V,title:"Explore accessibility: Testing mechanisms"},{path:"/carousels",component:U,title:"Explore accessibility: Carousels"},{path:"/dropdown",component:J,title:"Explore accessibility: Dropdowns"},{path:"/radio",component:K,title:"Explore accessibility: Radio controls"},{path:"/checkbox",component:_,title:"Explore accessibility: Checkboxes"},{path:"/dark-mode",component:Q,title:"Explore accessibility: Dark mode"},{path:"/announce-details",component:function(){return Object(n.useEffect)((function(){document.title="Explore accessibility - Announce details";var e=document.querySelector(".announcer-form-1"),t=document.querySelector(".submit-status-1"),a=document.querySelector("#textInput-1"),n=document.querySelector("#submitTextBtn-1"),l=function(e){e.preventDefault();var n=a.value;n.trim().length?t.textContent="Form submitted successfully with text "+n:t.textContent="Error submitting form. Please enter valid text to proceed."};e.onsubmit=function(e){e.preventDefault(),l()},n.addEventListener("click",l);var o=document.querySelector(".announcer-form-2"),i=document.querySelector(".submit-status-2"),r=document.querySelector("#textInput-2"),c=document.querySelector("#submitTextBtn-2"),s=function(e){e.preventDefault();var t=r.value;t.trim().length?i.textContent="Form submitted successfully with text "+t:i.textContent="Error submitting form. Please enter valid text to proceed."};o.onsubmit=function(e){e.preventDefault(),s()},c.addEventListener("click",s)}),[]),l.a.createElement("section",null,l.a.createElement(y,null,"Announce important details"),l.a.createElement("p",null,"We can dynamically change parts of a page using JavaScript without having the page to reload. For example - display some notification message to the user, changing the view on navigation, etc. These changes are visible to the users who can see, but the users relying only on feedback from assistive technologies like screen readers would miss out on these details, unless we specifically make these details available to them as well."),l.a.createElement("div",null,"We need to announce these changes to the users, and we can achieve it through:",l.a.createElement("ul",null,l.a.createElement("li",null,l.a.createElement("code",null,"aria-live")," regions"),l.a.createElement("li",null,"dedicated live region with ",l.a.createElement("code",null,'role="status"'),", ",l.a.createElement("code",null,'role="log"')," or ",l.a.createElement("code",null,'role="alert"'))),"Read more about these at "," ",l.a.createElement(g,{label:"MDN documentation on live regions",href:"https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Live_Regions"})),l.a.createElement("section",null,l.a.createElement("h3",null,"Inaccessible example:"),l.a.createElement("div",null,"How to test: Enter some text in below textbox and submit the form. The success or error message will appear in the region just above the textbox. It will ",l.a.createElement("strong",null,"not announce")," these messages if you have screen-reader turned on.")," ",l.a.createElement("br",null),l.a.createElement("form",{className:"announcer-form-1"},l.a.createElement("div",{className:"submit-status submit-status-1"}),l.a.createElement("label",null,"Enter text:",l.a.createElement("input",{type:"text",id:"textInput-1"})),l.a.createElement("button",{type:"submit",id:"submitTextBtn-1"},"Submit"))),l.a.createElement("section",null,l.a.createElement("h3",null,"Accessible example:"),l.a.createElement("div",null,"How to test: Enter some text in below textbox and submit the form. The success or error message will appear in the region just above the textbox. It will also announce these messages if you have screen-reader turned on.")," ",l.a.createElement("br",null),l.a.createElement("form",{className:"announcer-form-2"},l.a.createElement("div",{className:"submit-status submit-status-2",role:"status","aria-live":"polite"}),l.a.createElement("label",null,"Enter text:",l.a.createElement("input",{type:"text",id:"textInput-2"})),l.a.createElement("button",{type:"submit",id:"submitTextBtn-2"},"Submit"))),l.a.createElement("section",null,l.a.createElement("h3",null,"Sample code:"),l.a.createElement("label",{htmlFor:"live-html-code"},"HTML"),l.a.createElement("textarea",{id:"live-html-code",rows:"10",readOnly:"readonly",className:"code-container",defaultValue:'<form className="announcer-form">
1\n <div className="submit-status" role="status" aria-live="polite"></div>\n <label>\n Enter text to announce:\n <input type="text" id="textInput" />\n </label>\n <button type="submit" id="submitTextBtn">Submit</button>\n</form>\n'}),l.a.createElement("label",{htmlFor:"live-js-code"},"JavaScript"),l.a.createElement("textarea",{id:"live-js-code",rows:"23",readOnly:"readonly",className:"code-container",defaultValue:"\nconst form = document.querySelector('form');\nconst liveRegion = document.querySelector('.submit-status');\nconst textInput = document.querySelector('#textInput');\nconst submitTextBtn = document.querySelector('#submitTextBtn');\n\nconst submitData = (e) => {\n e.preventDefault();\n const text = textInput.value;\n\n if (text.trim().length) {\n liveRegion.textContent = 'Form submitted successfully with text ' + text;\n } else {\n liveRegion.textContent = 'Error submitting form. Please enter valid text to proceed.';\n }\n}\n\nform.onsubmit = (e) => {\n e.preventDefault();\n submitData();\n}\nsubmitTextBtn.addEventListener('click', submitData) \n"})))},title:"Explore accessibility: Announce details"},{path:"/disabilities",component:function(){return Object(n.useEffect)((function(){document.title="Explore accessibility - Testing mechanisms"}),[]),l.a.createElement("section",null,l.a.createElement(y,null,"Resources for disabilities"),l.a.createElement("p",null,"There are multiple types of disabilities, and the aim of this section is to gather the information around it and the ways to achieve accessibility for people facing these disabilities. The resources will get added over period of time."),l.a.createElement("p",null,"If you have some suggestions, you can reach out to me by filling the"," ",l.a.createElement(c.b,{to:"/contact",activeClassName:"active-nav",exact:!0},"contact form here.")),l.a.createElement("section",null,l.a.createElement("h3",null,"For Autism Spectrum"),l.a.createElement("p",null,"Autism spectrum disorder (ASD) is characterized by persistent challenges with social communication and social interaction, and by the presence of restricted, repetitive patterns of behavior, interests, or activities."),l.a.createElement("p",null,"The most commonly known ASDs are autism and Asperger\u2019s syndrome."),l.a.createElement("p",null,"The people on autism spectrum may prefer consistent and straight forward things. Hence, we need to make sure that we have a diverse user base to test for our products and services."),l.a.createElement("div",null,"Some of the tips we can start using to make our content accesisble for people on autism spectrum are:",l.a.createElement("ul",null,l.a.createElement("li",null,"use simple language instead of complex words, idioms, etc."),l.a.createElement("li",null,"using simple colors combinations instead of bright contrasting colors"),l.a.createElement("li",null,"bullets points preferable over huge paragraphs of text"),l.a.createElement("li",null,"simple layout and navigation which is easy to understand"),l.a.createElement("li",null,"make actions descriptive - buttons and anchor labels should be decriptive instead of vague keywords like 'click here'"))),l.a.createElement("h4",null,"Resources for autism spectrum"),l.a.createElement("ul",null,Y.map((function(e,t){return l.a.createElement("li",{key:t},l.a.createElement(g,{label:e.label,href:e.href}))})))))},title:"Explore accessibility: Disabilities resources"},{path:"/info-and-data-viz",component:function(){return Object(n.useEffect)((function(){document.title="Explore accessibility - Information and Data Visualization"}),[]),l.a.createElement("section",null,l.a.createElement(y,null,"Accessible Information and Data Visualization"),l.a.createElement("p",null,l.a.createElement("h3",null,"What is information?"),"Information means some facts provided or learned about something or someone. It could be of multiple types:",l.a.createElement("ul",null,l.a.createElement("li",null,"Text"),l.a.createElement("li",null,"Image"),l.a.createElement("li",null,"Audio"),l.a.createElement("li",null,"Video")),"Information can be shared via different mediums. For example",l.a.createElement("ul",null,l.a.createElement("li",null,"Online resources"),l.a.createElement("li",null,"Print - Newspapers, banners, posters, etc."),l.a.createElement("li",null,"Audio - radio, broadcast, podcast, etc."),l.a.createElement("li",null,"Video - Television, youtube videos, etc."),l.a.createElement("li",null,"Electronic documents"))),l.a.createElement("section",null,l.a.createElement("h3",null,"Data Visualization"),l.a.createElement("p",null,"Data is defined as facts or figures, or information that's stored in or used by a computer. Data Visualization is the visual representation of data which uses visual elements like Charts, Graphs, Maps, etc. to represent the patterns and trends of that data.")),l.a.createElement("section",null,l.a.createElement("blockquote",null,"Accessibility should be core goal of information and data visualization"),l.a.createElement("p",null,l.a.createElement("h3",null,"Accessible Information"),"The information should be accessible to all people regardless of their disabilities or technical challenges. It should be presented in ways that can be perceived and understood by people using different senses, like eyes, ears, or touch.",l.a.createElement("br",null),l.a.createElement("br",null),"Tips for accessible information:",l.a.createElement("ul",null,l.a.createElement("li",null,"Use of clear and simple language"),l.a.createElement("li",null,"Use of proper font style, size and color"),l.a.createElement("li",null,"Provide alternative formats to media like images, audio, video"))),l.a.createElement("p",null,l.a.createElement("h3",null,"Accessible Data Visualization"),l.a.createElement("ul",null,l.a.createElement("li",null,"Add descriptive title to the visualization - it should provide key takeaways to the user"),l.a.createElement("li",null,"Provide alternative text - it should contain a short description of what it is, type of visualization, and it could include a link to alternate data format (like tables) or CSV files."),l.a.createElement("li",null,"Don't rely only on colors to explain the data - label the data so that it is easily distinguishable by users with any sort of color blindness or cognitive conditions"),l.a.createElement("li",null,"Use white space
1s to distingish between different sections of the data"),l.a.createElement("li",null,"Use proper color contrast. Low contrast cna make things harder to read. Bright contrast can be painful for eyes and overwhelming for users with sensory conditions."),l.a.createElement("li",null,"Provide keyboard accessibility. Any data shown on hover should also be available to users using assistive technologies."),l.a.createElement("li",null,"While using animations, respect user device settings. Don;t show animations if user does not want to see them. provide alternatives for it. We can use CSS media query ",l.a.createElement("strong",null,"prefers-reduced-motion")," to control the content to show as per user device settings."))),l.a.createElement("p",null,l.a.createElement("h3",null,"Resources for reference:"),l.a.createElement("ul",null,X.map((function(e,t){return l.a.createElement("li",{key:t},l.a.createElement(g,{label:e.label,href:e.href}))}))))))},title:"Explore accessibility: Information and Data Visualization"}],Z=function(e){Object(f.a)(a,e);var t=Object(p.a)(a);function a(){var e;Object(b.a)(this,a);for(var n=arguments.length,l=new Array(n),o=0;o<n;o++)l[o]=arguments[o];return(e=t.call.apply(t,[this].concat(l))).state={announceTitle:""},e}return Object(h.a)(a,[{key:"componentDidMount",value:function(){var e=this;this.listenToHistoryChange=this.props.history.listen((function(t,a){if(t){var n=document.querySelector(".skip-to-nav-link");n&&n.focus();var l=$.filter((function(e){return e.path===t.pathname}));l&&l.length&&e.setState({announceTitle:l[0].title})}}))}},{key:"componentWillUnmount",value:function(){this.listenToHistoryChange()}},{key:"render",value:function(){return l.a.createElement("main",{className:"app-content",id:"main-content"},l.a.createElement("span",{className:"sr-only",role:"alert"},this.state.announceTitle),l.a.createElement(E.c,null,$.map((function(e,t){return l.a.createElement(E.a,{path:e.path,component:e.component,exact:!0,key:t+e.path})})),l.a.createElement(E.a,{component:w})))}}]),a}(l.a.Component),ee=Object(E.f)(Z),te=(a(41),a(42),function(){var e=matchMedia&&matchMedia("(prefers-color-scheme: dark)").matches?"true":localStorage.getItem("is_dark_mode"),t=Object(n.useState)(e),a=Object(r.a)(t,2),o=a[0],i=a[1],c=l.a.createElement("button",{className:"toggle-dark-mode",title:"true"===o?"Enable light mode":"Enable dark mode","aria-label":"true"===o?"Enable light mode":"Enable dark mode",onClick:function(){i("true"===o?"false":"true"),localStorage.setItem("is_dark_mode","true"===o?"false":"true")}},l.a.createElement("i",{className:"true"===o?"fa fa-lightbulb-o":"fa fa-moon-o","aria-hidden":"true"}));return l.a.createElement("section",{className:"true"===o?"explore-accessibility-app-dark":"explore-accessibility-app"},l.a.createElement(m,{toggleDarkModeButton:c}),l.a.createElement(u,null),l.a.createElement(ee,null),l.a.createElement(d,null))}),ae=Boolean("localhost"===window.location.hostname||"[::1]"===window.location.hostname||window.location.hostname.match(/^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/));function ne(e,t){navigator.serviceWorker.register(e).then((function(e){e.onupdatefound=function(){var a=e.installing;null!=a&&(a.onstatechange=function(){"installed"===a.state&&(navigator.serviceWorker.controller?(console.log("New content is available and will be used when all tabs for this page are closed. See https://bit.ly/CRA-PWA."),t&&t.onUpdate&&t.onUpdate(e)):(console.log("Content is cached for offline use."),t&&t.onSuccess&&t.onSuccess(e)))})}})).catch((function(e){console.error("Error during service worker registration:",e)}))}i.a.render(l.a.createElement(l.a.StrictMode,null,l.a.createElement(c.a,null,l.a.createElement(te,null))),document.getElementById("root")),function(e){if("serviceWorker"in navigator){if(new URL("",window.location.href).origin!==window.location.origin)return;window.addEventListener("load",(function(){var t="".concat("","/service-worker.js");ae?(!function(e,t){fetch(e,{headers:{"Service-Worker":"script"}}).then((function(a){var n=a.headers.get("content-type");404===a.status||null!=n&&-1===n.indexOf("javascript")?navigator.serviceWorker.ready.then((function(e){e.unregister().then((function(){window.location.reload()}))})):ne(e,t)})).catch((function(){console.log("No internet connection found. App is running in offline mode.")}))}(t,e),navigator.serviceWorker.ready.then((function(){console.log("This web app is being served cache-first by a service worker. To learn more, visit https://bit.ly/CRA-PWA")}))):ne(t,e)}))}}()}]),[[19,1,2]]]);
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.