Categories
Online Marketing

Site Speed: What SEOs Need to Know #AskGoogleWebmasters

We’re going to be answering questions on the topic of speed that were submitted with the hashtag ask Google webmasters on Twitter. So, let’s start off with a question from row Heat: what is the ideal page speed of any content for better ranking on search? Oh you’re, asking me that question okay.

So basically we are categorizing pages, more or less as like, really good and pretty bad. So, there’s not really like a threshold in between it’s just like we are more or less roughly categorizing the speed experience for users and how are we actually doing that? Where do we get the data from yeah? That’s that’s important, so we mostly get data from two places. On the one hand, we try to calculate a theoretical speed of a page using lab data, and then we also use real field data from users.

Who’ve actually tried to use those pages and that field data is similar to the chrome user. Experience report, data cool, so we are having like hypothetical data and practical data, so we don’t really have a threshold to give away. But basically the recommendation, I would say, is just make sites fast for users. That’s what it boils down to that sounds good yeah. The next question comes from Olga and Olga is wondering if a website’s mobile speed is best looked at using the test, my site tool, the GT, metrics tool or PageSpeed insights.

Hmm, that’s a really good question. What’s the most important tool for SEO, we have multiple tools that measure multiple things and I can understand that that can be kind of confusing at times in general. These tools measure things in slightly different ways, so what I usually recommend is taking these different tools. Getting the data that you get back from that and using them to discover kind of low-hanging fruit on your webpages, so things that you can easily improve to really give your page a speed bump how’s that sound.

No, that sounds pretty good and also the tools differently. Like aimed right some some of these tools like test my side is pretty high level, so, like everyone understands roughly, what’s going on there, whereas GT matrix is a lot more technical and PageSpeed insights. I think it’s kind of in the middle of that so depending on who you are catering to who you’re trying to give this report to to get things fixed, you might use one or the other, so figuring out what is the low-hanging fruit and using the tool That gives you the best insight into that for the audience that you’re trying to convince.

Is it a sea level? Is it a other marketer? Is it someone from the tech side like this is a developer? Then you probably take a different tool. Next question comes from owner owner is asking: I am testing an almost-empty page on dev tool audits and it usually gives me minimum results which are 0.8 milliseconds for everything and 20 milliseconds for fij what it’s fed. First, input delay. First, input delay, of course, but sometimes it gives worse results for TTI, FCI and Phil.

Okay, let’s talk about these metrics fit. We have covered first input delay. Tti is time to interactive. That’s when you can first interact with the page and FCI is first cpu idle, which means that there’s no more JavaScript work or other work that needs to be done by the CPU. So it’s the same page same code, different numbers. Why would that happen? Well, first things: first, these measurements aren’t perfect right.

So if it’s between 0.8 milliseconds and 20 milliseconds 20 milliseconds is a lot more than 0.8, but it’s still quite a short amount of time. If you think about it, you roughly have 10 milliseconds for a single frame to draw so yeah 20 milliseconds isn’t too bad, so you will always see some some basically noise in that measurement and also don’t get too hung up on these metrics. Specifically, if you see that there’s a perceptible problem and there’s actually like an issue that your site stays like working on the main thread and doing CPU work for a minute or 20 seconds, that’s what you want to investigate if it’s 20 milliseconds, it’s probably fine! Our next question comes from Drew and drew asks us what is or are best metric or metrics to look at when you want to decide if a page is fast or slow, and why or why not? Would you just look at things like FCP, which is first content full pained FMP, which is first meaningful paint, instead of just the scores that these tools give you Wow? I don’t know, Martin.

You need to tell me some more about that right. Okay, so I guess the question here really boils down to what’s the metric that you should look at and that’s a really tricky one, because I guess it depends on the side. It’s the typical. It depends answer if you have just a website where people are reading. Your content and not interacting as much then I think, first meaningful paint or first content fool paint, it’s probably more important than first interactive delay or, first sorry, first input delay or time to interactive.

But if it’s a really interactive web application, where you want people to immediately jump in and do something, then probably that metric is more important, so don’t try to break it down, and that brings us to the scores. The problem in this course is they’re. Oversimplifying things. Aren’t they yeah, I it sounds like it. I mean all of these measurements sound like they’re, they’re, measuring different things and ultimately trying to understand what what a user would perceive when they access the page, so their score might be.

I guess a simple way to look at it overall, but it’s probably not all of the details that you need. It just gives you a ballpark. Really it’s like how fast is this page 5? What does that mean? It doesn’t really convey me, doesn’t it so, I would say like use that, to figure out how you’re roughly doing and then use the specific insights, the different tools give you to figure out where you have to improve or what isn’t going so well.

Wow yeah sounds like speed, is a tricky topic and you kind of have to know what’s what you’re measuring so that you can take action on the right things yep. So would that kind of explain why there is no simple number that Google is just giving yeah? So that definitely explains it because then, if you think about it, you can’t break down speed into one simple number. It is a bunch of factors if I’m painting really quickly, but my app is all about interaction.

It’s a messenger, so I show everything I show the message history, but if I try to answer the message that I just got and it takes me 20 seconds until I actually can tap on the input field and start typing, is that fast not really, but is It so important that I can use the contact form on the bottom of a blog post within the first 10 seconds. Not necessarily is it so? What how would you put that into a number you don’t? So I guess it’s hard speed.

