Testing for Non-Testers - Christina Adams

[Music] so yeah let me start sharing my screen here um oh okay make sure I do the right one maybe great way to start okay all right we should be seeing that first title side testing for non-testers uh I hope we're good I'm gonna get going so um yes I am Christine Adams I work for Sight improve I am a digital accessibility engineer software engineer however you want to say it I totally made up that title um however I have been working in the kind of web design user experience space for 12 plus years now um and it's only in the last maybe four and a half that I've specialized in accessibility and web accessibility in particular um so I am not a tester I will start off the session by saying this I am a designer a user experience person uh a developer primarily um so I very much rely on our actual like certified testing team to help me out um with full accessibility audits so I just want uh want to start off by saying that you do not have to be an expert in in testing in specifically when we are talking about accessibility or being web accessible um and I wanted to share some techniques that I use when I'm asked to do some reviews um as a non-tester as as more of that technical implementation person um so I hope that's interesting I I ordered these in a way that is hopefully kind of going from easiest to maybe the most complex um and again these are they really require no training at all they um these techniques are kind of of a way to start and set yourself up for Success when you go into a full audit and again these are not things that would take the place of that of actually using um users with disabilities and assistive Tech users in your process so don't think this is going to solve every problem out there this is a way to set yourself up for Success going into that type of testing and hopefully lowering those occurrences of of issues um okay so let's start off if I'm on the right stream here with uh talking about sensory bias um this is something that I think every single role from content uh writers to um to uh developers like myself can have an impact here in in searching for these things and removing them or remediating them far before they become an issue or published in to whatever digital product you are making I should also say I am going to be focusing on on uh web um web techniques here there's probably a whole other presentation we could do on mobile or any other type of things and these are things that are free and that and don't require training so hopefully I forgot to say that in the first slide but the sensory bias things um really come into play with all of our roles across that development life cycle right from content editors up um and I think it's a place we can definitely make uh some some improvements very quickly so what do I mean um when I say sensory bias right um that includes things like using Color Alone um and or um or other sensory related uh language or processes implementations right so this first one here a question you could ask yourself within your process either through your creation process or through kind of your audit user acceptance test whatever that process might be because that is color alone conveying meeting and this is one of the very easy things to catch right off the bat and um something that I run into a lot when I'm asked to do these kind of quick reviews of a site or something that's going to go into production I will look for this one almost immediately this is probably the first thing I'm looking for is that is there anything on this screen where we are using Color alone to convey some sort of meaning or um or some sort of information that has no text or no other way of delivering that information um in all those cases we must include something else in addition to that color so that people who do not perceive color for instance um can get that information and we're conveying that in multiple different ways to multiple types of users right um it's actually just a better design technique overall um so this is something we can look for very quickly even at our wireframe stage to see um if we have these sorts of issues and and maybe go back through a design phase to think about how we might include a text addition to that or convey that in a different way the images on my slide here that convey this sort of thing that we're looking for is the first one is a first name input field with a red box around a red border around the field where you'd type in the first name in a form and I'm assuming some sort of validation might have happened here and we have a big red border telling us that there's an error at least telling those of us who can perceive the color red that there is an error here this is again we're conveying that meaning only through color and that's something we're going to have to make an addition to to convey the information that this is the field that has an error in it back to the user um and again that's probably not just going to help people that do not um perceive the color red there's probably going to help a lot of people who just don't understand what that means right let's make that more clear let's add something to it um next to that we have kind of this panel of report results and it's kind of uh displayed in a table format we have reports and Report name links and created with dates underneath that and then a column of status which just has a circle the first one is the color red and the second one is the color green um no additional text there again if we cannot perceive that color we're not getting that information to a lot of our users um and again it just might be confusing if you don't have something like a legend or something to display what those colors mean especially if they're branded colors um that's going to be really difficult for a lot of users to understand what we're talking about there what we're trying to convey to them so again is there is color alone conveying meaning in this case yes this is something I would flag in that sort of quick review report to indicate we need to maybe rethink that or go back and redesign that um and then the classic one below on the left left of the screen here is I have just Laura mipson text with uh blue every soft and there's a blue word that is highlighted um in or a word that is displayed in blue color with nothing additional to that I would um as I would pers I would assume that these are links within that paragraph of text but there's nothing to tell me that other than the color blue um this is again a way a place where we're telling you that the user that this is an interactive element and that interactive you know but we're only telling the user that this is an interactive element because of the color blue there's nothing else to tell anybody that this is clickable that this is interact in an interactive element I can't say that word today but um so we'll need to add something else to that traditionally that'd be an underline something like that to distinguish that link from the surrounding text without with in addition to using color okay and this is a kind of a level a sort of um Wicked standard uh this is something in that perceivable um bucket when we're talking about we're getting standards I I will mention those throughout these but I will tell you that I don't usually focus when I'm doing these sort of quick reviews of sites I I won't worry about the wiki guidelines I know that's maybe Blasphemous as an accessibility specialist but um I'm much much more concerned about the user experience when I'm looking at this um I will sometimes then relate it back to wik egg standards for that you know Legal Foundation compliance conformance Foundation but um I'm more concerned about how users use the product so I will I'll I'll put an asterisk on that um as we go through this continuing with this sensory um characteristic sensory bias this is something that I I have a lot unfortunately a lot of experience with um trying to convince people that these this is not a good practice so on the screen here I just have text and it says um another question you might ask yourself within this process of are these descriptions uh are there descriptions that explain sensory characteristics right um so some examples of that might be click the green button or the text on the right or the task in red status right all of these things relate to a color or a perception of left and right um or you know there's there's lots of different examples I could put up here um but I before I worked at site improve I worked in higher education and I it was like really old school um content development uh e-learning approach to stuff and I had to do full-on sessions with some of our writers to get them out of this habit of saying some sort of sensory characteristic because these don't matter if if I can't perceive the color green for instance in the example of click the green button um the text on the right well if I'm using some other sort of formatting within my system whatever that might be um maybe I'm not referencing the actual visuals that presentation layer of our site right left up down up down baby matters but left and right don't matter um in that sense of things and actually could be just very wrong or not in the order that my tools are reorganizing that content with so again something to keep in mind get yourself out of the habit of these sensory words within within your copy right um within you within your writing in your content because they can be um really difficult to understand and this is again maybe not a roadblock for users it's just not a good experience for users to have and it's just one of those more inclusive design processes we should be implementing within all of the steps of our of our process so again these are things that I would probably write up in that quick review as things to change but it might be a little less concerning than some of the other major errors of like links missing text or things like that which would actually be a huge barrier for folks so um there's there's levels of severity here certainly and you you and your business will have to decide um what where that line is for instance but if I'm the consultant I will still report this as something that needs to be changed right moving on to everybody's favorite topic of color contrast um this is definitely probably the most common issue I we come across in general um a lot of a lot of Brands don't have accessible color palettes a lot of um people don't know have the rules in place within their style guides to apply those colors correctly or um in a way that is accessible or inclusive so this does come up a lot and I get the question about how can we get ahead of those sorts of Errors so they don't show up across our full site especially in an automated checking tool or something of that nature um so some of the some of the techniques I'll cover here um just are tricks that I do when I when I'm going to test some stuff um if you have an automated tool it's going to spit those out for you that's ideal I think but because you'll get that full system approach to things but if you are in the design process and you just need to check stuff that's where some of these techniques do come through so just starting off I did want to mention the wicked color contrast levels because there is quite a lot of confusion around them I think so whenever I deliver one of these reports um I always get follow-up questions about you know what what does this mean for the end user right what is what where are we in the compliant compliance or conformance talk track um so the level double a standard in Wick gig is 4.5 to 1 color contrast ratio and that's text versus background so that's really what we're focused in is just any visible text versus the background and then large text is three to one ratio level double A also has a non-text contracts ratio of three to one and that's the adjacent colors and this would be things like really important Graphics like if you have a check mark that conveys meaning or um a button an interactive element that border you'd or that button color versus background color you would want to reach this level of contrast right and then the AAA um version is seven to one text versus background and a large text of 4.5 to 1. right and so this is very confusing let me trade off the bat so I'm going to tell you just know your goal posts for some of these things that's where these automated tools really help you um in defining this because finding the luminosity and the color contrast between two colors um at 4.5 to 1 ratio right that's not

