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

How to check for accessible colors — A11ycasts #17

Really Really different, Whereas if you take two colors that are very Close together on the color wheel, it ’ s, going to be harder to tell the two apart Now the reason why this is important in web Design is because often times our whole goal is convey some information to the user, usually Through text and images, But if the contrast of our text is a little Too subltle and too mixed in with the background, it might be difficult for the user to read.

The page and that might sort of degrade the user experience. So what I wanted to do today is walk through Some of the process that I use to sort of check the page and figure out if it has appropriate Contrast and how to tune it up if I find some issues But to start follow me over to my laptop And I have a little presentation that I want to show you It kind of walks through how we measure contrast.

On the web, So here I ’, ve got a set of text boxes on A white background, and up above you can see, I ’ ve, got these numbers up here for some Contrast ratios, So I ’ m measuring in terms of luminance The difference between this foreground color and this background color Now on the web. We actually have guidelines That try to instruct us what our contrast minimums should be So the web content accessibility guidelines, In section 1.

4.3, they say for body text: you want to aim for a contrast: ratio of around 4.5:1, for, like smaller text or your general body copy For larger text, something that is 14 point. Bold or 18 point you can ratchet that contrast ratio down just a little bit to 3:1. So if we go back and we look at our image – Of contrast, we ’ ve got these first. Two examples would meet that minimum contrast requirement.

So this one is just pure black on white, so its 15.9:1 Thats really high contrast. This one is a little more of a subtle grey But we still have 5.7:1, which is pretty nice. These last two, though, are just a little too Low contrast, so they wouldn ’ t quite meet that requirement. We can also actually bump this up, though Theres a enhanced contrast recommendation in the web content accessibility guidelines, As well So this is for situations where you know you Might have either an older audience or a low vision audience.

In that case, we can bump the contrast ratio. Up to 7:1 or 4.5:1 for the regular body text. So if we go back – and we look at this example – Here, really only this first one would meet that enhanced contrast, ratio requirement So consider who your audience is going to Be when you ’ re, building your site or application, and that can help decide where you want to Aim on the contrast ratio scale, I use a number of different tools to try to Figure out, if I ’ m nailing those contrast, ratio, minimums And actually my friend Louis, has done this Really cool thing where he has put together this accessibility testing for the web handbook.

Called OATMEAL, which stands for Open Accessibility, Testing Methods for Experts and Lay folk. He actually has a whole guide in here about How he measures color contrast and the folks on his team do that, And so we ’ re going to kind of follow this Guide a little bit, We ’ re not going to use all the exact same Tools, but this is a really cool methodology that you can check out and use in some of Your own apps to maybe figure out your process, So what I ’ ve got here is a website called The accessibility blog and we ’ re, going to follow two of the steps in that OATMEAL Guide doing a sort of semi-automated check using a tool like aXe And then we ’ ll, do a more manual spot.

Check using a WCAG, color contrast analyzer, So starting on this site, the first thing: I ’ m going to do. Is pop open, my DevTools, I ’ ve already installed the aXe. Extension For Chrome, If you actually check out our previous episode, On A11ycasts and I’ll leave a link to this down in the show notes we covered all the different Ways that you can install aXe on your system, So I ’ m just using the extension for Chrome Here – and I ’ m just going to open it up and check out this page and hit the analyze button, And you ’ ll – see that it tells me over here.

On the left that I have a few elements that do not have sufficient color contrast, I ’ ve. Got about 7 issues here: It ’ ll! Try to give me a CSS selector to the Elements that need some work, but there ’ s an inspect button that I often use to just Inspect the element in the Dom – and I can scroll up and say who exactly is this Alright, so we ’ re starting of with these Little anchors up here in our navigation – and this is one those areas that I see a lot where It looks like we ’ re, actually pretty close to having good contrast here, but we ’ re.

