Accessibility

ANDREW OLSON:
Well, let's go ahead and get started. So things are (INAUDIBLE) to the code of conduct, thing could drop that in the chat, I haven't been doing that, unfortunately, but let's let's do that quick. My name's Andrew Olson (INAUDIBLE) and here is the code of conduct. So everybody, if you have any questions, check out that link. If you run into any issues, you can reach out to myself or (UNKNOWN) is also on this call. And we'll just be excellent to each other and let us know if you need any help or support thanks. Where we are today is we're talking about the topic of accessibility. Welcome to the (INAUDIBLE) unconference this topic was kind of thrown out there. Again, going back to myself, my name's Andrew Olson, I'm a front-end developer at Bounteous. I'm an accessibility advocate I like surrounding myself with all things accessibility, but day job is definitely front development and bring accessibility when and where I can. With that, with the unconference, with this topic, there was something that was brought up in the Drupal slack accessibility and what you're seeing on the screen here is like a shared note.

So I see some other people have joined I'm just going to post once again the page where we are, the link is at the very bottom of where we're taking notes (INAUDIBLE). So with that, feel free to add yourself as an attendee if you so choose. But back to the first topic is Drupal Slack, if you aren't in Drupal slack, it's a great place to be. And the accessibility channel is a great place to be as well, where people talk about a lot of accessibility things. On March 3rd Jennifer (UNKNOWN), believe I'm saying that correct. correctly reached into the channel for a few things. They're asking just the team in general about these pages, pages. So in full disclosure, I did not have a chance to look at these links. So that's something I've been meaning to do, is to look at the links where documentation was needed for help. We can kind of go through that and just kind of see what is out there for Drupal and accessibility and some of the documentation. The other topic is there's always the style guide of accessibility, if we want to familiarize yourself with that or this is another chance if you want to talk about anything regarding accessibility with, like, site.

I do know one attendee in here (UNKNOWN) who has given some really good talks about accessibility. So don't know if she has anything that she wants to discuss, but she does a really good job speaking and talking about accessibility things. That's kind of what we have and we have till 3:45 to discuss. With that, I'll open up, see if anybody has anything, feel free to put into chat or unmute yourself and speak up.

SPEAKER 1:
I have a comment about the first topic from Jennifer (INAUDIBLE), what those are is there are pages that let us know how we can give back to Drupal in the form of accessibility, like some roles that you can look into, some tasks, things like that. So this is a good starting point for people who maybe are already familiar with accessibility and want to give back to Drupal in a way of that but you don't know how to contribute back. These pages are a good resource for that. And of course, if you're new to these pages, looking and making sure that it's clear and this is what her ask is, that it's clear how to get to these places. It's clear what the task is, it's clear who should do these tasks. And she is opening herself up to help with those series of pages.

ANDREW OLSON:
Cool. Did you... Again, I saw that it's been earmarked for me to kind of go back and review closer. Has there been much movement on that? I do try and stay up on the documentation channel and the Drupal Slack as well, but fail most times. Keep up.

SPEAKER 1:
I don't have the answer that because I've been looking more at the contributor tasks, getting ready for Drupal (INAUDIBLE). So I've been focusing on that part of the documentation right now and making sure that we know where we can send folks and have clear documentation on how the people are clear on how they can contribute. So I don't know the status of these pages.

ANDREW OLSON:
OK, cool.

SPEAKER 1:
But you can see, but you can see in the sidebar, there's a

ANDREW OLSON:
So it was a priority area. And also, ironically enough, I'm not logged in because there's no way for me to edit these pages right. And give back and provide that feedback or creating an issue. Right. cool. (INAUDIBLE) people that have (INAUDIBLE) yeah Interview. OK, so this is a great way to give back a few... These are some good links to review, definitely pretty not on this call that's a good takeaway if you want to give back or Drupal in accessibility. This is a good place to do it. Thanks for that update in context, because they didn't quite have that it was, hey, this looks like a way I can help get back. The next one's not quite as exciting, this is just the general and a Drupal accessibility page statement. Talking about how, you know, Drupal is aiming for Web content, accessibility guidelines of AA. I do know Mike Gifford has been a big advocate for the authoring, so (INAUDIBLE) which is the authoring guidelines in Drupal. So I do know he's has some issues, I think, in the accessibility (INAUDIBLE) about that, but that's another place for Drupal.

