{"id":73673,"date":"2019-12-03T04:17:51","date_gmt":"2019-12-03T11:17:51","guid":{"rendered":"https:\/\/www.taterboy.com\/blog\/2019\/12\/smashing-podcast-episode-4-with-heydon-pickering-what-are-inclusive-components\/"},"modified":"2019-12-03T04:17:51","modified_gmt":"2019-12-03T11:17:51","slug":"smashing-podcast-episode-4-with-heydon-pickering-what-are-inclusive-components","status":"publish","type":"post","link":"https:\/\/www.taterboy.com\/blog\/2019\/12\/smashing-podcast-episode-4-with-heydon-pickering-what-are-inclusive-components\/","title":{"rendered":"Smashing Podcast Episode 4 With Heydon Pickering: What Are Inclusive Components?"},"content":{"rendered":"<link rel=\"canonical\" href=\"https:\/\/www.smashingmagazine.com\/2019\/12\/smashing-podcast-episode-4\/\"><title>Smashing Podcast Episode 4 With Heydon Pickering: What Are Inclusive Components?<\/title><\/p>\n<article>\n<header>\n<h1>Smashing Podcast Episode 4 With Heydon Pickering: What Are Inclusive Components?<\/h1>\n<address>Drew McLellan<\/address>\n<p>                  <time datetime=\"2019-12-03T05:00:00+00:00\">2019-12-03T05:00:00+00:00<\/time><time datetime=\"2019-12-03T05:00:00+00:00\">2019-12-03T11:05:13+00:00<\/time><\/header>\n<p><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" src=\"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/12\/heydon-pickering-author-image-opt.png?resize=200%2C200&#038;ssl=1\" width=\"200\" height=\"200\" alt=\"Heydon Pickering\"> In this episode of the Smashing Podcast, Drew McLellan talks to Heydon Pickering about his new book, <em><a href=\"https:\/\/www.smashingmagazine.com\/printed-books\/inclusive-components\/\">Inclusive Components<\/a><\/em>. Heydon is known for his work and writing on Accessibility, so what is Inclusive Design, and where do components come into play? Heydon eplains all this and more in this episode. You can listen below, or subscribe wherever you get your podcasts.<\/p>\n<h3>Show Notes<\/h3>\n<ul>\n<li>The book <em><a href=\"https:\/\/www.smashingmagazine.com\/printed-books\/inclusive-components\/\">Inclusive Components<\/a><\/em> from Smashing Magazine<\/li>\n<li>Heydon\u2019s project <em><a href=\"https:\/\/every-layout.dev\/\">Every Layout<\/a><\/em> with Andy Bell<\/li>\n<li>Heydon\u2019s website <a href=\"http:\/\/www.heydonworks.com\/\">Heydonworks<\/a><\/li>\n<li>Heydon <a href=\"https:\/\/twitter.com\/heydonworks\">on Twitter<\/a><\/li>\n<\/ul>\n<h3>Transcript<\/h3>\n<p><span>Drew McLellan:<\/span> He\u2019s a freelance web accessibility consultant, interface designer and writer. His work focuses on accessible user experience design, as well as writing and editing for Smashing Magazine. He\u2019s the author of the acclaimed book about accessible web application design, Apps For All, and has just released a new book, Inclusive Components, all about how to build accessible web interfaces, again, with Smashing Magazine. So he\u2019s clearly an expert on the subject of accessible design, but did you know he was the first male human to jump the Sydney Harbor Bridge in a speedboat? My Smashing friends, please welcome Heydon Pickering. Hi, Heydon. How are you?<\/p>\n<p><span>Heydon Pickering:<\/span> I\u2019m smashing. I\u2019m on brand.<\/p>\n<p><span>Drew:<\/span> I wanted to talk to you today about the subject of your new book, Inclusive Components.<\/p>\n<p><span>Heydon:<\/span> Yes.<\/p>\n<p><span>Drew:<\/span> Obviously just a two word title, but I feel like each of those words does a lot of heavy lifting. Starting at the end, as is obviously logical to do, components, is this about sort of component-based design? What is that?<\/p>\n<p><span>Heydon:<\/span> Yeah, so I suppose it\u2019s been a while now since people, front end developers, designers and everyone who collaborates on making interfaces, started to think about things in terms of components and dividing things up into digestible and reusable morsels. And I suppose if you\u2019re not familiar with that way of working for whatever reason, it really is a bit like electronic components. My father is an electronic engineer. He works in the sort of analog world of circuit boards and solder and all that kind of thing.<\/p>\n<p><span>Heydon:<\/span> In fact, he\u2019s made some components, very small components, which have been used to regulate the current going into electromagnets at CERN. And he had a lot of faith in me as a kid, because he got me to actually solder some of the bits for them. I think that batch has now been retired, so don\u2019t worry about my poor soldering, my poor teenage soldering, being involved in CERN anymore. But yeah, I think it is analogous to \u2026 Oh, there\u2019s too many analogs in there.<\/p>\n<p><span>Heydon:<\/span> It\u2019s analogous to analog circuit boards in that the idea is you have single responsibilities for individual parts or components and, together, they make the circuit and, together, they augment the current in the case of a circuit or the, I guess, the interface or the outcome in whatever way, in a design system or in an interface as manifested through a design system. And so, Inclusive Components because I wanted to address the fact that, while, I mean, accessibility does tend to get left behind generally when we advance what we\u2019re doing in different arenas, and I wanted to bring accessibility and, in the broader sense, inclusive design to bear on this kind of new way of thinking and making things using components or modules or whatever you want to call them.<\/p>\n<p><span>Heydon:<\/span> So the idea was to both bring accessibility to design systems, but by the same token, think systemically when it comes to trying to address accessibility. Think about solving kind of one problem in one place in terms of accessibility and making sure that simply propagates around the pattern [inaudible 00:03:16] the design system at large.<\/p>\n<p><span>Drew:<\/span> In a sort of a practical sense, what does it actually look like to work in a component based way? What might an example of a component be?<\/p>\n<p><span>Heydon:<\/span> So, there\u2019s different ways of conceiving and coding components. I tend to get straight into the sort of nitty gritty of it, past the conceptual stuff and think about how I might organize the code. I\u2019ve actually come to focus a lot on custom elements, or if not custom elements, then normal elements but with kind of JavaScript behavior attached to them in a kind of isolated, componentized way. I really like the idea of components which are interoperable. And by that, I mean that they can be used across different frameworks and systems and approaches and technical stacks. And custom elements are nice in that because they\u2019re native. You can define them in one place and then they could be used, say, in a react application or they could be used in a view application or they could be used in an angular application, or whatever sort of larger state management technology you\u2019re using.<\/p>\n<p><span>Heydon:<\/span> So for me, usually a component will probably be a custom element. I\u2019ve worked on a project recently which isn\u2019t so much focused on accessibility, although I\u2019ve tried to make it as accessible as possible, called Every Layout, and it\u2019s all about kind of trying to isolate very specific kind of algorithms for CSS layout. And they\u2019re defined as custom elements and kind of they sort of deploy themselves and run their own CSS and work as kind of like primitives within the larger system.<\/p>\n<p><span>Drew:<\/span> I mean, in actual practical terms, we\u2019re talking a component might be something like a form field?<\/p>\n<p><span>Heydon:<\/span> Yeah, so it could be something as simple as an input. Say, like a text input or it could be something complex like a tab interface. And so, the idea with Inclusive Components was to take the concept of one component with its, hopefully, single purpose, like a text input, and then think about all of the different things that could trip up different kinds of people and try and avoid them. Not avoid the people, avoid the problems. It\u2019s not so much about including people, it\u2019s about trying not to arbitrarily exclude people.<\/p>\n<p><span>Heydon:<\/span> That seems to be the easiest way of approaching an inclusive design process for me, is to kind of identify the potential exclusionary elements of something and try and step around them. So with a text input, with a label, you\u2019ve got a number of different things there that you might want to worry about. So, you\u2019d have whether or not it\u2019s actually labeled correctly for a start. So are you using a label element and is that label element pointing to the text field using a for attribute so that the two things are programmatically associated so that when a screen reader user focuses the input, they actually hear the label being announced? So that\u2019s one thing to get right.<\/p>\n<p><span>Heydon:<\/span> Then, on a sort of more visual level, making sure that the label is clearly associated with that field and not a different fields, and that\u2019s a question of white space and that kind of stuff. Also, making sure that the label is not, you\u2019re not doing something fancy like putting the label underneath their form input because then when you, for instance, when a virtual keyboard comes up, that might become obscured. So, it\u2019s taking into consideration those sorts of things.<\/p>\n<p><span>Heydon:<\/span> Making sure that the input itself has a focus style, so when you focus it with a keyboard, whether you\u2019re a habitual keyboard user who uses keyboards to navigate or otherwise, making sure that it\u2019s clear from the focus style that that\u2019s the input that you\u2019re focused on. Making sure that, I mean, things like autocomplete, worrying about that, whether autocomplete is appropriate and helpful in the context or whether it\u2019s not. And a lot of these things address disability directly, but a lot of them are sort of broader in terms of usability and just making things as understandable as possible.<\/p>\n<p><span>Heydon:<\/span> Quite often, there\u2019s a very sort of fine line or perhaps a blurred line between what addresses sort of usability for everyone and what addresses disability. And then, to make it even more kind of difficult to pin down, cognitive disabilities. So if something is not very usable for someone who does not have cognitive disabilities, then it\u2019s going to be even more difficult to work out and be able to use for someone who does have those kinds of challenges.<\/p>\n<p><span>Heydon:<\/span> So it\u2019s just trying to think about all of those things in one place. And really, the book is just my, it\u2019s my thought process as I\u2019m approaching each of those. So I did it as a blog to begin with. And each pattern or each component is a blog post and the text is just me going, \u201cSo, let\u2019s now address this potential issue. How do we go about that? Okay, we\u2019ve checked that one off. I think we\u2019re okay there.\u201d And, by no means am I trying to say that these are perfect and that I\u2019ve thought of everything, because that\u2019s not possible.<\/p>\n<p><span>Drew:<\/span> So does taking a component based approach to how you work on individual parts of an interface, I guess, it allows you to go really deep on that particular item and make sure that you\u2019ve really heavily optimized it in the best way you can so that it\u2019s accessible to everyone. Is there a danger in doing that and doing that on lots of different components and then putting them all together on a page? Is there a danger that you can create issues that you weren\u2019t aware of because you\u2019re testing them individually and not together?<\/p>\n<p><span>Heydon:<\/span> That\u2019s a really good point, and I was going to bring that up earlier actually. I\u2019m glad you said that. So, in lots of ways, I think we have, philosophically, we\u2019ve decided that we need to separate things into these individual components. And there\u2019s virtue to doing that, because if it\u2019s isolated then it\u2019s easier to kind of test and sort of treat as a single thing. And you can kind of, in terms of the way we work, it makes things easier to manage. We do have to consider, as well, the fact that these things ultimately have to share the same space and join together into a larger system.<\/p>\n<p><span>Heydon:<\/span> And I don\u2019t think, actually, enough of our effort and thought goes into that, funnily enough. I think we componentize things more to make our lives as engineers easier, so that we know what we\u2019re working on at what time. And, but then, we often do neglect the fact that these things will be living in dynamic systems and they have to be \u2026<\/p>\n<p><span>Heydon:<\/span> I mean, the Every Layout project, although it\u2019s more about visual design and about layout, is all about trying to make these little CSS primitives, these little layout primitives, in such a way that they can sort of self-manage algorithmically. It\u2019s so that you can take them out of a narrow column and put them then a wide column and then it will be, the code itself will determine how many items abreast there should be or whether it should reconfigure itself in some other way. Because we can\u2019t afford to constantly be intervening, and it has to be a system which is sort of self-knowing and intelligent, I think.<\/p>\n<p><span>Heydon:<\/span> There\u2019s always things which you can forget about. So maybe you make a tab interface, you\u2019ve got a row of tabs, you choose between the tab and the tab corresponds to a tab panel, that opens something up. And then, someone will come along and they\u2019ll say, \u201cWell, what if I want to put a tab interface inside a tab interface, or some other component inside a tap interface?\u201d<\/p>\n<p><span>Heydon:<\/span> And of course, I mean, it\u2019s partially a technical concern as to whether that would be possible, but yeah, you\u2019ve got to make the choice about whether you\u2019re going to make things as flexible as you can so that it\u2019s possible to sort of imbricate things in a complex way, or simply write hard rules which say, \u201cYou can\u2019t put something inside here because the level of complexity in terms of the code would probably be too high, but also possibly in terms of how the user can perceive and use the thing.\u201d I\u2019m all for writing rules which say, \u201cDon\u2019t nest loads of complex functionality inside itself,\u201d because it\u2019s just not likely that people are going to be able to get their head around it, really.<\/p>\n<p><span>Drew:<\/span> Is it possible to take a fully algorithmic or automated approach to designing for accessibility?<\/p>\n<p><span>Heydon:<\/span> I don\u2019t believe so. No. So we have automated tools and I don\u2019t want to disparage automated tools in any way. I think they are very useful, but I use them as kind of like an early warning system to try and kind of get an impression of where the problem areas are. So, if I was doing an audit for an organization who wanted some advice on how to make their products more accessible. So it\u2019s a good way of kind of funding where the problem areas are, but I mean, you can have an interface which is technically 100% accessible, perhaps, according to some tool, even a good tool for judging it, say, against WCAG, the web content accessibility guidelines, or some other acceptance specification. And, even though it\u2019s a 100% sort of all the boxes checked, it can still be entirely unusable for various reasons.<\/p>\n<p><span>Heydon:<\/span> For instance, going back to what we were saying before, it can just be entirely too complex. You can just overwhelm someone with links and there\u2019s just no way that they\u2019d be able to get through it and then that becomes, it\u2019s a very sort of tacit thing and difficult thing to pin down, but it\u2019s bound to just alienate people. But there\u2019s also, you can get, it\u2019s very easy to get false positives and things like that. I had a thing the other day, I said the other day, it was the other month, I was working for an organization and of course they wanted to have a 100% accessibility lighthouse school and there was an iframe which was dropped in there dynamically by a analytic script or something. You know the kind of thing where it\u2019s some sort of slightly gross code, which is just sort of chucked in the page to do some task like that.<\/p>\n<p><span>Heydon:<\/span> Now I would recommend not using analytics at all, and I recommended to them to at least support the do not track protocol so that people could opt out. Unfortunately, that protocol is kind of, doesn\u2019t really work anymore because it was never really supported properly. But this iframe, it was saying it doesn\u2019t have a title on it. So the idea is that if you have an iframe, it should have a title attribute because that\u2019s the best sort of longstanding way of identifying what the iframe is for to a screen reader user. But this was an iframe that also was set to display none, so it wasn\u2019t even perceivable to a screen reader in the first place because display none, just as it hides things visually in a screen reader, it will essentially remove it from the interface, so it won\u2019t be encountered or announced in any way.<\/p>\n<p><span>Heydon:<\/span> So it was a false positive. I mean, it was asking me to identify an iframe that was not there to be perceived in the first place. So, there\u2019s always going to be those kinds of errors and problems in automated testing. But ultimately, it is about knowing, although it\u2019s just sort of a thing that programmers, I guess, don\u2019t really like to think that they\u2019re involved in and they find it a bit icky, but it is about human behavior and about how people understand things and that\u2019s a very difficult thing to just have a set of kind of binary sort of, or boolean sort of rules about.<\/p>\n<p><span>Heydon:<\/span> So, I mean, I spoke to a developer when I was consulting sometime ago about this and they kept saying, \u201cWell, as long as we\u2019ve got automated testing, we\u2019re fine, aren\u2019t we? It\u2019s just, then we can just move forward.\u201d And I said, \u201cYou still have to test manually. There\u2019s no automated test which can really tell you if using the interface by keyboard is impossible in one way or another.\u201d There are sort of discrete things you can look for, but the overall experience is still something that needs to be judged by human being. Yeah.<\/p>\n<p><span>Drew:<\/span> Sometimes the danger with automated tools is they look at items in isolation or they look at one interface in isolation and not see the wider context.<\/p>\n<p><span>Heydon:<\/span> Yes.<\/p>\n<p><span>Drew:<\/span> Certainly with using lighthouse for performance audits, sometimes I might make a decision as a developer to include, there may be a lot more CSS than is used on that one page and strictly speaking, I\u2019m downloading too much CSS, but actually, I know that once that file is loaded, by the time the user browses to the next page, they\u2019ve already got the CSS. So it\u2019s an an optimization that\u2019s being made across multiple pages the tool, looking at one page in isolation, sees as an error.<\/p>\n<p><span>Heydon:<\/span> Yes, absolutely. You\u2019re thinking ahead and you\u2019re making a judgment call, and until we get to advanced AI to anticipate that, then yeah, you really need human beings looking at it and going through it and going \u2026 I mean, so automated testing should be in place, as I say, a sort of early warning system, diagnostic system, but there should also be, if you\u2019re interested in your organization really caring and making things more inclusive and more accessible, there needs to be training as well. There needs to be Q &#038; A.<\/p>\n<p><span>Heydon:<\/span> So I would write scripts for, \u201cThis is how it should work when you interact with this component with a keyboard,\u201d or, \u201cThis is how it should work when you interact with it with a screen reader and not actually step through it. So, when you do this, this should happen. When you do this, this should happen. When you do this, this should appear,\u201d or that kind of stuff. So, and the kind of journey stuff, as you say, automated tools aren\u2019t aware of that. They only just see, \u201cOh, this doesn\u2019t have alt text here.\u201d And actually, in a lot of cases, maybe it shouldn\u2019t have alt text. And also, it can\u2019t judge whether you\u2019ve written the alt text well or not. So I think an image without all alternative text is probably better than an image with misleading or just bad alternative text. And that\u2019s a judgment call again, isn\u2019t it?<\/p>\n<p><span>Drew:<\/span> One of the things that I\u2019ve struggled with, historically, in building things in an accessible way is keeping my knowledge of the best practice up to date because it\u2019s, each time I refer to any documentation or any sort of recommendations, it seems like what I was doing and thought I was doing the right thing, the recommendations have moved on and now I should be doing something else. And that\u2019s a familiar story with all areas of working on the web. But I think the danger is, of course, with accessibility issues, is that, if you\u2019re not following the best practice, if you leave something in your interface that is now not good practice, that could be affecting your users in a negative way. Does a component based approach to building an interface or a site, does it help with that at all in any way?<\/p>\n<p><span>Heydon:<\/span> I think purely in the sense that, because you have one component which then, the idea of course in all cases and not just in terms of accessibility, is that you have this component defined in one place which will then be used in different places, at least when aspects or browser support or whatever it is changes and you want to update the component, you only then have to do it in one place and then wherever it\u2019s used, that enhancement or that change will be felt. So from that regard, I think it\u2019s certainly more useful to have things divided into components.<\/p>\n<p><span>Heydon:<\/span> But then, yeah, as I say, that doesn\u2019t just affect accessibility, that can affect anything that changes. But then, I\u2019m not sure really how much changes in its \u2026 I mean, there\u2019ll be few sort of breaking changes in terms of sort of HTML accessibility, which is, obviously, a very narrow area. But in terms of the code quality or how the code works, things are introduced into the HTML spec, obviously, very slowly and not quite as slowly but fairly slowly into the ARIA spec as well. And then, much of ARIA just mirrors what\u2019s in the underlying baseline HTML anyway.<\/p>\n<p><span>Heydon:<\/span> I think, more so than the technology, the perception and understanding of these things tends to change over time. I mean, there was recent, in the WebAIM survey recently, they identified the sites were using ARIA were more inaccessible than sites that didn\u2019t use it. So this technology specifically conceived in order to help people make websites more accessible, was making it worse. So it\u2019s really, it\u2019s just a knowledge gap, not a technology gap or a technology shortcoming. It\u2019s people just taking the technology and misusing it because they didn\u2019t really actually understand how it\u2019s intended to work, unfortunately. Hopefully, some of my writing might be able to help with that. In some areas, anyway.<\/p>\n<p><span>Drew:<\/span> But a sort of well structured component-based system would enable you, once you realize that something is out of date or you\u2019ve made a poor decision and you now know better, would enable you to more easily go in and fix that across your application.<\/p>\n<p><span>Heydon:<\/span> Yeah, exactly. Yeah, yeah, absolutely. I mean, it\u2019s all about efficiency isn\u2019t it, really? And this dry principle or what have you, and see, that\u2019s why I guess I was originally very excited about this opportunity, because people always complain that making things accessible is extra work and it\u2019s hard and it\u2019s upsetting and all of that. And so, it was kind of an opportunity to say, \u201cWell, you know how you\u2019re making this stuff really, efficiently building these component systems? Get your accessibility in there for that one component that you\u2019re making, and then you didn\u2019t have to worry about the accessibility anymore apart from the occasional spec change or update or what have you.\u201d<\/p>\n<p><span>Heydon:<\/span> Or just, I mean, probably most of the time, the iteration will simply be based on user feedback and ongoing research, which, obviously, you should be, as much as possible, conducting with a diverse group of people. So, you should be getting people who use different devices and have different browsing habits and use different assistive technologies and that kind of thing. And you know, things are bound to come up all the time. I think I\u2019ve really pinned down a component, think it\u2019s really rock solid, and then I do a bit of research and I find that I\u2019ve made some pretty bad assumptions. But yeah, with a component system you only have to fix it in one place.<\/p>\n<p><span>Drew:<\/span> Can a component ever be fully inclusive or is it a spectrum where you\u2019re just working ever more towards inclusivity?<\/p>\n<p><span>Heydon:<\/span> Yeah, it would be possible for a component to be, in terms of let\u2019s say WCAC error free, it meets all of the WCAC criteria, but as I said, that only takes you so far and it could still be entirely unusable or impossible to understand even with those technical criteria met. So yeah, this is something that I talk about a lot. I try to convince people that accessibility is like any other area of design, it\u2019s just a part of the design process and nothing can be perfectly designed just like nothing can be perfectly accessible. I think, unfortunately, a lot of folks think of it just in terms of just making sure that it is compatible with screen readers, which is obviously a very narrow scope in terms of accessibility and inclusion in general.<\/p>\n<p><span>Heydon:<\/span> So then, there will be people who, some good folks I\u2019ve worked with like at the Paciello Group, who would say, \u201cWell actually, I want to be known as a accessible UX person.\u201d So it\u2019s not just about this box ticking exercise, it\u2019s more about actually trying to make the experience better and more valuable for the greater number of people and move more towards sort of broader principles and things which are less binary. But ultimately, it\u2019s all that, and WCAC and other such criteria can only really identify the real hard and fast, \u201cThis is wrong,\u201d stuff, I suppose.<\/p>\n<p><span>Drew:<\/span> So if I\u2019m a developer, what should I be doing differently as I approach how I design and plan and build a component? Is there anything that I should be considering in my work to make sure that that component is going to end up being as inclusive as possible?<\/p>\n<p><span>Heydon:<\/span> So, I mean, depending on what you\u2019re building, there\u2019s going to be different criteria which need to be met. So, for instance, not every component is going to have the to have accessible imagery with alternative text, because it might not use imagery at all. It might just be text-based or what have you. Some might not be interactive. So, in terms of the specific requirements, then, it would change between component, but hopefully what some of my writing and what the Inclusive Components book helps you to do is to fall into or kind of adopt a discipline of just thinking inclusively.<\/p>\n<p><span>Heydon:<\/span> So, when you\u2019re approaching this stuff, not just thinking, well, basically just getting out of the mindset of, \u201cIf it works for me, it probably works for everyone else,\u201d because it\u2019s simply not the case that the way that you or I browse things, I mean, we\u2019ll probably do things completely differently, just us two, right?<\/p>\n<p><span>Drew:<\/span> Right.<\/p>\n<p><span>Heydon:<\/span> And we\u2019re Western, white, English as first language people. And so, yeah, the amount of diversity in terms of the people consuming this, I mean performance people always talk about this as well, people who are interested in advocating for better performance. You\u2019re used to using a high spec set up on a good network and a lot of your users or a lot of your potential users will certainly not be, and same with accessibility. It\u2019s just a question of, basically, just getting out of thinking about yourself, really. Literally just that. And trying, obviously, to reach out beyond just your immediate colleagues and people in your same social group as well.<\/p>\n<p><span>Heydon:<\/span> So hopefully, it\u2019s really just, \u201cHere\u2019s what I solved for this stuff,\u201d and what I was thinking about at the time. You can reuse some of those ideas and apply precisely what I\u2019ve applied, if that\u2019s useful or relevant to you. Hopefully, the book is more about just, \u201cHere is a case study of a person who tries to think inclusively. See, the kind of things they were thinking about, when you\u2019re designing something completely different, perhaps just employ the same kind of thinking and try and open your mind up to the diversity of of users and how they go about things.\u201d<\/p>\n<p><span>Drew:<\/span> So the book itself, how did you decide how to structure it? It seems very fiercely practical, which I like in a book, but how have you structured it?<\/p>\n<p><span>Heydon:<\/span> Very much like the previous book, actually was Inclusive Design Patterns and I had a lot of trouble that book, to begin with, because I tried to organize it in terms of kind of abstract criteria. So I started out doing a chapter which was all about keyboard accessibility, but that was very hard because then I had to kind of, every time I talked about a different type of keyboard accessibility or the thing that you have to think about, then I had to conjure some sort of component and then ditch that component and then move onto something else.<\/p>\n<p><span>Heydon:<\/span> And so, it just made more sense for me to organize things in terms of components themselves. So, Inclusive Design Patterns does this and now Inclusive Components is really just a continuation, which just covers different components. It\u2019s different in that, in terms of features, it\u2019s a bit different because it also includes live code examples and stuff, which I didn\u2019t do so much for the previous books. But yeah, it is literally just, \u201cWe\u2019re going to do this component,\u201d whether it\u2019s a tap interface or a collapsible section or a theme switcher or a notification flash card or toaster or whatever they\u2019re called, and then just everything is then organized around that component.<\/p>\n<p><span>Heydon:<\/span> So it\u2019s, \u201cThis is what we\u2019re doing and these are the things we should consider while we\u2019re doing it to be more inclusive,\u201d because that\u2019s how I work and that\u2019s how other folks work. And as soon as I started doing it like that, it was really just me working and writing notes as I worked. And so, the thing kind of wrote itself, and then all of the effort was really in actually just making sure that I was doing a decent job of making those things not inaccessible, I guess.<\/p>\n<p><span>Drew:<\/span> Yes, I mean the table of contents really reads almost like documentation or like a self-help manual or something. Straight in with chapter one, toggle buttons. If you want to implement some toggle buttons, go to this chapter, read it and you\u2019ll get everything you need to know about how to do that, which is an approach I really like. I see things like collapsible sections, tabbed interface, theme switches, data tables, loads of actual, real practical stuff that we\u2019re all building every day and I think we all, probably, could be building better.<\/p>\n<p><span>Heydon:<\/span> Yeah, that was totally the idea because it wasn\u2019t just about me making my components, it was a case, and you\u2019ve touched on it there, which I\u2019m glad you did, which is it was of identifying common patterns that we all use. So I mean, there\u2019s tab interfaces everywhere and they\u2019re all implemented differently and they\u2019re all implemented, variously, very badly. I mean, I\u2019ve implemented terrible tab interfaces and that I\u2019ve learned a little about how bad they were for people, and then I\u2019ve tried to make them a bit better and a bit better and a bit better. I\u2019ve probably made 15 or 16 different versions of tab interfaces in my time, having been doing this kind of thing for years now.<\/p>\n<p><span>Heydon:<\/span> And you know, they\u2019re getting a bit better, hopefully, every time. But it is just a common thing. It was a common thing that I would use quite often between different websites, I use and everyone uses. So, part of the idea was to say, \u201cWell, actually, let\u2019s do a design system, kind of an accessible design system for the web.\u201d Now, people are going to branch out and they\u2019re going to do their own versions of these things, but to kind of get the core stuff down and the accessibility is a core thing that should be in things. It shouldn\u2019t be an add on, it shouldn\u2019t be an either\/or, it shouldn\u2019t be a feature. It should be a core thing. And if you get that core stuff paired down, then yeah, hopefully people would look at the chapters and go, \u201cOh, okay, I\u2019ve made those. I\u2019ve seen those. Let\u2019s see how to do it as inclusively as possible,\u201d and then hopefully they get some value from that.<\/p>\n<p><span>Drew:<\/span> Well, what I like about it is, certainly I know I\u2019ve, in the past, I\u2019ve had some interface features I\u2019ve needed to implement and I know that it\u2019s going to be tricky from an accessibility point of view, say some sort of a fly out menu, drop down menu, something like that. I think, \u201cOkay, here be dragons in terms of accessibility. I need to make sure I do this right.\u201d And so, I Google for how to do it, I find a reputable source saying, \u201cUse this method,\u201d I use that method, I implement it and I move on, but I actually haven\u2019t learnt anything. I haven\u2019t learnt why the solution was that. And what I really like about the way you go into it in the book is I can do two things at once. I can figure out how I should be doing it and I can figure out why I should be doing it like that because it\u2019s all very carefully explained. So, I think it\u2019s really successful from that point of view.<\/p>\n<p><span>Heydon:<\/span> Oh, great. That was what I was going for. So that\u2019s good. But yeah, that seems to be my thing. I mean, I\u2019ve been working with the BBC for some months and we\u2019ve kind of made a thing a bit like Inclusive Components but for the BBC, so we\u2019ve done this sort of technical implementation with a through the lens of accessibility version of their design language called GEL. And yeah, it explains the why as well as the how and it\u2019s not a pattern, really. The idea is that the individual departments at the BBC, because there\u2019s so many of them, because it\u2019s such a large organization, so there\u2019ll be BBC Sport, BBC Weather, BBC News, they\u2019re the ones who would be taking care of the kind of technical stack and making their pattern library. And what we\u2019ve really provided is just, we\u2019ve just tried to exemplify the best practices. So it was really much more of a learning resource than a simple plug and play pattern library. Yeah.<\/p>\n<p><span>Drew:<\/span> Was it difficult deciding what patterns to include in the book? Was there anything that you left out?<\/p>\n<p><span>Heydon:<\/span> The only ones I really had problems with or second thoughts about were the ones where, the tab interface, for instance, I wasn\u2019t going to include, because I really hate tab interfaces, but then I had folks saying, \u201cCould you please do a tab interface? Could you include a chapter of that?\u201d Because I get asked to put them in my interface all the time by clients or whoever. So, I ended up doing one. But it\u2019s full of caveats. And the main caveat is, probably don\u2019t use a tab interface. Use maybe an accordion, it\u2019s a simpler interaction paradigm. It\u2019s easier to make responsive, it\u2019s easier to make compatible with screen readers, et cetera, et cetera.<\/p>\n<p><span>Heydon:<\/span> So I put all those caveats in. But yeah, and some of them were ones where I just thought, \u201cOh, I haven\u2019t written about this before and I could do with having sort of thought about it so that I could actually use it in my design work.\u201d And others were people requesting, saying, \u201cI know this is a gnarly one, I just don\u2019t know how to go about it. Could you give it a go?\u201d And so I gave it a go as best as I could. That is going to be the last time I write a book about accessibility because I\u2019ve done three now.<\/p>\n<p><span>Heydon:<\/span> So if anyone wants to know any more and if they think of any other components that they might want doing, just DM me on Twitter or something and I\u2019ll try and deal with it in that way rather than writing a whole article, because those articles are quite long and they take up quite a lot of time and I\u2019m kind of doing other things at the moment. But I\u2019m always happy to chat with anyone who has any questions about this stuff. They might be working on something similar to what I\u2019ve covered and there was just something that they were unsure about or which I, for whatever reason, I hadn\u2019t made as clear as they\u2019d liked it. Yeah, then just contact me because I\u2019m always happy to talk about the stuff because it helps me to sort of ruminate over things and try to, it might challenge my assumptions and help me to do a better job as well.<\/p>\n<p><span>Drew:<\/span> So, the book, Inclusive Components, is available right now from Smashing Magazine, smashingmagazine.com\/books, and I\u2019d recommend everybody check it out.<\/p>\n<p><span>Heydon:<\/span> Thank you.<\/p>\n<p><span>Drew:<\/span> So I always like to ask people, I mean, Smashing is all about learning, right, with the books, the conferences, the magazine, we\u2019re all about learning. What is it that you\u2019ve been learning lately?<\/p>\n<p><span>Heydon:<\/span> So, recently, well, a couple of years ago I made something, I made a drum machine using the web audio API called Beads and it\u2019s still available as a PWA, it\u2019s a progressive web app. If you Google search Beads GitHub or something like that, you should get the GitHub page which has it on there. But that was a alpha version and I\u2019m now working on doing a much more advanced version of this. And it\u2019s a different kind of drum machine because it\u2019s polymetric, it has different, you can have different tracks of different lengths. So you can have a track which has seven beats and a track which has nine beats, a track which has four beats. And then, the rhythm evolves over time because of the changing syncopation. You\u2019ve got these, it\u2019s multi-threaded.<\/p>\n<p><span>Heydon:<\/span> That was the main reason that I wanted to build it, because, as someone who\u2019s interested in kind of experimental music, that\u2019s something I wanted to play with. Obviously, I\u2019m trying to make this drum machine as accessible as possible. And that\u2019s been interesting from the point of view now that I\u2019m working with, I\u2019m turning it into an Electron app. So, for those of you that know Electron allows you to kind of wrap a sandbox version of Chromium browser and create a desktop application but using web technology, which was really great because it makes things, for this projects anyways, because it gets around a lot of performance problems.<\/p>\n<p><span>Heydon:<\/span> But also, although I\u2019ve been doing cross browser testing for 12 years now, it\u2019s really nice to have a break and just to design stuff for one browser. And it\u2019s got some, so there\u2019s a flag in Chromium. It\u2019s a, what\u2019s it called, an experimental web platform feature for focus visible. So I\u2019ve been able to make this drum machine completely keyboard accessible with these really nice, big focus outlines without those appearing for mouse users, because focus visible uses this heuristic where it detects whether or not you\u2019re using a keyboard. So that\u2019s been nice, to be able to incorporate that.<\/p>\n<p><span>Heydon:<\/span> But the thing recently that I\u2019ve been learning about, just I\u2019ve, I guess, been learning about some of the more advanced things you can do with the web audio API itself. So I had this problem where I have, you can put multiple sounds on one track so you can load in an array of audio files and it places them one after the other, and by default they overlap, so they\u2019ll always play out out, the audio buffer will play until it finishes. So if the next sounds comes before the end of that, it just overlaps, which is fine. It\u2019s kind of like a reverb or something. But sometimes if you\u2019re doing an arpeggio, like a baseline or something, you don\u2019t want them to open up. That\u2019s not how a bass guitar works, right? If you\u2019re on the same string, you press the next note, the first one has to finish.<\/p>\n<p><span>Heydon:<\/span> So, I was stopping a note as the next one started and there was always an audible popping sound and it\u2019s not the web audio API having a problem or anything like that. It\u2019s just the human ear will hear a kind of a nasty popping sound where you kind of sever away from. You just cut it, stop it dead, it\u2019s going to sound nasty. And then, so I found that there\u2019s a function as part of the web audio API, which allows you to choose a point where you can taper off the sound. And so I was able to detect where the sounds should end because the other sound is beginning, then taper it off very quickly, but it is a taper, like a fade out, rather than a hard cut off thing.<\/p>\n<p><span>Heydon:<\/span> So I solved that problem after it annoying me for ages. So it\u2019s basically been web audio API stuff and messing around with sounds because I\u2019ve always been into, as I say, into experimental music and messing about with that sort of stuff. And I\u2019m trying to write a talk about this. And in the talk, I\u2019m using Billy Jean by Michael Jackson because it\u2019s a very straight, fall to the floor rhythm and I\u2019m going to kind of warp it in various different ways. So I\u2019ve actually had to learn the parts for Billy Jean to kind of sequence that and stuff. So, weirdly enough, that was what I was doing before doing this podcast.<\/p>\n<p><span>Drew:<\/span> That sounds like a lot of fun. So if you, dear listener, would like to learn more about Heydon or hire him to consult on your projects, you can follow him on Twitter, where he\u2019s @heydonworks, or visit his website at heydonworks.com. Thanks for joining us, Heydon. Do you have any parting words?<\/p>\n<p><span>Heydon:<\/span> Goodbye.<\/p>\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-1.png?w=900&#038;ssl=1\" alt=\"Smashing Editorial\"><span>(dm, ra, il)<\/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>Smashing Podcast Episode 4 With Heydon Pickering: What Are Inclusive Components? Smashing Podcast Episode 4 With Heydon Pickering: What Are Inclusive Components? Drew McLellan 2019-12-03T05:00:00+00:002019-12-03T11:05:13+00:00 In this episode of the Smashing Podcast, Drew McLellan talks to Heydon Pickering about his new book, Inclusive Components. Heydon is known for his work and writing on Accessibility, so&#8230;<a class=\"moretag\" href=\"https:\/\/www.taterboy.com\/blog\/2019\/12\/smashing-podcast-episode-4-with-heydon-pickering-what-are-inclusive-components\/\"> Read the full article&#8230;<\/a><\/p>\n","protected":false},"author":4,"featured_media":73674,"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-73673","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=\"Smashing Podcast Episode 4 With Heydon Pickering: What Are Inclusive Components?Smashing Podcast Episode 4 With Heydon Pickering: What Are Inclusive Components? Drew McLellan 2019-12-03T05:00:00+00:002019-12-03T11:05:13+00:00 In this episode of the Smashing Podcast, Drew McLellan talks to Heydon Pickering about his new book, Inclusive Components. Heydon is known for his work and writing on Accessibility, so what\" \/>\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\/smashing-podcast-episode-4-with-heydon-pickering-what-are-inclusive-components\/\" \/>\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=\"Smashing Podcast Episode 4 With Heydon Pickering: What Are Inclusive Components? | Design for Immersive Technologies\" \/>\n\t\t<meta property=\"og:description\" content=\"Smashing Podcast Episode 4 With Heydon Pickering: What Are Inclusive Components?Smashing Podcast Episode 4 With Heydon Pickering: What Are Inclusive Components? Drew McLellan 2019-12-03T05:00:00+00:002019-12-03T11:05:13+00:00 In this episode of the Smashing Podcast, Drew McLellan talks to Heydon Pickering about his new book, Inclusive Components. Heydon is known for his work and writing on Accessibility, so what\" \/>\n\t\t<meta property=\"og:url\" content=\"https:\/\/www.taterboy.com\/blog\/2019\/12\/smashing-podcast-episode-4-with-heydon-pickering-what-are-inclusive-components\/\" \/>\n\t\t<meta property=\"article:published_time\" content=\"2019-12-03T11:17:51+00:00\" \/>\n\t\t<meta property=\"article:modified_time\" content=\"2019-12-03T11:17:51+00:00\" \/>\n\t\t<meta name=\"twitter:card\" content=\"summary\" \/>\n\t\t<meta name=\"twitter:title\" content=\"Smashing Podcast Episode 4 With Heydon Pickering: What Are Inclusive Components? | Design for Immersive Technologies\" \/>\n\t\t<meta name=\"twitter:description\" content=\"Smashing Podcast Episode 4 With Heydon Pickering: What Are Inclusive Components?Smashing Podcast Episode 4 With Heydon Pickering: What Are Inclusive Components? Drew McLellan 2019-12-03T05:00:00+00:002019-12-03T11:05:13+00:00 In this episode of the Smashing Podcast, Drew McLellan talks to Heydon Pickering about his new book, Inclusive Components. Heydon is known for his work and writing on Accessibility, so what\" \/>\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\\\/smashing-podcast-episode-4-with-heydon-pickering-what-are-inclusive-components\\\/#article\",\"name\":\"Smashing Podcast Episode 4 With Heydon Pickering: What Are Inclusive Components? | Design for Immersive Technologies\",\"headline\":\"Smashing Podcast Episode 4 With Heydon Pickering: What Are Inclusive Components?\",\"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\\\/heydon-pickering-author-image-opt.png?fit=450%2C450&ssl=1\",\"width\":450,\"height\":450},\"datePublished\":\"2019-12-03T04:17:51-07:00\",\"dateModified\":\"2019-12-03T04:17:51-07:00\",\"inLanguage\":\"en-US\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/2019\\\/12\\\/smashing-podcast-episode-4-with-heydon-pickering-what-are-inclusive-components\\\/#webpage\"},\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/2019\\\/12\\\/smashing-podcast-episode-4-with-heydon-pickering-what-are-inclusive-components\\\/#webpage\"},\"articleSection\":\"User Experience\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/2019\\\/12\\\/smashing-podcast-episode-4-with-heydon-pickering-what-are-inclusive-components\\\/#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\\\/smashing-podcast-episode-4-with-heydon-pickering-what-are-inclusive-components\\\/#listItem\",\"name\":\"Smashing Podcast Episode 4 With Heydon Pickering: What Are Inclusive Components?\"},\"previousItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog#listItem\",\"name\":\"Home\"}},{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/2019\\\/12\\\/smashing-podcast-episode-4-with-heydon-pickering-what-are-inclusive-components\\\/#listItem\",\"position\":3,\"name\":\"Smashing Podcast Episode 4 With Heydon Pickering: What Are Inclusive Components?\",\"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\\\/smashing-podcast-episode-4-with-heydon-pickering-what-are-inclusive-components\\\/#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\\\/smashing-podcast-episode-4-with-heydon-pickering-what-are-inclusive-components\\\/#webpage\",\"url\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/2019\\\/12\\\/smashing-podcast-episode-4-with-heydon-pickering-what-are-inclusive-components\\\/\",\"name\":\"Smashing Podcast Episode 4 With Heydon Pickering: What Are Inclusive Components? | Design for Immersive Technologies\",\"description\":\"Smashing Podcast Episode 4 With Heydon Pickering: What Are Inclusive Components?Smashing Podcast Episode 4 With Heydon Pickering: What Are Inclusive Components? Drew McLellan 2019-12-03T05:00:00+00:002019-12-03T11:05:13+00:00 In this episode of the Smashing Podcast, Drew McLellan talks to Heydon Pickering about his new book, Inclusive Components. Heydon is known for his work and writing on Accessibility, so what\",\"inLanguage\":\"en-US\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/#website\"},\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/2019\\\/12\\\/smashing-podcast-episode-4-with-heydon-pickering-what-are-inclusive-components\\\/#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\\\/heydon-pickering-author-image-opt.png?fit=450%2C450&ssl=1\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/2019\\\/12\\\/smashing-podcast-episode-4-with-heydon-pickering-what-are-inclusive-components\\\/#mainImage\",\"width\":450,\"height\":450},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/2019\\\/12\\\/smashing-podcast-episode-4-with-heydon-pickering-what-are-inclusive-components\\\/#mainImage\"},\"datePublished\":\"2019-12-03T04:17:51-07:00\",\"dateModified\":\"2019-12-03T04:17:51-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":"Smashing Podcast Episode 4 With Heydon Pickering: What Are Inclusive Components? | Design for Immersive Technologies","description":"Smashing Podcast Episode 4 With Heydon Pickering: What Are Inclusive Components?Smashing Podcast Episode 4 With Heydon Pickering: What Are Inclusive Components? Drew McLellan 2019-12-03T05:00:00+00:002019-12-03T11:05:13+00:00 In this episode of the Smashing Podcast, Drew McLellan talks to Heydon Pickering about his new book, Inclusive Components. Heydon is known for his work and writing on Accessibility, so what","canonical_url":"https:\/\/www.taterboy.com\/blog\/2019\/12\/smashing-podcast-episode-4-with-heydon-pickering-what-are-inclusive-components\/","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\/smashing-podcast-episode-4-with-heydon-pickering-what-are-inclusive-components\/#article","name":"Smashing Podcast Episode 4 With Heydon Pickering: What Are Inclusive Components? | Design for Immersive Technologies","headline":"Smashing Podcast Episode 4 With Heydon Pickering: What Are Inclusive Components?","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\/heydon-pickering-author-image-opt.png?fit=450%2C450&ssl=1","width":450,"height":450},"datePublished":"2019-12-03T04:17:51-07:00","dateModified":"2019-12-03T04:17:51-07:00","inLanguage":"en-US","mainEntityOfPage":{"@id":"https:\/\/www.taterboy.com\/blog\/2019\/12\/smashing-podcast-episode-4-with-heydon-pickering-what-are-inclusive-components\/#webpage"},"isPartOf":{"@id":"https:\/\/www.taterboy.com\/blog\/2019\/12\/smashing-podcast-episode-4-with-heydon-pickering-what-are-inclusive-components\/#webpage"},"articleSection":"User Experience"},{"@type":"BreadcrumbList","@id":"https:\/\/www.taterboy.com\/blog\/2019\/12\/smashing-podcast-episode-4-with-heydon-pickering-what-are-inclusive-components\/#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\/smashing-podcast-episode-4-with-heydon-pickering-what-are-inclusive-components\/#listItem","name":"Smashing Podcast Episode 4 With Heydon Pickering: What Are Inclusive Components?"},"previousItem":{"@type":"ListItem","@id":"https:\/\/www.taterboy.com\/blog#listItem","name":"Home"}},{"@type":"ListItem","@id":"https:\/\/www.taterboy.com\/blog\/2019\/12\/smashing-podcast-episode-4-with-heydon-pickering-what-are-inclusive-components\/#listItem","position":3,"name":"Smashing Podcast Episode 4 With Heydon Pickering: What Are Inclusive Components?","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\/smashing-podcast-episode-4-with-heydon-pickering-what-are-inclusive-components\/#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\/smashing-podcast-episode-4-with-heydon-pickering-what-are-inclusive-components\/#webpage","url":"https:\/\/www.taterboy.com\/blog\/2019\/12\/smashing-podcast-episode-4-with-heydon-pickering-what-are-inclusive-components\/","name":"Smashing Podcast Episode 4 With Heydon Pickering: What Are Inclusive Components? | Design for Immersive Technologies","description":"Smashing Podcast Episode 4 With Heydon Pickering: What Are Inclusive Components?Smashing Podcast Episode 4 With Heydon Pickering: What Are Inclusive Components? Drew McLellan 2019-12-03T05:00:00+00:002019-12-03T11:05:13+00:00 In this episode of the Smashing Podcast, Drew McLellan talks to Heydon Pickering about his new book, Inclusive Components. Heydon is known for his work and writing on Accessibility, so what","inLanguage":"en-US","isPartOf":{"@id":"https:\/\/www.taterboy.com\/blog\/#website"},"breadcrumb":{"@id":"https:\/\/www.taterboy.com\/blog\/2019\/12\/smashing-podcast-episode-4-with-heydon-pickering-what-are-inclusive-components\/#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\/heydon-pickering-author-image-opt.png?fit=450%2C450&ssl=1","@id":"https:\/\/www.taterboy.com\/blog\/2019\/12\/smashing-podcast-episode-4-with-heydon-pickering-what-are-inclusive-components\/#mainImage","width":450,"height":450},"primaryImageOfPage":{"@id":"https:\/\/www.taterboy.com\/blog\/2019\/12\/smashing-podcast-episode-4-with-heydon-pickering-what-are-inclusive-components\/#mainImage"},"datePublished":"2019-12-03T04:17:51-07:00","dateModified":"2019-12-03T04:17:51-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":"Smashing Podcast Episode 4 With Heydon Pickering: What Are Inclusive Components? | Design for Immersive Technologies","og:description":"Smashing Podcast Episode 4 With Heydon Pickering: What Are Inclusive Components?Smashing Podcast Episode 4 With Heydon Pickering: What Are Inclusive Components? Drew McLellan 2019-12-03T05:00:00+00:002019-12-03T11:05:13+00:00 In this episode of the Smashing Podcast, Drew McLellan talks to Heydon Pickering about his new book, Inclusive Components. Heydon is known for his work and writing on Accessibility, so what","og:url":"https:\/\/www.taterboy.com\/blog\/2019\/12\/smashing-podcast-episode-4-with-heydon-pickering-what-are-inclusive-components\/","article:published_time":"2019-12-03T11:17:51+00:00","article:modified_time":"2019-12-03T11:17:51+00:00","twitter:card":"summary","twitter:title":"Smashing Podcast Episode 4 With Heydon Pickering: What Are Inclusive Components? | Design for Immersive Technologies","twitter:description":"Smashing Podcast Episode 4 With Heydon Pickering: What Are Inclusive Components?Smashing Podcast Episode 4 With Heydon Pickering: What Are Inclusive Components? Drew McLellan 2019-12-03T05:00:00+00:002019-12-03T11:05:13+00:00 In this episode of the Smashing Podcast, Drew McLellan talks to Heydon Pickering about his new book, Inclusive Components. Heydon is known for his work and writing on Accessibility, so what"},"aioseo_meta_data":{"post_id":"73673","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:27:49","updated":"2026-09-02 15:05:51","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\tSmashing Podcast Episode 4 With Heydon Pickering: What Are Inclusive Components?\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":"Smashing Podcast Episode 4 With Heydon Pickering: What Are Inclusive Components?","link":"https:\/\/www.taterboy.com\/blog\/2019\/12\/smashing-podcast-episode-4-with-heydon-pickering-what-are-inclusive-components\/"}],"jetpack_publicize_connections":[],"jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/p8wzr5-jah","jetpack_featured_media_url":"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/12\/heydon-pickering-author-image-opt.png?fit=450%2C450&ssl=1","_links":{"self":[{"href":"https:\/\/www.taterboy.com\/blog\/wp-json\/wp\/v2\/posts\/73673","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=73673"}],"version-history":[{"count":0,"href":"https:\/\/www.taterboy.com\/blog\/wp-json\/wp\/v2\/posts\/73673\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.taterboy.com\/blog\/wp-json\/wp\/v2\/media\/73674"}],"wp:attachment":[{"href":"https:\/\/www.taterboy.com\/blog\/wp-json\/wp\/v2\/media?parent=73673"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.taterboy.com\/blog\/wp-json\/wp\/v2\/categories?post=73673"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.taterboy.com\/blog\/wp-json\/wp\/v2\/tags?post=73673"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}