Categories
Online Marketing

Accessibility with Marcy Sutton – The State of the Web

”. My guest is Marcy Sutton Head of Learning at Gatsby and former Developer Advocate at Deque Systems and today we’re talking About web accessibility, Let’s get started: [ MUSIC PLAYING ], So Marcy thanks for being here. What exactly does Accessibility mean MARCY SUTTON To me. It Means building websites that include people With disabilities, both building for People with disabilities and with people With disabilities, including them as Stakeholders hiring them to work on our teams.

Paying them for their work to review things. For accessibility and give us feedback Along the way, RICK VISCOMI, So when a Website isn’t accessible. What’s at stake, MARCY SUTTON A lot! If you think about how many Services are moving online if accessibility isn’t Built in then, it could present Barriers for people with disabilities, where They can’t use the service They might give up and Leave or worse, it might cause harm to Them if they have something like a traumatic Brain injury or seizure risk So there’s actually Quite a bit at stake if the web isn’t accessible, RICK VISCOMI, So even with The Domino’s lawsuit recently that came out where They lost their appeal.

Do you think that Websites will actually have a push towards more Accessible websites, especially now that lawyers Realize the legal risk MARCY SUTTON In The United States legislation can certainly Help and people can lean on the Law in this country to enforce their civil rights, So having rulings like The Domino’s ruling could potentially Help since there has been an absence of rulings, In favor of including websites under the Americans, With Disabilities Act, but I think there will be More to read in that space I have seen and read and Heard about companies looking at competitors, That have been sued and sort of feeling like Oh, maybe we’re next, so there can be some Market pressure, if there are legal actions being taken And if that’s what it takes, To make something accessible, then I think that’s moving.

In the right direction, RICK VISCOMI, Where do The breakdowns typically happen when a website Becomes inaccessible, Are the managers just Not buying into it Are the developers unaware Of the importance of it, lack of developer Tools all of the above MARCY SUTTON, I think It’s mostly an education issue and awareness, So to sort of try and Solve this problem, I advocate building a Culture around accessibility, so that everyone at the company Is involved and invested From project managers to Designers and developers, we all have a part to play in Making the web more accessible – And it is true that A lot of people just aren’t aware of the Impact that they could have There’s also the misconceptions That accessibility is costly and maybe not worth it.

It’s too niche of an audience, But actually it can improve. Things for a lot of people, If you think of it in Terms of inclusive design, the benefits that we Put into our websites like keyword, support, improving Contrast and font size those can help a lot of people, So it’s definitely worth it. And it’s easier and less costly. If you do it from the beginning, RICK VISCOMI. Is it something –? 10 % of the population has Some form of disability, so it’s more than niche, It actually affects A lot of people, MARCY SUTTON – I think it’s More than that, actually one in five people – RICK VISCOMI, Oh wow, MARCY SUTTON And the range of Disabilities is pretty wide, so there’s all Kinds of scenarios that people can be Browsing your website and they might have situational Or temporary disabilities People are born With disabilities There’s a whole spectrum of How people use the web that’s really kind of beautiful And if we can Embrace that, like we did with responsive Design and letting go of some of that control.

Over pixel perfection and how the user actually Visits our website there’s some real opportunities. There to innovate and make things that are way more robust, RICK VISCOMI. What did you Mean by situational disability, MARCY SUTTON, If You break your arm if you have a baby in one arm. Or a cup of tea or coffee, you might hold your Phone in a different way or have to switch arms If you are born with Something like that, you might permanently not Be able to use your arms, And so you have to use other Input modalities like voice, or maybe you use a joystick With your mouth or something And so there’s new Devices and ways of navigating that don’t rely.

On the default of perfectly working limbs and the abilities That most people, think of So there are some Opportunities and people are pretty resilient. They figure out ways. To navigate the web And if we can Support them better, then that’s pretty awesome, RICK VISCOMI That Reminds me of Android Auto, where, if I’m driving My car, my phone, is not necessarily a thing. I’r putting Right directly, in my face So their way of Interfacing with devices changes entirely depending On your situation, MARCY SUTTON, Yes and a Lot of those technologies were developed for People with disabilities, so it’s worth Considering that, maybe some of the things that We appreciate, and we can use every day were invented.

For people who needed it, RICK VISCOMI, I want to go back. To something that you mentioned earlier about having Users with disabilities, or even people with Disabilities on your team, as part of the Development process, How can you implement Accessibility as part of the Process in a way that ensures that the website’s Going to be accessible, MARCY, SUTTON Well, Certainly including people on your teams to be Stakeholders and provide feedback in regular intervals.

That would be the best way. Is to have people embedded on your teams who Have disabilities mainly because they Have experiences and perspectives that, as Able-Bodied developers, we just can’t make that up. It’s not your lived experience. So having that feedback, all the Time would be truly valuable And people get to Work on your teams and you pay them for Their work and I think that’s a really good way to go: RICK VISCOMI, How about Part of the design process, If a website, for example, Is built to be entirely using Canvas or Flash or Something if people have a specific technology, In mind where it’s just never going to be accessible, How can you actually prevent that from happening Where, in the design Process, do you actually make those decisions? To be accessible, MARCY SUTTON, I think Having some requirements about how users should be able To navigate the site should definitely start in design, I mean hopefully you’re Not getting too locked down on a given technology, — RICK, VISCOMI Hopefully not Flash MARCY SUTTON — in The design phase Yeah Flash no way But Canvas –.

There have Been whole websites built with Canvas And accessibility Unfortunately, was an afterthought in A lot of those cases – And we do have some Standards for Canvas that are better than They were four years ago, but you still have To re-implement a lot of native Functionality that you would get for free if you used The DOM or the Document Object Model RICK VISCOMI. Are you referring To the Accessibility Object Model, MARCY SUTTON, No, So with Canvas.

If you Provide fallback content, there’s a method called Draw focus if needed, You can pass off some Of these interactions from the two-dimensional Canvas Which is essentially a bitmap to that fallback content. And try to create some sort of a Semantic experience, but that’s a lot of work And if you can use the Document Object Model which does feed into what’s. Called the accessibility tree –, which is a fancy Term for a structure with accessibility, information – –: you can do a lot and Communicate to users of assistive technology, What’s going on on the screen, RICK VISCOMI, What’s the Current state of accessibility in developer tools, Either in the browser or as part of testing MARCY SUTTON, Pretty Great actually From when I got started as a Front-End developer everything for accessibility in terms Of this accessibility tree that I mentioned all Of that information was sort of hidden Under the hood And you had to go, Crawl through the Dom and go look at what was on The page and sort of just know what was going on there And now we have developer tools.

Like in Chrome and in Firefox, and it’s amazing how much you Can learn about accessibility through those tools? It would be great to Have more but we’ve come a really long way. Both with built-in dev tools and browser extensions, And automated tools, so I think the future is pretty Bright in terms of tooling RICK VISCOMI, What was your Experience with axe-core and what did it do? Marcy SUTTON, axe-core Is an accessibility API written with JavaScript? It’s an open source library that I used to work on full-time And it’s used in both Lighthouse And Accessibility, Insights from Microsoft, so it’s sort of An engine and a common rule set for testing accessibility And its used a lot of places.

It’s pretty cool, There’s other APIs. As well like WAVE and some others that aren’t Coming to mind at the moment, but it’s nice to have a common Set of rules and the engine that people can Count on and they can use it in different ways: Such as in browser extensions and in automated tooling To use a common rule set so that some Testers on your team aren’t using a different set. Of rules than the developers, for example, Because then you’re working Off two different sets of requirements, and it can Be hard to meet in the middle RICK VISCOMI You had Mentioned that axe-core’s integrated with Lighthouse The HTTP Archive runs Lighthouse On 5 million websites, so we can get some Of that analysis from axe-core aggregated To the scale of the web, I actually have a few stats, So 22 % of web pages tested Passed the color contrast audit from axe-core 50 % of pages are passing the Lighthouse image alt attribute being present audit, So it’s kind of surprising To see how low accessibility adoption is in certain Areas of the web and having a tool like Axe-Core is just really great to be able to get That visibility, MARCY SUTTON, Sadly It’s actually better than I expected RICK VISCOMI That Is pretty sad, MARCY SUTTON? It is sad Yeah, it’s depressing.

There is a project from WebAIM Called The WebAIM Million, where they ran the WAVE automated tool. Against the top 1 million home pages – And that was also a Very sad set of results because, as an industry, We have a lot more work to do a lot of work to Do to make that better Tools are helpful. In highlighting some of these low-hanging fruit, Things that we need to fix. But if we look at It in aggregate the picture is not very Pretty at the moment, RICK VISCOMI You Co-Authored “ Smashing Book 6” with your chapter titled “ Accessibility in Times of Single-Page, Apps.

”. So in what ways do accessibility, And single-page apps not play well together: MARCY SUTTON, Quite A few, unfortunately, I mean all of the Basics of accessibility apply if you’re building A website that’s heavy, with JavaScript So things like image, alt text and color contrast, But when we have this Javascript layer, that’s taking over a lot of The interactions that would be happening, In a web browser, we have to do a bit more To support users who are navigating with Assistive technology and using the keyboard Things like focus management, making announcements Using unobtrusive motion, If we’re using a Lot of JavaScript to try and delight Users, we have to try not to cause Harm with those But I’d say, probably the Focus management piece is the biggest Thing that we have to handle because If the browser is not refreshing, the page When the page changes a user using a Keyboard might be stuck in the prior part of The screen, or they have no idea what happened – If they’re in a screen reader or something So we have to manage Their experience going through the Application and that can be pretty cool.

Actually, I think it’s another area, That we can innovate And I’m hoping that frameworks And potentially browsers could help make this easier, So that would be a good space. To try and move the needle a bit to support developers without Them all having to re-implement all of the same things: RICK VISCOMI, Even kind of More of an old-school UI component, like modal dialogs Has its own focus problems? Can you describe some of The accessibility issues with modal dialogs and What’s being done on the HTML standard side to fix that MARCY, SUTTON Sure yeah, So modal dialogs are An example of some of these same Things I was talking about with focus management, So you have a layer that Opens up over the screen, It probably has content Behind it, maybe a screen curtain to gray it out When that modal opens, you Have to send focus into it, so the keyboard user Or screen reader user is in the right.

Part of the page they’re not left behind The modal window, So that means that you Also need to disable any interactive content. Behind that modal window and that part can Get pretty tricky You have to do some DOM Walking potentially set aria-hidden and tabindex On interactive controls and most people are not Going to do that DOM walking It’s hard. It’s expensive performance, Wise and you have to do it –, you know every time the modal Opens walk it down and –.