like a human calculable thing I'm not we're not expecting you to do that in your head right so use your tools and some of the tools that I use when I'm when I'm spot checking like designs or wireframes um is I know it was mentioned already but we have the um the web aim color contrast Checker it's great I love it and it also has an API so if there's any developers on on the call um you don't even have to open up your browser you can just write a little API call and get your answers for if if you're meeting that color contrast ratio and it will spit it out you put your foreground color in your background color in and it will do all that calculation for you right um so it'll tell you that the wiki double a normal text standard passes in this instance where we have put in a blue color mid blue color versus a white background it does tell you the contrast ratio of 5.35 to 1 in this case and then so Wiki double A passes normal text uh Wicked AAA fails my large text passes in both double and triple A and then those graphical objects user interface components which is that non-text contrast um a double A passes as well so it's a pretty good color if we're going for AAA we might want to make that blue a little darker but um this will just spit that answer out for you so you can spot check your your site or your design and this is something I do all the time I usually have that API in the background for for myself to work with when something looks a little suspicious that it does not have enough color contrast in it all right another trick you could do in this case um of color contrast if you want to dive in to the dev Tools in Chrome for instance um I prefer Chrome but I do know that Firefox um has very similar uh tool sets for for analyzing this um but we can assess the color contrast just within the dev tools module so if you're already in here for instance this is a good little check to do within as you're building something if you're building a prototype perhaps but on the screen we can see that the website above has a how can we help button in blue with white text um I have Dev tools open in dark mode here developer sorry and then I have that button um which is a link actually it highlighted in the devtools HTML View and then over in that right panel of Dev tools I have the Styles panel open which shows us our CSS and what I've done is I've clicked on that color property inside that panel um which gives you a little square and I clicked on that square and it actually brings up this this color palette essentially within that if I am on something that has uh text versus a background color it will actually tell me the contrast ratio of that between the color which refers to the text color versus whatever it can assess as the background so there's still room for failure here but this is kind of Handy if you are in the HTML to open that up and it will tell you if it passes the double a 4.5 or the AAA of 7.0 here as well you can also play with the sliders if you did need to pick a slightly darker color or or different color in general um it can it can do that you can play around with that and see what will pass too within this so very handy I use this a lot when I'm especially developing um interfaces or anything of that nature this really helps to have this right here um to help and and I should have mentioned too that color um code is called a hexadecimal number and that's usually what we're using but in the case that you're using something else rgba or any of the other ways you can format color within the dev tools you can actually the air there's an arrow up and down right next to each other next to that hex field if you click on that it can cycle through some of the other that same color but other ways to code that color so however you feel comfortable it's kind of cool to use and so that and that might not be very apparent if you're not a developer and you're not in Dev tools every day this might be something very useful that turns out to be very useful but for those users who are like that's way too much for me which I understand completely um another tool I use very frequently are and there's plenty of them out there but I use Chrome extensions browser extensions again all the other browsers also have an extensions manager of some sort where you can install these extensions but essentially just up in the main bar of chrome I now have this eyedropper icon and this one happens to be colorzilla Chrome mixed browser extension that I that I use a lot it's free um within when I click that eyedropper it brings me a panel down and I can pick a color from the page um and it also gives me a lot of other options I get a color history palette browsers gradient generators so it's kind of kind of useful in a lot of different ways but if I'm like well I don't really want to go look at HTML or css I don't understand it that's totally fine you can use this extension to pick a color from the page and then go paste that color into something like the web aim contrast tracker and that's something that I do frequently especially when I need a quick answer this also very much helps for things like images if you have images that might have too low of contrast you can spot check the image with um with this Color Picker and put it into something that will do them the math for you for that contrast ratio all right so I'm going to move on going a little too slow so I'm just pick it up a little bit um the next thing we can do is keyboard Focus everybody can do this we all have keyboards very likely or the majority of us that have a keyboard that we can test with um so we just another question we might ask is can I reach all the interactive elements using keyboard Tab Key right um so put your mouse away can I navigate everything in the site can I can I hit the tab button and go to everything that I know is clickable on this page a really easy test everybody can do this um and it's it will give you a lot of information you can also start testing those other functionality right can I click that link with the enter key right how can I use this form with my keyboard with arrow keys for instance certain form elements um you can start really getting idea an idea of how a non-mouse users would interact with the page and this is again no mouse challenge there's a whole thing on it a lot of people do it for Gad events so I highly recommend giving it a shot it's a good way of experiencing the how accessible your site is for keyboard users and any technology that uses keyboard as its primary way of accessing the content as you're doing that you can ask yourself the question is there visible indication of where I am focused on the page um that's that in most sites it's like a blue or white or dotted line around whatever interactive element you're currently on that's extremely important to a lot of users who are referencing the visuals but using their keyboards um the best thing you can do as developers and designers is leave that to the user agent in general so that's if I'm writing up this report on a quick quick analysis of a site um this is almost always my recommendation right leave it to the user agent because if you are using it to the user leaving it to the user agent it's kind of out of your hands right that user can then customize their browser or use the right browser that they like the best um so it's kind of a maybe feels like a loophole but it's actually a really great experience to leave it to the technology that's you know um serving up that content um to to do what it does with it because users can customize it and that's again this is a level double A requirements everybody's got to do this if you're reaching that double a standard for legal reasons um so again this is often forgotten about doesn't come up until a very end for a full audit we really need to address that sooner in the process so looking at this how how are we going to style it are we going to leave it to the browser all things you could do in your design process right building on this we also have Focus order so as you're doing your no mouse challenge um with whatever it is you're trying to assess quickly um is what I'm finding logical is it matching how it's represented visually on the screen these are all things that we need to consider if it's jumping around users who are zoomed into the interface at a high level like 400 percent that's going to be very jarring for them it's not going to go left to right or top to bottom like we would expect we're gonna lose ourselves within the page right so questions ask yourself again are what's the expected order for keyboard focus and is it following that up on the screen we have this form it looks like the two there's the two first fields are side by side with each other they're in kind of a darker background area and then below them we have four additional fields in two columns um in a white background so it seems like two separate interactions here this could be very this couldn't be interpreted in many different ways what's the logical Focus order should I go from the first two fields and then down through the columns or something so we logic to me might not be logic to everybody so this is something we will definitely have to agree on sometime before this gets to our final audit because there's just a lot of ways to interpret this especially when we're talking about columns and these are highly interactive elements right we're asking our users to do something within them so we really want to make sure we get it right and I should have said there's a button for recalculate in the third column so even more complicated we have three columns to go across with information so a diagram for this Focus order can maintain that consistency through all of your processes um but we definitely want to share that with whoever's doing that testing right we want to verify if this makes sense logical sense if we're following a pattern that's expected if the user is getting that information in a way that's meaningful right so we have the same form but we have an arrow going from the first two fields in that dark background then down to that top uh right or top left column and then over to the next and then down again to column one and then over to the next column and then the recalculate button so that's one pattern right where we're going across from left to right and then dropping down we could also do this in a different way right same form we have the first two Fields Arrow going between the top two Fields dropping down to the first column in the next section and then down the column before we go up to the second column and down the column and then over to the button again so this is an opposite pattern same form field You could argue that both of these are logical in some way it depends on how maybe you want your user going through it right so that expectation being set early is something we want to communicate across our teams and think about it before we hand that design to a developer and they're just going to develop it how they think they might be logical or how easy it is to style it right um so again something we can definitely improve upon I see this as a very confusing aspect we've had a full hour-long meetings talking about Focus order with uh with people I've done Consulting work with so this deserves your attention within that kind of process of testing even internally okay next topic is names and descriptions this again is pretty easy I think for all of us to do especially if you are the one responsible for writing said names and descriptions or implementing them this covers a lot of space I think so I'm just going to highlight a couple of important ones that I think apply to more roles um but you'll often hear in full audits you'll hear something about accessible names right that's pretty confusing when we're talking about names and descriptions right sometimes that might take the form of an accessible description or alternative text right but um I personally like to stay away from alternative text because folks think about alt which is just for images um I often say accessible names so when we're looking at our designs um we will want to make sure that everything has either a native HTML content name so in that first example we have a native HTML button with the submit your answers as text inside that HTML element what I've done here is I've opened up Chrome Dev tools again and they have a accessibility panel that's built in which does the calculation of that name for me I don't have to decide what its name is by looking deep into the code I can open up that accessibility panel and see under that computed properties accordion we have the name of submit your answers and how it got to that name is the content so the contents submit your answers it also gives us information about its role and stuff like that which if you're doing a much deeper audit that might be interesting for you to look at as well but the accessibility panel can give you that information really quickly so if I'm checking a button like what's the name of this button we want to make sure it means something valuable to the user you can open this panel and just make sure that it's named something useful and specific to whatever it is you're trying to communicate to the user there um alternatively that same button implemented an aria you can see in this example just for instance because that that button element does not have html text inside of it but we've given Aria label of submit your answers this might be an icon button um the submit your answers gets populated up into the accessible name of that button in this case in the same way that it did with the HTML button so again if you're looking at that icon button you're not sure what its name is you're not sure if that Aria label is correct or not open up this chrome tools accessibility panel and it you can see the name calculation there again name is submit your answers and how it calculated that was Aria label okay again this is like a level a n double a um criteria this is essential to a user experience so this is something that I definitely spend my time on before we go into like production with this site along those same lines images um so images require alt text especially if they are delivering meaningful content out to users um so question you could ask is do do images and Graphics have an accurate description automated tests can tell us if it has alt value or not um or if it's decorative but it will not tell us if that description is is good right is human readable for instance so I like to use bookmarklets I know they're pretty common out there um and there's a lot of them around but I I tend to use the Paul J Adams uh bookmarklets out there they're really useful essentially what they do is do a little script and you hit your bookmark and it will run that script on whatever page you have open and pull out this in this one in particular the alt value and put it up on the screen so you don't have to dig through the code to see what the description is it's very useful if you have a page full of tech or images and you want to make sure all of them have value that's meaningful first image there it's um an image of a dog and I've used the bookmarklet and it comes up as a dog in a harness and a leash standing in the snow right that's pretty good I'm gonna okay that one in the second image I have an image of text which we'd like to avoid but in some cases we can't I want to make sure that that alt value with the bookmarklet matches exactly the text within that image and I can do that pretty quickly with this bookmarklet so I definitely recommend that you can write a little script put it in a bookmark and run it on the page um whenever you want all right okay all right and kind of the last topic here this is probably the most technical and we alluded to it a little bit with the accessible name right um is this accessibility tree um concept and if you're into it and you're doing a full audit or not a full audit you're doing one of these reviews and you're going deep into what that assistive Tech user experience is going to be like without you know using going as far as using the screen reader or using some other assistive Tech on the site um where you just want to do this within maybe your development process or you're not an expert with that um taking a look at what's being communicated in the accessibility tree will show you exactly what's communicated between the user agent which is the browser and the assistive technology through that accessibility API all of the information we're sending about all of the pieces of content on the site get communicated through that out to assistive text so it's highly likely that if you're looking at the accessibility tree and that element makes sense all the roles are included all the accessible names are included the assistive Tech is going to parse that correctly right and and go into the correct modes and things of that nature to deliver that to the end user so I do end up here pretty frequently when I'm doing these quick reviews especially for things like roles or really serious Aria implementations if we've done a very complex um composite widget in Aria this comes in very handy so for those of you who might be on the more technical side um I highly recommend doing this as well so again we alluded to this both the accessible name but at its core that accessibility tree is the Dom structure HTML and we'll communicate the roles States and properties and accessible names through that API to assistive technology that will then deliver it to the user so um I have a photo of a very old site improved site home page um and next to that this is what that is the accessibility tree of that site looks like um and you can see that parent-child relationship where you have a nested structure like an outline that's actually generated by the structure of the HTML so it's very similar it's essentially giving a stripped down version of how our HTML is formatted um and then within that the one that's highlighted here in the accessibility tree we can see that we have a heading of achieve your digital potential we have a paragraph a link that says book time with us uh book time to talk with us a link that says get a free site audit and then some other generic containers but those are getting communicated with correct roles heading would be the role of that and then achieve your digital potential is the name of that heading the text that will be communicated to the user so you can see how this might be really useful um going into that sort of audit and and um just making sure that things are going to assistive technology in an appropriate way right we're communicating all of the things States properties names roles out to whatever technology is going to parse this document as well so all of that very cool it's really really nice to do all these things within your process it's good like for Consultants like me art testers but would like to get some feedback back to to a customer for instance who um would just doesn't want to go through a Fallout it doesn't have time doesn't have the space runway for it but would like to improve it before it gets to production that's where these techniques come really into play for me but they could come into your development life cycle as well as something for internal review processes code reviews for instance some a lot of these are very useful in that sense however again I need to mention it it is not a replacement for a full manual audit you still need people with disabilities and their technology to go through your site and actually give you feedback and tell you how that user experience is doing so hopefully that's going to go smoother if you follow some of these tips and tricks um but again we don't want to only rely on some of these little tricks um little testing techniques we want a full system where we're actually including the users with tests the full full user testing with uh users with disability and professionals who use assistive Technologies um so that's all I had for slides um uh if there's questions we can certainly take those now happy to great I will stop showing my screen for now well thanks uh thanks for that session Christina um yeah before we jump into the Q a uh we're gonna put up a poll again uh please just you know fill this out help us keep the lights on uh it's we need it for some of our uh funding reporting and it also enters you into a uh the pool for some accessibility prizes that will be selecting winners and and notifying uh within the next couple days so um yeah with that uh if anybody has any additional questions please use the Q a uh button to to add those to the list and we will start moving through these all right uh the first question is from Chris uh he says that you've mentioned level AAA conformance quite a bit but doesn't w3.org not recommend level AAA conformance be required as a general policy for training or training materials yeah I'm not sure on this specific wording there but uh Triple A is definitely I mean it's in the guidelines it is based in user experience and perception um so it's still something maybe to consider but it is definitely not a part of current legislation out there I know that um I will say it's pretty rare to find folks who are going for that AAA uh conformance um but it's still I get I guess if you're looking at user experience it can still give you very good information about certain standards or guidance for reaching more users in a more accurate and inclusive way so I wouldn't discount it entirely I guess is the the take home on that long answer but I wouldn't discount it entirely but I I understand that it kind of drops off on the priority for um for training and implementations um all right next is a question from Angela uh what is the format you've used to communicate agreed upon decisions of changes expected changes deliverables to content developers uh for example email agency forms smartsheet Etc I found that emails are a quick hey I would like but a form is more specific but contributes to additional time between parties yeah um that's a really good question and I agree emails definitely great for one-off things it is not great for major structural change right um especially we're talking about maybe a style guide um or a pattern a library that we're trying to implement things of that nature um forms can work I know I usually will write up um kind of larger reports usually in a word format for instance highlighting issues with recommendations underneath them I'm often at a higher detail place though where I'm giving specific implementation recommendations and including code examples um we've also communicated those changes through something like a repository code repository I don't know if that's in scope but um if I have access to make an issue in their code repository I can actually highlight the piece of code and comment on it and give specific advice which is very useful in talking in that developer's language um certainly and in the tool they're using um but I've also seen it this like a Excel spreadsheet right you got columns issue recommendations impact and then you can use that for further planning for like capacity planning and things like that um but I it kind of depends I guess on what you're comfortable with and what your what Your what systems you're working with in general um hope that answers at least part of that all right uh next we have a question from Chris uh do you use Andy the DHS trusted tester tool to test for accessibility uh rather than maybe the accessibility tree yes I I've used Andy I like it very much um trusted tester goes by slightly different standards just very small differences between that and maybe the actr um community group in the w3c right so you do have to know maybe use maybe use that plus another Checker to get kind of a more holistic view of that but I do really like Andy a lot and I know a bunch of the folks I work with who are more in the trusted tester program than I am because again not a tester but um they use that a lot and it's very helpful pumps up really good information yeah uh next we have a question from Weston for images uh using alternative text what's the general rule or any tips to keep the alt text crisp to accurately describe the graphic yeah I could do a whole session on that um yes the uh generally I would first look at is there text is that redundant information because if it's redundant information from the image to whatever the page content is and they consider marking that as decorative I wouldn't recommend that all the time but definitely the first question is it redundant because I don't want someone to have to listen to the same thing twice right um but then keeping that uh alternative text nice and crisp I would say you want very few if none no images of text because infographics that are built in jpegs right and delivering lots of text content is going to be really difficult to make um accessible in any way right so it kind of goes across rules here want to make sure design is on board as well we want to deliver that information in maybe more concise ways but also just watch out for words like picture of or image of or things that kind of don't speak to the you know core of the meaning of the photo right or the image that you're trying to describe if it's not adding value don't include it that's usually the best the best um don't write alternative text for alternative text sake make sure you're conveying the meaning and only the meaning of whatever that image is delivering I agree that's a great recommendation next we have an anonymous question you mentioned the API from web aim if we use the color contrast analyzer tool from tpgi do we need to double check with uh with the web aims API or does one color contrast tool plus some ax automated checks would that be sufficient likely that'll be sufficient um the the like automated tool like acts might have issues with certain elements on your page if they're if they're positioned absolutely or fixed right we can't always know where the background color is you might have to assist it a bit in those and those are the things I would probably spot check with a color contrast analyzer tool um but you can prioritize those out do the automated check first double check those answers and then probably go into that Spock check if you have the ability the um API and the weba and contrast tracker and the other tools all go by the same calculations so I think they're all pretty um accurate I'd say across the board yeah definitely yeah that algorithm is set by the the by the wikag standards not necessarily by each individual tool and so they're all kind of using the same thing yeah and you can go read the algorithm if you really want your head to spin a little bit that's that's fine you can do that yeah it's like it's like this long it's it's a it's a pretty beefy calculation uh okay uh next another question from Anonymous um do you have any recommendations for accessible design courses for designers and developers sometimes developers uh let's see our designers too and they need more training on that side oh yes I agree with that statement for sure I I started as a designer and went into development and I learned lessons that cross those boundaries often um so I I definitely recommend kind of that more Universal Design approach to to teaching that I think designers can definitely benefit from things like the Dom and accessibility tree because they're primarily working with structure for instance and that can affect things like Focus order down the road so totally agree I don't have any specific recommendations um for specific courses but anything that's including Universal Design or um kind of that overarching bridge for that technical accessibility implementation trainings those can be good I do I don't want to plug us I really don't but site improved does hasn't have some courses if you're a customer email me we can get you set up with that no I'm not a commercial sorry well you know it's for uh uh we're not a commercial either but I guess I'll take this opportunity to to plug us as well uh we we are currently developing some some uh uh digital accessibility courses that will be available you know soon um and uh you know we can we'll be putting the word out on all those when those are when those are complete so awesome you might have to come talk to you about that I'm I'm interested I'm interested definitely um okay it looks like we just have one more question in the Q a uh we have it looks like we just have one minute so this can be perfect um so uh Anonymous asks uh have you used the accessible color palette by GitHub uh if you have uh do you have any tips for uh for using it that's a really great great question I didn't know that existed until very recently I'm very excited about it and I haven't had a chance to really play with it but there are some really good web-based ones that do that as well where they'll do um you'll pick your a starting color or a couple colors and um you know get a palette essentially of tints and shades within that that are accessible and I I really like those tools especially getting the contract or getting that concept across to folks who might be doing more brand um development work making Design Systems of that nature I think that's really cool and I don't have any I don't have any specifics about the GitHub tool but I'm gonna dive in probably right after this session to see what I can learn about it it looks really cool though I'm very excited about it right okay I think that is gonna do it uh there is another question in the in the chat but I think that was we can answer that one offline so okay all right

2023-07-26 22:34

Other news