So out of the box meeting 2.0 AA its between Drupal itself, between the authoring guidelines, there's also a third thing. There is something-

SPEAKER 1:
I have a question about that. OK, so I'm not sure I don't work well anywhere with the accessibility team, but I thought 2.1 was the standard that people are aiming for these days. Is Drupal behind on that effort?

SPEAKER 2:
Or 2.2.

SPEAKER 1:
Well, 2.2 is (INAUDIBLE) pretty close to being finished, but 2.1 been out for quite some time. I'm just I are we not aiming for that as a community or is this just old antiquated? OK.

ANDREW OLSON:
I mean, the style guide, so maybe. maybe in wrong place.

SPEAKER 3:
I thought I remember sometime the last nine months in my little brain, somewhere in the accessibility channel or an issue someone was talking about updating that to the (INAUDIBLE) three. Which is kind of a reorganizing of the content of 2.1 or 2, sorry.

SPEAKER 1:
Yeah but three, I don't think is coming (INAUDIBLE) like March of next year or so. It's still in draft form, I think.

ANDREW OLSON:
Correct.

SPEAKER 1:
But it would be nice to target that because if it's on the horizon and people think those issues are important, that's a good level to strive for.

SPEAKER 3:
(CROSSTALK) triple 10 in mind.

SPEAKER 1:
OK.

ANDREW OLSON:
Cool, I do know three is a restructuring, so like 2.0,2.1 you still meet, you can aim for 2.1, and it's just it's additive, but I think 3.0 is a little bit more of a shift with what little I've read about it. It is a different, slightly different way of approaching it for some guidelines. So still feels pretty new, but, yeah, we should be having conversations about what 3.0 is and how that applies to Drupal, that would be interesting. But that's a good, point here. I do know for myself and projects whenever I roll into it, we do aim for a 2.1, and whenever there's a new contract or new project, somebody says 2. 0 we do up it 2.1 because 2.1 is again, it's additive, but it's great because it's more specific and helpful for clarity. And there are some good articles, I think, on the differences between 2.0 and 2.1 but really it's not... From my standpoint, is it just provides some clarity on things that are a little squishy in 2.0 it's helpful. Anybody else share

SPEAKER 2:
I haven't looked at 2.2 yet, but we strive for 2.1, we don't always head out, but we try.

ANDREW OLSON:
Great. What tools (UNKNOWN) do you use? All the tools?

SPEAKER 2:
No, I don't, (INAUDIBLE) I do use that wave thing and the lighthouse, I run that periodically on different pages of the website to see what's changed, what's no longer accessible, there's (INAUDIBLE) by accident or just to look and see where we are. I only have to manage one website, so.

ANDREW OLSON:
That's great.

SPEAKER 2:
Yeah, and, we also use... Because soo much of... So our website is (INAUDIBLE).org, it's target lower income individuals with legal problems. But we also have an internal style guide for how we write all of our content. To try to make it, we shoot for a sixth-grade reading level. Which is (INAUDIBLE) hard, and that's what we strive for, so with plain language, gender-neutral pronouns. Don't ask questions, you don't need to. We're not always there, but.

ANDREW OLSON:
That's great. Just while I I'm just so sure that I'm get to talk to (INAUDIBLE) that much. This is great. How often do you, look at your site? It's great that you have those tools. But do you find yourself like on a release cycle? Is it like quarterly? You kind of take a look at the site or when do you feel compelled to check on things?

SPEAKER 2:
For the accessibility site probably about once a quarter.

ANDREW OLSON:
OK. Is that like a task that you assigned yourself? I'm assuming that's, you right?.

SPEAKER 2:
It is something that I assigned to myself, well, I'll be both, I will assign myself to do it and also assign (INAUDIBLE) developer to take a look at it and make recommendations to me as well.