It’s like you’re doing it. In inverse both directions, So what would be great Is in the standard space, if we could have Something like HTML inert. It’s an attribute that Was proposed a while back, I think it was at Risk of being removed – and nobody is convinced, That we really need it. This is me officially Saying yes, we need it because the alternative Is a lot of DOM walking that, frankly, very little People are going to do So.

What that would do for us Is make it a lot easier to set a Boolean attribute in Html to effectively disable whole subtrees of the HTML Dom And that way when we send focus into a Modal, we don’t have to do as much in the background. It helps to have Sibling elements, so maybe the modal and the Content behind it are siblings. That way, you can just turn Off all the other content, So that does take a bit Of work from the developer to structure their DOM that Way, but that attribute would solve a whole Lot of pain, as well as the dialog element in HTML, That’s another one.

That’s At risk of being removed, I think it’s Firefox At this point that we need to implement dialog That could give us some of this Behavior for free, like focus management having a Semantic HTML element that would tell users of Assistive technology that it is a dialogue, So there’s some Patterns here that — to have every Developer in the world have to re-implement the same Things over and over again, it seems like we should Have some more primitives for making that easier, RICK, VISCOMI Yeah That sounds super important MARCY SUTTON And complicated [ CHUCKLING ], RICK VISCOMI, You’ve advocated In the past, for something called an accessibility, Statement, What is that, and why is that? So good for accessibility, MARCY, SUTTON, Accessibility, Statements are great tools, no matter what kind of a website You’re making, whether it’s with heavy JavaScript or not So an accessibility, Statement is generally a page on your website.

That’s easy to find: maybe it’s linked. Your website footer, and it has things Like what you’re doing to improve accessibility, Maybe what level of the Web Content Accessibility Guidelines? That you’re aiming for It’s nice to have that Goal and that target whether or not you’ve Actually met it, but you have to keep actively Working at that to improve You can also collect Any accessibility, tips or information about Keyboard shortcuts or ways to use your website For accessibility and ways for users To contact you, That’s one of the Most important pieces having an affirmative Statement that says: hey, we might not Be perfect at this, but we’d love your feedback.

And get in touch with us And if people do Act on that feedback, So it’s opening That conversation to bring people in and Make them feel included and give them a way To give you feedback, Because a lot of These websites that have glaring Accessibility issues: we have no way to contact them, So you might see some tweets Of people calling out companies because they can’t use the Website or the service, Maybe an update to the Website or application breaks, what used to work? So if you have That statement it gives people a way to contact You in an official blog so that you can act On that feedback, RICK VISCOMI, It must be really Reassuring to go to a website and see that they actually Care about accessibility, MARCY, SUTTON, Absolutely RICK, VISCOMI, So What resources would you recommend for Web developers, who want to learn more about Creating accessible websites, MARCY SUTTON, So many –, The A11Y Project, Is really great? There’s an accessibility, Course, from Alice Boxhall and Rob Dodson at Google, on Udacity, I have a page on my website.

It’s MarcySutton.Com, There’s a web accessibility. Resources guide there and I collect things like Books and tools and articles and things that I refer to a lot There’s quite a bit out there. From companies like WebAIM, They have really great articles Deque. My former employer has A thing called Deque University: They offer free Accessibility, training to people with disabilities; Which is really great So there’s definitely a wealth.

Of information out there Just getting it to the people, To solve this education problem is sort of the gap that We need to figure out RICK VISCOMI And how About No Mouse Mondays, or what do you call it? Marcy SUTTON? Yes, I released an npm Package this week to sort of put a tool in the Hands of developers to turn off the mouse cursor for everyone, It was sort of a Joke but it actually could be useful as a Dev tool so something to pull into your Project maybe one day a week to actually have a No mouse day of the week, RICK VISCOMI, That reminds me Of 2G Tuesdays or something to get the feel for Slow performance, MARCY, SUTTON, Yeah, RICK VISCOMI.

I think That’s a good idea: MARCY SUTTON Yeah, It’s sort of a Chaos Monkey Approach to things of you know, if you Unplug, your mouse or don’t have that capability. How resilient is your design? Can you actually use it And some of the most Glaring accessibility challenges I see are with color Contrast and a lack of keyboard access, So if we could Somehow, culturally, build in tools and processes. To get us thinking about that, that would help So the No-Mouse Mondays is the First experimental version, but I have plans for it: RICK VISCOMI, It’s a good idea, All right Marcy.

This has been great Thanks for coming on the show MARCY SUTTON. Thank you. So much for having me RICK VISCOMI, You Can check out links to everything we talked about? In the description below, Thanks for reading and We’ll see you next time, [ MUSIC PLAYING ]


 

Categories
Online Marketing

Accessibility with Marcy Sutton – The State of the Web

”. My guest is Marcy Sutton Head of Learning at Gatsby and former Developer Advocate at Deque Systems and today we’re talking About web accessibility, Let’s get started: [ MUSIC PLAYING ], So Marcy thanks for being here. What exactly does Accessibility mean MARCY SUTTON To me. It Means building websites that include people With disabilities, both building for People with disabilities and with people With disabilities, including them as Stakeholders hiring them to work on our teams.

Paying them for their work to review things. For accessibility and give us feedback Along the way, RICK VISCOMI, So when a Website isn’t accessible. What’s at stake, MARCY SUTTON A lot! If you think about how many Services are moving online if accessibility isn’t Built in then, it could present Barriers for people with disabilities, where They can’t use the service They might give up and Leave or worse, it might cause harm to Them if they have something like a traumatic Brain injury or seizure risk So there’s actually Quite a bit at stake if the web isn’t accessible, RICK VISCOMI, So even with The Domino’s lawsuit recently that came out where They lost their appeal.

Do you think that Websites will actually have a push towards more Accessible websites, especially now that lawyers Realize the legal risk MARCY SUTTON In The United States legislation can certainly Help and people can lean on the Law in this country to enforce their civil rights, So having rulings like The Domino’s ruling could potentially Help since there has been an absence of rulings, In favor of including websites under the Americans, With Disabilities Act, but I think there will be More to read in that space I have seen and read and Heard about companies looking at competitors, That have been sued and sort of feeling like Oh, maybe we’re next, so there can be some Market pressure, if there are legal actions being taken And if that’s what it takes, To make something accessible, then I think that’s moving.

In the right direction, RICK VISCOMI, Where do The breakdowns typically happen when a website Becomes inaccessible, Are the managers just Not buying into it Are the developers unaware Of the importance of it, lack of developer Tools all of the above MARCY SUTTON, I think It’s mostly an education issue and awareness, So to sort of try and Solve this problem, I advocate building a Culture around accessibility, so that everyone at the company Is involved and invested From project managers to Designers and developers, we all have a part to play in Making the web more accessible – And it is true that A lot of people just aren’t aware of the Impact that they could have There’s also the misconceptions That accessibility is costly and maybe not worth it.

It’s too niche of an audience, But actually it can improve. Things for a lot of people, If you think of it in Terms of inclusive design, the benefits that we Put into our websites like keyword, support, improving Contrast and font size those can help a lot of people, So it’s definitely worth it. And it’s easier and less costly. If you do it from the beginning, RICK VISCOMI. Is it something –? 10 % of the population has Some form of disability, so it’s more than niche, It actually affects A lot of people, MARCY SUTTON – I think it’s More than that, actually one in five people – RICK VISCOMI, Oh wow, MARCY SUTTON And the range of Disabilities is pretty wide, so there’s all Kinds of scenarios that people can be Browsing your website and they might have situational Or temporary disabilities People are born With disabilities There’s a whole spectrum of How people use the web that’s really kind of beautiful And if we can Embrace that, like we did with responsive Design and letting go of some of that control.

Over pixel perfection and how the user actually Visits our website there’s some real opportunities. There to innovate and make things that are way more robust, RICK VISCOMI. What did you Mean by situational disability, MARCY SUTTON, If You break your arm if you have a baby in one arm. Or a cup of tea or coffee, you might hold your Phone in a different way or have to switch arms If you are born with Something like that, you might permanently not Be able to use your arms, And so you have to use other Input modalities like voice, or maybe you use a joystick With your mouth or something And so there’s new Devices and ways of navigating that don’t rely.

On the default of perfectly working limbs and the abilities That most people, think of So there are some Opportunities and people are pretty resilient. They figure out ways. To navigate the web And if we can Support them better, then that’s pretty awesome, RICK VISCOMI That Reminds me of Android Auto, where, if I’m driving My car, my phone, is not necessarily a thing. I’r putting Right directly, in my face So their way of Interfacing with devices changes entirely depending On your situation, MARCY SUTTON, Yes and a Lot of those technologies were developed for People with disabilities, so it’s worth Considering that, maybe some of the things that We appreciate, and we can use every day were invented.

For people who needed it, RICK VISCOMI, I want to go back. To something that you mentioned earlier about having Users with disabilities, or even people with Disabilities on your team, as part of the Development process, How can you implement Accessibility as part of the Process in a way that ensures that the website’s Going to be accessible, MARCY, SUTTON Well, Certainly including people on your teams to be Stakeholders and provide feedback in regular intervals.

That would be the best way. Is to have people embedded on your teams who Have disabilities mainly because they Have experiences and perspectives that, as Able-Bodied developers, we just can’t make that up. It’s not your lived experience. So having that feedback, all the Time would be truly valuable And people get to Work on your teams and you pay them for Their work and I think that’s a really good way to go: RICK VISCOMI, How about Part of the design process, If a website, for example, Is built to be entirely using Canvas or Flash or Something if people have a specific technology, In mind where it’s just never going to be accessible, How can you actually prevent that from happening Where, in the design Process, do you actually make those decisions? To be accessible, MARCY SUTTON, I think Having some requirements about how users should be able To navigate the site should definitely start in design, I mean hopefully you’re Not getting too locked down on a given technology, — RICK, VISCOMI Hopefully not Flash MARCY SUTTON — in The design phase Yeah Flash no way But Canvas –.

There have Been whole websites built with Canvas And accessibility Unfortunately, was an afterthought in A lot of those cases – And we do have some Standards for Canvas that are better than They were four years ago, but you still have To re-implement a lot of native Functionality that you would get for free if you used The DOM or the Document Object Model RICK VISCOMI. Are you referring To the Accessibility Object Model, MARCY SUTTON, No, So with Canvas.