Sort of on the bubble – it ’ s, a little unclear. Are we hitting that or not So? What I ’ ll often do. Is I ’ ll. Take this Foreground color and I ’ ll, take this background color and I can use another tool this one That I often use is called Lea. Verou: ’ s, Color Contrast Checker, so I ’. Ll also include a Link to this down in the show notes, And then we can just drop in our foreground.

And that background color, and we can see that the contrast ratio of these two is 3.6 So its not quite where we want to be for smaller text Again, we want to bump that up to about 4.5. So this is an area where I know that I need To go back, and since I also have some of these elements right here that are even lighter, And since I know that this is pure white text – and I can ’ t make it any brighter, my only Real option here would be to make this header bar a darker blue, so that all three of those Links pop a bit more Another thing that we might notice in our Tool, if we step through some of the options, is that we also have areas down here like This little sub-heading, which we ’ ve, got a kind of subtle, grey on white thing, going On and again we can take that into Lea Verou: ’ s, Color Checker and we can figure out.

You know, Are we on the bubble One option if we want, we can make the text Bigger so we can maybe hit 3.0 contrast ratio That ’ s one option we just make the text Sort of larger, if we ’ re on the bubble Or we darken the foreground text because The background is pure white, so we can. ’ t really make the background any lighter, So we can go through and we can work through. Our CSS and tune those colors up and that ’ s really what a tool like aXe is doing It.

’ s actually, looking at the CSS values, For background and foreground, But there are some situations where a tool Like the aXe inspector is not going to be able to tell us if we have contrast issues And that ’ s in situations where we don ’ t have clearly defined foreground background. Colors So, for instance, over here on the right, I ’ ve, Also got this advertisement, and these are pretty common, where you have some text over An image background and the text itself might even be an image right So for a tool like aXe.

It can ’ t pick out. Two distinct foreground background colors, so we ’ re going to need to use another tool. To figure out, if we have contrast issues over here, So the tool that I like to use is the WCAG 2.0 Color Contrast Analyzer, It ’ s, another Chrome extension and I ’ m. Going to warn you, it ’ s a little bit buggy, but I ’ m going to walk you through how I Use it and maybe point out some of the issues, so you can work around those, But basically what we do here is after we ’ ve.

Installed the extension we ’ ve got this extension up here in the top right click. On that, What I found to be sort of an issue here is On retina monitors, if you try to tell it to analyze a region and you select a region, It ’ ll, be sort of off Like it sort of zooms in and it doesn. ’ t. Seem to be able to handle retina that well, So, instead, I ’ ll tell it to capture visible Content And what this is going to do, you can see That it ’ s already sort of zoomed in what this is going to do.

Is it ’ s going to try To scan all the pixels on the page and it ’ ll highlight the contrast between that pixel And the ones next to it, So you can pick out those areas that have Low contrast, While it ’ s scanning, so it will take a while Right, it ’ s, only up to 27 %. So far, so I can walk through some of these settings for You, though, So the first one here is asking us what level We ’ re measuring at So again.

I mentioned that we have the minimum Contrast ratio of 4.5:1 or we can take it all the way up to the enhanced contrast ratio. Of 7:1 right So again you can choose your target there. Then there ’ s. Also this pixel radius option And at first I wasn, ’ t quite sure what this was for by default, it ’ s set to one. So it ’ s. Going to compare the two pixels next to each other, but it goes all the way up to 3 Often times when we ’ re working with text.

On the page, it ’ s, not a clearly defined. The text ends here and the page starts here. Instead, it ’ ll, do a sort of anti-aliasing Thing So if we go and we look at the image of our Text this D: here it ’ s, actually sort of three colors. So we ’ ve got a couple greys and then the Solid white and that ’ s, what forms the body of that character When it ’ s, asking us what pixel radius that We want to use it.