Speed sounds hard. What what do you think will this get easier? I guess it will get easier, but it will never go to a point where you just have a score that you optimize for and be done with it right. It is such a broad topic that it’s really hard to break that down into like one number. Okay, so you imagine, the more advanced people will continue to focus on the the kinda, metrics and counting milliseconds and others will look at kind of a bigger overview picture.

I guess so, and together will try to find ways to improve the speed of the pages overall. I think browsers also doing a lot of work to make things faster in general and easier to understand, but, generally speaking, you will still need to go and do the work of figuring out. What matters to you, your audience and your website right is it interactive. Is it content? Full panes depends that sounds cool yeah.

So I expect more questions on speed on the hash tag. Ask Google webmasters and, as we get those questions, we’ll ask an expert like Marcin, who knows all of these three-letter abbreviations and who can help us figure out, which ones are the right ones. So thanks for submitting all of these questions and hopefully see you again on one of the future episode. Thank you very much for having me and thanks for all the questions.


 

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

Debugging JavaScript – Chrome DevTools 101

Debugging than you need to this tutorial shows you how to make the most of chrome dev tools so that you can debug your JavaScript as quickly as possible. I’r going to use this buggy demo here to demonstrate all of the debugging tools and dip tools. I recommend that you open up this demo yourself and follow along with each step.

The link is in the description. Whatever issue you’re debugging, you always want to start by reproducing the issue. You want to find a series of actions that consistently reproduces the book in this demo. When I add five and one the result down here at the bottom is 51. Obviously that should be 6. This is the bug that I need to check down at this point. You might be tempted to use console.Log to infer where the code is going wrong.

Sure it may get the job done, but it’s rather inefficient. First, you have to find the relevant code which could take a while on a big code base. Then you have to sprinkle constant log statements throughout the code. Then you got to reload the page and look at the logs, but maybe the logs didn’t give you all the information you need, so you got to go back and add more logs and so on with dev tools.

You can pause the code in the middle of its execution, inspect the variables that are in scope at that moment in time and walk through your code, one line at a time open, dev tools by pressing command option, J on Mac or ctrl shift J on Windows And Linux, then click the sources tab. The sources panel is where you debug JavaScript. It has three main parts at the top left. Here is the file navigator pane, where you can inspect the files that the page uses after clicking on a file.

You can see the contents of it here in the code editor pin and down here is the JavaScript debugging pane, which you’ll learn more about shortly. Note that when your dev tools window is wide, the JavaScript debugging pane moves to the right. If you take a step back and think about how the app works, it’s probably safe to guess that the incorrect sum gets computed in the click event listener that’s associated to the button.

Therefore, you want to pause code right when the eventlistener executes event.Listen their breakpoints. Let you do exactly that. Expand the eventlistener breakpoint section then expand the mouse category then check the click check, box, dev tools now pauses on the first line of any click event listener that executes back in the demo, click the button again and dev tools. Pauses on the first line of this on-click function, the blue highlight indicates what line of code you’re currently paused on, if you’re paused on a different line of code press resume script execution until you’re paused on the correct line you paused on the wrong line, because you Have a Chrome extension which registers click event listeners on every page that you visit.

If you try the workflow I’m describing in an incognito window, you can see that you always pause on the correct line of code event. Listener, breakpoints are just one type of a breakpoint. Dev tools offers many other types. For example, you can set a breakpoint on a specific line of code or when a Dom node changes or when an exception gets thrown and so on. After this tutorial, I recommend checking out our breakpoints guide, which teaches you when and how to use each type.

The link to that guide is in the description too, I’m paused in the click listener, and now I want to execute the code one line at a time. The code stepping control is right here. Let you do that click. The step into next function call button to investigate a function further. For example, when I step into the inputs our empty function, it jumps me to the first line of that function when I’m confident that a function is working as expected, I can click the step over next function call button the function executes, but I don’t walk through It line by line, for example, if I click to step into the next function, call this line here would be highlighted, blue meaning.

This is where I’m currently paused, but when I click step over next function, call the function executes to completion and I pause them. The next line of the function that I’m currently stepping through last suppose, I’m stepping through a function, and I realize it’s not relevant to my bug. In that case, I can press step out of current function and dev tools executes the rest of the function. If this doesn’t make complete sense right now, I recommend creating a snippet, which is a little block of JavaScript code, that you can execute at any time set a breakpoint and your snippet and play around with the code stepping controls yourself in order to understand how they All work back in the script, I can tell that the bug is probably somewhere in the update label function rather than stepping through a bunch of irrelevant code.

I can set a line of code breakpoint right around where the bug probably occurs to do that. I just click the line number next to the code. This blue icon indicates that there’s a breakpoint on this line when I press resume script, execution dip tools runs all the code up until that lime and then pauses before that line executes over here in the JavaScript debugging pane. I can see the call stack that caused this code to execute.

I can click on the functions to see where each one got caught. The scope section shows me all the local and global variables that are currently defined at this moment in time. I can click on values to edit them, but I’m not going to do that right now. However, when I look at these values, they look suspicious they’re, wrapped in double quotes, which means that their strings. This could be the cause of the book.

I’r going to investigate this further over in the read expressions section here. I can read the values of variables over time. You can store any valid JavaScript expression here, for example, I click, Add expression, then type type of sum then press enter, and I can now see the value of that expression, as I suspected sum is a string when it should be an integer. Now I’m going to open up the console to test out a potential fix for the book when I’m paused on a line of code, the console has access to all the variables that are currently in scope.