If you Provide fallback content, there’s a method called Draw focus if needed, You can pass off some Of these interactions from the two-dimensional Canvas Which is essentially a bitmap to that fallback content. And try to create some sort of a Semantic experience, but that’s a lot of work And if you can use the Document Object Model which does feed into what’s. Called the accessibility tree –, which is a fancy Term for a structure with accessibility, information – –: you can do a lot and Communicate to users of assistive technology, What’s going on on the screen, RICK VISCOMI, What’s the Current state of accessibility in developer tools, Either in the browser or as part of testing MARCY SUTTON, Pretty Great actually From when I got started as a Front-End developer everything for accessibility in terms Of this accessibility tree that I mentioned all Of that information was sort of hidden Under the hood And you had to go, Crawl through the Dom and go look at what was on The page and sort of just know what was going on there And now we have developer tools.

Like in Chrome and in Firefox, and it’s amazing how much you Can learn about accessibility through those tools? It would be great to Have more but we’ve come a really long way. Both with built-in dev tools and browser extensions, And automated tools, so I think the future is pretty Bright in terms of tooling RICK VISCOMI, What was your Experience with axe-core and what did it do? Marcy SUTTON, axe-core Is an accessibility API written with JavaScript? It’s an open source library that I used to work on full-time And it’s used in both Lighthouse And Accessibility, Insights from Microsoft, so it’s sort of An engine and a common rule set for testing accessibility And its used a lot of places.

It’s pretty cool, There’s other APIs. As well like WAVE and some others that aren’t Coming to mind at the moment, but it’s nice to have a common Set of rules and the engine that people can Count on and they can use it in different ways: Such as in browser extensions and in automated tooling To use a common rule set so that some Testers on your team aren’t using a different set. Of rules than the developers, for example, Because then you’re working Off two different sets of requirements, and it can Be hard to meet in the middle RICK VISCOMI You had Mentioned that axe-core’s integrated with Lighthouse The HTTP Archive runs Lighthouse On 5 million websites, so we can get some Of that analysis from axe-core aggregated To the scale of the web, I actually have a few stats, So 22 % of web pages tested Passed the color contrast audit from axe-core 50 % of pages are passing the Lighthouse image alt attribute being present audit, So it’s kind of surprising To see how low accessibility adoption is in certain Areas of the web and having a tool like Axe-Core is just really great to be able to get That visibility, MARCY SUTTON, Sadly It’s actually better than I expected RICK VISCOMI That Is pretty sad, MARCY SUTTON? It is sad Yeah, it’s depressing.

There is a project from WebAIM Called The WebAIM Million, where they ran the WAVE automated tool. Against the top 1 million home pages – And that was also a Very sad set of results because, as an industry, We have a lot more work to do a lot of work to Do to make that better Tools are helpful. In highlighting some of these low-hanging fruit, Things that we need to fix. But if we look at It in aggregate the picture is not very Pretty at the moment, RICK VISCOMI You Co-Authored “ Smashing Book 6” with your chapter titled “ Accessibility in Times of Single-Page, Apps.

”. So in what ways do accessibility, And single-page apps not play well together: MARCY SUTTON, Quite A few, unfortunately, I mean all of the Basics of accessibility apply if you’re building A website that’s heavy, with JavaScript So things like image, alt text and color contrast, But when we have this Javascript layer, that’s taking over a lot of The interactions that would be happening, In a web browser, we have to do a bit more To support users who are navigating with Assistive technology and using the keyboard Things like focus management, making announcements Using unobtrusive motion, If we’re using a Lot of JavaScript to try and delight Users, we have to try not to cause Harm with those But I’d say, probably the Focus management piece is the biggest Thing that we have to handle because If the browser is not refreshing, the page When the page changes a user using a Keyboard might be stuck in the prior part of The screen, or they have no idea what happened – If they’re in a screen reader or something So we have to manage Their experience going through the Application and that can be pretty cool.

Actually, I think it’s another area, That we can innovate And I’m hoping that frameworks And potentially browsers could help make this easier, So that would be a good space. To try and move the needle a bit to support developers without Them all having to re-implement all of the same things: RICK VISCOMI, Even kind of More of an old-school UI component, like modal dialogs Has its own focus problems? Can you describe some of The accessibility issues with modal dialogs and What’s being done on the HTML standard side to fix that MARCY, SUTTON Sure yeah, So modal dialogs are An example of some of these same Things I was talking about with focus management, So you have a layer that Opens up over the screen, It probably has content Behind it, maybe a screen curtain to gray it out When that modal opens, you Have to send focus into it, so the keyboard user Or screen reader user is in the right.

Part of the page they’re not left behind The modal window, So that means that you Also need to disable any interactive content. Behind that modal window and that part can Get pretty tricky You have to do some DOM Walking potentially set aria-hidden and tabindex On interactive controls and most people are not Going to do that DOM walking It’s hard. It’s expensive performance, Wise and you have to do it –, you know every time the modal Opens walk it down and –.

It’s like you’re doing it. In inverse both directions, So what would be great Is in the standard space, if we could have Something like HTML inert. It’s an attribute that Was proposed a while back, I think it was at Risk of being removed – and nobody is convinced, That we really need it. This is me officially Saying yes, we need it because the alternative Is a lot of DOM walking that, frankly, very little People are going to do So.

What that would do for us Is make it a lot easier to set a Boolean attribute in Html to effectively disable whole subtrees of the HTML Dom And that way when we send focus into a Modal, we don’t have to do as much in the background. It helps to have Sibling elements, so maybe the modal and the Content behind it are siblings. That way, you can just turn Off all the other content, So that does take a bit Of work from the developer to structure their DOM that Way, but that attribute would solve a whole Lot of pain, as well as the dialog element in HTML, That’s another one.

That’s At risk of being removed, I think it’s Firefox At this point that we need to implement dialog That could give us some of this Behavior for free, like focus management having a Semantic HTML element that would tell users of Assistive technology that it is a dialogue, So there’s some Patterns here that — to have every Developer in the world have to re-implement the same Things over and over again, it seems like we should Have some more primitives for making that easier, RICK, VISCOMI Yeah That sounds super important MARCY SUTTON And complicated [ CHUCKLING ], RICK VISCOMI, You’ve advocated In the past, for something called an accessibility, Statement, What is that, and why is that? So good for accessibility, MARCY, SUTTON, Accessibility, Statements are great tools, no matter what kind of a website You’re making, whether it’s with heavy JavaScript or not So an accessibility, Statement is generally a page on your website.

That’s easy to find: maybe it’s linked. Your website footer, and it has things Like what you’re doing to improve accessibility, Maybe what level of the Web Content Accessibility Guidelines? That you’re aiming for It’s nice to have that Goal and that target whether or not you’ve Actually met it, but you have to keep actively Working at that to improve You can also collect Any accessibility, tips or information about Keyboard shortcuts or ways to use your website For accessibility and ways for users To contact you, That’s one of the Most important pieces having an affirmative Statement that says: hey, we might not Be perfect at this, but we’d love your feedback.

And get in touch with us And if people do Act on that feedback, So it’s opening That conversation to bring people in and Make them feel included and give them a way To give you feedback, Because a lot of These websites that have glaring Accessibility issues: we have no way to contact them, So you might see some tweets Of people calling out companies because they can’t use the Website or the service, Maybe an update to the Website or application breaks, what used to work? So if you have That statement it gives people a way to contact You in an official blog so that you can act On that feedback, RICK VISCOMI, It must be really Reassuring to go to a website and see that they actually Care about accessibility, MARCY, SUTTON, Absolutely RICK, VISCOMI, So What resources would you recommend for Web developers, who want to learn more about Creating accessible websites, MARCY SUTTON, So many –, The A11Y Project, Is really great? There’s an accessibility, Course, from Alice Boxhall and Rob Dodson at Google, on Udacity, I have a page on my website.

It’s MarcySutton.Com, There’s a web accessibility. Resources guide there and I collect things like Books and tools and articles and things that I refer to a lot There’s quite a bit out there. From companies like WebAIM, They have really great articles Deque. My former employer has A thing called Deque University: They offer free Accessibility, training to people with disabilities; Which is really great So there’s definitely a wealth.

Of information out there Just getting it to the people, To solve this education problem is sort of the gap that We need to figure out RICK VISCOMI And how About No Mouse Mondays, or what do you call it? Marcy SUTTON? Yes, I released an npm Package this week to sort of put a tool in the Hands of developers to turn off the mouse cursor for everyone, It was sort of a Joke but it actually could be useful as a Dev tool so something to pull into your Project maybe one day a week to actually have a No mouse day of the week, RICK VISCOMI, That reminds me Of 2G Tuesdays or something to get the feel for Slow performance, MARCY, SUTTON, Yeah, RICK VISCOMI.

I think That’s a good idea: MARCY SUTTON Yeah, It’s sort of a Chaos Monkey Approach to things of you know, if you Unplug, your mouse or don’t have that capability. How resilient is your design? Can you actually use it And some of the most Glaring accessibility challenges I see are with color Contrast and a lack of keyboard access, So if we could Somehow, culturally, build in tools and processes. To get us thinking about that, that would help So the No-Mouse Mondays is the First experimental version, but I have plans for it: RICK VISCOMI, It’s a good idea, All right Marcy.

This has been great Thanks for coming on the show MARCY SUTTON. Thank you. So much for having me RICK VISCOMI, You Can check out links to everything we talked about? In the description below, Thanks for reading and We’ll see you next time, [ MUSIC PLAYING ]


 

Categories
Online Marketing

Accessibility with Marcy Sutton – The State of the Web

”. My guest is Marcy Sutton Head of Learning at Gatsby and former Developer Advocate at Deque Systems and today we’re talking About web accessibility, Let’s get started: [ MUSIC PLAYING ], So Marcy thanks for being here. What exactly does Accessibility mean MARCY SUTTON To me. It Means building websites that include people With disabilities, both building for People with disabilities and with people With disabilities, including them as Stakeholders hiring them to work on our teams.

Paying them for their work to review things. For accessibility and give us feedback Along the way, RICK VISCOMI, So when a Website isn’t accessible. What’s at stake, MARCY SUTTON A lot! If you think about how many Services are moving online if accessibility isn’t Built in then, it could present Barriers for people with disabilities, where They can’t use the service They might give up and Leave or worse, it might cause harm to Them if they have something like a traumatic Brain injury or seizure risk So there’s actually Quite a bit at stake if the web isn’t accessible, RICK VISCOMI, So even with The Domino’s lawsuit recently that came out where They lost their appeal.