ANDREW OLSON:
That's great.

SPEAKER 2:
I know.

ANDREW OLSON:
Cool.

SPEAKER 1:
So do you have a lot of content authors? Or does your content change a lot?

SPEAKER 2:
Yes our content changes all the time, especially changed a lot in the last year because of all of the pandemic laws that have been and that the stimulus acts and all that stuff. So we have a staff of three content managers and then we have outside editors who can go in and make changes. They're mostly lawyers and (INAUDIBLE) community. But then our content managers, we do everything before they publish it.

ANDREW OLSON:
So it's like a workflow in there.

SPEAKER 2:
Yeah.

ANDREW OLSON:
That's great. Cool.

SPEAKER 1:
It helps, I know that some of the sites I work for an agency. So we have a lot of sites that we manage and we do accessibility audits on some sites every quarter. And it's usually all the content that breaks everything, not the Drupal updates, not content features, because we kind of make it into our workflow, but it's the content. And so we've been working on having a training program for content authors like some knowledge-based documentation. But some of these agencies or whatever it is, their constant turnover of who creates their content makes it challenging. I'm not paid by (INAUDIBLE) OK, they do have a paid service, but they also have a browser extension that's free and I love using the browser extension. You cant track the site over time like the site improve kind of advertisers. But what I like about the browser extension is it's a one-click browser extension and then it runs the site. It tells you what the errors are, but then it also tells folks what to manually check for and it'll give like the different components to manually check.

So I like that sometimes when I'm first, like, teaching people how to do an audit when they don't have that muscle memory of what to remember to check for manually I say use the site, improve extension because it'll remind them, oh, I need to check, you not only the alt text, but what's the viewport like and what's the... Yes, I can tap through everything, but is everything in focus visually. So that's that's been a really convenient tool for our new auditors just because it reminds you of what to manually check.

ANDREW OLSON:
I'm also the one I've been into is accessibility insights. So I don't know if you've seen this tool, but it does that as well is to put that in my notes.

SPEAKER 1:
And is that free?

ANDREW OLSON:
It is. So what I like about this is actually the browser plug in right here, but let me just go to your site and just see what to pick on Aquia, who should be pick on? Why don't we pick and Drupal?

SPEAKER 1:
I know a bad site do you want a bad site?

ANDREW OLSON:
Sure. I just want (INAUDIBLE) political here.

SPEAKER 1:
Very neutral, very neutral geocaching.com.

ANDREW OLSON:
Geocaching.com. OK.

SPEAKER 1:
OK, I use this all the time for my examples because it's horrible.

ANDREW OLSON:
Yeah. So look at this video that I cannot stop. Right. Because it's just going alright, great. So with accessibility insights, I can do this, so those two things, actually three things, but FastPass is kind of like a lighthouse where you just run it and it gives you a score and it tells you how to go in and inspect a little bit better. But I like this assessment and I've used this on audits of sites when we're really trying to size things up. So when I click on it, it's going to say, "Hey, sorry, something running". I'm going to just say start new. So here we are, so I'm starting new. It's helpful with a larger screen, but what this does is I think what you're saying to improve it does as well as it takes you through these 24 different things. Some of them are manual but what this does for me as an auditor, just looking at things that level sets to make sure I don't miss something when I'm looking at a page that forces me to kind of go through all the things. So I start at one and I say, hey, some automated checks.

You can click here to say, is there any area (INAUDIBLE). And then I clicked, and then checked in, and it's like, hey, there's none of these things really in the page, looks like everything's OK. No matching or failing instances were found. If there was, you can turn on the visual thing and it would show so many changes go through. So far, so good, like some of the low-hanging fruit of automated checks. This is home page seems like it's pretty OK. Next, we go to the keyboard, this is the part that I like quite a bit is when you've got a keyboard navigation. I like to do the visual helper on. And then when I do this, as I go into the page, I'm going to use the Tab navigation and it visually shows me where I am. So give me a second as I get into the page. So right there, if you look at my screen and the top left, it's saying, "Hey, I'm at this Geocaching thing". When I tap again, I'm going to something else here, and then now I'm going to English. It looks like I can pick that with my keyboard, but it's like, what's next?