’ s, basically asking us what sort of anti-aliasing range do you want? To accommodate, for So what I do is I tend to set it to 2. That way I can analyze a couple pixels next To each other, Alright cool, so it looks like it just finished. And what it ’ s doing here? Is it ’ s drawing these white outlines to show us areas of high Contrast And any place where it gets sort of noisy Kind of like right in here we can tell that we have slightly lower contrast If we go over and we look at that ad, we can See that yeah we definitely have some issues here So up at the top, where it says developer.

Friendly, it seems like it: ’ s, doing ok.. We can toggle this mask on and off. So when We hide it. We can see that when we get to the body text inside of this ad, it actually Is even more translucent than the header and when we get down to the bottom and it Mixes with that background, it ’ s, really really tough to see. So this is an area where we know we might Have to go back to the designer and say “ Hey, I can show you this and I can definitively Prove that there is a contrast issue here, and this is a place where we need to maybe Tune it up Either give the text a backing, so it pops A little more or figure out if we can use a different background image, something that Doesn, ’ t interfere with the text as much ” So yeah using these tools and using a guide.

Like OATMEAL, you can, through you, can analyze the contrast for your site or application. Maybe look for problem areas tune. It up make sure users have a better experience That about covers it for today. So if you Have any questions for me, as always, you can leave them down below in the comments Or hit me up on a social network of your choosing, As always. Thank you so much for reading. And I ’ ll see you next time.

If you want to learn more about color contrast, We ’ ve got some additional articles. You can check out in our playlist Again thanks for reading and I ’ ll see You next time,


 

Categories
Online Marketing

How I do an accessibility check — A11ycasts #11

So today I thought it’d be fun to go through my process for doing a simple accessibility audit a lot of times I have teammates or even like third party partners who reach out and they say hey. You know. I’ve got this site that I built, I’m not deeply familiar with accessibility, so can you give it just a once-over, and let me know if there’s any sort of like major gotchas I should be looking out for so I wanted to cover my process today.

This is not, you know, an exhaustive review or anything, but this is generally the stuff that you can do to find some obvious high level issues. So, if all the way over here to my laptop, usually the first thing that I do on any website, I’m going to use webbing as an example here, webbing is an awesome site for web accessibility. Usually one of the first things I do one on any web site is: I want to ensure that I can navigate using the tab key on my keyboard and that there are discernible focus styles, as I move around the page, so in the case of webbing, if I start tabbing through here, you’ll, actually see the first thing that it does the very first time I hit tab.

I get this thing called a skip link up here in the top left hand, corner skip links are super useful. You know on sites where you might have heavy navigation. You want to let the user skip immediately down to the main content, so webaim implements the skip link. Some other sites, like github, have skip links. If you actually go to github and hit tab, you might notice, it says, like you know, jump to your repositories or whatever so skip link is kind of a cool thing to look out for, but then, as I’m tabbing around the page, I want to make sure That I see a focus ring on different elements on the page now web aim actually does a cool thing here, where they animate their focus ring.

So you can even see it moving across the screen, which is pretty cool. They highlight their focus States. This is, you know, just about the best link, a tab focus behavior. I think I’ve ever seen really, but I just tab through the site, and I make sure that you know I can reach everything that is interactive using the tab key on my keyboard right. So that’s step one tab through your experience, so the other thing that I like to look out for is, as I’m tabbing around the page.

I want to make sure that there’s no off-screen content that can accidentally be focused so follow me over here. I’ve got this. This material design, Lite sort of like template site that the the team has created and notice that it has this sort of like sidebar over here and, as I’m focus moves into that sidebar right now. Let’s say I shrink the page a little bit right. So it’s totally possible that someone could have their browser this size on their desktop and let’s try it and tap through this now.

So I tab through this write. My focus is over here on the top left or sorry top right in that search field. Now it’s on that button. Now, as I’m pressing tab, though we don’t see the focus indicator, it’s as if it has disappeared and we keep tapping, we keep chatting and eventually it’s going to show back up. Ah did you see it down here at this? Like read more button, so what was going on there? Well, if we expand again, we can see that actually, what was happening was focus was sort of hidden in these off-screen fields was over here in our side nav, and so I see this on a lot of websites, and this can trip up.