Do you think that Websites will actually have a push towards more Accessible websites, especially now that lawyers Realize the legal risk MARCY SUTTON In The United States legislation can certainly Help and people can lean on the Law in this country to enforce their civil rights, So having rulings like The Domino’s ruling could potentially Help since there has been an absence of rulings, In favor of including websites under the Americans, With Disabilities Act, but I think there will be More to read in that space I have seen and read and Heard about companies looking at competitors, That have been sued and sort of feeling like Oh, maybe we’re next, so there can be some Market pressure, if there are legal actions being taken And if that’s what it takes, To make something accessible, then I think that’s moving.

In the right direction, RICK VISCOMI, Where do The breakdowns typically happen when a website Becomes inaccessible, Are the managers just Not buying into it Are the developers unaware Of the importance of it, lack of developer Tools all of the above MARCY SUTTON, I think It’s mostly an education issue and awareness, So to sort of try and Solve this problem, I advocate building a Culture around accessibility, so that everyone at the company Is involved and invested From project managers to Designers and developers, we all have a part to play in Making the web more accessible – And it is true that A lot of people just aren’t aware of the Impact that they could have There’s also the misconceptions That accessibility is costly and maybe not worth it.

It’s too niche of an audience, But actually it can improve. Things for a lot of people, If you think of it in Terms of inclusive design, the benefits that we Put into our websites like keyword, support, improving Contrast and font size those can help a lot of people, So it’s definitely worth it. And it’s easier and less costly. If you do it from the beginning, RICK VISCOMI. Is it something –? 10 % of the population has Some form of disability, so it’s more than niche, It actually affects A lot of people, MARCY SUTTON – I think it’s More than that, actually one in five people – RICK VISCOMI, Oh wow, MARCY SUTTON And the range of Disabilities is pretty wide, so there’s all Kinds of scenarios that people can be Browsing your website and they might have situational Or temporary disabilities People are born With disabilities There’s a whole spectrum of How people use the web that’s really kind of beautiful And if we can Embrace that, like we did with responsive Design and letting go of some of that control.

Over pixel perfection and how the user actually Visits our website there’s some real opportunities. There to innovate and make things that are way more robust, RICK VISCOMI. What did you Mean by situational disability, MARCY SUTTON, If You break your arm if you have a baby in one arm. Or a cup of tea or coffee, you might hold your Phone in a different way or have to switch arms If you are born with Something like that, you might permanently not Be able to use your arms, And so you have to use other Input modalities like voice, or maybe you use a joystick With your mouth or something And so there’s new Devices and ways of navigating that don’t rely.

On the default of perfectly working limbs and the abilities That most people, think of So there are some Opportunities and people are pretty resilient. They figure out ways. To navigate the web And if we can Support them better, then that’s pretty awesome, RICK VISCOMI That Reminds me of Android Auto, where, if I’m driving My car, my phone, is not necessarily a thing. I’m putting Right directly, in my face So their way of Interfacing with devices changes entirely depending On your situation, MARCY SUTTON, Yes and a Lot of those technologies were developed for People with disabilities, so it’s worth Considering that, maybe some of the things that We appreciate, and we can use every day were invented.

For people who needed it, RICK VISCOMI, I want to go back. To something that you mentioned earlier about having Users with disabilities, or even people with Disabilities on your team, as part of the Development process, How can you implement Accessibility as part of the Process in a way that ensures that the website’s Going to be accessible, MARCY, SUTTON Well, Certainly including people on your teams to be Stakeholders and provide feedback in regular intervals.

That would be the best way. Is to have people embedded on your teams who Have disabilities mainly because they Have experiences and perspectives that, as Able-Bodied developers, we just can’t make that up. It’s not your lived experience. So having that feedback, all the Time would be truly valuable And people get to Work on your teams and you pay them for Their work and I think that’s a really good way to go: RICK VISCOMI, How about Part of the design process, If a website, for example, Is built to be entirely using Canvas or Flash or Something if people have a specific technology, In mind where it’s just never going to be accessible, How can you actually prevent that from happening Where, in the design Process, do you actually make those decisions? To be accessible, MARCY SUTTON, I think Having some requirements about how users should be able To navigate the site should definitely start in design, I mean hopefully you’re Not getting too locked down on a given technology, — RICK, VISCOMI Hopefully not Flash MARCY SUTTON — in The design phase Yeah Flash no way But Canvas –.

There have Been whole websites built with Canvas And accessibility Unfortunately, was an afterthought in A lot of those cases – And we do have some Standards for Canvas that are better than They were four years ago, but you still have To re-implement a lot of native Functionality that you would get for free if you used The DOM or the Document Object Model RICK VISCOMI. Are you referring To the Accessibility Object Model, MARCY SUTTON, No, So with Canvas.

If you Provide fallback content, there’s a method called Draw focus if needed, You can pass off some Of these interactions from the two-dimensional Canvas Which is essentially a bitmap to that fallback content. And try to create some sort of a Semantic experience, but that’s a lot of work And if you can use the Document Object Model which does feed into what’s. Called the accessibility tree –, which is a fancy Term for a structure with accessibility, information – –: you can do a lot and Communicate to users of assistive technology, What’s going on on the screen, RICK VISCOMI, What’s the Current state of accessibility in developer tools, Either in the browser or as part of testing MARCY SUTTON, Pretty Great actually From when I got started as a Front-End developer everything for accessibility in terms Of this accessibility tree that I mentioned all Of that information was sort of hidden Under the hood And you had to go, Crawl through the Dom and go look at what was on The page and sort of just know what was going on there And now we have developer tools.

Like in Chrome and in Firefox, and it’s amazing how much you Can learn about accessibility through those tools? It would be great to Have more but we’ve come a really long way. Both with built-in dev tools and browser extensions, And automated tools, so I think the future is pretty Bright in terms of tooling RICK VISCOMI, What was your Experience with axe-core and what did it do? Marcy SUTTON, axe-core Is an accessibility API written with JavaScript? It’s an open source library that I used to work on full-time And it’s used in both Lighthouse And Accessibility, Insights from Microsoft, so it’s sort of An engine and a common rule set for testing accessibility And its used a lot of places.

It’s pretty cool, There’s other APIs. As well like WAVE and some others that aren’t Coming to mind at the moment, but it’s nice to have a common Set of rules and the engine that people can Count on and they can use it in different ways: Such as in browser extensions and in automated tooling To use a common rule set so that some Testers on your team aren’t using a different set. Of rules than the developers, for example, Because then you’re working Off two different sets of requirements, and it can Be hard to meet in the middle RICK VISCOMI You had Mentioned that axe-core’s integrated with Lighthouse The HTTP Archive runs Lighthouse On 5 million websites, so we can get some Of that analysis from axe-core aggregated To the scale of the web, I actually have a few stats, So 22 % of web pages tested Passed the color contrast audit from axe-core 50 % of pages are passing the Lighthouse image alt attribute being present audit, So it’s kind of surprising To see how low accessibility adoption is in certain Areas of the web and having a tool like Axe-Core is just really great to be able to get That visibility, MARCY SUTTON, Sadly It’s actually better than I expected RICK VISCOMI That Is pretty sad, MARCY SUTTON? It is sad Yeah, it’s depressing.

There is a project from WebAIM Called The WebAIM Million, where they ran the WAVE automated tool. Against the top 1 million home pages – And that was also a Very sad set of results because, as an industry, We have a lot more work to do a lot of work to Do to make that better Tools are helpful. In highlighting some of these low-hanging fruit, Things that we need to fix. But if we look at It in aggregate the picture is not very Pretty at the moment, RICK VISCOMI You Co-Authored “ Smashing Book 6” with your chapter titled “ Accessibility in Times of Single-Page, Apps.

”. So in what ways do accessibility, And single-page apps not play well together: MARCY SUTTON, Quite A few, unfortunately, I mean all of the Basics of accessibility apply if you’re building A website that’s heavy, with JavaScript So things like image, alt text and color contrast, But when we have this Javascript layer, that’s taking over a lot of The interactions that would be happening, In a web browser, we have to do a bit more To support users who are navigating with Assistive technology and using the keyboard Things like focus management, making announcements Using unobtrusive motion, If we’re using a Lot of JavaScript to try and delight Users, we have to try not to cause Harm with those But I’d say, probably the Focus management piece is the biggest Thing that we have to handle because If the browser is not refreshing, the page When the page changes a user using a Keyboard might be stuck in the prior part of The screen, or they have no idea what happened – If they’re in a screen reader or something So we have to manage Their experience going through the Application and that can be pretty cool.

Actually, I think it’s another area, That we can innovate And I’m hoping that frameworks And potentially browsers could help make this easier, So that would be a good space. To try and move the needle a bit to support developers without Them all having to re-implement all of the same things: RICK VISCOMI, Even kind of More of an old-school UI component, like modal dialogs Has its own focus problems? Can you describe some of The accessibility issues with modal dialogs and What’s being done on the HTML standard side to fix that MARCY, SUTTON Sure yeah, So modal dialogs are An example of some of these same Things I was talking about with focus management, So you have a layer that Opens up over the screen, It probably has content Behind it, maybe a screen curtain to gray it out When that modal opens, you Have to send focus into it, so the keyboard user Or screen reader user is in the right.

Part of the page they’re not left behind The modal window, So that means that you Also need to disable any interactive content. Behind that modal window and that part can Get pretty tricky You have to do some DOM Walking potentially set aria-hidden and tabindex On interactive controls and most people are not Going to do that DOM walking It’s hard. It’s expensive performance, Wise and you have to do it –, you know every time the modal Opens walk it down and –.

It’s like you’re doing it. In inverse both directions, So what would be great Is in the standard space, if we could have Something like HTML inert. It’s an attribute that Was proposed a while back, I think it was at Risk of being removed – and nobody is convinced, That we really need it. This is me officially Saying yes, we need it because the alternative Is a lot of DOM walking that, frankly, very little People are going to do So.

What that would do for us Is make it a lot easier to set a Boolean attribute in Html to effectively disable whole subtrees of the HTML Dom And that way when we send focus into a Modal, we don’t have to do as much in the background. It helps to have Sibling elements, so maybe the modal and the Content behind it are siblings. That way, you can just turn Off all the other content, So that does take a bit Of work from the developer to structure their DOM that Way, but that attribute would solve a whole Lot of pain, as well as the dialog element in HTML, That’s another one.