For example, when I evaluate addend 1, it returns 5. I think I can fix this bug by converting the addend 1 and adding two variables two integers before adding them. So let me try that now yep that fixes it. I can verify that this change fixes the bug by editing the code directly from dev tools. First I’ll resume script. Execution then make my change, save the change. I press command s on Mac or ctrl s on Windows and Linux.

Then I click deactivate breakpoints so that I can test out the app without triggering the breakpoints I’ve set. Now the app sums up numbers as expected, all right, you now have an excellent foundation and how to effectively debug JavaScript using dev tools from here. I recommend learning about all the breakpoints that dev tools has to offer. As I mentioned before, we also have a JavaScript debugging reference where you can learn about literally every feature related to debugging in dev tools.

Links to both are in the description thanks for reading and happy bug, hunting


 

Categories
Online Marketing

HTTPS and Web Security – The State of the Web

My guest today is Emily Schecter who’s here to tell us about HTTP, you probably know of it as the thing you need to enable to make your site secure, but Emily’s here as product manager on Chrome security team, to explain how it’s so much more than that. Let’s get started so Emily. Thank you for being here. Thanks for having me, I’m excited to be here.

Can you start by telling us about what is HTTPS and why is it so important yeah, so HTTPS is actually just HTTP but over a secure connection and what HTTPS actually gives us is identity, encryption and integrity. So what that means is, if you type HTTP google.Com into a web browser, you can be sure that you’re talking to the real google.Com, not some fake google.Com and also means that no attacker on the network can actually see or modify any of the traffic.

And this is actually really important, because the collection of sites that you’re browsing actually says a lot about your intentions, your behavior and your identity and the web isn’t really continuing to get even more powerful, as chrome tends to add new features to the web platform. For example, the web now has the geolocation API, which means that sites can see where I live, where I work, maybe where my doctor is, or my kids go to school, and we really only want that information to be private between myself and the site that I Trust so HTTP gives us these guarantees, and this is why we think it’s really important for the whole web to be HTTPS by default, so it’s been around for a while and it has kind of accumulated some misunderstandings around it.

Can you kind of help dispel some of the myths around it sure yeah, so HTTPS has actually been around for quite a long time, but for many years it actually was very expensive and very slow and really hands-on and confusing to set up HTTPS. But the reality is that people all over the web have worked hard to make that change and it’s become a lot cheaper and a lot easier to set up. Https people still now think you know some of these myths about how it used to be are still true, but the reality is that that has changed.

So, for example, you should be really expense to set up HTTPS because you had to buy a certificate from what’s called a certificate authority, but now their certificate authorities out there that will give you a free certificate and make it really automatic and easy to set up. One of the examples is, let’s encrypt, so this is actually changed HTTPS and made it much easier to adopt. So what is the state if HTTPS? Now I look at HTTP archive data and it says that adoption is around like sixty percent and when you go back and look through like seven years of data, you can see it’s actually rising like pretty steeply.

So what are the tools that you use to understand? The state of HTTPS and what is it so Chrome, has a public transparency report where we published out about what we’re seeing in chrome in terms of the amount of HTTPS usage, that’s out there on the web. So, for example, what we’re seeing is the usage in Chrome on all of the different chrome platforms on desktop and on mobile is been rising over the years and if you go on to the HTTP transparency report, you can see chrome platform how the usage is increasing.

You can also see not only this in terms of the pages that are loaded over HTTPS, but also browsing time, because, as you might imagine, people are spending different amounts of time on different sites, and we can see that that across the different chrome platform is growing. As well, it’s also broken down by country, which is pretty interesting, because you can see how different countries all over the world are doing on their adoption of HTTPS.

Some other things that are on the transparency report are HTTPS adoption actually at Google. So you can see you know, Google, it is a big site, just like any other site. It took us a long time to actually get this ramped up, and so it’s pretty cool that the transparency report also shows how HTTPS usage has grown at Google. For all of our different products, so what kinds of things is chrome doing to increase HTTPS adoption? So I would say there are two main areas where chrome has made slow changes over time to encourage HTTPS adoption and the first is in Chrome’s UI for connection security.

So chrome shows an icon in the address bar that indicates connection security and we’ve actually changed this icon over time to help users understand the lack of security in HTTP connections. So chrome used to show just this plain circled, I icon for HTTP connections and we thought that was actually a problem because it really doesn’t indicate to people at all that there’s no security with an HTTP connection and what we’d actually like to get to for all.

Http connections is this kind of scary: read not secure warning, but we think that if we just roll that out for all HTTP sites right away, it actually could cause some panic right because we don’t want the web to seem scary. We don’t want people to see this morning all the time and we’ve also seen that people get what’s called warning fatigue, which is that if they see warnings too many times over and over, they start to ignore them.

They stop paying attention to them. So we want to be honest with users without sort of inciting chaos and panic. So what we’ve done is we’ve actually rolled out the warning slowly over time increasing, so we first started showing this gray eye not secured in the address bar just for HTTP pages with passwords or credit cards, and then, sometime later, we started showing the warning also when Users enter data or for incognito pages, and we actually just announced that in July of this year, we’re going to start showing it on all HTTP pages.

So we’ve actually rolled that out over time we’ve seen the amount of HTTPS usage increase and because HTTP unit has increased, then we’re not too scared about the warning fatigue that would be shown from the warning, and so what about the technical API is on the web. Right so another thing that we’ve done in chrome, to encourage HTTPS adoption and also to you know make the web more secure is to require HTTPS for web api s that are very powerful so for new api’s that have come out like service workers, because serviceworker is Such a powerful API we’ve actually required HTTPS to use it.

