{"id":73751,"date":"2019-12-04T04:19:03","date_gmt":"2019-12-04T11:19:03","guid":{"rendered":"https:\/\/www.taterboy.com\/blog\/2019\/12\/meet-inclusive-components-accessible-bulletproof-front-end-patterns\/"},"modified":"2019-12-04T04:19:03","modified_gmt":"2019-12-04T11:19:03","slug":"meet-inclusive-components-accessible-bulletproof-front-end-patterns","status":"publish","type":"post","link":"https:\/\/www.taterboy.com\/blog\/2019\/12\/meet-inclusive-components-accessible-bulletproof-front-end-patterns\/","title":{"rendered":"Meet \u201cInclusive Components\u201d: Accessible, Bulletproof Front-End Patterns"},"content":{"rendered":"<link rel=\"canonical\" href=\"https:\/\/www.smashingmagazine.com\/2019\/12\/inclusive-components-release\/\"><title>Meet \u201cInclusive Components\u201d: Accessible, Bulletproof Front-End Patterns<\/title><\/p>\n<article>\n<header>\n<h1>Meet \u201cInclusive Components\u201d: Accessible, Bulletproof Front-End Patterns<\/h1>\n<address>Vitaly Friedman<\/address>\n<p>                  <time datetime=\"2019-12-03T12:00:00+00:00\">2019-12-03T12:00:00+00:00<\/time><time datetime=\"2019-12-03T12:00:00+00:00\">2019-12-04T11:06:35+00:00<\/time><\/header>\n<p>Front-end accessibility is still somewhat mysterious these days. How do we build accessible buttons and dropdowns? What about keyboard-friendly tooltips, tabs and notifications? Or inclusive accordions, sliders, <strong>data tables and modals<\/strong>? Let\u2019s figure it out together. Meet <em><a href=\"https:\/\/www.smashingmagazine.com\/articles\/#about-the-book\">Inclusive Components<\/a><\/em>, our new handbook for building fully accessible digital products. <strong><a href=\"http:\/\/provide.smashingmagazine.com\/eBooks\/inclusive-components-free-chapter.pdf\">Download a free sample PDF<\/a><\/strong> (1.1 MB).<\/p>\n<figure><a href=\"https:\/\/i0.wp.com\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/50529a0d-1825-4279-a1df-b0276d5ee68c\/page01-b-opt.png?ssl=1\" title=\"Tap for a large preview of the book.\"><br \/>\n    <img data-recalc-dims=\"1\" decoding=\"async\" srcset=\"https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/50529a0d-1825-4279-a1df-b0276d5ee68c\/page01-b-opt.png 400w,\n                    https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_800\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/50529a0d-1825-4279-a1df-b0276d5ee68c\/page01-b-opt.png 800w,\n                    https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1200\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/50529a0d-1825-4279-a1df-b0276d5ee68c\/page01-b-opt.png 1200w,\n                    https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1600\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/50529a0d-1825-4279-a1df-b0276d5ee68c\/page01-b-opt.png 1600w,\n                    https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_2000\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/50529a0d-1825-4279-a1df-b0276d5ee68c\/page01-b-opt.png 2000w\" src=\"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/12\/page01-b-opt.png?w=900&#038;ssl=1\" sizes=\"100vw\" alt=\"Meet Inclusive Components, our new book for building accessible, inclusive interfaces. Written by one-and-only <a href='http:\/\/www.heydonworks.com\/'>Heydon Pickering<\/a>.&#8221;><\/a><br \/>\n<\/figure>\n<div>\n<div data-handler=\"ContentTabs\" data-mq=\"(max-width: 480px)\">\n<nav>\n<ul>\n<li>\n      <a href=\"https:\/\/www.smashingmagazine.com\/articles\/#\"><br \/>\n        <button><br \/>\n          Print + eBook<br \/>\n        <\/button><br \/>\n      <\/a>\n    <\/li>\n<li>\n      <a href=\"https:\/\/www.smashingmagazine.com\/articles\/#\"><br \/>\n        <button><br \/>\n          eBook<br \/>\n        <\/button><br \/>\n      <\/a>\n    <\/li>\n<\/ul>\n<\/nav>\n<div>\n<h3>\n\t\t\t<span>Print + eBook<\/span><br \/>\n\t\t<\/h3>\n<p>\t<span data-handler=\"PriceTag\" data-sku=\"inclusive-components\" data-type=\"Book\" data-insert=\"true\"><\/p>\n<p><span>$<\/span><br \/>\n39<span>.00<\/span><\/p>\n<p><\/span><\/p>\n<p>\t\t<button data-product-path=\"\/printed-books\/inclusive-components\/\" data-product-sku=\"inclusive-components\" data-author=\"Heydon Pickering\" data-authors=\"\" data-link=\"\" data-component=\"AddToCart\"><br \/>\n\t\t\t Get Print + eBook<br \/>\n\t\t<\/button><\/p>\n<p>\n\t\t\tQuality hardcover. <a href=\"https:\/\/www.smashingmagazine.com\/delivery-times\/\">Free worldwide shipping<\/a>. 100\u00a0days money-back-guarantee.\n\t\t<\/p>\n<\/p><\/div>\n<div>\n<h3>\n\t\t\t<span>eBook<\/span><br \/>\n\t\t<\/h3>\n<div data-audience=\"anonymous free supporter\" data-remove=\"true\">\n<p>\t<span data-handler=\"PriceTag\" data-sku=\"inclusive-components\" data-type=\"E-Book\" data-insert=\"true\"><\/p>\n<p><span>$<\/span><br \/>\n18<span>.00<\/span><\/p>\n<p><\/span><\/p><\/div>\n<p>      <span data-audience=\"smashing member\" data-remove=\"true\"><br \/>\n        <span>Free!<\/span><br \/>\n      <\/span><\/p>\n<p>\t\t<button data-product-path=\"\/printed-books\/inclusive-components\/\" data-product-sku=\"\" data-author=\"Heydon Pickering\" data-authors=\"\" data-link=\"http:\/\/book.inclusive-components.design\/\" data-component=\"AddToCart\" data-audience=\"anonymous free supporter\" data-remove=\"true\"><br \/>\n\t\t\tGet the eBook<br \/>\n\t\t<\/button><\/p>\n<p data-audience=\"anonymous free supporter\" data-remove=\"true\">\n\t\t\t<strong>DRM-free,<\/strong> of course. <\/p>\n<p>ePUB, Kindle, PDF.<br \/>\n\t\t\tIncluded with <a href=\"https:\/\/www.smashingmagazine.com\/membership\/\">Smashing Membership<\/a>.\n\t\t<\/p>\n<div data-audience=\"smashing member\" data-remove=\"true\">\n    <a href=\"https:\/\/www.smashingmagazine.com\/articles\/inclusivecomponentspdf\"><br \/>\n      Get the eBook<br \/>\n    <\/a><\/p>\n<p>\n      <a href=\"https:\/\/www.smashingmagazine.com\/articles\/inclusivecomponentspdf\">Download PDF<\/a>, <a href=\"https:\/\/www.smashingmagazine.com\/articles\/inclusivecomponentsepub\">ePUB<\/a>, <a href=\"https:\/\/www.smashingmagazine.com\/articles\/inclusivecomponentsmobi\">Kindle<\/a>.<br \/>Thanks for being smashing!\u00a0??\n    <\/p>\n<\/p><\/div>\n<\/p><\/div>\n<\/div>\n<\/div>\n<h3>About The Book<\/h3>\n<p>At its heart, <em>Inclusive Components<\/em> is a detailed, practical handbook for building fully accessible interfaces. The book examines 12 common interface patterns \u2014\u00a0<strong>accordions, tables, modals<\/strong>, notifications, tabs, toggles, and everything in-between \u2014 through the lens of inclusion. The result is <strong>accessible and robust components<\/strong> we author, plug in, and use daily.<\/p>\n<p>For years, <a href=\"http:\/\/www.heydonworks.com\/\">Heydon Pickering<\/a>, a seasoned front-end developer with a focus on accessibility, has been <a href=\"https:\/\/inclusive-components.design\/\">writing<\/a> about accessible solutions. We\u2019ve teamed up with Heydon to produce a book with common challenges and solutions that he\u2019s been refining over all these years.<\/p>\n<p>For each component, the in-depth explorations are meticulously illustrated and all solutions are available as <strong>bulletproof code snippets<\/strong>, applicable to your work right away. Bonus: you\u2019ll learn how to build your own accessible components with inclusive design in mind \u2014 all in a single book. <a href=\"https:\/\/www.smashingmagazine.com\/articles\/#toc\">Jump to table of contents ?<\/a><\/p>\n<p><strong>332 pages<\/strong>. Quality hardcover with a stitched binding and ribbon page marker. The eBook is available as PDF, ePUB, Amazon Kindle. Written and designed by Heydon. <em><a href=\"http:\/\/provide.smashingmagazine.com\/eBooks\/inclusive-components-free-chapter.pdf\">Download a sample PDF<\/a><\/em> (1.1 MB).<\/p>\n<figure><a href=\"https:\/\/i0.wp.com\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/9bf0c11e-616c-4619-aaa5-c50d79f8c1cf\/inclusive-components-product-image-landscapea.png?ssl=1\"><br \/>\n    <img data-recalc-dims=\"1\" decoding=\"async\" srcset=\"https:\/\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/12\/inclusive-components-product-image-landscapea.png 400w,\n                    https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_800\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/9bf0c11e-616c-4619-aaa5-c50d79f8c1cf\/inclusive-components-product-image-landscapea.png 800w,\n                    https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1200\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/9bf0c11e-616c-4619-aaa5-c50d79f8c1cf\/inclusive-components-product-image-landscapea.png 1200w,\n                    https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1600\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/9bf0c11e-616c-4619-aaa5-c50d79f8c1cf\/inclusive-components-product-image-landscapea.png 1600w,\n                    https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_2000\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/9bf0c11e-616c-4619-aaa5-c50d79f8c1cf\/inclusive-components-product-image-landscapea.png 2000w\" src=\"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/12\/inclusive-components-product-image-landscapea.png?w=900&#038;ssl=1\" sizes=\"100vw\" alt=\"The cover of Inclusive Components, a new book by Heydon Pickering.\"><\/a><br \/>\n<\/figure>\n<figure><a href=\"https:\/\/i0.wp.com\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/f6d4d34a-4428-48ad-b675-833a084ae9b4\/page02-b-opt.png?ssl=1\"><br \/>\n    <img data-recalc-dims=\"1\" decoding=\"async\" srcset=\"https:\/\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/12\/page02-b-opt.png 400w,\n                    https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_800\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/f6d4d34a-4428-48ad-b675-833a084ae9b4\/page02-b-opt.png 800w,\n                    https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1200\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/f6d4d34a-4428-48ad-b675-833a084ae9b4\/page02-b-opt.png 1200w,\n                    https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1600\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/f6d4d34a-4428-48ad-b675-833a084ae9b4\/page02-b-opt.png 1600w,\n                    https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_2000\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/f6d4d34a-4428-48ad-b675-833a084ae9b4\/page02-b-opt.png 2000w\" src=\"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/12\/page02-b-opt.png?w=900&#038;ssl=1\" sizes=\"100vw\" alt=\"The inner spreads of Inclusive Components.\"><\/a><br \/>\n<\/figure>\n<div>\n<div data-handler=\"ContentTabs\" data-mq=\"(max-width: 480px)\">\n<nav>\n<ul>\n<li>\n      <a href=\"https:\/\/www.smashingmagazine.com\/articles\/#\"><br \/>\n        <button><br \/>\n          Print + eBook<br \/>\n        <\/button><br \/>\n      <\/a>\n    <\/li>\n<li>\n      <a href=\"https:\/\/www.smashingmagazine.com\/articles\/#\"><br \/>\n        <button><br \/>\n          eBook<br \/>\n        <\/button><br \/>\n      <\/a>\n    <\/li>\n<\/ul>\n<\/nav>\n<div>\n<h3>\n\t\t\t<span>Print + eBook<\/span><br \/>\n\t\t<\/h3>\n<p>\t<span data-handler=\"PriceTag\" data-sku=\"inclusive-components\" data-type=\"Book\" data-insert=\"true\"><\/p>\n<p><span>$<\/span><br \/>\n39<span>.00<\/span><\/p>\n<p><\/span><\/p>\n<p>\t\t<button data-product-path=\"\/printed-books\/inclusive-components\/\" data-product-sku=\"inclusive-components\" data-author=\"Heydon Pickering\" data-authors=\"\" data-link=\"\" data-component=\"AddToCart\"><br \/>\n\t\t\t Get Print + eBook<br \/>\n\t\t<\/button><\/p>\n<p>\n\t\t\tQuality hardcover. <a href=\"https:\/\/www.smashingmagazine.com\/delivery-times\/\">Free worldwide shipping<\/a>. 100\u00a0days money-back-guarantee.\n\t\t<\/p>\n<\/p><\/div>\n<div>\n<h3>\n\t\t\t<span>eBook<\/span><br \/>\n\t\t<\/h3>\n<div data-audience=\"anonymous free supporter\" data-remove=\"true\">\n<p>\t<span data-handler=\"PriceTag\" data-sku=\"inclusive-components\" data-type=\"E-Book\" data-insert=\"true\"><\/p>\n<p><span>$<\/span><br \/>\n18<span>.00<\/span><\/p>\n<p><\/span><\/p><\/div>\n<p>      <span data-audience=\"smashing member\" data-remove=\"true\"><br \/>\n        <span>Free!<\/span><br \/>\n      <\/span><\/p>\n<p>\t\t<button data-product-path=\"\/printed-books\/inclusive-components\/\" data-product-sku=\"\" data-author=\"Heydon Pickering\" data-authors=\"\" data-link=\"http:\/\/book.inclusive-components.design\/\" data-component=\"AddToCart\" data-audience=\"anonymous free supporter\" data-remove=\"true\"><br \/>\n\t\t\tGet the eBook<br \/>\n\t\t<\/button><\/p>\n<p data-audience=\"anonymous free supporter\" data-remove=\"true\">\n\t\t\t<strong>DRM-free,<\/strong> of course. <\/p>\n<p>ePUB, Kindle, PDF.<br \/>\n\t\t\tIncluded with <a href=\"https:\/\/www.smashingmagazine.com\/membership\/\">Smashing Membership<\/a>.\n\t\t<\/p>\n<div data-audience=\"smashing member\" data-remove=\"true\">\n    <a href=\"https:\/\/www.smashingmagazine.com\/articles\/inclusivecomponentspdf\"><br \/>\n      Get the eBook<br \/>\n    <\/a><\/p>\n<p>\n      <a href=\"https:\/\/www.smashingmagazine.com\/articles\/inclusivecomponentspdf\">Download PDF<\/a>, <a href=\"https:\/\/www.smashingmagazine.com\/articles\/inclusivecomponentsepub\">ePUB<\/a>, <a href=\"https:\/\/www.smashingmagazine.com\/articles\/inclusivecomponentsmobi\">Kindle<\/a>.<br \/>Thanks for being smashing!\u00a0??\n    <\/p>\n<\/p><\/div>\n<\/p><\/div>\n<\/div>\n<\/div>\n<h3>Table Of Contents<\/h3>\n<p>Each chapter tackles a single component, addressing how different and vulnerable people might read and interact with it, and how they can be better accommodated. <em><a href=\"http:\/\/provide.smashingmagazine.com\/eBooks\/inclusive-components-free-chapter.pdf\">Download a sample PDF<\/a><\/em> (1.1 MB).<\/p>\n<div aria-multiselectable=\"true\">\n<dl data-handler=\"Accordion\">\n<dt tabindex=\"0\" aria-expanded=\"false\">\n<div>\n<div>1. Toggle Buttons<\/div>\n<\/div>\n<div><span>+<\/span><\/div>\n<\/dt>\n<dd aria-hidden=\"true\">\n<div>What does it take to make toggle buttons inclusive? To start off, Heydon takes a look at common pitfalls and what you need to keep in mind to do better.<\/div>\n<\/dd>\n<dt tabindex=\"0\" aria-expanded=\"false\">\n<div>\n<div>2. A Todo List<\/div>\n<\/div>\n<div><span>+<\/span><\/div>\n<\/dt>\n<dd aria-hidden=\"true\">\n<div>You\u2019ll learn how to build an integrated todo list component from the ground up. This doesn\u2019t have to apply only to todo lists but also to making the basic creation and deletion of content inclusive.<\/div>\n<\/dd>\n<dt tabindex=\"0\" aria-expanded=\"false\">\n<div>\n<div>3. Menus &#038; Menu Buttons<\/div>\n<\/div>\n<div><span>+<\/span><\/div>\n<\/dt>\n<dd aria-hidden=\"true\">\n<div>Menus, dropdowns, subnavigation. There\u2019s a lot of confusion happening around these terms. Why is this happening, why are WAI-ARIA semantics often misused here, how do we properly use \u201chamburgers\u201d and \u201cnavicons,\u201d and what do you need to consider to make your menus keyboard- and screen-reader-accessible?<\/div>\n<\/dd>\n<dt tabindex=\"0\" aria-expanded=\"false\">\n<div>\n<div>4. Tooltips &#038; Toggletips<\/div>\n<\/div>\n<div><span>+<\/span><\/div>\n<\/dt>\n<dd aria-hidden=\"true\">\n<div>Inclusive design is often about providing the user with the right tool for the job and the right kind of tooltip to go with that tool. In this chapter, we\u2019ll be looking at situations which might call for a tooltip and learn how to formulate inclusive implementations for them.<\/div>\n<\/dd>\n<dt tabindex=\"0\" aria-expanded=\"false\">\n<div>\n<div>5. A Theme Switcher<\/div>\n<\/div>\n<div><span>+<\/span><\/div>\n<\/dt>\n<dd aria-hidden=\"true\">\n<div>Offering alternative themes often represents a maintenance issue. This chapter explores how to make an efficient and portable React component that allows users to switch a default light theme into \u201cdark mode\u201d.<\/div>\n<\/dd>\n<dt tabindex=\"0\" aria-expanded=\"false\">\n<div>\n<div>6. Tabbed Interfaces<\/div>\n<\/div>\n<div><span>+<\/span><\/div>\n<\/dt>\n<dd aria-hidden=\"true\">\n<div>What makes a tabbed interface a tabbed interface is in the ergonomics of its keyboard behavior. Heydon takes you step-by-step through the process of applying ARIA semantics to master the challenges that tabbed interfaces might bring along.<\/div>\n<\/dd>\n<dt tabindex=\"0\" aria-expanded=\"false\">\n<div>\n<div>7. Collapsible Sections<\/div>\n<\/div>\n<div><span>+<\/span><\/div>\n<\/dt>\n<dd aria-hidden=\"true\">\n<div>Although implementing collapsible sections is rather simple, the interaction does not have a consistent native implementation across browsers. The tips in this chapter will help you turn your collapsible regions into web components that are easy to include as part of larger patterns and in content files.<\/div>\n<\/dd>\n<dt tabindex=\"0\" aria-expanded=\"false\">\n<div>\n<div>8. A Content Slider<\/div>\n<\/div>\n<div><span>+<\/span><\/div>\n<\/dt>\n<dd aria-hidden=\"true\">\n<div>Carousels don\u2019t have to be bad, but we have a culture of making them bad. This chapter explores how you can create something that fulfills a basic purpose without overloading it with features.<\/div>\n<\/dd>\n<dt tabindex=\"0\" aria-expanded=\"false\">\n<div>\n<div>9. Notifications<\/div>\n<\/div>\n<div><span>+<\/span><\/div>\n<\/dt>\n<dd aria-hidden=\"true\">\n<div>When web pages undergo changes as you operate them, it\u2019s important that users are kept abreast of changing states. This chapter looks at notification components and how they can increase confidence in the use of web applications, in an inclusive way.<\/div>\n<\/dd>\n<dt tabindex=\"0\" aria-expanded=\"false\">\n<div>\n<div>10. Data Tables<\/div>\n<\/div>\n<div><span>+<\/span><\/div>\n<\/dt>\n<dd aria-hidden=\"true\">\n<div>Let\u2019s explore what it takes to make your data tables screen reader accessible, responsive, and as ergonomic as possible for everyone. Plus a trick for fixing old layout tables that cause confusion for visually-impaired users.<\/div>\n<\/dd>\n<dt tabindex=\"0\" aria-expanded=\"false\">\n<div>\n<div>11. Modal Dialogs<\/div>\n<\/div>\n<div><span>+<\/span><\/div>\n<\/dt>\n<dd aria-hidden=\"true\">\n<div>Modal dialogs are often contentious and problematic, so let\u2019s reconsider if they really make sense for your use case and, if yes, examine them in the context of inclusive design thinking and performance.<\/div>\n<\/dd>\n<dt tabindex=\"0\" aria-expanded=\"false\">\n<div>\n<div>12. Cards<\/div>\n<\/div>\n<div><span>+<\/span><\/div>\n<\/dt>\n<dd aria-hidden=\"true\">\n<div>The card component is the last component tackled in the book as it requires the most invention. So in this final chapter, we\u2019ll look into a few permutations of a simple card component and find a balance between sound HTML structure and ergonomic interaction.<\/div>\n<\/dd>\n<\/dl>\n<\/div>\n<figure><a href=\"https:\/\/i0.wp.com\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/6cb895a5-8256-4971-84b4-f319f694b077\/2-inclusive-components-heydon-pickering-opened.jpg?ssl=1\"><\/p>\n<p>    <img data-recalc-dims=\"1\" decoding=\"async\" srcset=\"https:\/\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/12\/2-inclusive-components-heydon-pickering-opened.jpg 400w,\n                    https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_800\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/6cb895a5-8256-4971-84b4-f319f694b077\/2-inclusive-components-heydon-pickering-opened.jpg 800w,\n                    https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1200\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/6cb895a5-8256-4971-84b4-f319f694b077\/2-inclusive-components-heydon-pickering-opened.jpg 1200w,\n                    https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1600\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/6cb895a5-8256-4971-84b4-f319f694b077\/2-inclusive-components-heydon-pickering-opened.jpg 1600w,\n                    https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_2000\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/6cb895a5-8256-4971-84b4-f319f694b077\/2-inclusive-components-heydon-pickering-opened.jpg 2000w\" src=\"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/12\/2-inclusive-components-heydon-pickering-opened.jpg?w=900&#038;ssl=1\" sizes=\"100vw\" alt=\"Inclusive Components, a peek inside.\"><\/a><figcaption>A peek inside of Inclusive Components. A photo by <a href=\"https:\/\/twitter.com\/drewm\">Drew McMellan<\/a>. <a href=\"https:\/\/www.flickr.com\/photos\/drewm\/albums\/72157712043922553\/with\/49162466508\/\">See more photos<\/a>. (<a href=\"https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/6cb895a5-8256-4971-84b4-f319f694b077\/2-inclusive-components-heydon-pickering-opened.jpg\">Large preview<\/a>)<br \/>\n    <\/figcaption><\/figure>\n<h3>About The Author<\/h3>\n<div>\n<a href=\"https:\/\/twitter.com\/heydonworks\"><img data-recalc-dims=\"1\" decoding=\"async\" src=\"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/12\/heydon-pickering-author-headshot.jpg?w=220&#038;ssl=1\"  alt=\"Heydon Pickering\"><\/a><\/p>\n<p>Heydon Pickering (<a href=\"https:\/\/twitter.com\/heydonworks\">@heydonworks<\/a>) has worked with The Paciello Group, The BBC, Smashing Magazine, and Bulb Energy as a designer, engineer, writer, editor, and illustrator. He was shortlisted for Designer Of The Year in The Net Awards.<\/p>\n<p>Heydon previously wrote <a href=\"https:\/\/www.smashingmagazine.com\/printed-books\/inclusive-front-end-design-patterns\/\">Inclusive Design Patterns<\/a> which sold over 10,000 copies. Proceeds from this title were donated to the ACLU and The Democratic Socialists Of America, to help these organizations fight fascism and create a more inclusive society.<\/p>\n<p>Here\u2019s what Heydon shared when asked why he decided to write this book:<\/p>\n<blockquote>\n<p>\u201cA few years back, I was getting bored with web design. Then responsive design came along, presenting me with fresh challenges. It made my life and my job interesting again. Then I discovered the world of web accessibility, and my enthusiasm was once again renewed. Some people seem to think I do web accessibility because I feel morally obliged, or that I would feel guilty if I didn\u2019t.<\/p>\n<p>While I believe strongly that all sorts of people should be able to access the web, I\u2019m also grateful for the web accessibility challenges I\u2019ve encountered, and covered in this book, for stimulating me, and giving my work new depth.<\/p>\n<p>I have written this book because I want you to know how <em>fun<\/em> it can be to make your interfaces more accessible, as well as how accomplished you can feel for having done so. Thank you for reading this, and hopefully the book as well.\u201d<\/p>\n<\/blockquote>\n<\/div>\n<h3>Testimonials<\/h3>\n<blockquote><p><a href=\"https:\/\/twitter.com\/iamsapegin\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" src=\"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/12\/artem-sapegin.jpg?resize=150%2C150&#038;ssl=1\" width=\"150\" height=\"150\" alt=\"Artem Sapegin\"><\/a>\u201cInclusive Components is a very <strong>deep and thorough explanation<\/strong> of development of accessible components with real world examples. Heydon Pickering shows several alternative approaches and explains pros and cons of each. It\u2019s also a pleasure to read!\u201d<\/p>\n<p>\u2014 <a href=\"https:\/\/twitter.com\/iamsapegin\">Artem Sapegin<\/a>, front-end developer, Wayfair<\/p><\/blockquote>\n<blockquote><p><a href=\"https:\/\/twitter.com\/sarah_federman\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" src=\"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/12\/sarah-federman.jpg?resize=150%2C150&#038;ssl=1\" width=\"150\" height=\"150\" alt=\"Sarah Federman\"><\/a>\u201cInclusive Components is chock-full of <strong>practical and comprehensive<\/strong> advice on building accessible UI. It\u2019s my go-to resource after the official WCAG and ARIA documentation. I\u2019ve found it extremely helpful when building our design system!\u201d<\/p>\n<p>\u2014 <a href=\"https:\/\/twitter.com\/sarah_federman\">Sarah Federman<\/a>, senior front-end developer<\/p><\/blockquote>\n<blockquote><p><a href=\"https:\/\/nodividestudio.com\/\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" src=\"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/12\/andy-bell.jpg?resize=150%2C150&#038;ssl=1\" width=\"150\" height=\"150\" alt=\"Andy Bell\"><\/a>\u201cWhat Heydon achieves with his work on Inclusive Components is a pragmatic, <strong>friendly and approachable<\/strong> set of guides that help you to generate not just accessible components, but also resilient and progressive starting-points that will help you to build better websites and web apps in general. I often describe this work as crucial learning material for this exact reason.\u201d<\/p>\n<p>\u2014 <a href=\"https:\/\/nodividestudio.com\/\">Andy Bell<\/a>, independent designer &#038; developer<\/p><\/blockquote>\n<figure><a href=\"https:\/\/i0.wp.com\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/4986efb4-7584-4da6-9200-f243c3b267ab\/page-opt.png?ssl=1\"><img data-recalc-dims=\"1\" decoding=\"async\" srcset=\"https:\/\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/12\/page-opt.png 400w,\n                    https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_800\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/4986efb4-7584-4da6-9200-f243c3b267ab\/page-opt.png 800w,\n                    https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1200\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/4986efb4-7584-4da6-9200-f243c3b267ab\/page-opt.png 1200w,\n                    https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1600\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/4986efb4-7584-4da6-9200-f243c3b267ab\/page-opt.png 1600w,\n                    https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_2000\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/4986efb4-7584-4da6-9200-f243c3b267ab\/page-opt.png 2000w\" src=\"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/12\/page-opt.png?w=900&#038;ssl=1\" sizes=\"100vw\" alt=\"\"><\/a><figcaption>A preview of the book, with examples ranging from accordions to toggles, tables, notifications, dialogs etc. <a href=\"http:\/\/provide.smashingmagazine.com\/eBooks\/inclusive-components-free-chapter.pdf\">Download a sample PDF<\/a> (1.1 MB). <a href=\"https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/50529a0d-1825-4279-a1df-b0276d5ee68c\/page01-b-opt.png\">Large preview<\/a>.<\/figcaption><\/figure>\n<h3>Why This Book Might Be For You<\/h3>\n<p>The devil is in the detail and often the things you do with good intentions can impose accessibility barriers unknowingly. <em>Inclusive Components<\/em> is for every <strong>front-end developer<\/strong> who wants to learn how to detect and address potential accessibility issues in their work. The book will teach you:<\/p>\n<ol>\n<li>How to use <code><button><\/code> elements, how to apply styles to your <strong>toggle buttons<\/strong>, and how to label them.<\/li>\n<li>How to create managed lists that allow users to create and delete content \u2014 in an inclusive way.<\/li>\n<li>How to address and resolve accessibility issues with <strong>navigation menus<\/strong> and submenus (aka \u201cdropdowns\u201d).<\/li>\n<li>How to create accessible and keyboard-friendly <strong>tooltips<\/strong> and toggletips.<\/li>\n<li>How to create a <strong>\u201cdark mode\u201d<\/strong> theme that\u2019s both accessible and maintainable long-term.<\/li>\n<li>How to build an accessible <strong>content slider<\/strong> to prevent harm for motion-sensitive people.<\/li>\n<li>How to create <strong>inclusive notifications<\/strong> with live regions to communicate with your users through visual and aural channels simultaneously.<\/li>\n<li>How to create <strong>data tables<\/strong> that are semantically correct, responsive, and sortable.<\/li>\n<li>How to build accessible <strong>dialogs and modal dialogs<\/strong> with performance and inclusive design in mind.<\/li>\n<li>How to create and group inclusive <strong>cards<\/strong> (e.g. for teasers).<\/li>\n<\/ol>\n<h3>Technical Details<\/h3>\n<ul>\n<li>ISBN: <code>978-3-945749-82-1<\/code> (print)<\/li>\n<li>Quality hardcover, stitched binding, ribbon page marker.<\/li>\n<li>The <strong>eBook<\/strong> is available as PDF, ePUB, and Amazon Kindle <a href=\"http:\/\/book.inclusive-components.design\/\">from Heydon\u2019s site<\/a>.<\/li>\n<li>Free worldwide airmail shipping from Germany. (<a href=\"https:\/\/www.smashingmagazine.com\/delivery-times\/\">Check your delivery times<\/a>.)<\/li>\n<li>Available as <a href=\"http:\/\/book.inclusive-components.design\/\">eBook<\/a> and <a href=\"https:\/\/www.smashingmagazine.com\/printed-books\/inclusive-components\/\" data-product-sku=\"inclusive-components\" data-component=\"AddToCart\" data-product-path=\"\/printed-books\/inclusive-components\/\" data-silent=\"true\">print + eBook.<\/a><\/li>\n<\/ul>\n<h3>Community Matters ??<\/h3>\n<p>With <em>Inclusive Components<\/em>, we&#8217;ve tried to create a very <em>focused<\/em> handbook with <strong>applicable, long-living solutions<\/strong> and strategies to create accessible and inclusive interfaces.<\/p>\n<p>Our hope is that with Heydon\u2019s book, you will be able to make <strong>better design and coding decisions<\/strong> as you build your interfaces. Perhaps it will even become one of those reference books you\u2019ll reach to every time you need to build one of those common UI components.<\/p>\n<p>Producing a book takes quite a bit of time, and we couldn\u2019t pull it off without the support of our wonderful <strong>community<\/strong>. A huge shout-out to Smashing Members for their ongoing support in our adventures. As a result, the eBook is and always will be <a href=\"https:\/\/www.smashingmagazine.com\/membership\">free for <em>Smashing Members<\/em><\/a>. Plus, Members get a friendly discount when purchasing their printed copy.<\/p>\n<p><em>Stay smashing, and thank you for your ongoing support, everyone!<\/em><\/p>\n<figure><a href=\"https:\/\/i0.wp.com\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/9bf0c11e-616c-4619-aaa5-c50d79f8c1cf\/inclusive-components-product-image-landscapea.png?ssl=1\"><br \/>\n    <img data-recalc-dims=\"1\" decoding=\"async\" srcset=\"https:\/\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/12\/inclusive-components-product-image-landscapea.png 400w,\n                    https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_800\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/9bf0c11e-616c-4619-aaa5-c50d79f8c1cf\/inclusive-components-product-image-landscapea.png 800w,\n                    https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1200\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/9bf0c11e-616c-4619-aaa5-c50d79f8c1cf\/inclusive-components-product-image-landscapea.png 1200w,\n                    https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1600\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/9bf0c11e-616c-4619-aaa5-c50d79f8c1cf\/inclusive-components-product-image-landscapea.png 1600w,\n                    https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_2000\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/9bf0c11e-616c-4619-aaa5-c50d79f8c1cf\/inclusive-components-product-image-landscapea.png 2000w\" src=\"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/12\/inclusive-components-product-image-landscapea.png?w=900&#038;ssl=1\" sizes=\"100vw\" alt=\"The cover of Inclusive Components, a new book by Heydon Pickering.\"><\/a><br \/>\n<\/figure>\n<div>\n<div data-handler=\"ContentTabs\" data-mq=\"(max-width: 480px)\">\n<nav>\n<ul>\n<li>\n      <a href=\"https:\/\/www.smashingmagazine.com\/articles\/#\"><br \/>\n        <button><br \/>\n          Print + eBook<br \/>\n        <\/button><br \/>\n      <\/a>\n    <\/li>\n<li>\n      <a href=\"https:\/\/www.smashingmagazine.com\/articles\/#\"><br \/>\n        <button><br \/>\n          eBook<br \/>\n        <\/button><br \/>\n      <\/a>\n    <\/li>\n<\/ul>\n<\/nav>\n<div>\n<h3>\n\t\t\t<span>Print + eBook<\/span><br \/>\n\t\t<\/h3>\n<p>\t<span data-handler=\"PriceTag\" data-sku=\"inclusive-components\" data-type=\"Book\" data-insert=\"true\"><\/p>\n<p><span>$<\/span><br \/>\n39<span>.00<\/span><\/p>\n<p><\/span><\/p>\n<p>\t\t<button data-product-path=\"\/printed-books\/inclusive-components\/\" data-product-sku=\"inclusive-components\" data-author=\"Heydon Pickering\" data-authors=\"\" data-link=\"\" data-component=\"AddToCart\"><br \/>\n\t\t\t Get Print + eBook<br \/>\n\t\t<\/button><\/p>\n<p>\n\t\t\tQuality hardcover. <a href=\"https:\/\/www.smashingmagazine.com\/delivery-times\/\">Free worldwide shipping<\/a>. 100\u00a0days money-back-guarantee.\n\t\t<\/p>\n<\/p><\/div>\n<div>\n<h3>\n\t\t\t<span>eBook<\/span><br \/>\n\t\t<\/h3>\n<div data-audience=\"anonymous free supporter\" data-remove=\"true\">\n<p>\t<span data-handler=\"PriceTag\" data-sku=\"inclusive-components\" data-type=\"E-Book\" data-insert=\"true\"><\/p>\n<p><span>$<\/span><br \/>\n18<span>.00<\/span><\/p>\n<p><\/span><\/p><\/div>\n<p>      <span data-audience=\"smashing member\" data-remove=\"true\"><br \/>\n        <span>Free!<\/span><br \/>\n      <\/span><\/p>\n<p>\t\t<button data-product-path=\"\/printed-books\/inclusive-components\/\" data-product-sku=\"\" data-author=\"Heydon Pickering\" data-authors=\"\" data-link=\"http:\/\/book.inclusive-components.design\/\" data-component=\"AddToCart\" data-audience=\"anonymous free supporter\" data-remove=\"true\"><br \/>\n\t\t\tGet the eBook<br \/>\n\t\t<\/button><\/p>\n<p data-audience=\"anonymous free supporter\" data-remove=\"true\">\n\t\t\t<strong>DRM-free,<\/strong> of course. <\/p>\n<p>ePUB, Kindle, PDF.<br \/>\n\t\t\tIncluded with <a href=\"https:\/\/www.smashingmagazine.com\/membership\/\">Smashing Membership<\/a>.\n\t\t<\/p>\n<div data-audience=\"smashing member\" data-remove=\"true\">\n    <a href=\"https:\/\/www.smashingmagazine.com\/articles\/inclusivecomponentspdf\"><br \/>\n      Get the eBook<br \/>\n    <\/a><\/p>\n<p>\n      <a href=\"https:\/\/www.smashingmagazine.com\/articles\/inclusivecomponentspdf\">Download PDF<\/a>, <a href=\"https:\/\/www.smashingmagazine.com\/articles\/inclusivecomponentsepub\">ePUB<\/a>, <a href=\"https:\/\/www.smashingmagazine.com\/articles\/inclusivecomponentsmobi\">Kindle<\/a>.<br \/>Thanks for being smashing!\u00a0??\n    <\/p>\n<\/p><\/div>\n<\/p><\/div>\n<\/div>\n<\/div>\n<h3>More Smashing Books<\/h3>\n<p>Promoting best practices and providing you with practical tips to master your daily coding and design challenges has always been (and will be) at the <strong>core of everything we do<\/strong> at Smashing. In the past few years, we were very lucky to have worked together with some talented, caring people from the web community to publish their wealth of experience as <a href=\"https:\/\/www.smashingmagazine.com\/printed-books\/\">books that stand the test of time<\/a>. Alla, Adam and Andy are some of these people. Have you checked out their books already?<\/p>\n<div>\n<figure>\n<div><a href=\"https:\/\/www.smashingmagazine.com\/printed-books\/design-systems\/\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" src=\"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/12\/design-systems-shop-image-2-opt.png?resize=160%2C232&#038;ssl=1\" width=\"160\" height=\"232\" alt=\"Design Systems\"><\/a><\/div><figcaption>\n<h4><a href=\"https:\/\/www.smashingmagazine.com\/printed-books\/design-systems\/\">Design Systems<\/a><\/h4>\n<p>A practical guide to creating design languages for digital products.<\/p>\n<p><a href=\"https:\/\/www.smashingmagazine.com\/printed-books\/design-systems\/\" data-product-path=\"\/printed-books\/design-systems\/\" data-product-sku=\"design-systems-by-alla-kholmatova\" data-component=\"AddToCart\">Add to cart <span>$39<\/span><\/a><\/p>\n<\/figcaption><\/figure>\n<figure>\n<div><a href=\"https:\/\/www.smashingmagazine.com\/printed-books\/form-design-patterns\/\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" src=\"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/12\/form-design-patterns-shop-image-opt.png?resize=160%2C232&#038;ssl=1\" alt=\"Form Design Patterns\" width=\"160\" height=\"232\"><\/a><\/div><figcaption>\n<h4><a href=\"https:\/\/www.smashingmagazine.com\/printed-books\/form-design-patterns\/\">Form Design Patterns<\/a><\/h4>\n<p>A practical guide to designing and coding simple and inclusive forms.<\/p>\n<p><a href=\"https:\/\/www.smashingmagazine.com\/printed-books\/form-design-patterns\/\" data-product-path=\"\/printed-books\/form-design-patterns\/\" data-product-sku=\"form-design-patterns\" data-component=\"AddToCart\">Add to cart <span>$39<\/span><\/a><\/p>\n<\/figcaption><\/figure>\n<figure>\n<div><a href=\"https:\/\/www.smashingmagazine.com\/printed-books\/art-direction-for-the-web\/\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" src=\"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/12\/art-direction-for-the-web-shop-image-print-v2.png?resize=160%2C232&#038;ssl=1\" alt=\"Art Direction for the Web\" width=\"160\" height=\"232\"><\/a><\/div><figcaption>\n<h4><a href=\"https:\/\/www.smashingmagazine.com\/printed-books\/art-direction-for-the-web\/\">Art Direction for the Web<\/a><\/h4>\n<p>A guide for breaking out of generic web experiences prevailing today.<\/p>\n<p><a href=\"https:\/\/www.smashingmagazine.com\/printed-books\/art-direction-for-the-web\/\" data-product-path=\"\/printed-books\/art-direction-for-the-web\/\" data-product-sku=\"art-direction-for-the-web\" data-component=\"AddToCart\">Add to cart <span>$39<\/span><\/a><\/p>\n<\/figcaption><\/figure>\n<\/div>\n<div>\n  <img data-recalc-dims=\"1\" decoding=\"async\" src=\"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/12\/logo-red-3.png?w=900&#038;ssl=1\" alt=\"Smashing Editorial\"><span>(il, cm)<\/span>\n<\/div>\n<\/article>\n<p class=\"wpematico_credit\"><small>Powered by <a href=\"http:\/\/www.wpematico.com\" target=\"_blank\" rel=\"noopener noreferrer\">WPeMatico<\/a><\/small><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Meet \u201cInclusive Components\u201d: Accessible, Bulletproof Front-End Patterns Meet \u201cInclusive Components\u201d: Accessible, Bulletproof Front-End Patterns Vitaly Friedman 2019-12-03T12:00:00+00:002019-12-04T11:06:35+00:00 Front-end accessibility is still somewhat mysterious these days. How do we build accessible buttons and dropdowns? What about keyboard-friendly tooltips, tabs and notifications? Or inclusive accordions, sliders, data tables and modals? Let\u2019s figure it out together. Meet Inclusive&#8230;<a class=\"moretag\" href=\"https:\/\/www.taterboy.com\/blog\/2019\/12\/meet-inclusive-components-accessible-bulletproof-front-end-patterns\/\"> Read the full article&#8230;<\/a><\/p>\n","protected":false},"author":4,"featured_media":73752,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_feature_clip_id":0,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2},"jetpack_post_was_ever_published":false},"categories":[371],"tags":[],"class_list":["post-73751","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-user-experience"],"aioseo_notices":[],"aioseo_head":"\n\t\t<!-- All in One SEO 5.0.0.1 - aioseo.com -->\n\t<meta name=\"description\" content=\"Meet \u201cInclusive Components\u201d: Accessible, Bulletproof Front-End PatternsMeet \u201cInclusive Components\u201d: Accessible, Bulletproof Front-End Patterns Vitaly Friedman 2019-12-03T12:00:00+00:002019-12-04T11:06:35+00:00Front-end accessibility is still somewhat mysterious these days. How do we build accessible buttons and dropdowns? What about keyboard-friendly tooltips, tabs and notifications? Or inclusive accordions, sliders, data tables and modals? Let\u2019s figure it out together. Meet Inclusive Components, our\" \/>\n\t<meta name=\"robots\" content=\"max-image-preview:large\" \/>\n\t<meta name=\"author\" content=\"Guest Contribution\"\/>\n\t<meta name=\"keywords\" content=\"user experience\" \/>\n\t<link rel=\"canonical\" href=\"https:\/\/www.taterboy.com\/blog\/2019\/12\/meet-inclusive-components-accessible-bulletproof-front-end-patterns\/\" \/>\n\t<meta name=\"generator\" content=\"All in One SEO (AIOSEO) 5.0.0.1\" \/>\n\t\t<meta property=\"og:locale\" content=\"en_US\" \/>\n\t\t<meta property=\"og:site_name\" content=\"Design for Immersive Technologies | User Experience for Games, Virtual Reality (VR) and Augmented\/Mixed Reality (AR\/MR)\" \/>\n\t\t<meta property=\"og:type\" content=\"article\" \/>\n\t\t<meta property=\"og:title\" content=\"Meet \u201cInclusive Components\u201d: Accessible, Bulletproof Front-End Patterns | Design for Immersive Technologies\" \/>\n\t\t<meta property=\"og:description\" content=\"Meet \u201cInclusive Components\u201d: Accessible, Bulletproof Front-End PatternsMeet \u201cInclusive Components\u201d: Accessible, Bulletproof Front-End Patterns Vitaly Friedman 2019-12-03T12:00:00+00:002019-12-04T11:06:35+00:00Front-end accessibility is still somewhat mysterious these days. How do we build accessible buttons and dropdowns? What about keyboard-friendly tooltips, tabs and notifications? Or inclusive accordions, sliders, data tables and modals? Let\u2019s figure it out together. Meet Inclusive Components, our\" \/>\n\t\t<meta property=\"og:url\" content=\"https:\/\/www.taterboy.com\/blog\/2019\/12\/meet-inclusive-components-accessible-bulletproof-front-end-patterns\/\" \/>\n\t\t<meta property=\"article:published_time\" content=\"2019-12-04T11:19:03+00:00\" \/>\n\t\t<meta property=\"article:modified_time\" content=\"2019-12-04T11:19:03+00:00\" \/>\n\t\t<meta name=\"twitter:card\" content=\"summary\" \/>\n\t\t<meta name=\"twitter:title\" content=\"Meet \u201cInclusive Components\u201d: Accessible, Bulletproof Front-End Patterns | Design for Immersive Technologies\" \/>\n\t\t<meta name=\"twitter:description\" content=\"Meet \u201cInclusive Components\u201d: Accessible, Bulletproof Front-End PatternsMeet \u201cInclusive Components\u201d: Accessible, Bulletproof Front-End Patterns Vitaly Friedman 2019-12-03T12:00:00+00:002019-12-04T11:06:35+00:00Front-end accessibility is still somewhat mysterious these days. How do we build accessible buttons and dropdowns? What about keyboard-friendly tooltips, tabs and notifications? Or inclusive accordions, sliders, data tables and modals? Let\u2019s figure it out together. Meet Inclusive Components, our\" \/>\n\t\t<script type=\"application\/ld+json\" class=\"aioseo-schema\">\n\t\t\t{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/2019\\\/12\\\/meet-inclusive-components-accessible-bulletproof-front-end-patterns\\\/#article\",\"name\":\"Meet \\u201cInclusive Components\\u201d: Accessible, Bulletproof Front-End Patterns | Design for Immersive Technologies\",\"headline\":\"Meet \\u201cInclusive Components\\u201d: Accessible, Bulletproof Front-End Patterns\",\"author\":{\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/author\\\/guestcontribution\\\/#author\"},\"publisher\":{\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/#organization\"},\"image\":{\"@type\":\"ImageObject\",\"url\":\"https:\\\/\\\/i0.wp.com\\\/www.taterboy.com\\\/blog\\\/wp-content\\\/uploads\\\/2019\\\/12\\\/page01-b-opt.png?fit=400%2C203&ssl=1\",\"width\":400,\"height\":203},\"datePublished\":\"2019-12-04T04:19:03-07:00\",\"dateModified\":\"2019-12-04T04:19:03-07:00\",\"inLanguage\":\"en-US\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/2019\\\/12\\\/meet-inclusive-components-accessible-bulletproof-front-end-patterns\\\/#webpage\"},\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/2019\\\/12\\\/meet-inclusive-components-accessible-bulletproof-front-end-patterns\\\/#webpage\"},\"articleSection\":\"User Experience\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/2019\\\/12\\\/meet-inclusive-components-accessible-bulletproof-front-end-patterns\\\/#breadcrumblist\",\"itemListElement\":[{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog#listItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.taterboy.com\\\/blog\",\"nextItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/category\\\/user-experience\\\/#listItem\",\"name\":\"User Experience\"}},{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/category\\\/user-experience\\\/#listItem\",\"position\":2,\"name\":\"User Experience\",\"item\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/category\\\/user-experience\\\/\",\"nextItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/2019\\\/12\\\/meet-inclusive-components-accessible-bulletproof-front-end-patterns\\\/#listItem\",\"name\":\"Meet \\u201cInclusive Components\\u201d: Accessible, Bulletproof Front-End Patterns\"},\"previousItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog#listItem\",\"name\":\"Home\"}},{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/2019\\\/12\\\/meet-inclusive-components-accessible-bulletproof-front-end-patterns\\\/#listItem\",\"position\":3,\"name\":\"Meet \\u201cInclusive Components\\u201d: Accessible, Bulletproof Front-End Patterns\",\"previousItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/category\\\/user-experience\\\/#listItem\",\"name\":\"User Experience\"}}]},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/#organization\",\"name\":\"Design for Immersive Technologies\",\"description\":\"User Experience for Games, Virtual Reality (VR) and Augmented\\\/Mixed Reality (AR\\\/MR)\",\"url\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/author\\\/guestcontribution\\\/#author\",\"url\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/author\\\/guestcontribution\\\/\",\"name\":\"Guest Contribution\",\"image\":{\"@type\":\"ImageObject\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/2019\\\/12\\\/meet-inclusive-components-accessible-bulletproof-front-end-patterns\\\/#authorImage\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/d2aad73eb0f48c67b141e9fc978a0e498969791ed623346e361d02d19775b0bb?s=96&d=mm&r=g\",\"width\":96,\"height\":96,\"caption\":\"Guest Contribution\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/2019\\\/12\\\/meet-inclusive-components-accessible-bulletproof-front-end-patterns\\\/#webpage\",\"url\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/2019\\\/12\\\/meet-inclusive-components-accessible-bulletproof-front-end-patterns\\\/\",\"name\":\"Meet \\u201cInclusive Components\\u201d: Accessible, Bulletproof Front-End Patterns | Design for Immersive Technologies\",\"description\":\"Meet \\u201cInclusive Components\\u201d: Accessible, Bulletproof Front-End PatternsMeet \\u201cInclusive Components\\u201d: Accessible, Bulletproof Front-End Patterns Vitaly Friedman 2019-12-03T12:00:00+00:002019-12-04T11:06:35+00:00Front-end accessibility is still somewhat mysterious these days. How do we build accessible buttons and dropdowns? What about keyboard-friendly tooltips, tabs and notifications? Or inclusive accordions, sliders, data tables and modals? Let\\u2019s figure it out together. Meet Inclusive Components, our\",\"inLanguage\":\"en-US\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/#website\"},\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/2019\\\/12\\\/meet-inclusive-components-accessible-bulletproof-front-end-patterns\\\/#breadcrumblist\"},\"author\":{\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/author\\\/guestcontribution\\\/#author\"},\"creator\":{\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/author\\\/guestcontribution\\\/#author\"},\"image\":{\"@type\":\"ImageObject\",\"url\":\"https:\\\/\\\/i0.wp.com\\\/www.taterboy.com\\\/blog\\\/wp-content\\\/uploads\\\/2019\\\/12\\\/page01-b-opt.png?fit=400%2C203&ssl=1\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/2019\\\/12\\\/meet-inclusive-components-accessible-bulletproof-front-end-patterns\\\/#mainImage\",\"width\":400,\"height\":203},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/2019\\\/12\\\/meet-inclusive-components-accessible-bulletproof-front-end-patterns\\\/#mainImage\"},\"datePublished\":\"2019-12-04T04:19:03-07:00\",\"dateModified\":\"2019-12-04T04:19:03-07:00\"},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/\",\"name\":\"Design for Immersive Technologies\",\"description\":\"User Experience for Games, Virtual Reality (VR) and Augmented\\\/Mixed Reality (AR\\\/MR)\",\"inLanguage\":\"en-US\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/#organization\"}}]}\n\t\t<\/script>\n\t\t<!-- All in One SEO -->\n\n","aioseo_head_json":{"title":"Meet \u201cInclusive Components\u201d: Accessible, Bulletproof Front-End Patterns | Design for Immersive Technologies","description":"Meet \u201cInclusive Components\u201d: Accessible, Bulletproof Front-End PatternsMeet \u201cInclusive Components\u201d: Accessible, Bulletproof Front-End Patterns Vitaly Friedman 2019-12-03T12:00:00+00:002019-12-04T11:06:35+00:00Front-end accessibility is still somewhat mysterious these days. How do we build accessible buttons and dropdowns? What about keyboard-friendly tooltips, tabs and notifications? Or inclusive accordions, sliders, data tables and modals? Let\u2019s figure it out together. Meet Inclusive Components, our","canonical_url":"https:\/\/www.taterboy.com\/blog\/2019\/12\/meet-inclusive-components-accessible-bulletproof-front-end-patterns\/","robots":"max-image-preview:large","keywords":"user experience","webmasterTools":{"miscellaneous":""},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.taterboy.com\/blog\/2019\/12\/meet-inclusive-components-accessible-bulletproof-front-end-patterns\/#article","name":"Meet \u201cInclusive Components\u201d: Accessible, Bulletproof Front-End Patterns | Design for Immersive Technologies","headline":"Meet \u201cInclusive Components\u201d: Accessible, Bulletproof Front-End Patterns","author":{"@id":"https:\/\/www.taterboy.com\/blog\/author\/guestcontribution\/#author"},"publisher":{"@id":"https:\/\/www.taterboy.com\/blog\/#organization"},"image":{"@type":"ImageObject","url":"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/12\/page01-b-opt.png?fit=400%2C203&ssl=1","width":400,"height":203},"datePublished":"2019-12-04T04:19:03-07:00","dateModified":"2019-12-04T04:19:03-07:00","inLanguage":"en-US","mainEntityOfPage":{"@id":"https:\/\/www.taterboy.com\/blog\/2019\/12\/meet-inclusive-components-accessible-bulletproof-front-end-patterns\/#webpage"},"isPartOf":{"@id":"https:\/\/www.taterboy.com\/blog\/2019\/12\/meet-inclusive-components-accessible-bulletproof-front-end-patterns\/#webpage"},"articleSection":"User Experience"},{"@type":"BreadcrumbList","@id":"https:\/\/www.taterboy.com\/blog\/2019\/12\/meet-inclusive-components-accessible-bulletproof-front-end-patterns\/#breadcrumblist","itemListElement":[{"@type":"ListItem","@id":"https:\/\/www.taterboy.com\/blog#listItem","position":1,"name":"Home","item":"https:\/\/www.taterboy.com\/blog","nextItem":{"@type":"ListItem","@id":"https:\/\/www.taterboy.com\/blog\/category\/user-experience\/#listItem","name":"User Experience"}},{"@type":"ListItem","@id":"https:\/\/www.taterboy.com\/blog\/category\/user-experience\/#listItem","position":2,"name":"User Experience","item":"https:\/\/www.taterboy.com\/blog\/category\/user-experience\/","nextItem":{"@type":"ListItem","@id":"https:\/\/www.taterboy.com\/blog\/2019\/12\/meet-inclusive-components-accessible-bulletproof-front-end-patterns\/#listItem","name":"Meet \u201cInclusive Components\u201d: Accessible, Bulletproof Front-End Patterns"},"previousItem":{"@type":"ListItem","@id":"https:\/\/www.taterboy.com\/blog#listItem","name":"Home"}},{"@type":"ListItem","@id":"https:\/\/www.taterboy.com\/blog\/2019\/12\/meet-inclusive-components-accessible-bulletproof-front-end-patterns\/#listItem","position":3,"name":"Meet \u201cInclusive Components\u201d: Accessible, Bulletproof Front-End Patterns","previousItem":{"@type":"ListItem","@id":"https:\/\/www.taterboy.com\/blog\/category\/user-experience\/#listItem","name":"User Experience"}}]},{"@type":"Organization","@id":"https:\/\/www.taterboy.com\/blog\/#organization","name":"Design for Immersive Technologies","description":"User Experience for Games, Virtual Reality (VR) and Augmented\/Mixed Reality (AR\/MR)","url":"https:\/\/www.taterboy.com\/blog\/"},{"@type":"Person","@id":"https:\/\/www.taterboy.com\/blog\/author\/guestcontribution\/#author","url":"https:\/\/www.taterboy.com\/blog\/author\/guestcontribution\/","name":"Guest Contribution","image":{"@type":"ImageObject","@id":"https:\/\/www.taterboy.com\/blog\/2019\/12\/meet-inclusive-components-accessible-bulletproof-front-end-patterns\/#authorImage","url":"https:\/\/secure.gravatar.com\/avatar\/d2aad73eb0f48c67b141e9fc978a0e498969791ed623346e361d02d19775b0bb?s=96&d=mm&r=g","width":96,"height":96,"caption":"Guest Contribution"}},{"@type":"WebPage","@id":"https:\/\/www.taterboy.com\/blog\/2019\/12\/meet-inclusive-components-accessible-bulletproof-front-end-patterns\/#webpage","url":"https:\/\/www.taterboy.com\/blog\/2019\/12\/meet-inclusive-components-accessible-bulletproof-front-end-patterns\/","name":"Meet \u201cInclusive Components\u201d: Accessible, Bulletproof Front-End Patterns | Design for Immersive Technologies","description":"Meet \u201cInclusive Components\u201d: Accessible, Bulletproof Front-End PatternsMeet \u201cInclusive Components\u201d: Accessible, Bulletproof Front-End Patterns Vitaly Friedman 2019-12-03T12:00:00+00:002019-12-04T11:06:35+00:00Front-end accessibility is still somewhat mysterious these days. How do we build accessible buttons and dropdowns? What about keyboard-friendly tooltips, tabs and notifications? Or inclusive accordions, sliders, data tables and modals? Let\u2019s figure it out together. Meet Inclusive Components, our","inLanguage":"en-US","isPartOf":{"@id":"https:\/\/www.taterboy.com\/blog\/#website"},"breadcrumb":{"@id":"https:\/\/www.taterboy.com\/blog\/2019\/12\/meet-inclusive-components-accessible-bulletproof-front-end-patterns\/#breadcrumblist"},"author":{"@id":"https:\/\/www.taterboy.com\/blog\/author\/guestcontribution\/#author"},"creator":{"@id":"https:\/\/www.taterboy.com\/blog\/author\/guestcontribution\/#author"},"image":{"@type":"ImageObject","url":"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/12\/page01-b-opt.png?fit=400%2C203&ssl=1","@id":"https:\/\/www.taterboy.com\/blog\/2019\/12\/meet-inclusive-components-accessible-bulletproof-front-end-patterns\/#mainImage","width":400,"height":203},"primaryImageOfPage":{"@id":"https:\/\/www.taterboy.com\/blog\/2019\/12\/meet-inclusive-components-accessible-bulletproof-front-end-patterns\/#mainImage"},"datePublished":"2019-12-04T04:19:03-07:00","dateModified":"2019-12-04T04:19:03-07:00"},{"@type":"WebSite","@id":"https:\/\/www.taterboy.com\/blog\/#website","url":"https:\/\/www.taterboy.com\/blog\/","name":"Design for Immersive Technologies","description":"User Experience for Games, Virtual Reality (VR) and Augmented\/Mixed Reality (AR\/MR)","inLanguage":"en-US","publisher":{"@id":"https:\/\/www.taterboy.com\/blog\/#organization"}}]},"og:locale":"en_US","og:site_name":"Design for Immersive Technologies | User Experience for Games, Virtual Reality (VR) and Augmented\/Mixed Reality (AR\/MR)","og:type":"article","og:title":"Meet \u201cInclusive Components\u201d: Accessible, Bulletproof Front-End Patterns | Design for Immersive Technologies","og:description":"Meet \u201cInclusive Components\u201d: Accessible, Bulletproof Front-End PatternsMeet \u201cInclusive Components\u201d: Accessible, Bulletproof Front-End Patterns Vitaly Friedman 2019-12-03T12:00:00+00:002019-12-04T11:06:35+00:00Front-end accessibility is still somewhat mysterious these days. How do we build accessible buttons and dropdowns? What about keyboard-friendly tooltips, tabs and notifications? Or inclusive accordions, sliders, data tables and modals? Let\u2019s figure it out together. Meet Inclusive Components, our","og:url":"https:\/\/www.taterboy.com\/blog\/2019\/12\/meet-inclusive-components-accessible-bulletproof-front-end-patterns\/","article:published_time":"2019-12-04T11:19:03+00:00","article:modified_time":"2019-12-04T11:19:03+00:00","twitter:card":"summary","twitter:title":"Meet \u201cInclusive Components\u201d: Accessible, Bulletproof Front-End Patterns | Design for Immersive Technologies","twitter:description":"Meet \u201cInclusive Components\u201d: Accessible, Bulletproof Front-End PatternsMeet \u201cInclusive Components\u201d: Accessible, Bulletproof Front-End Patterns Vitaly Friedman 2019-12-03T12:00:00+00:002019-12-04T11:06:35+00:00Front-end accessibility is still somewhat mysterious these days. How do we build accessible buttons and dropdowns? What about keyboard-friendly tooltips, tabs and notifications? Or inclusive accordions, sliders, data tables and modals? Let\u2019s figure it out together. Meet Inclusive Components, our"},"aioseo_meta_data":{"post_id":"73751","title":null,"description":null,"keywords":null,"keyphrases":null,"canonical_url":null,"og_title":null,"og_description":null,"og_object_type":"default","og_image_type":"default","og_image_custom_url":null,"og_image_custom_fields":null,"og_custom_image_width":null,"og_custom_image_height":null,"og_video":null,"og_custom_url":null,"og_article_section":null,"og_article_tags":null,"twitter_use_og":false,"twitter_card":"default","twitter_image_type":"default","twitter_image_custom_url":null,"twitter_image_custom_fields":null,"twitter_title":null,"twitter_description":null,"schema_type":null,"schema_type_options":null,"pillar_content":false,"robots_default":true,"robots_noindex":false,"robots_noarchive":false,"robots_nosnippet":false,"robots_nofollow":false,"robots_noimageindex":false,"robots_noodp":false,"robots_notranslate":false,"robots_max_snippet":null,"robots_max_videopreview":null,"robots_max_imagepreview":"large","priority":null,"frequency":null,"location":null,"local_seo":null,"created":"2021-02-07 16:26:19","updated":"2026-09-02 15:35:32","focus_keyword":null,"additional_keywords":null,"truseo_locale":null,"primary_term":null,"og_image_url":null,"og_image_width":null,"og_image_height":null,"twitter_image_url":null,"schema":{"blockGraphs":[],"customGraphs":[],"default":{"data":{"Article":[],"Course":[],"Dataset":[],"FAQPage":[],"Movie":[],"Person":[],"Product":[],"ProductReview":[],"Car":[],"Recipe":[],"Service":[],"SoftwareApplication":[],"WebPage":[]},"graphName":"Article","isEnabled":true},"graphs":[]},"limit_modified_date":false,"ai":null,"breadcrumb_settings":null,"seo_analyzer_scan_date":null},"aioseo_breadcrumb":"<div class=\"aioseo-breadcrumbs\"><span class=\"aioseo-breadcrumb\">\n\t\t\t<a href=\"https:\/\/www.taterboy.com\/blog\" title=\"Home\">Home<\/a>\n\t\t<\/span><span class=\"aioseo-breadcrumb-separator\">&raquo;<\/span><span class=\"aioseo-breadcrumb\">\n\t\t\t<a href=\"https:\/\/www.taterboy.com\/blog\/category\/user-experience\/\" title=\"User Experience\">User Experience<\/a>\n\t\t<\/span><span class=\"aioseo-breadcrumb-separator\">&raquo;<\/span><span class=\"aioseo-breadcrumb\">\n\t\t\tMeet \u201cInclusive Components\u201d: Accessible, Bulletproof Front-End Patterns\n\t\t<\/span><\/div>","aioseo_breadcrumb_json":[{"label":"Home","link":"https:\/\/www.taterboy.com\/blog"},{"label":"User Experience","link":"https:\/\/www.taterboy.com\/blog\/category\/user-experience\/"},{"label":"Meet \u201cInclusive Components\u201d: Accessible, Bulletproof Front-End Patterns","link":"https:\/\/www.taterboy.com\/blog\/2019\/12\/meet-inclusive-components-accessible-bulletproof-front-end-patterns\/"}],"jetpack_publicize_connections":[],"jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/p8wzr5-jbx","jetpack_featured_media_url":"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/12\/page01-b-opt.png?fit=400%2C203&ssl=1","_links":{"self":[{"href":"https:\/\/www.taterboy.com\/blog\/wp-json\/wp\/v2\/posts\/73751","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.taterboy.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.taterboy.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.taterboy.com\/blog\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/www.taterboy.com\/blog\/wp-json\/wp\/v2\/comments?post=73751"}],"version-history":[{"count":0,"href":"https:\/\/www.taterboy.com\/blog\/wp-json\/wp\/v2\/posts\/73751\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.taterboy.com\/blog\/wp-json\/wp\/v2\/media\/73752"}],"wp:attachment":[{"href":"https:\/\/www.taterboy.com\/blog\/wp-json\/wp\/v2\/media?parent=73751"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.taterboy.com\/blog\/wp-json\/wp\/v2\/categories?post=73751"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.taterboy.com\/blog\/wp-json\/wp\/v2\/tags?post=73751"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}