That’s At risk of being removed, I think it’s Firefox At this point that we need to implement dialog That could give us some of this Behavior for free, like focus management having a Semantic HTML element that would tell users of Assistive technology that it is a dialogue, So there’s some Patterns here that — to have every Developer in the world have to re-implement the same Things over and over again, it seems like we should Have some more primitives for making that easier, RICK, VISCOMI Yeah That sounds super important MARCY SUTTON And complicated [ CHUCKLING ], RICK VISCOMI, You’ve advocated In the past, for something called an accessibility, Statement, What is that, and why is that? So good for accessibility, MARCY, SUTTON, Accessibility, Statements are great tools, no matter what kind of a website You’re making, whether it’s with heavy JavaScript or not So an accessibility, Statement is generally a page on your website.

That’s easy to find: maybe it’s linked. Your website footer, and it has things Like what you’re doing to improve accessibility, Maybe what level of the Web Content Accessibility Guidelines? That you’re aiming for It’s nice to have that Goal and that target whether or not you’ve Actually met it, but you have to keep actively Working at that to improve You can also collect Any accessibility, tips or information about Keyboard shortcuts or ways to use your website For accessibility and ways for users To contact you, That’s one of the Most important pieces having an affirmative Statement that says: hey, we might not Be perfect at this, but we’d love your feedback.

And get in touch with us And if people do Act on that feedback, So it’s opening That conversation to bring people in and Make them feel included and give them a way To give you feedback, Because a lot of These websites that have glaring Accessibility issues: we have no way to contact them, So you might see some tweets Of people calling out companies because they can’t use the Website or the service, Maybe an update to the Website or application breaks, what used to work? So if you have That statement it gives people a way to contact You in an official blog so that you can act On that feedback, RICK VISCOMI, It must be really Reassuring to go to a website and see that they actually Care about accessibility, MARCY, SUTTON, Absolutely RICK, VISCOMI, So What resources would you recommend for Web developers, who want to learn more about Creating accessible websites, MARCY SUTTON, So many –, The A11Y Project, Is really great? There’s an accessibility, Course, from Alice Boxhall and Rob Dodson at Google, on Udacity, I have a page on my website.

It’s MarcySutton.Com, There’s a web accessibility. Resources guide there and I collect things like Books and tools and articles and things that I refer to a lot There’s quite a bit out there. From companies like WebAIM, They have really great articles Deque. My former employer has A thing called Deque University: They offer free Accessibility, training to people with disabilities; Which is really great So there’s definitely a wealth.

Of information out there Just getting it to the people, To solve this education problem is sort of the gap that We need to figure out RICK VISCOMI And how About No Mouse Mondays, or what do you call it? Marcy SUTTON? Yes, I released an npm Package this week to sort of put a tool in the Hands of developers to turn off the mouse cursor for everyone, It was sort of a Joke but it actually could be useful as a Dev tool so something to pull into your Project maybe one day a week to actually have a No mouse day of the week, RICK VISCOMI, That reminds me Of 2G Tuesdays or something to get the feel for Slow performance, MARCY, SUTTON, Yeah, RICK VISCOMI.

I think That’s a good idea: MARCY SUTTON Yeah, It’s sort of a Chaos Monkey Approach to things of you know, if you Unplug, your mouse or don’t have that capability. How resilient is your design? Can you actually use it And some of the most Glaring accessibility challenges I see are with color Contrast and a lack of keyboard access, So if we could Somehow, culturally, build in tools and processes. To get us thinking about that, that would help So the No-Mouse Mondays is the First experimental version, but I have plans for it: RICK VISCOMI, It’s a good idea, All right Marcy.

This has been great Thanks for coming on the show MARCY SUTTON. Thank you. So much for having me RICK VISCOMI, You Can check out links to everything we talked about? In the description below, Thanks for reading and We’ll see you next time, [ MUSIC PLAYING ]


 

Categories
Online Marketing

Accessibility – The State of the Web

The theme for today’s episode is really important because you may have a fast website with the best content, but it’s all for nothing if people can’t actually use it. My guest is nektarios paisios, he’s a software engineer on the chrome, accessibility team and we’re talking about the state of accessibility. Let’s get started, how would you describe your role on the chrome accessibility team? I’m a software engineer.

This means that I’m a programmer. I write code. All day, which is something I enjoy a lot, I implement accessibility, features in chrome and I also fix accessibility bugs. I mostly work on Windows and Mac accessibility, but my team has lots of other people who work on many different platforms and for lots of features that we release as part of Chrome OS. So how would you explain, accessibility to someone who may be new to web development? Well, accessibility is a very important feature.

We should see it as a feature of our website and it’s part of usability the more accessible your website is the more usable it would be to everyone, so it doesn’t only affect people with disabilities. If we want to talk about the people with disabilities, they are according to the World Health Organization, 15 % of the population. So even for business reason you could say that you’re getting more customers if your website is more accessible.

But, aside from that, your website will be more usable if you abide by all the accessibility standards. If you follow all the best practices, your website will be both accessible. I provide better experience for the rest of your customers, so it’s a good business practice. It’s the right thing to do, but also it creates the best experience for everybody and what are the various ways that people with disabilities interact with the web depending on the disability that somebody has.

They used different sorts of assistive software. One of this piece of software is called screen reader, so if you’re blind, for example, you might be using the web through a piece of software that reads to you using synthetic speech, it reads to you the contents of the screen: that’s why it’s called a screen. Reader, if you’re partially sighted, you might be using a magnifier, so you might be enlarging the size of the font, the size of the text, the size of the whole page, the size of the images, even the size of article, so there’s different software that helps depending On the disability that you have, if you’re hearing-impaired, you might be using some captions or some software that can listen to what has been said and transcribe that into text.

If you have another disability like a motor disability, you could use a switch access, which is a device that allows you to move through the interface by flipping a switch or you could use eye tracking devices that track the movement of your eyes. If you cannot move your hands, you might be able to move your eyes. So by moving your eyes, you can move a cursor around the screen, so there are lots of different accommodations depending on the particular need.

So what are some things that you wish? Even the more experienced web developers would know about accessibility. Clearly, the web has offered a big opportunity for companies and organizations to showoff their branding. Different websites have different layouts. They use different font sizes, they use different colors. They have different ways of interacting with them different menu systems, different ways of navigating through them different workflows as a whole.

This is very good for branding every organization wants their website or their web app to differ from other organizations. We don’t want to have a monoculture. We want to have a platform that is full of life and diverse as possible. However, if you’re a person with some accessibility challenges, it takes much longer for you to get accustomed to the different workflows that are presented by different websites.

Let me give you an example: let’s say: you’re blind and you’re using a screen reader. What you have to do most likely is: you need to read the web page that you’re interacting with serially from top to bottom and if to get familiar with it, to familiarize yourself with it. So it takes you time to if the conventions are different from side to side. It takes you time to go through all the content. Just to be able to do.

Let’s say you might want to sign up for a newsletter or you might want to order or buy something from that particular company’s website. If the workflow for purchasing an item is different for each website, which for each website which most likely it is, then it was going to take you much longer to learn that workflow, because you don’t have the visual cues that the sighted person might have the placement Of icons, the placement of the different elements of the different buttons, you don’t have a clue, you know you don’t get those and clues.

You have to go and discover them by reading the contents of them of most of the website. The same goes: if you have a model disability, for example, you might need to use hardware device like switch access to go through the contents of the side and if you’d have muscle, you have developed a muscle memory that you know, for example, that if you press Your street chip specific number of times you get to a particular feature on most websites that say the top navigation menu.

But now you discover that for each website the navigation menu on the top is not the same location. So you cannot really develop muscle memory with your assistive device and you can imagine the similar issues with other groups of disabilities, so what I would suggest is try to follow existing conventions, and this brings me up to my second point. Not everybody uses the computer using a mouse or a phone using touch, they might be using some commands that come with your assistive software or hardware, and those commands require that your site is accessible using the keyboard and if your site is not accessible using the keyboard.

It’s a pointing device, then it might be hard for this assistive software or hardware to work with your website. Another point is: there are lots of accessibility standards and the web content. Accessibility guidelines is one of the most prominent standards and it’s better. If you go through those standards and try to follow as much as possible the guidelines that are out there, so that’s one of the ways your website will be consistent with established patterns.

The same goes for the keyboard navigation. I described before another thing that you should bear in mind is: if you don’t actually test with assistive software, you are not going to know the bottlenecks you’re not going to know what the issues your users are running into. So you could try some of the assistive software very easily. For example, if you have a Chromebook, you could easily turn on a screen reader that comes built-in to every colon book.

You could turn that on and every command, but the screen reader exposes is in a menu, so you can easily get to all the commands it. Doesn’t it’s not a very steep learning curve. The same goes for every other assistive feature. On that platform. You can turn on magnification color filtering on Android. You can turn on a feature whereby you could use the volume buttons of your phone to simulate a switch access device.

So somebody with a motor impairment that uses a hardware switch device. You could simulate that using the volume buttons of of your phone, so these are some of the tips that you could rely on when developing. What would you say that developers who may be well intentioned and try to be overly descriptive with, for example, their aria labels on elements, and they might just say too much about an element, it’s a bit of funny? But there is this notion that you know: if you have a disability, it means that you’re, you know, you don’t have the intellectual ability to understand what everybody else can understand and that’s actually not true.

We don’t need to go over the top when describing a UI element. For example, we don’t need if there is a button that lets say minimizes a article player, we don’t need to say things like collapses and reduces to a small size, the article player and places it at the bottom left side of the screen. You don’t need to say that just say minimize and people would understand from the context that it minimizes a article player.

Of course, we have to bear in mind that we have a group of disability users that are with intellectual disabilities or developmental disabilities, so we have to make cater to those users by using language that could be understood by a 9th grade level. We shouldn’t use complex and not very well known words, but other than that. We don’t need to go over and above and try to overcompensate. The other thing, though, that you should bear in mind, is what I was saying before with the keyboard.

If you wan na test your keyboard navigation, you should not only use the tab key, because tab is not the only key on the keyboard. So, coming back to your previous question, what I wished with developers knew is tap is not the only key on the keyboard and, if you look through, for example, the area, the rich internet applications practices for keyboard users, there are lots of shortcut keys that are listed In those practices in those authoring practices and tab is just one of them and I’ve cost you the importance of using semantic elements on the web so that the screen reader can understand what type of content is on the page instead of using a div or a Span element that doesn’t convey any semantic information, it’s better to rely on the existing html5 rich controls, if possible.

So let’s say you want the user to enter an email field, use the email input box. There is such a text field because an assistive software might provide autocomplete suggestions to a user, for example, if they detect that they’re trying to enter an email. But if you don’t use the correct control, the assistive software might not know that and offer no suggestions. The other problem is, let’s say you wan na enter a date.