This also goes for HTTP two, which really improves performance, and it actually requires HTTPS, but we’ve also taken a look at api. Is that already exists on the web and we’ve actually deprecated usage over? Not secure connections for the api’s that are very powerful, so an example here is geolocation, there’s also getusermedia, which is about getting the photos on your phone, and so now sites can no longer use those overage.

This is like patching holes and security on exactly that’s great. So where do you think we’re heading with HTTP? Are we going to achieve a hundred percent adoption and we can all like go home or is our job not yet done? As we talked about earlier, adoption is still, you know not at a hundred percent, yet there. So we still definitely have you know a ways to go. I don’t know that we’re going to get to a hundred percent because I think there’s always some kind of driftwood sites on the web, things that people don’t maintain, but I do.

I would like to see us get close, so you know, if you know any sites out there that are still HTTP, you should go, tell them to turn on HTTPS. They said. No then tell them to come talk to me and tell them why they should, and you know users on the web can also vote with their feet if, like their bank, isn’t secure like go, find a secure banking website put your money somewhere else. So what are some of the knots that websites need to untangle when they need to make that switch from HTTP to HTTPS yeah? So you know migrating your web site to HTTPS.

It’s not as easy as just you know, putting an S on the end of the name of the web site. It’s not as easy as just getting a security certificate. You actually have to look and make sure that all of the services that your site depends on. Also support HTTPS, so, for example, a large complex site might depend on many ad networks, maybe analytics providers, and so the sites have to sort of take an inventory to first see what are all of these third-party dependencies that I have and then do.

They actually support. Https and then, if they don’t, they might have to go out there and actually convince them to start supporting HTTPS. So it can actually be sort of a project management type project as well to like make sure that you you’ve sort of done spring cleaning of the whole site. Well, Emily. Thank you so much for being here and telling us about HTTPS, and I learned that there’s so much more to it than just the S at the end of the URL, where at the end of the protocol in the URL and how it’s actually like deeply ingrained With the API is that people use for being Sheriff thanks for every week, so if you’d like to weigh in on the HTTP discussion, leave a comment below we’re going to have links to everything we talked about in the description tune in next time.

Thanks for reading


 

Categories
Online Marketing

Intro to ARIA — A11ycasts #13

So, for instance, I’ve got this input here, wrapped in a label and that’s going to produce a visual UI like the one that you’re seeing here this radio button.

But that’s also going to create a spoken UI based on the built in semantics of those native HTML tags. Now, if you’re not quite sure how all of that happened, or why those semantics matter be sure to check out our previous episode on semantic. So I’ll include a link down in the show notes and we can also maybe drop in an annotation up here for you to click on. I just I have some background on how semantics work and why those are important in the first place now.

This is all good and everything, but there are instances where a simple layout in native HTML just aren’t going to cut it and so to handle these situations. We have the web accessibility initiative accessible, rich internet applications, spec, which is a bit of a mouthful. So you oftentimes see this referred to as wai-aria or maybe just Aria, so audio works by allowing you to specify attributes on elements which then modify the way.

Those elements are translated into the accessibility tree. So let’s take a look at a really basic example. Just to show how this works, so, if you create a a plain checkbox a screen reader is going to announce it. As you know, a checkbox it’ll tell you what its label, if it has one like we do in this case, where it says, receive promotional offers and it’ll also tell you the the state of the checkbox right, whether it’s checked or not, but let’s say you’re in A situation where, for whatever reason, you need to implement your own check box using something like like a div right, maybe you need to style it in a really special way.

So, in this case, we’ve got a div checkbox we’ve created here, and the screen reader is going to give the user really like no indication that this element is meant to be a checkbox. It might announce the the text inside of the div there, but it’s not going to tell you the role of the element. I can say it’s a checkbox. It’s also not going to tell you the state so excited you sure is going to be able to see these visual cues and they’ll be able to figure out that this is a checkbox.

But nothing is going to be announced to our screen reader users and that’s a really big problem. So using Aria, we can actually tell the screen reader about this extra information here up at the top, I’ve got some custom checkboxes just created using gives down at the bottom. I’ve got some checkboxes using the native input element so using voiceover. Let’s see how these are announced differently: voiceover, I’m chrome, custom checkboxes in custom check intense group with three items there and then slices group with two items: heading ten times check, check box and then slices uncheck, checkbox voiceover off.

So you see there that the the div elements just are announced as groups. It doesn’t indicate to the user in any way that these are checkboxes where it’s the native element. It indicates it’s a checkbox and it tells you the state whether it’s checked or not. So, let’s see if we can add some Aria to improve upon this so over in my dev tools, I will select these the checkbox elements and I’m going to start off by just giving them a role of checkbox and I’m also going to give them a state Of Aria, checked of either true or false, depending on you know the actual state of the element there.

So if a role checkboxes to the one Aria checked equals false and let’s try it again using the screen reader voiceover, I’m dropping custom. Checkboxes 10 pens check the checkbox and then slices contract checkbox always go over all. So adding that role and Aria checked attribute causes the middle Union accessibility tree to actually have the desired role and state without changing. You know anything else about the nodes, appearance or its behavior, which is pretty awesome right, we’re just adding in additional semantics using Aria.

