{"id":8018,"date":"2022-08-25T17:47:24","date_gmt":"2022-08-25T21:47:24","guid":{"rendered":"http:\/\/www.useragentman.com\/blog\/?p=8018"},"modified":"2022-08-25T17:53:40","modified_gmt":"2022-08-25T21:53:40","slug":"introducing-enable-accessible-web-components-you-can-learn-from","status":"publish","type":"post","link":"https:\/\/www.useragentman.com\/blog\/2022\/08\/25\/introducing-enable-accessible-web-components-you-can-learn-from\/","title":{"rendered":"Introducing Enable: Accessible Web Components You Can Learn From"},"content":{"rendered":"\r\n<a href=\"\/enable\"><div class=\"image-container\">\r\n    <picture class=\"alignnone size-full full-bleed full-width\">\r\n\r\n    \r\n    <source\r\n      srcset='\/images\/8018\/enable-poster-360.webp 360w, \/images\/8018\/enable-poster-720.webp 720w, \/images\/8018\/enable-poster-768.webp 768w, \/images\/8018\/enable-poster-835.webp 835w, \/images\/8018\/enable-poster-1536.webp 1536w, \/images\/8018\/enable-poster-1670.webp 1670w'\r\n      type='image\/webp'>\r\n\r\n\r\n    <img class=\"full-bleed full-width\"\r\n      srcset='\/images\/8018\/enable-poster-360.jpg 360w, \/images\/8018\/enable-poster-720.jpg 720w, \/images\/8018\/enable-poster-768.jpg 768w, \/images\/8018\/enable-poster-835.jpg 835w, \/images\/8018\/enable-poster-1536.jpg 1536w, \/images\/8018\/enable-poster-1670.jpg 1670w' alt=\"The Enable Website\" \/>\r\n  <\/picture>\r\n<\/div><\/a>\r\n\r\n\r\n<p><strong><em>\"How can I make X accessible?\"<\/em><\/strong>  As an web accessibility specialist, I get this question all the time.  Not only novices ask these questions; sometimes seasoned web developers like myself get stumped on how to make more complicated user experiences accessible.<\/p>\r\n\r\n<p>I would write skeleton code to show how I would attack these issues.  Then I would make detailed notes and sometimes draw diagrams.  Then I'd send them off to my fellow developer, only to have the same question (or a variation of it) to be asked a few months later.  I would end up searching through my emails and forwarding stuff or just rewriting the same notes all over again.  I started writing code pens, but the developers I work with wanted to know not just what coded was needed to make something accessible, but an explanation <em><strong>why<\/strong><\/em> the solution is the correct one.<\/p>\r\n\r\n<p>So I created Enable, a website that features how to fix common accessibility problems that web developers encounter.  Not only does it handle beginner level questions (e.g. \"When should something be coded as a link or a button?\") but also more complicated questions (e.g. \"How can I produce audio descriptions in web videos without spending a lot of money?\", \"How do I create an accessible hybrid mobile hamburger menu \/ desktop flyout menu?\", \"How do I create skip links for mobile devices?\").  Each page in the Enable website gives code solutions to these problems, along with an explanation of how these components are accessible and how they should work for keyboard and screen reader users.<\/p>\r\n\r\n\r\n<p>Enable's mission is:<\/p>\r\n<ul>\r\n  <li>\r\n    <p>to educate developers how to make their code\r\n      accessible by giving them examples of accessible components and the\r\n      ability to walk through the code examples step by step.<\/p>\r\n  <\/li>\r\n  <li>\r\n    <p>to give the\r\n      web developer community a suite of accessible front-end components that\r\n      can be included in their own projects via NPM.<\/p>\r\n  <\/li>\r\n  <li>\r\n    <p>to have a\r\n      place that web developers can donate their own code examples and code so\r\n      that others can benefit from their learning and hard work.<\/p>\r\n  <\/li>\r\n  <li>\r\n    <p>to give back to both the developer and accessibility\r\n      communities, and to start conversations on how to make the web more\r\n      accessible and usable for users with disabilities.<\/p>\r\n  <\/li>\r\n<\/ul>\r\n<p>Besides having working examples of components like\r\n  <a href=\"https:\/\/www.useragentman.com\/enable\/listbox.php\"><span>accessible\r\n      custom\r\n      select boxes<\/span><\/a>, <a\r\n    href=\"https:\/\/www.useragentman.com\/enable\/multi-level-hamburger-menu.php\"><span>accessible\r\n      hybrid desktop mega-menu \/ mobile hamburger menu<\/span><\/a> and <a\r\n    href=\"http:\/\/useragentman.com\/enable\/carousel.php\"><span>accessible\r\n      carousels<\/span><\/a>, Enable also\r\n  educates developers on accessibility best practices like <a rel=\"noopener\r\n    noreferrer\" href=\"https:\/\/www.useragentman.com\/enable\/text-resize.php\"><span>what\r\n      makes\r\n      typography accessible<\/span><\/a> (including handling <a rel=\"noopener\r\n    noreferrer\" href=\"https:\/\/www.useragentman.com\/enable\/text-spacing.php\"><span>issues\r\n      with\r\n      line-spacing<\/span><\/a> and <a\r\n    href=\"https:\/\/www.useragentman.com\/enable\/hero-image-text-resize.php\"><span>hero\r\n      images<\/span><\/a>),\r\n  <a href=\"https:\/\/www.useragentman.com\/enable\/pause-anim-control.php\"><span>how\r\n      to ensure\r\n      all the animations on a page can be paused easily<\/span><\/a> and <a\r\n    href=\"https:\/\/www.useragentman.com\/enable\/video-player.php\"><span>what is\r\n      needed to make video content accessible<\/span><\/a>.  <strong>It also shows\r\n  examples of <a href=\"https:\/\/www.useragentman.com\/enable\/code-quality.php\">how you can improve\r\n  your code quality using automated tests and unit testing<\/a><\/strong> so when you make\r\nsomething accessible, it stays that way, even if another developer removes those features by accident.  Imagine putting\r\nthat in your CI\/CD pipeline! \r\n<\/p>\r\n\r\n<p>Enable is Open Source and released under the <a\r\n    href=\"https:\/\/en.wikipedia.org\/wiki\/MIT_License\"><span>MIT License<\/span><\/a>\r\n  in order to prevent any conflicts when using it in client work while still\r\n  encouraging developers to contribute. <a\r\n    href=\"https:\/\/github.com\/PublicisSapient\/enable-a11y\"><span>Full source for\r\n      the\r\n      website and its\r\n      components are available<\/span><\/a> via <a\r\n    href=\"https:\/\/github.com\/PublicisSapient\"><span>Publicis Sapient's\r\n      github repository<\/span><\/a> (Publicis Sapient is my employer, and has supported what was a personal project of mine\r\nso that it can reach a wider audience).<\/p>\r\n<p>Feel free to visit the <a href=\"https:\/\/www.useragentman.com\/enable\/\"><span>Enable\r\n      website<\/span><\/a>, kick the tires and help the Accessibility Center of\r\n  Excellence promote accessible code throughout all our projects. Feel free to\r\n  give us feedback in the comments below, and if you find any bugs or have\r\n  suggestions for other code examples to add to our wishlist, please <a\r\n    href=\"https:\/\/github.com\/PublicisSapient\/enable-a11y\/issues\"><span>add an\r\n      issue\r\n      to the Enable github repository<\/span><\/a>. If you want to donate code\r\n  to enable, please send us a PR. Please read <a\r\n    href=\"https:\/\/docs.github.com\/en\/pull-requests\/collaborating-with-pull-requests\/proposing-changes-to-your-work-with-pull-requests\/creating-a-pull-request-from-a-fork\"><span>the\r\n      Github\r\n      article about creating a pull request from a fork<\/span><\/a> for more\r\n  information on how to do this.<\/p>\r\n<p><strong>I believe that as web professionals, our primary job, no matter what\r\n    your craft, is to create our best work, and give our best advice, to our\r\n    clients.<\/strong> Accessible work is a huge part of that commitment, and\r\n  we hope Enable will help you with that common goal. Please let us know your\r\n  thoughts on this project, and what you'd like to see from it in the future.<\/p>\r\n\r\n\r\n","protected":false},"excerpt":{"rendered":"<p><a href=\"http:\/\/www.useragentman.com\/blog\/2022\/06\/16\/r-i-p-internet-explorer-a-hate-filled-love-letter\/\"><img decoding=\"async\" src=\"\/images\/8018\/enable-teaser.jpg\" alt=\"Logofor the Enable Website\"  tabindex=\"-1\" \/><\/a><\/p>\n<p><strong>&#8220;How can I make X accessible?&#8221;<\/strong> As an web accessibility specialist, I get this question all the time. Not only novices ask these questions; sometimes seasoned web developers like myself get stumped on how to make more complicated user experiences accessible. So I created Enable, a website that features how to fix common accessibility problems that web developers encounter. Not only does it handle beginner level questions but also more complicated questions. It also talks about automated tests and unit testing.  Come find out how you can learn, as well as contribute, to Enable.<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-8018","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/www.useragentman.com\/blog\/wp-json\/wp\/v2\/posts\/8018","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.useragentman.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.useragentman.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.useragentman.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.useragentman.com\/blog\/wp-json\/wp\/v2\/comments?post=8018"}],"version-history":[{"count":25,"href":"https:\/\/www.useragentman.com\/blog\/wp-json\/wp\/v2\/posts\/8018\/revisions"}],"predecessor-version":[{"id":8046,"href":"https:\/\/www.useragentman.com\/blog\/wp-json\/wp\/v2\/posts\/8018\/revisions\/8046"}],"wp:attachment":[{"href":"https:\/\/www.useragentman.com\/blog\/wp-json\/wp\/v2\/media?parent=8018"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.useragentman.com\/blog\/wp-json\/wp\/v2\/categories?post=8018"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.useragentman.com\/blog\/wp-json\/wp\/v2\/tags?post=8018"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}