There is a date control you when I use at least the original list box control in HTML try and use those controls. Unless you really have specific reasons, why not most people have issues with the styling? I do understand that, but if you are comfortable using the built-in controls, use them and take your time to read through the new controls that came out in the last few years, there. Instead, an array of rich form controls the number control.

There’s a telephone input do not ignore those controls, they might look the same as a text field, but under the hood they are very useful to somebody who is using an assistive software right. So, as the web capabilities have evolved over the years, people have started using the web in different ways. So what effects have translate these had on the ways that users actually use the web? The development of the web has given people with disabilities a workaround for many of us, including myself, I’m blind myself, including myself.

We have been liberated anyway by the proliferation of web applications, because if let’s say you want to go and visit a bank and make some transaction, you usually go to a bank and you have to complete some paperwork and that paperwork. If you’re blind, for example, you will need some assistance to help you do that if you’re deaf you the person who is at the bank most like it, doesn’t know any sign language, you might have difficulty explaining to them.

What needs to be done? If you have a model disability, it might be, there might be, no ramp is hard to get into the bank, and then you can go in there. So there are sort all sorts of issues when it comes to physical world that they completely disappear. When you use a website a website, also – and that’s also ever that’s another great point to remember – doesn’t have a bias. If you visit a place and you have a disability and people there, they don’t want accommodate you.

You might have a hard time convincing them that you have the right to be offered services, but a website doesn’t know that you have a disability, and this has also opened up the employment market to people with disabilities who can, through their computers they could perform the Tasks that before they needed, for example, a secretary or an assistant to help them perform their work duties. Another thing is reading books.

Let’s say you have learning disability, for example, or blindness. It would have been hard for you to read a book now with their software. That can read the book to you over the web and also for people with dyslexia. For example, there are tools that break up syllables or read the book using text-to-speech or have a dictionary that is on demand and easy, easily accessible on the computer or on your phone.

So it’s really easy to to get accommodated through the web and you can also feel very independent in that way because you’re using the same websites and the same web apps as everybody else. So this is a very nice feeling. You feel that you’re treated the same as every other customer of that particular business. However, on the negative side, the more complicated the web has become. The more important is for web developers to take care of accessibility challenges because on the flip side, if you do visit, let’s say a supermarket and you’re in a wheelchair, and you have trouble going through the aisle or the supermarket.

Unemploy might help you by fetching an item from the shop. However, if the website is inaccessible and you’re, a person with modern disability that is relying on eye tracking device to use the website and the website doesn’t have very good – let’s say, keyboard navigation or some kind of navigation that the functionality that would allow that assistive software To interact with it, then this person is stuck.

They can’t really negotiate with the machine because the machine is inflexible. So, yes, the web has removed a lot of the accessibility challenges. However, if we don’t pay attention to the accessibility of our websites, we’re going to erect much higher barriers that are inflexible and cannot removed by talking to a human being right and one of the solutions to that is standardization and the w3c web accessibility initiative is to Define strategies, standards and resources to make the web accessible to people with disabilities.

So what kinds of things have been done from the standardization side of things to make the web more accessible to people? There have been a lot of efforts, and actually I have been involved in the chrome accessibility team for a few years now, and we have a steamed colleague on the team that is part of has been a part of the standards for many years now and what They have been telling me is that at the beginning there was nothing and then they worked really hard for a few important standards to be put in place.

The accessible rich Internet application standard area for short, it’s very extensive and it defines specific attributes that you can add to your HTML that enable HTML elements that do not have any semantic information attached to them. It’s what I was describing before the use of divs and spans with visually, with visual information that conveys to the user what they do, for example, it might be a deed that represents a button check bar or a check box, but it doesn’t convey that to the Assistive software, it’s only conveyed visually.

However, if you use the Aria standard, there are some attributes. For example, rule you can say: role equals checkbox and suddenly all the assistive software knows that this is a checkbox. And then there is another attribute called aria checked and you can say: ok, that’s true, and that means that the checkbox is now checked. So what it is visually represented with a check mark is now also conveyed in the HTM and the assistive software can get to that information.

Another standard that has been evolving is the HTML standard itself. So, as I said before, in html5, there are new form controls, rich form, controls that you can use and those controls are accessible by default because they are implemented by the browser, their slider. There is a time range. There is email input, telephone input, etcetera. There are lots of controls, another standard is the web component standard and that’s an evolving standard, and that one enables you to create components and widgets that could be packaged as a unit and used in other web apps.

This is very helpful because once somebody creates an accessible widget, let’s say we want to create an accessible calendar widget we can create that publish it on the web and people can easily include it in their web apps before this web component standard it’s hard. It has been hard to include components from other sites, because when you paste in HTML and CSS, there might be conflicts with your own CSS, with your own HTML with your own JavaScript.

But this web component standard enables those widgets to isolate themselves from the rest of your web app. So I think that would help accessibility by enabling people to create accessible components once and distribute them to be used everywhere. And what is the accessibility object model? It is a standard that would enable web applications to expose some of the accessibility information and perform some day of the accessibility actions that were only available to desktop applications in the past, not only desktop, but also, I should say that we’re only available to native applications In the past, I’m talking about things like if a user performs a gesture, a specific gesture or uses a specific command with their assistive software, this command could be communicated to the web app itself and the web app could take action based on that command.

That came from the assistive software native apps could do that before web apps. Couldn’t we’re trying to create a standard to solve that? Another thing that this standard is trying to solve is the ability for the web app itself to create accessibility, information. That would only be visible to users of assistive software in the past. You couldn’t easily do that now. You can, if you have a complicated up that presents things using, let’s say converse or some other kind of graphical technology, but you want to create some equivalent semantically rich representation of what is visually conveyed to users of assistive software.

With this new standard, the accessibility object model standard. You can create your own accessibility objects, food, the information you want in them and expose them directly to assistive software. So, in effect, you can tell the assistive software what exactly exactly what you want did to see. So what types of tools are available for developers to understand how accessible their website is? Chrome actually has a lot of built-in tools.

We have the chrome, developer tools and inside the chrome, developer tools. If you go to the main panel, the panel where you can see the Dom tree, there is also a tab in there that allows you to see the accessibility tree. The accessibility is not the same as the Dom tree. The accessibility tree is the tree that is presented to assistive software and it is created based on the Dom tree and the layout tree.

So your HTML, your CSS, your JavaScript. All of that is used to create the accessibility tree which conveys the information about the page to assistive software and that’s the tree. You can manipulate with using them directly using the accessibility, object model standard that I have mentioned before, and also that’s the tree where in which all the Aria attributes you might have added to your website.

That’s where those attributes would appear. So, as you can see, the history is created from many different sources, but ultimately that is the information that assistive software sees and you can see it as well. If you go to the developer tools, there is a tab there. That shows the accessibility tree and you can use that to see. Let’s say if you have a screen door user. What are they going to experience if you visit your website, how are they going? What information are they going to see when they try to read the site using the screen reader? There is also another panel in the chrome developer tools.

It’s the audits panel and as part of the audience we have lighthouse lighthouse, can perform audits on your website and give you a list of errors or recommendations for to improve. So it’s very easy. You could go and click and run an audit accessibility audit on your website. I have to point out that it doesn’t catch all the errors. You ultimately do need to test with some assistive software or rely on user feedback, but it does help write a score of 100 percent doesn’t mean your website is fully accessible yep.

So the HTTP archive tracks, lighthouse accessibility, scores on over a million websites. The median lighthouse accessibility score is 62 % and another interesting stat, 42 % of pages correctly use alt attributes on images and only 12 % of pages correctly label form elements. So the state of accessibility right now shows a lot of room for improvement. Unfortunately, we do need to redouble our efforts and perhaps we need to provide more automated solutions for making web apps accessible.

We do need to pay attention to the web content, accessibility guidelines and there are three axes in those guidelines that I think everybody can understand. The apps in the app should be the website should be perceivable, so you should be able, as a person with disability, you should be able to perceive content that your disability prevents you from receiving low. So let’s say you have an image, it doesn’t have a description or we have a article that has only audio.

It doesn’t have captions for people who are deaf if you’re a person with some developmental disability, and there is language there that is not as to advanced and too complicated, or you have very long and long winded text and you’re unable to you know, read long pieces Of text and you’re going to have difficulties there, so there or you’re a person who doesn’t tolerate rabid animations. So it’s not hard for somebody who is developing a website to understand if they try and put their themselves in the shoes of a person with disabilities.

For a few minutes, it’s not hard of them to understand what it means when we say that your website needs to be perceivable. It just takes some time to put yourself in the shoes of this other person and then realize oh wait a moment. This might be. Might create some trouble for for people another thing in the web content. Accessibility guidelines is your app needs to be. Your website needs to be robust, so the HTML needs to validate.

You need to be using the correct attributes and form labels is actually part of that. You need your your forms to have labels your your form fields, to have labels to indicate errors in a clear manner and to suggest corrections if possible. So I I don’t think it’s hard for somebody to follow those standards if they try and get in the shoes of the user that is trying to use the website. I do realize that some of the standards are vague and too technical.

They use complicated language, but I think, if you’re a developer, that wants to learn how different people with accessibility needs use your website, you could try and find articles on how different people use assistive software and then try and imagine yourself being in the shoes of those Users, so, as web capabilities continue to evolve, we have technologies like AR and VR around the corner. How do we make sure that we’re not leaving people with disabilities behind a lot of the changes happen organically? They grow from past experience and slowly-slowly solutions get developed.

For example, assistive software has been developing for 25 or 30 years, and it has been a gradual process. However, if there is a technology shift like the move to a touchscreen mobile phone, for example, or the use of VR AR virtual reality, it would be very difficult for somebody to wait for this progress that happened gradually, because then you would expect a big gap in The number of the amount of time that you have to wait, if you’re a person with disabilities to get your hands on this new technology, so here is where we need a new research.

The innovation! That’s why I to encourage people who are interested in the field of accessibility, to pursue a career in this field and also get a degree on accessibility. There is a notion that accessibility is easy, that you just add some labels and some alt text some keyboard navigation. However, your question about virtual reality: they points the finger to the big changes that could happen in the lives of people with disabilities.

If an innovation takes place and we’re not going to get an innovation, if people are not going to work hard and try to be creative, with the accessibility with providing solutions to those accessibility challenges. Finally, what resources would you recommend for web developers who want to make the web more accessible? My program manager, Laura, has produced a few articles that you can read. We have a Udacity course that some of my co-workers have created that you can read on.