So in terms of the accessibility tree, what ru does is it really allows you to subdue like tree surgery? So you take the accessibility tree as generated by plain HTML. You add Aria to that, and now you get a different accessibility tree and it may be subtly different or it could be radically different, depending on what attributes you use, however, keep in mind that this is really the only thing that ru changes.

It doesn’t change anything about how the element behaves on the page. For instance, it’s not going to suddenly make your element focusable, it’s not going to add keyboard event, listeners for you or anything like that, or you does not change behavior in any way. It really only is for adding in additional semantics. So if you, you know, if you’re making a custom control, it’s really on you to make sure you go back, and you also add in that keyboard support so you’re kind of like maintaining that that consistent experience for your users.

So now that you understand more about what ru is and kind of some of the basics of how it works, I want to cover some of the things that Aria will. Let us do in our application, as we saw in that check box example. Aria can add semantics to an element where no native semantics already exists. So, for instance, you take a div element, it has no built-in semantics, but we can use Aria to be able to role.

We can use already to give it a check State, for instance, build a custom check, box or radio button, or something like that, or you can also be used to modify existing element semantics. So, for instance, let’s say I’ve got a button element that I want to. Actually turn into more like a toggle button, so I can on/off switch type of control. I can give it a roll of switch. I’m give it an already check state of true or false, and now I’ve sort of modified the semantics of this control, and now it’s more of a even more specific kind of thing.

It’s like a toggle button right to switch button. It’s important to note here, though, that the switch rule is part of the newer aria 1.1 spec. So, as I’m recording this, you know there’s probably a number of assistive technologies which do not support this role. Just yet, just like all web standards. Aria is you know, constantly evolving and advancing to try and keep pace with new UI patterns, so that’s something important to realise as well right, if you, if you come across an aria rule, you also want to check for the support of that role in assistive technology To make sure it’s widely supported, and then you can use it another thing or you can do is it can express semantics and UI patterns which really like don’t already exist in HTML, and I think this is where Aria kind of comes into its own Aria.

Basically, will let you create accessible widgets, which are not possible using plain HTML. To give you an example. Here is like a tree: widget component, okay, we can take an unordered list and add all your rules of we tree item and group and add an already expanded attribute to a few those children and now we’re expressing the more rich semantics of this tree element and Again, there’s no tree tag in native HTML, so it’s something that you know we wouldn’t be able to build otherwise without aria, which is really important.

Another thing we can do and as we saw this in our previous episode on labeling or you can add extra labeling and descriptive text to an element right to give that element an accessible name. So, for example, if you have like an image only button which doesn’t use an actual image element, so you don’t have access to an alt attribute or anything like that to put alternative text on it. You can still use Aria.

You can use Aria label to give that element its own accessible name, and that way you can have it be announced properly by a screen reader to those users, or you can also express semantic relationships between elements which go beyond just like standard, dom parent-child sibling relationships. So, for example, a more complex relationship is something like this element controls that element over there.

Even if they’re not like you know, direct parent-child or anything. So in this case right here, I’ve got a button which controls whether a particular part of the page is visible or hidden, and it does this in the form of kind of a disclosure widget. You can see here where it shows advanced settings. We’ve specified using Aria controls – that’s actually controlling this group of elements down here for these Advanced Settings checkboxes.

So even though they’re not parent-child, they’re, actually sort of like siblings. We can create this new relationship indicating this element over here controls that elements over there, which is really cool and finally, Aria, can make parts of the page live, so they can inform assistive technology right away when something changes – and we saw this in our previous episode On building alerts, so we add role equals alert to some element.

We drop some new content into it and then it’s going to announce that immediately through assistive technology to the user. So are you giving you a lot of tools to make sure the experiences you build? Are semantically rich and can be easily understood by assistive technology? Now we’re definitely going to be diving into the subject more in the future, but that about covers it for today. So if you have any questions, you can always leave them for me down below in comments, or you can hit me up on a social network of your choosing.

As always thanks. So much for reading I’ll see you next time, hey. If you enjoyed this episode of Ally cash, you can always catch more over in our playlist or click. The little subscribe button and you’ll get an email notification whenever we launch new stuff on the blog. As always, thanks for reading


 

Categories
Online Marketing

Essential JavaScript SEO tips – JavaScript SEO

Let’s look at a few SEO techniques to help users find your content. All of your pages should have a descriptive and helpful title that describes what the page is about in very short terms, for example, on recipe pages avoid using a generic titles such as Barbara’s baking block.

Instead, each page should have the name of the recipe in the title, so it’s clear what the page is about. You also should provide a description of what the page will contain, specifically, for example, what makes this recipe special on what are its main characteristics? So people have something helping them identify the best page to fulfill the intended goal. Both of this can be done by adding a title and meta tags in your markup.

You can check your pages for those tags by using the right-click inspect and then search for double slash, title and double slash meta to find them. If you do not see all of your content in the markup, you are probably using javascript to render your page in the browser. This is called client-side rendering and is not a problem per se. Rendering is the process of populating templates with data from api’s or databases.

This can happen either on the server side or on the client side, when it does happen on the server crawlers, as well as your users get all the content as HTML markup immediately in single page apps. The server often sends the templates and Java scripts to the client and the JavaScript then fetches the data from the backend populating the templates as the data arrives, as explained in the first episode, the indexing for JavaScript sites happens in two waves content.