So this allows you to kind of see visually where you are on the page, this would have been helpful actually, with the thing we had earlier for the Chicago site to kind of know where your tab goes. So it's doing a few things right here let me go back to that. So these are, I think, fairly well done, so this is one piece of content with one link, notice that this appears to be a link, but the whole thing's a link. So they're doing a good thing where it's not going to they coated this round or not terribly well as it would be a link and then a link here, like a double stop to go to the same place. Hopefully, I'm making sense, but sometimes that's a battle that I have a lot with our friend and our team they'll get a component like this. And we need to ask the designers to say, should this whole area be clickable on hover design hover here is an indicator that this is a link. If you're not well versed, you would maybe the image of the link and then only this link, and then this wouldn't be a link or you would make this whole thing a link and this also a link to get this hover effect.

So there are certain front-end techniques that you can use that make this really complicated. You also have a lot of room for error to make it really bad but anyway. So I'm going through it from a tab standpoint, it's doing OK. But I thought, I really like that tab, tool. Anyway, a lot of it goes through it where it tells you what to look for. They have some good videos, to the help page to guide you through it. And then ultimately you can say, hey, this past this field provides a good report. It's kind of caches in your browser and you can use that. But I use this for my manual testing with a little bit of automated testing and I use the wave. Yeah, if (INAUDIBLE) the wave to wave a lot of extensions. I use a lot of tools, but I use a collection of a lot of the tools when I do an audit. That's just my experience. Does anybody else have any other thoughts or want to share?

SPEAKER 3:
I have a tool that I find very helpful for me, since it helps me visualize color contrast is the color contrast analyzer extension from NC State, North Carolina State, really. t's only available for Chrome, but it might be installed on Firefox. What it does is when you click to generate or generate an image for that specification. So if you choose different levels of color (INAUDIBLE), then it will generate what it kind of seems to look like. So it helps me experience something similar to what a user might experience.

ANDREW OLSON:
Oh, that's great. I'm not familiar with this tool. That's great. So from doing an audit standpoint my colleague at Bounteous here made this website called Be Inclusive. And it's a way to say it wasn't (INAUDIBLE). You can try it for free for a few audits, but it's becoming a paid tool. Really we used to have this nasty Google spreadsheet that a few of us would find errors. We'd put it in there, we'd find the poor principal and all of the things right. So what this does is just it's a much better spreadsheet for us to collect, put our screenshots and it collects it all in one place and it provides a nice report on the other side of it. Anyway, I would highly recommend checking it out for us it's been really good to use. Here are some charting. Things in there, so it's like, hey, you have this menu violations, I found this menu violations it's here, here, here, instead of it being all in a spreadsheet and you could run reports and glean it, this has been a really good tool for us. So I'm going to put that out here for auditing.

I wish I could show you an audit, but I just don't know what I have in there at the moment and I just want to be sensitive to our clients. So any other tools or things? We got a I default to audit mode because that always looking at a side to pick apart always sparks some good conversations. Maybe we want to go back to this and pick it apart. I'd love to hear more from (UNKNOWN) about why this site is kind of like you want to beat it up a little bit.

SPEAKER 1:
Well, the keyboard stuff isn't perfect because you have to go through everything to get to the main content. Auto-play really bothers me and I can't show it a lot. I have to turn that off when I'm using it as an example.

ANDREW OLSON:
I'll scroll off of it. Yes, agreed it's very distracting.

SPEAKER 1:
It actually looks like they've updated their site since the last time I've been on there, honestly. So they may have heard one of my complaints because I use this app all the time because I Geocache, you know what I mean? And I want to show (CROSSTALK) this, but I can't because they can't access to the site for whatever reason. Do you (INAUDIBLE) mean? Let me go to it and see what I think.

ANDREW OLSON:
We also have Geocache and it's a lot of fun. So...

SPEAKER 1:
It's something to do during these times when you can't hang out inside with your friends.

