”. 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 ]
Jimmy's Internet Marketing Business Blog 