That requires JavaScript to be fed, we’ll only be indexed in the second wave, which might take some time in later episodes. We will cover how to overcome this and often also improve the user experience and loading performance by using techniques such as dynamic, rendering hybrid rendering or server-side rendering for single page apps. Another important detail is to allow Googlebot to crawl pages from your website by linking between your pages properly, make sure to include useful link anchor text and use the HTML anchor tag with the destination.

Url of the link in the href attribute do not rely on other HTML elements such as div or span or use javascript event. Handlers for this now only crawlers will have a trouble finding and following these pseudo links, they also cause issues with assistive technology. Links are an essential feature of the web and help search engines and users find and understand the relationship between pages, if you are using javascript to enhance the transition between individual pages use.

The history API, with normal URLs, instead of the hash based routing technique using hashes, also called fragment identifiers to distinguish between different pages, is a hack that crawlers to ignore using the JavaScript history. Api, on the other hand, with normal URLs, provides a clean solution for the same purpose. Remember to test your pages and server configuration when using javascript to do the routing on the client-side.

Googlebot will be visiting your pages individually, so neither a service worker nor the JavaScript using history. Api can be used to navigate between pages test. What a user would see by opening your l’s in a new incognito window, the page should load with an HTTP 200 status code and all the expected content should be visible. Using semantic HTML markup properly helps users better understand your content, as well as navigated, quicker assistive technologies like screen.

Readers and crawlers also rely on the semantics of your content, use headings, sections and paragraphs to outline the structure of your content, using HTML image and article tags with captions and alt text to add visuals. You have crawlers and assistive technology to find this content and surface it to your users. In contrast, if you use JavaScript to generate your marker, dynamically make sure you aren’t accidentally blocking Googlebot in your initial markup, as explained in the previous episode.

The first round of indexing does not execute JavaScript having markup such as a no index meta tag in the initial payload can prevent Googlebot from running the second stage with JavaScript. Following these steps will help Googlebot understand your content better and make your content more discoverable in Google search, hi Googlebot hi Googlebot. Did you see the new webmasters article serious? No, I did not what you missed out on so much stuff.

Really, yes, oh no. How could we have prevented that well subscribe and follow our articles?


 

Categories
Online Marketing

Web Fonts – The State of the Web

”, My guest is Dave. Crossland He’s the program manager For Google Fonts And today we’re Going to be talking about the state of web fonts –, what are they, how to use them? Effectively and what’s new, Let’s get started, [ MUSIC PLAYING ], So Dave. Thank you. For being here, My first question is: About why web fonts, What do they bring to a website? Beyond the standard fonts like Helvetica DAVE, CROSSLAND Well, Web fonts really express a certain kind of Feeling for organizations They express a brand And you can have a web Page without a article, but you can’t have a Web page without text You have to have fonts And so a brand at its core Would be like a logo, a color and a typeface or a font, And so web fonts bring The kind of rich design that we have in print Media to the web, RICK VISCOMI And according To the HTTP Archive nearly one third of Websites use a font from the Google Fonts API, So why are developers turning To the Google Fonts API DAVE CROSSLAND, I would say That Google Fonts is fast, easy and free And so on.

Our Analytics page we’ve clocked up over 22 trillion. Font views in total since the service Launched in 2010 – And I think that being on Google’s content, distribution networks, we benefit From cross-site caching, So when you visit the First website that uses a font like Roboto, it’s downloaded and you may see Some latency there, But then on all Subsequent websites, which use the font From Google Fonts, then it’s in a cache And loads instantly across the different websites, We also try and Make it really easy So the font’s API Abstracts, a lot of the complexities of web Font technology from you, So we serve different formats.

To different browsers, For example, with better Compression formats, like WOFF2, only the newer Browsers support those, And so we serve WOFF2 files. To those newer browsers And we serve other Formats to older browsers And then finally We make things free and we have a directory of Hundreds of choices which everybody can choose from Now, of course, if you Want a particular typeface, then it may not be Available in Google Fonts and you would go and license That font for your usage, But not everybody, has the Sophistication in design or the resources To license fonts And I think it’s important That everyone in the world is able to do typography, RICK VISCOMI, So I don’t Know if developers truly appreciate how complicated Web fonts are under the hood.

I got a taste of this when I Was at YouTube a few years ago, I helped change the Default font to Roboto, and it was not as easy as just Changing the font-family CSS style, There’s a lot you need to do to Make sure that it goes smoothly for the users and they Have a good experience, For example, like YouTube users, Are from all around the world, They have different languages. Different alphabets, What are some of the Things that developers need to be concerned about For an international audience, DAVE CROSSLAND International Users face a challenge because the file sizes Of fonts, for them can be larger than just For European languages Traditionally Google Fonts has done a kind of slicing of Fonts into language or writing system sets, So we might have, for example, Latin Latin Extended Cyrillic Cyrillic Extended Greek Greek, Extended and Vietnamese: That’s your current support for Roboto that’s used on YouTube.

We also support Other languages — Hebrew, Arabic, Thai, Many different Indian writing systems And the biggest Challenge has been for Chinese Japanese And Korean fonts, A typical font for Indian languages can maybe be two or three times Larger than a European font, But for East Asia it can Be a hundred times bigger And so we’ve been able to Use a number of technologies, for example WOFF2 Compression which is now a W3C standard this year, And also the @ font-face Css has a new aspect called unicode-range.