You know anybody who’s using a keyboard to navigate and I can come trip up mobile screen readers because you have something off screen, but it’s still in the tab, water, it’s still focusable, so a screen reader might travel into those off screen elements. You know you might have dialogues off screen, you might have side nav off screen and you don’t actually want the user to be clicking on those during that current state.

So that’s another thing that I look out for. I want to make sure that people are disabling off, screen, interactive content, making sure it’s removed from the tab order. The next thing that I look for is I want to make sure that I can do kind of like a simple navigation of the page using a screen reader, so for this demo, I’m going to use the shop app by the polymer team. This is a pretty cool site that I work with that team, a lot to try and make sure that this was a good, accessible experience.

So, in the previous few episodes we covered how to use NVDA, we covered how to use voiceover on a Mac. I really recommend all web developers familiarize themselves with the basics of at least one screen reader just so they can quickly move through a page kind of like what we were doing with the tab key – and this is just sort of like a sanity check to make Sure the screen reader can actually like land on controls and they’re, announcing things that they should.

So let me turn on voiceover and all kind of like move through this page quickly, to show you what I mean by that all right. So I’m just going to use the vo Keys to kind of like quickly move through some interactive stuff visit, link, home link, shopping, cart, zero items, link where link ladies outerwear link men’s t-shirt. I might you know, try and move down to like Lane section. I want to land on an image right.

I want to make sure that that image has alt text. That’s really important a lot of websites, especially like e-commerce sites and things like that, you’ll move through and because they haven’t provided alt text for any of the images it’ll oftentimes just read like the file name for an image. So that’s another thing that I often look out for as and as I’m going through, this phase, you know, did the the person building the site use proper, alt attributes.

I also want to make sure that if there are custom controls like buttons and things like that, that have been implemented using either custom elements or using like divs with a bunch of JavaScript, that those are interactive with a screen reader. Okay, so we’re on this drop down, it says size collapsed, pop-up button. Let’s try and use voiceover to interact with this, so I’ll click on it. Okay, it’s reading me the number of items, and now I want to use just like my regular arrow keys to move around inside of this control.

So up down right, left right things like that, so go down to extra-large, hit inner right. Okay! That’s something that I look for right. Any custom control is working as I would expect with the keyboard. The other thing I know about this site is when I add something to the cart. It’s going to sort of add like a little sort of a like modal pop-up type thing that’ll show up on screen, and so I want to make sure that the screen reader user is notified of that, possibly by moving their focus into that item.

So let’s do that item added to the cart added to cart for items interact without it took our view. Cart, don’t close dialogue voiceover off, so you can see that when the item was added to the cart, the screen reader focus was directed into that thing. That just slid out on screen, so I know the way the polymer team is doing this, if I recall, is they’ve got something in there with the tabindex of negative 1 and they’re, focusing that element just to direct our focus.

So that’s another thing that I read out for making sure if, if something is being dynamically added to the page, that focus is directed to it. So that’s a quick pass that we can do with the with screen reader. The next thing that I do is I try and check the page structure, so I wan na make sure that the page is using appropriate headings and that there are appropriate, landmark roles or landmark elements on the page, because those help with screen reader navigation as well.

So, let’s look at something like Wikipedia which does a really good job of this. So I’ll turn my screen reader voiceover on Google and what I often do is I just opened the the rotor inside of voiceover in NVDA. There’s the. I think it’s called the web elements thing. I think we showed it off in the last episode. Basically, it’ll give you kind of an outline of the page in voiceover. You can open it by using a ctrl, alt or a control option you and just hitting, left and right to menu all right.