SPEAKER 3:
So I was looking up to the extension that you're talking about with accessibility, insights, (INAUDIBLE) as four hours ago they reopened the Firefox support issue, which is an amazing coincidence. I just find these things I'm like Oh, I'm interested in this. I just learned about it does it work in Firefox? No. Oh, look, they're considered very young.

ANDREW OLSON:
Oh, OK. Yeah, I still do moving more I used to use Firefox, I went into the Chrome world and merging more and more of the Firefox, but I find myself just in Chrome a lot more these days. So that's interesting. Any other? I'll just share some battles that I wage at our agency when people ask and roll into projects. A lot of it does have to do with the simple low-hanging fruit of, as (INAUDIBLE) said, is getting in and being able to skip to the main content is just really helpful. So you don't have to go through all the nav and just setting up those landmarks to allow people to skip. And we find one thing for eCommerce sites. Another good thing, and if you don't know what we're talking about, I think Drupal.org has that so you get to that. So what we're talking about is this. So as I go into tapping into it, it skips to me content. And this is great to see you say skip the search. So they're anticipating my needs as a user (INAUDIBLE) say you might be here and you already know where you want to go.

And now I'm going all the way through the nav which is interesting, right. But those are what we're talking about, is being able to skip. So some sites that are good Let's see if, Republican think part of their platform. I think they're part of a gap and Old Navy, so let's see if they're still like this. I'd use this as an example yeah, so this is great. So skip to the Tab navigation, skip to shopping bag. They're very cognizant that people are buying things. So this is a great win for e-commerce people that I think a lot of them missed and skip to photo links. So I want to skip all the way to the bottom because I may not find what I need. So to me, this skip to shopping bag and e-commerce is pretty essential or even to log into your account if that is a major part of your purchasing flow. Those are really quick wins to really help people out that come to your site. Any other thoughts from people?

SPEAKER 4:
I have a question, but I don't know if you've covered it earlier, I came very late. When you have a bunch of accessibility issues. Is there a way to prioritize which one is going to be the most beneficial as opposed to the one that may be even on a double (INAUDIBLE) standard, but less of an impact?

ANDREW OLSON:
That is an amazing question. I love it, that is the debate, every audit that I do is what is the most wide sweeping change we can make to help the most people over time. And I'll answer the way we do it first is what you just saw here is a lot of tap navigation or being able to (INAUDIBLE) find in the page. So navigation is one thing that I recommend as they come to those pages. The other thing that whenever we do an audit, we use their analytics. So Google Analytics or whatever you use, we try and make the most impact on the highest traffic page. So that's another lens to look at. So if it's not navigation for wayfinding, if it's not the highest website analytics page, the next part is what's the most important flow through the site? In this site, it might be purchasing this person's dress that you see there so it's a buy flow. So what we do is we analyze the traffic to add something to the cart and then check out maybe we want to optimize the checkout. So what we try and do is find the most important path that a user goes through that provides the biggest benefit for the company.

And that's an easy way for them to nod their head and say, yeah, we want more people to buy. Let's optimize that flow and as you go through it, things tease out right. What we call using some e-commerce terms like PDP or PLP's, if you're familiar with that, so this is a PLP so a product listing page versus a PDP, so product detail page. So these are pretty templated pages, right? So what we do is we know that there's potentially tens of these pages and hundreds to thousands of these pages. So the more that we can improve that template, we can do that. Some other quick wins is like stylesheets, so some contrast things we can implement that. We can start another conversation working with marketing to say, "Hey, we really love that you make everything all caps, but we shouldn't type those all in all caps we can stylesheets to make them upper case because there's a difference between men and this being typed as M-E-N". So this is the stylesheets thing is that I'm kind of all over the place.

Does anybody else have any thoughts on (INAUDIBLE)things?

SPEAKER 1:
Really starting at that like component level, like getting all those global issues, like going through that top, we do that too it can be the top visited pages and we start there and then anything global, we start at that because if you fix it on one page, it's on all of the pages. And then also like just turning off your CSS and JavaScript and all that kind of stuff in your browser and seeing if you can see all the content that's available. That's pretty important because, you know, depending on your demographics, like if you, I live rurally. So sometimes a page it takes forever and for page to load so I don't have pictures turned on. Can I access that information? So that's like kind of a really good gauge too.