Unicode-Range allows us to Slice, the fonts into pieces, dynamically And the browser will Only download the pieces that it needs, So that means that We were able to slice a Chinese, Japanese or Korean Font into over a hundred slices And therefore the Latency of each slice is similar to your European font, This means that the experience Latency is much better And because the Slices are cached across different Domains then the font gets faster and faster To load over time, RICK VISCOMI Custom fonts have Also been used for icon fonts to show images And more recently, they’ve Been used for emoji as well, So we’re moving beyond just Text and on to these other ways that we’re using to communicate, But it’s not without its Own challenges, right, DAVE, CROSSLAND, That’s right! Font technologies are always Improving and evolving And the use of emoji as a kind Of special case of icon fonts is particularly interesting.

I think that there’s a Debate in the web development community about how To best approach this Using images for icons, whether That’s PNG or SVG vector images is –. There are some advantages there. One of the advantages To using icon fonts is that aligning icons with Text in labels is often is a common use case And getting the alignment Onto the baseline of text can be tricky when You’re dealing with two elements: — a text Element and a image element And so icon fonts can Play a good role there.

They also have good legacy. Support because obviously text systems work everywhere. Unfortunately, for Emoji and color fonts that’s a little bit. More complicated because there are Different color formats for different platforms, And so one font file needs To have a lot of data to support all of the Platforms at once And they can look different On different platforms, So yeah emoji as web fonts Is still I think, kind of — is a cutting-edge thing, But it can add.

Consistency – and I hope we see more developments – Of that in the future RICK VISCOMI And going Back to the Roboto at YouTube example: one Of the things I remembered that was kind of tricky Was when we would have font-weight bold in our styles, That would default to Weight 700 by the browser, But our designers decided that It looked best as weight 500, So we actually had to go back. And change all of our styles from font-weight, bold To font-weight 500 And it became kind Of a new way that we had to ingrain into Our style development, But there’s something new.

That’s Coming out called variable fonts, How would they help Address the situation, DAVE, CROSSLAND, Yeah Variable fonts can help a lot. It’s a very exciting. New technology, It’s part of the Opentype standard, which is the font format that that’s Widely supported in pretty much all platforms today And variations allows you To do runtime interpolation between different sort of styles, Or faces within a font family, So traditionally you would Have like a thin weight, a regular weight, a bold Weight and extra bold weight And in CSS you’ve only Had up to nine weights — 100 through 900 With variations, then you are Able to specify weight, 154 and dial in a very specific And dynamic weight You can animate these weight.

Changes using CSS animations And in CSS4 there’s more Direct support for this RICK VISCOMI So does that Mean that every font is now going to be able to be Completely customizable, Or are only a few fonts going To be eligible for this DAVE CROSSLAND Well, it is something that font developers Need to add to fonts, And so in that Way it breaks down the traditional wall between the Font maker and the font user And so variable Fonts create a kind of dialogue between the two, So as a font user, you Can customize the font, but only in ways which the Font maker has provided for, And so that means that you don’t Need to become a type designer yourself, but it means that you Have that flexibility that you didn’t have before And the variations are Not only for font weight, There’s, also font width, There’s slanting And there’s also optical size, And those are all part of The OpenType standard today Optical sizing, means that When you change your font size from 10 point to 70 Point then, the letter forms will actually react and Respond to that change, And so, as your font Size gets larger.

The letter forms will Become more elegant And as it gets smaller They can become more legible, more readable And there’s also all other kinds. Of variations, you can imagine, which aren’t part Of the standard and are specific to each font, Things like rounding and many creative options. Google Fonts is commissioned. To sort of experimental trial fonts from type designer David Berlow at Type Network.

The first is Decovar, which Has a lot of variations which are decorative so rounding Different kinds of serifs different kinds of Stroke patterns And this can be used as a Kind of graphical device, Because variations Can be animated, I think there’s a lot. Of potential there, The other typeface is Amstelvar And Amstelvar is A text typeface and it has a set Of parametric axes which go far beyond Just weight and width and into things like The ascender length descender length and A lot of variations which can be used together, To create more readable text, RICK VISCOMI, I’m Especially interested about variable fonts, We’re going to have to Have you back on the show once they’re a little Bit more established, Then we can talk about The state of them, But where could Developers go if they want to learn more about Any of these technologies DAVE CROSSLAND Microsoft Edge has on their developer site a Really good variable, fonts demo site That’s a great place to learn.

More about variable fonts, There’s also the Design.Google.Com/Fonts articles website, where the Google Fonts team publishes articles about type and Typography in collaboration with the Google Design team And then there’s Also material.Io, where you can get the Material Design, icons, font and learn more about Material Design guidelines, RICK VISCOMI, Well, there you go, The links are in The description so go check them out.

Share your web fonts stories. In the comments below Don’t forget to Like and subscribe so you can tune in For another episode of “, The State of the Web” Every other Wednesday, 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

Learn How to Design — Designer vs. Developer #10

How did you manage to break through? So it’s not stopping you, but maybe enhancing the stuff that you actually do. I think one of the things that I always struggled with is that, from the visual standpoint like I’m, not a super talented visual designer I’ve seen some amazing visual designers that I’m just like. Oh, my goodness like that is really really slick, and I love that and that’s not like my strengths, and so I was a lot came back more from like the coding or a perspective being able to actually implement some stuff in code which they couldn’t.