So we can see all the headings on the page. We can see that they’re doing a really good job of using. You know. H1. H2, h3, going all the way through the hierarchy of headings they’re, not just mixing and matching H tags based on like the size that they are, which I see a lot of developers do, which can generate kind of like a broken document outline for the screen reader. I want to make sure that when they’re using heading tags they’re using it to basically build the skeleton of the page, so you know we can right move through this content in a sort of a logical way.

So if I wanted to jump down to this, the section I can easily do so. The other thing that I look for again is is landmark elements. So, let’s, let’s go back and look at webbing, so webbing does a really good job of using landmark elements on their site. So again I open my web Roder. I look for landmarks and here we can see that there’s things like banner navigation search main. So if I wanted to bypass all the navigation and get right to the main content, I can do that right.

So that’s another thing I look for you know there are sites out there, which really don’t include many landmark elements at all and again, that’s sort of an efficiency feature that you can very easily add in use, use main tags, use, nav tag or use like you Know, role attributes to create those landmarks, somebody users who use screen readers can, you know, just navigate around a lot faster fashion, so that covers a focus that covers basics of screen, readers that covers headings and landmarks.

The next thing I check for is color and contrast. I want to make sure that you know if someone who might have a low vision impairment, it’s going to be able to discern the text on the page. So again, you know looking at a site like material design lite. This is a really attractive website, but there are areas where I think some of the texts could be a little low contrast and maybe a little difficult to read.

So there’s a really great Chrome extension that you can install on the Chrome Web Store. We can look for axe extension, so acts like a like a chopping axe right, so this is by DQ systems, and basically this is a simple extension that you can add to Chrome, which will sort of run an audit against the page and flag. A number of accessibility issues, but one of those is color and contrast. So on this site I can just open my dev tools after I’ve installed that audit.

You can see it’s right here in my dev tools panel, there’s this big analyze button. So I click on that and it goes through. It looks at the page and can tell me right here that there are some elements which need better contrast. So I click on that and it’ll actually give me kind of like a path to reach that element in CSS. I can actually even click on it and it’ll highlight that element in the dev tools for me.

So, in this case, for instance, this might be a little hard to see, but maybe I’ll try and boost the page. But you can tell that uh that these footer links down here right where it says right under this github logo, wears like web starter kit and help. These are low contrast texts that the audit has highlighted for me. So that’s something that we can read out for. There’s another extension: the let’s see the the chrome, accessibility, dev tools extension here we go so we’ll include a link to this as well.

It does very similar stuff to the axe extension, but one of the nice things that this extension does is when you highlight something that is low. Contrast it’ll actually give you a color suggestion, so it could be like you know. Maybe if you make the links, you know this different hex value you’ll be able to meet the what tag minimum. So, let’s see if we actually highlight these guys right here and then our dev tools, I’m going to go to where it says, accessibility, properties and see right here, lists this warning for contrast, ratio and I can actually click these color values.

And it’s very subtle, because this one’s actually like almost perfect – it’s not quite clicking these little sreades will actually change the text. Value on sites and it’ll apply an inline style for you, and that way you can see. You know what a better alternative color would be. The last thing that I try to do after I’ve done all of this is I try to recommend that you know whoever is building this site, integrate some excessive regression testing into their build process.

Again, if we go to github and we look up acts core, so this is the library that powers that axe extension, but you can also use this library as part of your build process right. So, as you’re running your automated tests, you can have a sample page. You can have axe core, look at that page and flag in accessibility audits, and you know those could then call your tests to fail. At which point you know you got to go back and you got to fix those issues.

Okay, so we we’ve covered a lot, but this is basically how I do my accessibility audits, it’s by no means exhaustive, but on many of the websites out there. This is how you’ll catch some of the major issues that folks need to work on. That can take their experience from totally broken to. You know at least sort of like a decent baseline experience for folks. If you have any questions, as always, you can leave them for me down in the comments.

Otherwise, you can contact me on a social network of your choosing, as always thank you so much for reading so yep hey. If you enjoyed this episode of alley cat, 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