It explains to you how you could add accessibility to your website, also, the web content, accessibility, guidelines from the w3c and the Aria standard, accessible, rich Internet application, standard, the authoring guide for the area standard and the examples and are provided so nektarios. Thank you again for being here my pleasure. You can find links to everything we talked about in the description and also share your perspective on the state of accessibility.

In the comments below thanks for reading and we’ll see you next time.


 

Categories
Online Marketing

Design Systems with Brad Frost – The State of the Web

My guest is Brad, frost, web designer and author of atomic design and today we’re talking about Design Systems. Let’s get started so Brett thanks a lot for being here. Thanks for having me, I want to show off by asking you: has the metaphor of a web page exceeded its usefulness, yeah, it certainly has, as what designers we’ve been thinking about.

The web is in terms of pages for a long time right, it’s been with us since the web’s beginning right. We scope things out in terms of pages. If things don’t load in the browser says this web page hasn’t loaded and that’s had a really big impact on sort of how we structure our teams, how we scope our projects and how things are actually executed from from a web design and development standpoint. So, for instance, I work with a lot of large organizations and so they’ll have a team, that’s responsible for the home page and then they’ll have a team, that’s responsible for the product page and another team, that’s responsible for the checkout page and all of those teams Are doing things sort of independent of one another right, because they’re just focused on this notion of pages and as it happens, all of those pages are actually made of the same stuff right.

If we were to break things down, you have buttons, you have form fields. You have blocks and cards and heroes, and all these other things – and we end up with whenever you have these different teams working on different pages and thinking about things. In that way, you end up with you know one button looking similar but different than the next team, that’s working on the next page and so on and so forth, and you, you know, repeat that a number of times and span that out over a number of Years and you end up with a giant mess on your hands, it’s not to suggest that we should stop using the term.

It’s probably still useful for users. Yeah only see things as a flat page, but from a design and development perspective. It’s kind of updated yeah. Yeah, that’s right exactly it’s it’s! It still comes together as a cohesive whole and I think, that’s important, especially as people get into talking about design systems. A lot of people have a big misconception that oh design mean you just sort of isolate things at their component level and just designed the button and just design the sort of headings and just designed the card in isolation.

But that’s just not true. That’s you know. It’s important to sort of realize that yeah things do all of those components, do come together and form a cohesive page at the end of the day and that’s what the user sees and interacts with. So it’s important. It’s not an either-or thing, but we just have to be more considerate about how we make the parts of that page as the web and technology as a whole progresses forward.

How has that changed the way that web designers think about serving pages to users and the ways that the websites are accessed yeah? Well from like an access standpoint or from like a design and build process? The fact that a user could be I mean even these days like accessing the web from their refrigerator. You never know the form factor or anything about the user’s device. You can’t make any assumptions: yeah yeah, that’s right and again it’s gotten really complicated and that’s why I think design systems have become as popular as they’ve been because the devices haven’t slowed down right.

The device proliferation is still happening right. The number of contexts – and you know, screen sizes and form factors and, and you know, yeah native web embedded devices different screens. Different sort of you know. Mouse and keyboard touch inputs, and you know voice and, like all this. Other stuff is just the amount of things that users have or that that designers and developers have to consider as they’re, creating user interfaces and creating these experiences I’ve just sort of accelerated, and we can’t keep up right.

We can’t create bespoke pages, for you know: here’s our small screen view and here’s our tablet view and here’s our desktop view. It’s it’s so we’ve had to sort of pull back out a necessity just because we’re on the hook to deliver more features, more services to more users and more context using more devices in more ways than ever before, and it’s like unfortunate. Our budgets have been increased and our resources haven’t increased with that same sort of exponential curves.

So that’s what’s like sort of forced us to sort of step back and and reconsider how this all gets done, given that there are so many different viewport sizes and everything does that mean that the flat Photoshop file is no longer very useful as a means of Conveying the design, yeah, yeah and and still to this day, I’m working in if Photoshop might be a little long in the tooth when it comes to web design, but same thing happens in sketch in figma.

Just last week I got from the clients designers, you know a mobile version of the comp and a tablet version of a competent desktop version of a comp and and a lot of that’s just sort of wasted effort. Really because all three of those things in isolation are sort of one they’re already alive, because it’s a picture of a website not an actual website, but all those spaces in between is where things really fall down right.

You can sort of paint a picture, especially in a in a static design tool where there’s artboards and you could just sort of move things around in free space like that’s, not how things work in the actual browser right. There’s things like some order considerations and all that you can’t just sort of go on this side screen. I just want to move this from here to here, or this I’m just going to swap this around it’s it’s.

It’s really important to sort of make sure you’re. Considering the actual medium that this user interface is going to come alive and and do that much sooner in your process, I want to ask you about concept reviews before called design Det. What does that mean, and how do you avoid going design bankrupt? There’s no design debt and design bankruptcy. I’ve never actually heard design bankruptcy. Before I like that, I I think a lot of places could declare its design bankruptcy.

I think you know just when it comes to design debt. It’s you have. You know number of teams working on different things and just those we were saying you know working on different pages or different products right across a company and you sort of can can take a cross-section and sort of see a lot of discrepancies. Just in that. But that’s just one moment in time when you stretch out that process over time, especially products that have been around for a long time, the googles of the world or eBay or whatever it becomes like a little sort of Benjamin Button.

Like experience as you click through pages, you get further back in time in these older crustier user interfaces, you’re like how did I end up in 1999 and all of a sudden? So so I think that that’s sort of that sort of that visceral feeling of design debt where it’s like you have all of this sort of old stuff that was created. It’s you know once upon a time and that whenever that was launched, it was the new hotness and the new hotness becomes the old crusty experience.

You know pretty quickly these days right so so I think that the more sort of deliberate and the more sort of systematize you could sort of control and wrangle all of those those sort of user interfaces that are, you know out there in the wild. The better. Your chances are going to be as sort of like reducing that that sort of design debt and that’s again, I think, a big crux like that. The crux of design systems is to sort of help.

You know eliminate that debt to basically take those $ 19.99 designs and say: okay, we’re going to update them with a new design language, but we’re going to do it in a very sort of systematic way so that the next time we do a big redesign. We have actual hooks in there that we could actually sort of lift up the quality of in you know so to evolve that design language like flip the switch and roll that out to a bunch of places, sort of simultaneously or or in very short order.

Instead of like, oh, we have to do this big monolithic redesign, and we have to do that for each of our products again and again and again so the developer experience must be a lot better when you can have like a single source source of truth. For your design, but also the user experience as well, could you describe like what it might be like for a user to be on a site that has designed yet yeah? I mean it.

This happens all the time I mean so. The e-commerce example is a great one, just because I think that you know ecommerce sites, you know super sexy homepage or the super splashy super current right. It’s like it’s got the latest. You know shop fall trends, their shop Christmas like coming up or whatever. That’s like you look very campaign driven. So it’s often like a very modern experience. You sort of like click into like that.

Maybe a product detail page or a product category page that sort of feels modern ish. You know it’s like sort of a little bit more meat and potatoes like e-commerce stuff. So it’s like those templates sort of probably feel pretty good, but then, like you, might get to the shop card or if you like, actually log into your account, it’s like those things feel way different and and then you get to the checkout flow.

And then you know that might be sort of way long in the tooth or it might be sort of built by you know an external vendor or something because they’re processing, credit cards and stuff like that. So it might not actually be integrated with like the rest of the site at all. So what ends up happening for? Why that matters from a user experience standpoint? It’s not just about other things, look different like because who cares as long as that’s effective, then that consistency shouldn’t ever be like the number one goal of any of this, and I think that that’s when we talk about Design Systems, I think that’s another misconception as That, oh, we just want everything to look the same everywhere and that’s just really not true, because if your metrics are doing well and stuff – and you know the buttons look different on the checkout page then on the the product detail page, then that’s fine right! No harm no foul, but the problem is, is whenever you’re, a user and you encounter say a date picker or something – and this is a favorite one of mine just because those are hard to build so often times developers just sort of go and grab something.

You know a library they find on the internet somewhere and if you’re, you know say like at an airline or a hotel chain, and you have four different developers grabbing four different date – pickers across the site. Now, all of a sudden, every time the user needs to pick a date, they have to relearn that new library and that, even if it’s just fractions of a second or a second or two or the, where they’re like oh wait, I’m used to booking from the Homepage, but this is a different convention that slows down that process right and that has a negative hit on you know, certainly when you’re talking about you know booking flights or hotels or something that’s going to cause it dip.

So that’s sort of consistency from a user experience standpoint right that ability of like oh yeah. I’ve encountered this pattern before and I know how this works. So I could just sort of roll on and sort of fill things out a lot faster or interact with this thing faster like that’s. That’s what we’re after right, so that consistency for consistency sake not so much, but consistency from a you know, sort of mapping to what users are used to already like yeah.

That’s, that’s! That’s where it’s at one of the people, problems on a design and development team is not sharing the same vocabulary or calling the same components: yeah consistent yeah. So what are some of the problems of that? And how can designers and developers get on the same wavelength? Yeah, so that’s one of the biggest things that I encounter is as an one exercise that I like to do with design development teams whenever I’m working on design systems with them is right out of the gate, we conduct what I call an interface inventory, so we Basically go across their entire sort of suite of products, or you know, whatever user interfaces could be served by their design system and and sort of divvy things up is like okay, you go hunting for buttons, I’m going to go hunting for sort of.

You know input fields or whatever, and then we sort of do that as a group and then what we do is we get together and sort of present what we found to each other and that’s where it’s really fun, because, especially whenever you have designers in the Room developers in the room, QA engineers, business people in the room right like the product owners, like all these different disciplines and you actually sort of have to articulate what your UI is right.

So so somebody will get up and it’s like. Oh and here’s this admin bar and then somebody gets admin bar. We call that the utility bar right and then the developers are like. Oh, we we just mark that up as the gray bar right, and so it’s like. Okay, there we go right. You got everything out on the table right, these inconsistent names for the same thing, and of course that means you have to have again just like that sort of user experience you have to like slow down.

You have to have have a meeting to figure out what you’re going to call this thing like, and you know a lot – can get lost in translation in between design team or different disciplines, but also different teams in general right. If team one is calling it a certain name and team, two is calling it something else. That’s a big deal right, so so again, so bringing this all back to Design Systems. What that it, what a design system can do is sort of centralize your sort of UI patterns call them names right, give write guidelines around them, so that everyone is like, literally speaking, the same language right.