But you know there was this kind of this deciding factor realizing. Am I more of a designer or more of a developer like you know, I’m not necessarily that great at graphics, but there’s still so many other ways of design that can kind of spread in so really like doing some research and finding about more about UX design And realizing that is really kind of wondered what I wanted to focus on, it’s kind of what led me to that.

So it’s definitely was this kind of process of navigating through it’s like. Where do I fit in my designer and my developer, were you know from the first projects that I started doing you know a lot of time? I did a lot of websites and when people come to you, they go hey. We need a website built, they don’t necessarily say hey. We need some front-end developer to come and come do this, especially if you’re working with smaller businesses and clients.

So you do take on the designer and developer hat to kind of make that happen. A lot of developers are very afraid to learn about design. It’s like, as I get question question like if I was to write an article, the perfect article for the developers would be how to how to learn to design or how do you, then, which makes no sense to me, because learning to design doesn’t really mean anything. It’s just like what part of design you know what discipline of design but there’s still that question of okay.

What is the first step? That’s someone who wants to really as someone who’s gone through this process yourself. What was your first step to say? Okay, that’s it! I’m becoming a designer right, I think you know following a lot of design patterns at that time. I didn’t really understand that they were called design patterns right. You kind of you implement them in the site’s doing a lot of web work.

You kind of take on okay, the navigation menu. Where does that live and you’re following a lot of the patterns that have already been created, and so you kind of learn to explore through that, and then you know, testing out the site and realizing. Oh, this doesn’t feel right like something’s off, let’s, let’s work on how to make this better, but I think one of the the great things that can really help designer or developers wanting to go into design is looking a lot of like the material spec guidelines.

They’re. Actually really really helpful, because not only does it actually tell you hey here’s some guidelines of what to follow, but it actually doesn’t really got a good job of explaining. Why you’re doing that yeah exactly so. That actually is really helpful because then you’re able to understand. Why was this created like what was the thought process behind, adding potentially a bottom navigation, or why would you have a side side nav? You know it’s it’s really getting to kind of explaining that so you’re able to learn from learn from actually interacting with something and seeing how they’re doing it, but also getting finding out why they decided to do that, because I think well so much of design is Some it’s problem solving right, so so many people forget that when I think of design they think of the finished product, but there’s so many different stages of how you got to that finished product.

And so a lot of it being able to understand how someone was thinking through that really really helps you from a development perspective get into that design field of understanding. Okay, how do I get from thinking of? How do I develop this versus? How do I even arrive to the solution? I think that’s the that’s kind of the big difference there as developers. You know you have something. That’s already designed for you.

For the most part, I mean some people get handed things. Some people get handed an ios mock and said: hey make this and make this into android. So then, at that time you kind of become an Android design. In that aspect, what you think is like the biggest thing that stops developers really understanding design. One of the things that we do at Google is we do design sprints, so the design Sprint’s are really great because it brings people from all the different disciplines and such leads together to work into solving a challenge that we have.

You know. So you have product managers, engineers, designers, researchers, everyone in the room together and kind of thinking and working through a problem which is really fantastic because you get all these different ideas and one of the things that I really notice is where, as we’re bringing in designers, You know and engineers, and all these people together is when we’re walking through the challenge.

The engineers are already thinking of the solution, yeah and already thinking about how to implement it. They go straight to that which makes sense that that is their role right as engineers. Usually, you are given something and you have to go. Oh, how do i, how do I make this happen? How do like thinking through problem solving how to actually get to that solution where, as designers, we don’t know what the solution necessarily is? So I think a lot of the blockers is automatically wanting to know the answer yeah, instead of being more aware and being okay with saying you know, I don’t know the answer to that, but let’s let’s explore it together, yeah, so I think that’s the biggest hindrance That can really stop developers and to getting into design.

It is wanting to have all the answers. It’s it’s okay, not to have them I mean, and what do you think developers can actually do to get past? That I mean because I find like for me. It’s way sketching and just experimenting, and so I suppose, is how does the developer maintain that kind of playful space where they’re, not thinking right, here’s the library we’re going to use to do like or whatever widget or fab or whatever? But what can they actually do that allows them to to not thinking about like the end result or breaking from that cycle? Yeah, you actually bring up a great point with sketching.

That’s probably one of my favorite exercises when I’m working with different people to get them thinking of solutions. So if you’re developing an app or so is hey, let’s get some sketches out there get a sharpie and just start sketching out through some ideas, because that really that doesn’t you can really get some ideas on paper and not be merry to them. You know and not feel like really connected, because you spent all this time developing the solution and realizing.

Oh, it doesn’t really work, and so, if you start really low fidelity with some sketches that can really open up your mind in terms of thinking about different solutions. Because as you’re sketching through it you’re realizing, oh like maybe I want to use this fab button or something everyone loves fab right, so you want to incorporate it somewhere and then you realize hmm, maybe that’s not the right thing to do and I haven’t spent all This energy developing or even designing this, so then I can kind of toss that and move on and create a different solution.

So sketching, I think, is a great resource. Instead of people go straight, a lot of people like to prototype in the code, but I usually like to challenge people and go hey start, sketching some ideas and then once you’ve landed on something that you think you want to explore. Some more then dive into code or dive into sketch or whatever your you’re using. So I suppose for the engineer to really understand design.

It’s almost like okay, just start sketching first and start thinking about the thing you’re going to build and the possibilities, rather then straight to the in solution. One of the things I really noticed there was the way really good designers responded to constraints. You know you think about: I don’t like black and white photography or jewtown prints, whatever their responses to restrictions on the medium