ANDREW OLSON:
What's funny is the sensibility and performance do go hand in hand, so absolutely.

SPEAKER 4:
And so within the let's say this is the page that I want to fix, it has 10 different accessibility issues. So I guess my question is also within these ten, which one is, I don't know, the most popular thing that more people have issues with, maybe it is color contrast, maybe it is screener either availability?

ANDREW OLSON:
I'll tell you what we default to is what is considered an A level versus AA this is AAA. So our next swipe through is to solve all A level---

SPEAKER 4:
Nice.

ANDREW OLSON:
Issues. (UNKNOWN), do you agree that's kind of your approach next is AAA. Again, that's awesome, we should all strive for that. But that might provide challenges based on what you have.

SPEAKER 1:
And you can see, by the way, then the numbers are on the page, how that fits in with the... So if you're not familiar with the numbering and lettering system, 3.11,3.12 you can see that it corresponds with that A and AA too just sort of does is that right, Andy? I mean.

ANDREW OLSON:
Yeah I mean, so giving a little bit about what kind of principles we are talking about is poor principles perceivable, (INAUDIBLE), understandable and robust and these numbers and letters can confuse people but in the end, they are additive. In this... I don't know if I'm answering the question properly but the way you can see is that level A is the link purpose like that's the base level of success like we really need to make sure that the purpose of each link can be determined. If you go AA is there's more than one way to locate a page and set up pages, so.

SPEAKER 4:
I think that's very helpful do you think about this, A is most important AA right after that AAA is a blessing.

ANDREW OLSON:
It's what to strive for and the other thing, too, is to know that this is the minimum criteria and something that we try and do is the concept of shift left is to say this should just be what we ship. This is what we're trained as an organization to meet and ship (INAUDIBLE) to do is add onto that and make it delightful after that and stay within these guidelines, but not just say this is enough. We want to really push things further. So these are.. They should be just the minimum things that we provide, but we want to provide really great digital experiences.

SPEAKER 4:
Do you know, if a resource in Firefox they have the accessibility tree? I'm looking for a way to learn how to read accessibility the tree because my understanding is supposed to help understand how the screen reader goes through the page.

ANDREW OLSON:
I am not familiar with that.

SPEAKER 4:
I could show you where it is, but not.

ANDREW OLSON:
Yeah (INAUDIBLE).

SPEAKER 4:
If you have Firefox.

ANDREW OLSON:
Let's do it.

SPEAKER 4:
Any website with individuals?

ANDREW OLSON:
Inspecting or?

SPEAKER 4:
Inspect element is accessability properties, so on the yep, and now if you open the document on the left roll document button, that's the accessibility tree. So I saw some people that shows how different things can be displayed differently. But I wish I had a resource to know like this in a way, supposed to be there without a screen reader. I can understand what the screen reader would go through.

ANDREW OLSON:
It's great. Well, there's the (INAUDIBLE). This is really helpful i have not explored this so this is great.

SPEAKER 4:
And Firefox added recently the

ANDREW OLSON:
Oh, that's wonderful.

SPEAKER 4:
You don't need to (INAUDIBLE) through to pay it (CROSSTALK).

ANDREW OLSON:
Oh, man, I just learned something. Thanks so much. Very cool I will need to check this out further. But yeah, this is really great showing really great from a screen reader standpoint, HTML is really rating good, HTML that structures the page well. So document to a section to a landmark, to heading to a link in the end, that's what the website is, right, is well structured with a lot of actionable items. One of the first things I get from people that are using a screen reader is how come it's not just reading all the things off the screen or a lot of people want to put a tab stop on the heading or something else like tab stops or for actionable things? There's different ways and different tools to do that. Anyway, I think I have to cut off this conversation thank you so much for showing me this, too. I haven't explored it. This is great. But I think closing remarks are happening now. So we should head over to Riverwalk. (CROSSTALK). Alright thanks, everybody. Bye