They know what you mean when you say utility bar, and you know how to use it where it’s useful, but also crucial. One of the other things that we found really valuable in in creating design systems for clients is here’s. What this thing is: here’s where it’s useful, but also maybe here’s some gotchas or here’s where it might not be useful, and maybe you want to use this other thing. Instead, what are some of the trade-offs of investing in a bespoke design system versus taking something off? The shelf, like a bootstrap yeah, that’s a big one and I’d say it’s tough, because tools like bootstrap and material design are already made.

They’re they’re, they’re well tested right, they’re in use by giant companies like this company called. Have you heard of Google before it’s like? It’s pretty big one. It sounds familiar yeah, so so a lot of these people right who are using tools like bootstrap and material design, they’re like oh, this has been tested by these. You know giant companies, so I could just sort of grab this and go and I don’t have to do all that work myself and that might be true and there are sort of instances of that um.

I think one of the big things that is important to sort of recognize and consider whenever you’re reaching for these tools is that it’s like you, don’t own it and it might be attractive from sort of you know, inefficiencies sake at first but as time goes on Right at the end of the day, your boss or your you know your product owners or your clients or whoever they are they’re going to say. Oh, we need to do this this way or we need to add this feature and all of a sudden, you’re you’re.

You have to learn and become sort of fluent in this other sort of system that you didn’t write, so so it can work and you can do things and extend things and customize things that works with the grain and these frameworks, but oftentimes. What I found is I work with clients that end up sort of working against the grain and they end up having to sort of undo a bunch of stuff and write a bunch of other custom stuff.

And then they end up in this sort of like weird messy middle ground, where it’s like. This is our sort of hacky stuff that we’ve done to sort of make things our own. But then also crucially, I’ll say that, from like a more of like a front-end architecture standpoint, I think that it’s sort of like safe, you know you got good bones to build upon, but like material design and boots actually offer a sort of anesthetic right.

They provide anesthetic and that could be helpful because again it’s like oh here’s, some good, looking buttons, here’s some good, looking form fields, here’s some good, looking components that I could use, but if Nike Adidas Puma, if you know Reebok whatever, they were all to use bootstrap For their redesigns, they would look frightening Lee similar right and that’s sort of not what they’re going for so there’s like there is this sort of branding aspect of it right this own ability that sort of gets lost whenever you’re sort of all using the same thing.

What are some of the challenges or unsolved problems of design of design? I mean I, I think, sort of specifically to design systems like a lot of there’s some things that are around sort of you know, tooling, and sort of figuring out how to keep design tools and tools, expanding quiff. You know what’s in code, that’s definitely one of the most. I feel like tangible sort of problems that but there’s a bunch of teams, doing a lot of work to try to solve that and startups and stuff that there are really exciting.

And so a lot of them look promising. And I don’t necessarily think that that’s you know far and away the biggest problem. That’s out there. I think so. Many of the problems with with design systems have to do with the sort of people have to do with communication and collaboration and sort of figuring out like how do we get this stuff adopted into our products right? How do we sort of communicate when things aren’t working as planned like? How do we sort of you know, establish solid processes for releasing new versions of the design system and letting everyone know like here’s one? You want to use the design system or here’s one.

It’s sort of safe to sort of you know, deviate from that system or build upon it or extend it, and how do you roll that back into the system? So a lot of that sort of coordinating a bunch of different people who are all suddenly relying on this, this design system product that stuff, I feel is – is still very tough to crack because it involves people and your you know the health of your your you Know design and development culture and like how well everyone sort of you know, collaborates together and like, of course, that’s that’s tricky right, so you could like you.

Could I could say things like here’s how I would create a governance plan for a design sister for a design system and here’s how I would you know, get these teams to work. You know and communicate more buts and you know easier said than done. Okay, so how much of a design systems success depends on the designers as opposed to the developers? What is their role in the success of it? I think, and – and this might be a little controversial design systems is sort of an unfortunate name because design systems are like.

Oh, this is about design, and it’s really not. The design system is, as I define a design system is, is how the official story of how an organization designs and builds tadaryl products and there’s a lot of ingredients to that story. And yes, like the design language, you know what what the brand colors are, and you know the the rounded corners or not of the buttons and stuff like that sure that that matters.

But that’s actually like a pretty tiny slice of what a design system entails, and so so when it comes to the success of a design system. So much hinges on that design system living in code and living as a thing that engineers and developers can sort of pull down into their application and sort of you know import a component and sort of see that design systems button or whatever show up on their Screen and then they’re able to sort of you know pipe in whatever sort of attributes and click handlers and whatever to sort of make it.

You know, breathe life into it, make it real, but you they sort of get that stuff for free right. If all you have is like a sketch library or some like Zeppelin file or some like like little, it’s a style guide thing where it’s like: here’s, our colors and here’s or whatever, like there’s so much that gets lost yeah if all the developers are doing is Like copying and pasting some hex codes in there, you know sort of crappy like development environments, and it’s just you end up with a bunch of spaghetti, even if they’re all using like the same color blue.

It’s not like systematize right. So what you want to get to is, you want to say like if we change our brand color blue – and this actually just happened on a project of ours – got a brand color blue and actually it wasn’t passing the accessibility level that we wanted, and so they Actually had to sort of you know: tweet the the color blue in order to make that sort of pass. You know because sort of cut the accessibility, mustard and with a design system like you literally, have you know a variables file or is these design tokens? You sort of tweak that value there and then that ripples out to the entire sort of design system right and then that gets packaged up in a new release of the design system in code.

And then you know next time the developers pull that down. Those sort of get and see those updates, so so, coming back to it’s like yeah, like the design language part of it, like the look in the feel of it that matters, I’m not going to say it doesn’t matter, but it’s almost just like you’ll, like do Your thing make it look good like I, you know. I trust you be systematic about it right. Thinking about motifs that are going to sort of like you know, translate well the different components, but, like so much hinges on like getting that stuff into a place where it’s consumable by the actual sort of you know, environments that users will be interacting with your products And that’s what we spend, probably the overwhelming majority of our time and effort on is actually like building out those libraries with components right, an HTML, CSS JavaScript.

You know bundling that stuff up and like sort of working with development teams to make sure that they have what they need in order to use the system successfully. So, to what extent should a design system anticipate the chaos of user-generated content like errors and long names? What is the actual like breaking point of a design system yeah? Well, I think that the breaking point of the design system has everything to do with how well you consider all of that stuff right.

So if, if it’s user-generated content that you need to account for and you’re in your UIs, then you have to you know, consider things like character limits and things like that. But you know there’s many other flavors of that as well. You know internationalization right, right-to-left languages or just you know, German will wrap onto multiple lines, and things like that – and this is where I think again – sort of designing and building components in isolation is a bad idea because you could sort of you surf fall into the Trap of saying like well, here’s this like perfect scenario where you know everything’s filled in and the card has this nice sort of you know image I found from unsplash and it’s like really nice.

Looking and you know, as it happens, the users name is Sarah Smith and Sarah doesn’t even have an H on it, so it just fits so nicely onto one line and of course, the reality of of our user interfaces is anything but that, and this sort of Also comes back to like the trap, was sort of relying on these sort of static design tools to sort of handle that they’re up until very very recently, there weren’t even conventions in place to sort of handle like dynamic data, so that’s sort of how we handle That this is where atomic design as a methodology – I think, really shines.

So what atomic design does is basically helps people consider the whole the pages, the actual product screens in various states and configurations, as well as the sort of parts of that hole right. So the underlying components that build up those screens and at the page level of atomic design, what we’re able to do is articulate here’s. What our homepage looks like with this. You know the fall campaign with the leaves – and you know this tagline and this call to action button that takes people to this and and whatever, but then you’re also able to say, okay and then here’s what this that same page looks like in German or here’s.

What that that same page looks like with you know the Christmas campaign and oh that’s, sort of image that we’re using that has a bunch of Christmas ornaments that actually is sort of you know, impacting the the readability of the text. That’s sitting over that image or something like that right, so you could start seeing where the UI starts falling down and then what you’re able to do is is sort of take that and learn from that and sort of go back to that hero component.

At a more atomic level and sort of say, okay, we’re going to maybe add a variation of the hero component that adds like a little gradient overlay so that the the legibility of the text always sort of you know pops over the the image a bit more. So how we sort of do things like in our own workflow, with that we sort of will create sort of you know, try to represent the whole bell curve. So it’s like what does a card? Look like what does sort of like a kitchen sink card? Look like with like the maximum character count that you might be able to sort of upload as a user or something or what happens if the user uploads the profile picture, what if they don’t right, and so all those various states and sort of you know, mutations Of the other component, so to get that sort of commonly used case down.

Of course, as like a starting point but like you really do have to represent like here’s, the extreme and here’s the empty and sort of everything in between as well and the only real way to test. If that actually works is by sort of plugging in real products and Aereo’s into your user interfaces and by sort of having that best sort of atomic design system wired up where, like the pages, informs and influences the underlying components, you’re able to sort of make changes To those components with which, then, you know, inform and influence that the actual page design, so it’s sort of like a virtuous cycle between like the design system and the pages and screens that that system builds.

Finally, what resources would you recommend for people eager to learn? More about design, Cisco there’s a lot I feel like. I have a hard time, keeping up with them anymore. There’s a there’s a number of really great resources, one that I help maintain is a resource called style guides i/o, which is a collection of, I think, we’re over like 200 50 examples of public design systems and style guides that are out there in the wild as Well, as sort of talks and books and resources and tools around a design system, so that’s just like an open source resource repository that people contribute to and sort of, submit poor requests to.

There is design dot systems which is maintained by Gina Ann who’s done so much work for the design systems community. She has a clarity conference, which is a conference dedicated to design systems. We have a podcast, which is a little bit in hiatus, but where we interview people that work at different organizations who have spun up their design systems and what they’ve learned and sort of you know struggled with as they’ve as they’ve done it.

Stu Robson has a really fantastic design systems newsletter. That’s part of the design, dot systems, sort of universe there and then there’s also a slack group all about design systems as well. So I’d save it like that sort of has me covered for sure and again there’s like a lot of activity there and new stuffs happening every day and people are learning from things you know from each other and plugging them in at their organisations and sharing what They’ve learned and like that’s really for me, the most exciting part of all of this is just sort of you know.

Here’s some concepts here are some things that we’ve found useful share. Those people take them, learn from them validate or invalidate them and sort of share. What they’ve learned and then everyone benefits from it, so your book is also available for free to read online right where it is yeah yeah, so you could read it at atomic design. Brad Frost, calm great breath. This has been great. Thank you so much for pyrite.

Thanks so much for having me, you can check out the links to everything we talked about in the description below thanks for reading, we’ll see you next time.