Live Session (2025-26)

All right. Uh welcome to our first like live week where we do like um Yeah, uh really like I don't know lecture is I I think lecture is a little bit too much. I think the the videos are the lecture and this is like the practical QA giving you the possibility to to ask questions, uh to be involved in the um uh in the whole like course more. Uh that's the goal of this um uh this meeting and this like uh uh lecture type of thing. I have a couple of things prepared that I will use to like guide us through. But um the more questions you have the better it is. I think. And you know, feel free to always ask. There are no, you know, dumb questions. There are only bad explanations from me. Um so if you if you feel you have like heard something in the videos and you didn't understand it or there are other things that you have questions about. This is a good place as ever to ask for those uh questions. Uh I want to um show a couple of things that we maybe didn't explain well enough last time or that have changed or that be fixed in the meantime. So let me share my screen really quick This and that. So there were a couple of questions that we got around like how do I find the zoom connection? Obviously everyone who is here has already found the zoom connections. So that makes me happy. Um, oh yeah, and feel free to always like write into the chat uh if you have questions as well. Like you don't have to speak up. Um uh that's that's totally fine So we had a couple of questions about like the canvas and like how stuff is organized, especially around like The to-do uh list here on the right. I don't actually know what that is. Like this is something that just comes with the canvas thing I think you can um j just check off if you have um attended the meeting basically you just check this off and then you see that next one um and it also reminds you that you have your uh your booking here this is all in the course calendar as well so if you uh look into the calendar it like has the lecture lecture and the bookable tutoring time here at the bottom um and for all the next weeks uh and i actually updated this um Why is this still in here? Uh the lecture on the on the fourth. There will be no lecture. I well remove this. It's difficult to operate, to be honest. Um I think I had to do stuff three times to make it stick yesterday and it didn't. Um yeah and there you see it goes until the 16th of December and then we have three weeks where there are no lectures and then it goes on. And if you want to import that into your own calendar, you can use this calendar feed button on the bottom right of the screen. And then it has a URL that you can uh copy and paste into your uh calendar and then And like when I update something or Hampus updates something in the calendar of the chass course, it will update there as well. And I made sure that the link to the zoom is in there. as well so you should you should have everything if you use this calendar feed um if you don't use a calendar or if you don't use the calendar feed then the easiest way is to go to the course And uh here at the top is the Zoom connection that will open this meeting. Or if you go to the um uh to the Chuss Academy Slack. There is a bookmarklet here at the top that also has the Zoom connection and the link to the canvas course. So uh you have that. Back in the day, a couple of years ago, you could actually have the zoom connection directly here in the in the top bar, but they have removed that. feature. So now you have add canvas and files which we don't use. And then you have the book marklets. I might be actually able to like remove those. But yeah, that's that's the best way to like get to the zoom connection. then uh we can start. The other question that I got was about the um The bookable tutoring time, I forgot to make it editable for you. So now you can put in your name. And people are doing this as we speak. It's magic. Um so uh if you if you want you can you can still do that. Um usually after this um lecture uh lecture is over. Um I will close out the remaining uh open uh places just so we can you know plan a little bit my my afternoon as well um and see what we can do so if you have questions feel free to put in your name in um Uh usually those, you know, we use those to do like one-on-ones, like just just figuring out like for individual people's uh questions. uh for like stuff they are working with, uh, you know, what uh you know, th thinking about like problems that they have like um working with accessibility or if they have like specific um questions around that uh Yeah, and uh often or sometimes uh I use like feedback that I get in the um uh in in these tutoring sessions also for the next time we meet and I will say like, oh you know, this came up uh and I want to highlight that because sometimes people don't understand something they think it's oh it's just me and I you know and and usually it isn't um I also going to hide columns that are when when the time is over so you know don't Don't um get confused because like the the the column is not there and I put the zoom connection in the top left as well. So uh you should always have like a direct line uh towards us. Uh all right, any questions around the canvas, the slack, the bookable tutoring, uh anything like that? Going, going, gone. Okay Oh yeah, and uh I have the uh the transcripts uh of the uh uh of the course in here. I mean this should probably be week two. Last last year it was week three, so yeah. You get it's a little bit like complicated to keep everything in line all the time. Because, you know, uh we try to like shape shape it around our availability too. So, you know, there are There are sometimes just um just changes. So for for my stuff you always find the transcripts on the chass dash transcripts. yattel. vet website. Um Which I also put into the chat. Alright. So you heard a lot about WCAG uh in the videos. Any questions, anything you noticed, anything you want me to explain better, this would be great time to ask for it. Or maybe I'm just a genius that like explained it like really really well. I want to think that of me, but like I also know that like uh explaining stuff is uh difficult and like you know uh understanding stuff is also difficult so uh So I don't want to assume that.

I mean, I this is not a question, but I can just say that I watched the week two uh recordings And I felt quite confused. So I'm really hoping that we're going to go in depth in this. Yeah, that's what I wanted to say.

Yeah, and I think I said that last time, uh, that this is like a big info dump at the start. Uh sorry, I have to sneak Uh this is a big info dump at the start. Like that you are confused is a little bit like what we want to do. Uh although that that that feels a little bit unfair but like uh it's really um The the thing is that this is like fundamental stuff that you will remember and understand in the long run, right? It's it's not stuff that you can use right away. Um, but it's stuff where you will over the time uh we will basically point back to this and say like, oh, and this is by the way the context for for this session. Uh and so yeah, it's it's complicated uh and uh I also don't expect you to like understand everything you know um uh straightforward it's just like uh unfortunately the um the complexity of like trying to give you uh uh this foundation first. Um and you will see uh over time Uh I should have left this open. Uh over time we're going into specific things. So uh this was the Wicack overview. Um Next time you will learn about the user perspective. Why did this open? here uh then we talk about like page structure and there we have like a lot of like pointing back and forth so you know Don't don't feel like oh this this has been difficult and I should have understood it. Um it's more uh like this is difficult and uh it is because it's complex, right Right. Yeah, and we can go a little bit into uh into details here. Um so for example, uh I did talk a little bit about WCAG 1. 0 and how it is uh like technology specific um and I want to like just really quickly show uh an example here. I don't think I have done this in the videos Um and if I if I repeat stuff that is in the videos, just like interrupt me because like I recorded them a long time ago and I have like a good understanding of what's in there, but I might but just say the same. things sometimes. Um so here you know you have the um provide text equivalent for non-text elements And it says like, okay, via alt or long desk attributes. And so it's very specific on like doing it for HTML. And so if you are working in the PDF or in a Word document or in a web app or in a mobile app, that would not apply in the same way. right. So uh so uh that's why WCAC 2 which we will mostly talk about um is so abstract and that's also what makes makes it hard to read um and it's just like getting used to doing it um uh f for the understanding and yeah that's uh that's why we um are doing this like big info dump at the start because it's just like something that you get you need to get like a little bit used to like if you would work into uh in like laws and stuff like that you would also need to get get used to like reading like how laws are written you know they're very specific they use specific Specific wording and orienting around that. So and this is a little bit like that. If you want to have a little bit of a Quicker intro or you're you're interested like when we are talking about this over the time of the course. Um we will be talking uh about Different uh things like I showed like that page and uh a page structure and content structure. That's something that we're going to talk um in two weeks. Uh and If you'd like to like see and and get a good feeling on like how WCAG um uh interacts with that, uh you can always use the how to meet WCAG quick reference. Um And that has a filter here where you can basically say, okay, uh, this is content creation, because it's page inside structure, and then you can even like go more in depth like oh what's about headings uh and then you get like all the success criteria that are related to headings so this is a very um straightforward way to say like okay how do I connect those two dots And I will talk about that in the lesson as well, but uh I think this is a good good thing to know um of what's going on uh and you can see that some of them did Did I make a selection where that does not apply? Yes. Very good. Let's say content. There we here we have like audio and video recording. You can have you know sub-clauses basically and and we made them expandable uh and collapsible so and then you can go to this techniques uh which i talked about a little i think in the video video uh which basically are examples of like how to meet the uh accessibility guidelines. Uh yeah and that's just it just a lot. Um that's that's just how how this is um and you know I'm uh as as I said, like I don't expect uh people to to know that because like really understanding and mastering this probably takes most accessibility professionals like a year or two. Um so you know it's like tot totally not a thing that you would like learn uh in in a week of while watching videos that's just not how it works. Um I will and I will go into like practice practical stuff uh in a second I want to highlight this article by my good friend Hidde, who uh wrote What's New in WICHEC 2. 2, which is a summarization. uh of Wicac 2. 2 of the WCAC 2. 2 changes. Uh I think that's uh also good uh good resource. I should put the quick also uh in here. Uh and and the nice thing is when you have made your selection like I now did with like content creation first and content here um you can actually share this and this will include this whole like configuration So it's a very long link, uh, but it will, you know, you can click it and you see the same thing that I'm seeing. So that's that's nice. Um I worked on that when I worked with W3C and it's one of the most rewarding things that I did there. we kick three that's not what I wanted should have this tabs in a in the order that I want uh just thought about something else. Oh yeah. Uh when when are you going to publish the um the recording of this uh lecture it will all be all the links or at least most of the links will be also inside of a note in uh canvas so you don't need to write those down. Or you can, but like they w will be also uh in there Okay, let's go to a practical example. This is the before and after demonstration, and I will quickly open that in a different browser. Where I can show stuff a little bit better. putting all the secret client stuff away So can I click you away with There we go. This is the before and after demo. It's one of the earliest projects I worked on at W3C. This is 2010. So it's like A long long time ago. I think 2012 is when we really released it. Yes, February 2012. So Almost 14 years ago. So if you if you want to feel old, this is an easy way to do it. And this is a WCAC 2. 0 demo And basically the idea is that we have a website which looks very old because it's from 2004. Don't blame me for it. this is what we did. Um and uh it is the before like the inaccessible version and then the after the accessible version and you can basically compare it and I think that's always a good thing to show. So at the top you have the whole news ticket survey and the general site template. But these pages are basically where you see the website. And you start with the accessible side But we can go to the inaccessible side and it looks basically the same, right? So uh you would you would think like okay why why is the one inaccessible and the other one is accessible? But that's the beauty and the problem with accessibility is that you cannot like just see it by looking at it, right? So let's go to the inaccessible homepage and we can show annotations and that basically points at all the problematic things. uh in here on the left you have the numbers and they point for example this oh one points at this logo And if you click on it, it says uh node 01 image with incorrect text alternative. And then it says the text alternative for this image is overly verbose and does not serve the equivalent purpose of the image. The text alternative is as follows. Um and it's that's a red dot with white letter C that symbolizes a moon crescent, as well as the sun. This logo is followed by a black banner, that's a city lights, which which is the name of this online portal. Finally the slogan slogan of the portal, your access to the city, follows in a talk voice green handwritten writing style and with the slide slant across the top banner. It's a technically a correct text alternative because it describes the image that you have. But the purpose linking to the homepage uh it's way too long. So uh so you actually don't want to do this. Uh in this way. So then it um puts in here the success criterion that is applied to, which is 1. 1. 1 non-text content. And then it says the failure technique, which is using text alternatives that are not alternatives. That's a weird yeah, okay, weird weird phrasing, but we take it. Um that sometimes happens happens. And then you go back to the demo and you see that this whole image is now has now a a border around it. If we go to the accessible homepage It also has a note on it because that makes sense. And basically the alternative text is only City Lights your access to the city. So this is basically the change. That was used here. Because yeah, we don't need to like describe all the visual intricacies of this image. That's not not super useful here. Yeah, the same goes like for these images, uh which are basically like preview images or placeholder images. You don't need to describe those, I think

They have an empty alternative text.

Oh, they don't have an alternative text. Uh so um they put in three penguins playing on stage, uh, or we did. Uh I can't say if I if I think I like mightily disagree it's them and if I if I mightly agree it's it's me doing all the work. So uh so yeah this is a this is a good alternative text. It says the three penguins are uh uh are on stage here and if we go to the inaccessible homepage it will have no alternative text at all not even an alt attribute And I know that's that's very technical, but that's how we need to look at things sometimes. Uh I need to blow my nose. Uh give me a second Alright. Um yeah, so so this is basically where you see the differences between uh things. You can get a full report here for the homepage that like lists all the WCAG success criteria criteria and what has been met and what hasn't been met So it's very um very in-depth like this. Uh and uh uh and I think it's a useful thing to like be able to to look at the inaccessible site especially and see like what was done. One of the most interesting things is like if you use the tab key Uh and at some point it just dis like the visual focus just disappears and then it like it comes back here at the bottom. Uh and that is uh because there is no visual uh indicator on these links. Now you can test this in different ways. And this is the PolyPane browser that can that has testing. uh built in but like these types of testing tools and we go through a lot of them over the course um they there there are stuff for every browser and every every I just tend to prefer this at the moment. So if we go to uh to info and outline and then Focus order, we can see that the focus order goes fourteen, fifteen, sixteen, seven. This is actually how it should be. So let's see what happens. 13, 14. Now it's good visually gone. And we don't know where we are, and then it like comes back here at the bottom, 29. Uh and the reason is that um Uh this used to be like a very old technique, which is why this particular um uh tool doesn't doesn't catch it. Uh is that People didn't like when uh there was an outline around things because those were like dashed lines around uh the focused uh information and so they put in basically remove the keyboard focus um immediately when the focus gets to it uh and that's problematic because people need to use the tab key uh you know and need to focus uh stuff they need to see where they are so uh that that was a incredibly common technique like fifteen years ago. Um so yeah this is this is ancient stuff. And now nine twenty twenty one two three four five six I think no Oh I should be seven, twenty-seven, twenty-nine? Yeah, I think I think now nowadays browsers probably ignore it mostly. But if we go into the inspect element panel. Here we have a JavaScript that basically says like uh on-focus blur and that basically removes the focus. Um yeah, and that's like obviously bad a bad thing. Uh doesn't seem to have like the biggest impact anymore, but uh apart from like that you can't see where you are I did not know that they that they fixed it because as I said it's 15 years ago probably since since the example was built and nobody is doing this anymore. What you would expect this to work is that you see skip navigation and then you go to the quick menu, go, and then news ticket survey. So in this case we made the home. uh menu inactive because you're already on that page that's optional uh so basically a preference um and then you navigate through the other content um and if you you might have noticed that we go from the heading here uh heat wave link to temperature to heat wave full story here at the bottom uh in on the inaccessible page didn't really work like that you went from heat wave uh links to to What does it say? Heat wave linked to temperatures. Uh, which makes a lot of sense if you think about it. Two men gets nine month in violin case. uh to lack of brains hinders research in one after the other. So in this case the order of like how you would read it visually in the columns. does not match the order of the text uh on the screen and that's also problematic right um and indeed uh here at the bottom 22 23 And 24, you see that they don't even have an accessible name because these are images that don't have an alternative text. So this is how in WCAG and in accessibility stuff. just um comes together in that way where you uh where you know that makes uh things uh inaccessible and uh and you can't really see that like having this view here uh and then if we go to the same view in the Uh da da da da da da. Here we see we see that it goes in in this Z uh form and then goes to read more. uh then to the bottom, which this is okay. Um but here it like goes up and down down and make sure that like you have the right reading order. Um and this is actually a fun thing because you can read uh if you switch off CSS, which is some sometimes something that we do. uh to test accessibility it's not not as common as we used to to do it um but if we uh switch it off Uh and this this also shows like this is a table uh uh uh uh uh HTML table layout which we don't do like for longer than 15 years but like yeah that that was the style at the time. You can see that like this text actually works as one text. After three years of effort, city science scientists now agree that primary cause of the 2003 heat waves was hot air from our mayor. These kinds of crimes need uh more creative effective punishments. For example, we could require compulsory brain donations, huge drop off in brain donations due to the great success of slow traffic safe streets policy. So you see how like this is the the reading order that you have uh when CSS is off It's just not what you want. And all of the the uh info visual information comes from graphics or from inline HTML. attributes which are still supported in browsers the to this day which is like I think a super interesting thing as well. Um yeah so uh So that's that that's basically what we do when we do accessibility reviews. Like we we look at like what's the code, what what are the links. What is the structure? So we can go to headings and we see that we only have one heading here, which is the heading of the actual page. And if we go to the um the improved version. We have headings here for the welcome to city lights, for the uh heat wave, for the violin case. So you get like the structure really easy and you can you can see how that works. Usually you should only use one H1 per page, but because this is like a nested page inside of a page we have two H1 ones. Don't worry about it. Um but yeah, this is this is like one of the main things that we do as uh as accessibility people is looking at uh the HTML structure. of websites or like the structure of documents and like the information that is underlying in apps to make those decisions um and one of the things that i want to show you and this is probably too early for most of you and i know that this is already very technical. Um next the next ones are getting like less technical. Don't don't be afraid. I hope. Um, is that uh there is this concept of an accessibility tree, which you have in uh all the browsers where you can basically also see like how things are structured like here's a list with six items uh I think this is this one Uh yes. Uh so the the navigation here is a list with six items. The second one, which is home, has the text current location home. Oh I clicked on it. I did not want to do that. Uh go back. Current location home. It has a list inside of it that has two items. Those are the inaccessible and the accessible. accessible version. So it has inaccessible homepage report in inaccessible homepage and then on the other side you have accessible homepage report port uh here inaccessible and accessible so you know you get all those uh different things uh in here and you can see how this is structured um probably too much structured to be honest. But yeah, so this is also information that, for example, a screen reader would uh know and sometimes read. If we'd use uh voiceover on a Mac, they usually don't read uh that there are six items if it doesn't look like a list. Um just just user preference, right? Um and uh but uh some screen readers would read like you know navigation six items or something like that. that and then say they even say like item one of six um but the user can um uh basically set their settings in any way uh to to meet their needs. Um yeah and then you see that there's a lot of state static text in there. Here's another list. Which one is that? Oh it's the navigation of the demo side. It makes sense as a list. And then there are here the heading level two. And there's a link inside of it. And inside that link is static text. And so that's how you get the information. And you also see that it's focusable in this case. So yeah, a lot of stuff that just goes on underneath the like visual um appeal of the website and that's why we have uh the web content accessibility guidelines and have all these like rules and and things that you should be doing um Uh in Wic Hack. Any questions about that?

Yes, I have a question. So in my experience when I've tried to learn more about accessibility I tend to get a long document of like thousands of links of knowledge. So my question is Could you is there a master of some kind? For I can for example, I can see that for you it's the V3C. page where you find all of this information but like how can you keep track of all of this

Uh very, very h uh difficultly. That's not even a word. Like yeah, it's it's hard um because it's also so Uh complicated, yes. Uh so I let me let me start from like the beginning. Which I probably should have done uh anyway. Like the Web Accessibility Initiative, that should be your main focus.

for learning.

There's a lot of stuff on the web that claims to be m easier to read and easier to understand. Um don't believe any of that. Not because they don't try, but it's often like small inaccuracies, small things. At least here you have like the most like reviewed peer review not peer really peer-reviewed, but like by a relatively large audience reviewed uh information. And then I always like guide people to the accessibility fundamentals. If you understand everything in here, you already are a step up. This does not um include like you know the the in the the deep knowledge, but this is just understanding because you have to know like how people with disabilities use the web and stuff like that. So uh so yeah I would always always guide you to the um Way website because like it's basically the best thing that's out there And I don't say that because I worked with them. Because if if that was like what I I would probably point out other things if if that was like the only reason to to recommend them. Um no, but it's really good. Uh like and especially I like uh how people with disabilities use the web. It's now like in this third uh level of things, but it basically gives you stories of web users like how how people are using it like personas um and then also explaining barriers and tools and techniques that people use. So yes, way is the main thing you want to look at. at um uh and all usually also the easiest way to stay up to date with stuff that is more cutting edge but the reality is Accessibility doesn't change a lot. Um I mean I'm doing this for almost 20 years now. Um WCAC 2 came out in 2008. Uh it's 2028 in you know just a couple of years. Uh it's like this is like the the f fundamentals, the foundations. They are all pretty similar because disabled people don't change. Their relationship to technology might change. which we have seen a lot like with mobile and with like different um d different ways to like use the the web and using apps and stuff like that that that might change But the fundamental needs and how they interact with content, that doesn't change. And that will not change in the next 30 years. You know, it will probably some things are going to get easier and some things are going to get a little more difficult. Um Because that's just how how technology works. But yeah, start start from here. Um and then you you need to be like um very uh choosy on what where you want to get more information about. Like if you are a developer, there's a lot of stuff in there, like a lot of techniques, a lot of like how to do things there are a lot of tutorials out there um you know that there's a lot of things if you're more like a content person You can look here at Design and Develop. There are tips for writing, like how to write good accessibility information. And that starts at page titles. It uh it gives you information about like how to convey meaning and structure, stuff like that. Um really, really like making making link text meaningful Very simple tricks. I would start with those and then like being specific in like what you're searching for. The same goes actually for designing and developing. I think starting with those small tips, getting like, oh, this is the the language use, this is the needs, this is this is in a practical way, uh what I want to do, uh or what I need to do uh is is the best way in. Um and One of the big like uh problems or like challenges with accessibility uh is that you uh are often get overwhelmed with like very in-depth detailed explanations with a lot of like links and and pointers and um I don't know who of you all had uh accessibility audit done um with your company Uh if you get that, it will be like a huge document and it will be super overwhelming. And we do that at Access Lab too, you know, it's like it's not pointing pointing fingers. Um the accessibility audit has been the uh the deliverable that people expect and it's just I d I don't think it's the most useful thing. I have a w whole blog post about that. Um but it's the thing that you know people want to buy. It's so so it's the thing that that we That's just how it is. But yeah, I th I think starting here and then you you just go with the top level of things. Just go. Step by step uh looking of okay what is interesting for me like maybe uh I'm a user tester and I want to involve users in web accessibility testing. Boom, there's there's a resource for that. Um which we which we said to do like as a as a uh like tagline uh of the page there's a resource for that um and then you go design and development which is mostly like okay when I start with a website how do I do it Test and evaluate is all the QA stuff like how do you do a review, easy checks? That's something that you will do as um uh for the exam, so you can You can uh already peek into that. Um then it gives you an evaluation tools list. You get uh like all those um uh how how to test things in there uh and then you can also under teach an advocate you can find um things that you can use when you teach. The before and after demo is in there. I already showed that. But there's also things like making events accessible. And there's a curriculum on accessibility. as well. So if you want to teach accessibility, this is a way you can do it. Uh I wonder there is a also a course here. Digital accessibility course. So this is a MOOC, I think they call it. a MOOC. Oh, they might not be calling it a MOOC, but it is a it it is a MOOC. Um that basically does a little bit of what we're doing here, but like very much in a W three C way, um, which you might like or not. Um but uh but yeah you can you can go through this course. Uh it's also a good overview. But I don't think there's a lot of like additional stuff if you do this course. compared to that. Teacher Advocate has also the business case in it, which basically gives you if you need to like convince your boss and stuff like that gives you a little bit of uh information on that like you know driving uh innovation enhancing your brand and increase market reach and minimize legal risks. You know, especially with the European Accessibility Act, that sounds um like something people want to do. Uh and uh th this is a good like entry point for that as well. So yeah, that's that's just a lot. Um Uh and that's that that's why we do this type of uh of course uh and have it structured as it is, uh with like the wall of text in the first week and then like going into practice uh in the following week because like it it it will be much clearer in the following weeks I hope that helped somehow. I felt I was rambling a bit.

No, thank you.

Uh Yeah, I mean if uh and if you want to learn like more how WCAG works, um You know, the the WCAC document itself, I think it's it's pretty well structured. Uh and then like just getting a good feeling on like how things are written and how things are like structured in the different success criteria. If you even need to use that, I mean most of the people don't need to use use success criteria on an ongoing basis. I think that's one of the biggest misunderstandings. Like people go to oh that's a that's a good uh a good example is go to contrast minimum. uh and think they need to follow this but you don't not have to like this is a testing thing um it says text Has a contrast ratio of at least 4. 5 to 1. This is for testers to do. If you are using high contrast text, you don't even need to look at WCAG, right? Because it doesn't matter. Like if you once you're above four point five to one text, you're good. Like uh and you know, four point five to one is relatively straightforward uh in in terms of like uh contrast levels um if we look at like like all of these colors do have more than 4. 5 to 1 contrast um because This is the accessible version of the page. I don't even know if we have in the inaccessible version we have text that is lower than that. Not because it's necessarily hard, I mean this might be actually uh to do why don't you help me Let me right click on this. Yeah, this has 3. 88 to 1 contrast ratio. So Uh yeah, I guess this is this is one of the things where you you would have um oh this is wonderful old old style uh HTML with font elements and stuff like that, so very cool. Uh just see that uh and here we have the control Um yeah, it's 3. 8821. Uh so yeah, you you want to be aware of that limit, but I think in practice as a designer You just want to like I think I think the best exercise for designers is to f for this particular thing is just to create content with uh with any colors that you like. And then figure out, oh, does this have enough contrast afterwards and learning from that? And then you know, over the time you will say, oh, this looks like it has too little contrast. Like I I just spotted this example here and I was like oh that this looks like too little contrast um and usually when you think about that it is uh and you can actually fix this um here directly in this browser, uh which is called Polypain by the way. Um and then it goes to 4. 5 to 1 and as you can see see like there's no no visual difference uh here I will just put that polypaint app. So yeah, so usually you just do like minor changes for uh content and I would not think that this is like easy to see. Like this is the other thing that I often see um people making making the mistake saying oh but this is not very readable. But that's not what WoodCack is doing, right? They try to have a minimum uh threshold of like what you need to do not like an optimum uh because you can't really specify that um but this I I would not accept this like as a Just as like if you come to me as a designer and you say like oh this is the contrast we want to have I would say like no you don't you're going to do this This again and here they have put the background in this gray, uh which I think is also like yeah, this has actually pretty good contrast like 11. 54 Um I still think it looks like a little bit low contrast to me. But that's you know, that's just how the cookie crumbles sometimes Yeah.

I have a question, Eric.

Oh, go ahead.

Yeah. I was thinking maybe this is off topic, but uh when working in a team. Um uh like the teammates maybe they help each other out and focuses in different areas in this um uh subject if I say we cag is a subject so so it's like um knowing everything is not maybe the main thing is like finding the solutions maybe for the right time. Is that correct or Yeah, I think so.

I think so. Is especially if you work like in a bigger team and everyone has like very dedicated roles. Like, you know, you have a designer and you have developers, maybe you have a front-end and a back-end developers and the front-end developers. has like yeah a very like boxed in understanding of what they do like oh I only do like this type of content like I only do let's say in the online shop I only do the um the the little like teasers on the overview pages. You know, that like narrows down a lot what you have to remember and you What you have to do. I mean they're still like the basics, but they are distributed over people. Um I think everyone needs to be aware of all the things. Because it's just so easy to make mistakes. Um and if you know if the designer has a contrast wrong. and the developer does not feel confident to like to say like, hey, do you want to check this again? Then that's that's problematic because then If there's QA, they have to find it. And they usually will. But then like, you know, you're already through cycles and cycles and cycles, so you you want to avoid that So it's it's good if everyone has an understanding of it. Um but yeah I think uh what you need to do is is probably very specific uh depending on your

But the fundamentals is essential for for everything, you think? Yes, I think I think so.

Like uh especially you know the principles uh if we go to the Way website again. Um so I think the introduction I would at least watch the video. You know, it's like four minutes So it's not it's it's not the the worst thing. Um and then just making sure that you are aware of like how people with disabilities are using the web. I think that's honestly we're talking a lot about like oh these are the rules and this is what you need to do but in the end someone has to use your product right it's it's it's it's the usability of it. So I think going through this uh and especially how people with disabilities use the web is a great um fundamental thing. Um They used to do wait one which one am I thinking about? Yeah, there is this accessibility principles page, which is also a great overview Like if you say, oh, you know, we want to have like I'm not the biggest proponent of checklists, but sometimes you want to have a thing like, oh, did I think of all the things? Um and this is a good overview as well. Like you can uh see if we go to let's take contrast again. So the principle is content is easier to see and hear, and then distinguishable content is easier to see and hear, which like that's Duplicating it up, don't make it too complicated. Um, and then they say default foreground and background color combinations pro provide sufficient context. Contrast. And we know because we're reading Wake that that's 4. 5 to 1. But in practice it doesn't really matter because the design Designer will usually, if they know we want contrasting colors, will usually pick something that you know is good enough. Usually not not always. Um, you know, or like uh uh ensure that uh text resizing works, stuff like that. Um image of text are resizable or have actual texts, things like that. So you you you get all those things that that that you do and you can avoid making mistakes when you know about those principles.

Much easier than when you

Just do something and then have someone else like do the testing, which is unfortunately what most people are doing right now. Um, you know, even with the European Accessibility Act. Um few of our clients and I think in general like web industry wide few did actually think about like oh how can we change our design and development and like prototyping. stuff to make sure that we don't create something that is inaccessible. Um instead a lot of people went like, oh we've created something, let's make it accessible. Um and like you can like it's really difficult to make uh like a car out of like a bicycle. Uh The same goes for accessibility. Like if you if you think you want to make a car, you want to design a car first and you don't go like oh let's do two bicycles. That seems that that seems like a good idea. Right. So you want to you want to like go and uh and and do that and for for that this um accessibility principles page is really good to just be sure like okay we all have like the same understanding and like you also avoid the like confrontational thing that sometimes can happen um where you go like and you need to push back because something is inaccessible. In this case you can just point and say like hey we all agreed to like look at those accessibility principles and I think there's a problem with like meeting this principle as well. So that's that's how I would approach it. I hope that that helped. Okay, so we're uh an hour through, uh so I would uh propose That we're doing a break, uh, because like one hour of me babbling on is already a lot um for me and you. Uh and then uh we will uh get back here in like five minutes so 1405 1406 sometimes something uh around that Time. All right. See you in five minutes. And resume the sharing so you can also see what I'm doing. Okay, any questions over the like little short break? No, doesn't sound like it. That's that's okay. Yeah, as as as I said, I think I said it now seven times, uh which sometimes happens to me. me like it's totally fine to be overwhelmed and like oh yeah there's there's a lot going on because there's a lot going on that's just how it is I want to show uh something that uh I wrote a couple of I don't want to say years ago. I think last year year. And that's about a relatively new web content accessibility guidelines, success success criterion. called non-text contrast. This is a 2. 2 WCAG 2. 2 success criteria and there's a lot of like discussion around like oh From the success criterion, how do you in practice test for it and how can you make sure that you know your stuff is accessible? Uh and this blog article goes through the whole um process of like testing for this success criterion um step by step with examples and so I think this is actually a good thing to show uh And uh and unfortunately, this non-text contrast thing has two different parts. One is for user interface components, so buttons, uh text inputs. um stuff like that, um links. Uh and there's one about graphical objects. This does we'll not talk about graphical objects because that's that's not just not been the example that I chose. But uh uh but that's basically um what what it covers and the idea is that uh visual presentation has a three to one contrast ratio um Yes, all of the links are going to be in the canvas and I will add the links that we talked about today as well to Canvas. So the idea here is that you have a three to one contrast ratio for things that are important for the presentation. presentation or essential for the presentation. Especially for user interface components. That means anything that you need to identify user interface component and its states, except for inactive components and stuff like that. that you know ignore that um and so there was this practical uh question about like okay what what about this example So you have a uh 2. 81 uh 2. 87 to 1 border uh contrast between this border and the color outside and uh 3 or more than 3 to 1 contrast. contrast to the inside color. Does this meet the success criterion? Because like this is the same color but it has two different contrasts to the outside. And I did create an interactive um uh demo for this because I for for me it's easier to do stuff in HTML and CSS instead of like in a uh graphic tool. It's just like it it feels more like how I would do it. Um so I took took the uh the three colors. Uh I tried to pick them as close as as possible from the image that that I got. And then the question is, uh is this um does it meet an exception? Because that's that's always the first thing that you want to do. test like if you um if you have a success criterion that has exceptions on it you just want first like does it have exception like does it meet an exception if it does you don't have to go into detail details, right? Because it's exempt from that requirement. And this has a exception for inactive components, always the appearance of a component is determined by the user agent and not modified by the author. So that doesn't apply to this. The uh the uh buttons are not inactive you want to click them and like uh you know it's all also styled so it doesn't um doesn't apply. So then the question is what visual information is required for this? And this is like a much more tricky question. So, this is the um login form without any borders or background colors. Um, and technically you can already see. that the border or the background color is not super needed. Like you have the email placeholder text. and the password here. And that can actually already like indicate where you are. So alone through placement. This might meet the success criteria. So um so this is something where you see that like passing the success criterion does not make a good experience, right? Because there's no wait for it, there's no nothing in there that like gives you orientation and like guides your guides how you do it. It's possible, but it's not good. So what I did next is I removed the placeholder text because in general we don't want to use placeholder text. really really important. Um it's uh it's problematic for a lot of people. Uh and then I would say like oh now it's unclear if you um if you can you know uh w where the actual like field is because you cannot see that there are fields like this could be just like something that doesn't have fields like this is not this is not good. With colors or borders, it looks like the font without the placeholder text, of course. Um, but then we have to see like okay, so now we need a 3 to 1 contrast ratio against um Like does does it need to have a 3. 1 control ratio against both like the outside and the inside of the field, right? But that's not what is required as a minimum So if we look at the next example, here I made the border color the same as the background color. And it's pretty clear that like because this inner color has the same color as the border, it doesn't matter that the outside color has a less than three to one contrast against the border because they could have the same color. Like once you are under under the threshold under 3 to 1, these are considered by WCAC to be the same colors, right? Or same enough that you don't can't make the distinction. And the input fields are pretty easy to distinguish. So this would be conforming to WCAG. So I would say this conforms to WCEG. And now, of course, now the text does not conform to WCAG anymore, but we're not looking at that. This is only a demo, right, to understand uh what's going on. Uh yeah, and so you might have adjacent colors uh and sometimes that shape uh will not work. Um and the question is like, is this good design? like this is like the next step up from like WCAG is only the floor, it's only what you need to do, the minimum. It like it it makes your your car not crash, you know, it makes sure that everything is in working order, but it could be like your car could be rusty or whatever. Um I don't know why I'm in car meth metaphors. today, but that's that's just how it works. Um so that's that's what you have with WCAG. Um but there is stuff you can do for better design, like having a two pix pixel and thicker border here. That looks much clearer and is a I would say a better design. So when you can you want to um optimize the design before implementation uh and make sure that like uh thing things work better. One of the things that you have here too is that the continue button is above the create account and forgot pass password. Um uh links. Uh which is problematic because like if you're using a screen reader you might not even get to there because you're trying to log in and you don't know that there's stuff coming Usually not not the biggest problem, screen reader users know to explore the page, you know, if especially with login pages. But like we can make this easier. So um what I did is uh I put in login all register at the top and then put the forgot password. link directly underneath the password so you you know you get that information when you tap through it for the first time to re register your email, your password, forgot password, and then continue. So if you get the error message that your password was incorrect, you already know, oh, there is a link to forget password. Forgot password in there. So this is how I would design this lookinform. Um if someone would ask me. But yeah, this is basically how you go from the minimum, like what does We can require in a very complex, I have to admit, very complex situation to like, oh, what's the best practice for me to do in that case? Yeah, and I think this is a a very fun um thing and like the the text goes into like in depth into like okay what are the differences between some of the wording, some of the things, but uh I think for especially this type of uh contrast ratio the idea that like if it has less than three to one Um it's it's all the same color is like it's is like very important. And for for um text, if it has less than 4. 5 to 1 contrast ratio, the text has the same color as the background functionally. It's is always good to have like to have that in the back of your head just to like explain yourself what's going on And I will put that link also in the chat because the chat also helps me to remember to put it in the canvas. This all everything works together. Um yeah, any questions about that? Going, going, gone. Okay. Yeah, I know, I know it's a lot. Um What's your opinion of the I symbol for passwords to to to show the pa show and hide the password? Uh P personally, um, I think it's okay. Um some people can sometimes struggle with like entering their password, so seeing them, seeing the password, like if they make sure that they are like you know, in a in in in an environment where they can do that uh is is a good um is a good option to have. I think uh it can be useful. Um The implementation is a little bit more tricky because usually the iSymbol is on the right side of the password field. Uh and so if you're using a screen reader you're going going down, uh you might not be aware of it. Uh but I think the um The technique is so widely used that probably screen reader users, if they are not sure about their password, would go to the uh would would just explore and see if there is a button to to review the password. So I don't think it's like a big big issue there. Um yeah and in and indeed if you're using um a password field where you only have asterisks or dots or whatever. um in the field, the screen reader will not announce what you have typed versus if you reveal it in a normal text. uh field the screen reader will speak back which um button you typed or like try to read the word that you type. So uh that can be a thing where like a screen reader user might want to enable it just to like double check what they typed in. um depending on their um knowledge or of on their like how comfortable they are with the password input field. So yeah I think I think it's useful. I don't think it's a must-have. But I think uh I I think it's uh it's probably for most websites it's a good practice to have one. Thanks Carlin for for that question. Yeah, and I don't have a good example for it. Uh Maybe Adrian has Oh, is it often a different browser window So yeah, if you if if you have any questions like in depth, like this is one of the other um resources I really recommend. It's Adrian Roselli's blog. Um he's just a super nice guy, super knowledgeable, and puts so much knowledge for free on the internet. It's like Really embarrassing. Um, but I don't think he has a password thing. Usually he has everything, so um Yeah, some sometimes that happens. But uh but yeah, Adrian Adrian is is great. Um you can also follow him on Mastodon. Um and uh yeah there's uh uh there's a lot of good good stuff on on his on his side so um always a recommendation Any other questions? No questions. Let me see in my tabs if there's anything that I want to talk about. Yeah. Maybe I want to talk a little bit about WCAC3 because I know that the stuff in the uh videos is all like uh probably a little bit outdated um well probably very outdated uh and i don't think i i talked a lot about wick three because it was very early. Um but there is this push to do wick hack three like uh and and this will be The idea is that it's a completely new thing. It's gonna be called differently. It's gonna going to be W3C Accessibility Guidelines, WickHack 3, um instead of web content, because uh The idea is that it applies to even more stuff. Um and there has been an update in September. Uh that's the latest one. I don't think I've seen this actually. Um so Yeah, there's a link that is uh broken. I should report that. Um but uh but basically they are putting out editor's drafts uh all the time. Uh and editor's drafts in W3C language is basically the current thing that the working group works on. It's not nothing finished, nothing that you should be looking at. And I would also encourage you to not look at WCHEC3 at this point. um rather as you know uh only as like a curiosity or something like to that that piques your interest but like it's way too early to think about this like WCAG 3 will be done. I think their optimistic projections are 2029. My very conservative things are my maybe thirty two something like that. So it will take it it it will take a long time. until this is finished. Um but they made a lot of of great um great progress here. Um And uh there's a good explainer and s and stuff like that on on the way page, uh, and I don't want to go too too deep into it. But basically their idea is to make stuff that is easier to understand. We will see if that works out, because that's actually harder than than than one would think. Um but like cover more user needs, uh including especially people with cognitive disabilities, uh WCAC2 has been lacking. uh with cognitive disability stuff, uh which is like it's it's a it's a big thing. Uh and you know sometimes you get like You try to write something up that would benefit people with cognitive disabilities and you get pushback from clients because it's just not in the standard and that's that's problematic Um be flexible to address different types of uh content. Uh it has a different structure than Recact 2, uh and it's it has a different different conformance model at least that's what they're planning at the moment and a broader scope just beyond web and they did the shenanigans with the next name, which I'm like, why even bother? Uh yeah, and uh

Yeah, by December they want to have a timeline.

So that's that's how stuff goes. Uh but there's that there's fun thing in there. Like um if we go to the uh uh to the image alternatives guideline uh you have like requirements and they th I I have not understood like how that goes. So this is this is where I'm in the boat with everyone else. Like some things about this new thing that is coming out. I just don't understand and that's okay. Uh but basically you have these fund foundational requirements and then supplemental requirements. So these are additional requirements somehow. And then you also have assertion assertions there. Which basically goes beyond tech techniques and gives you something that your organization could be doing. So that's actually quite an interesting um approach. So you have the uh requirements for decorative images, for equivalent text alternative. You will figure all of this out like in a couple of weeks when we talk about images. So you know don't get too like um uh too hung up on what this is. Um then you have the image role and image type as additional requirements. This would be in a different place completely in WICAC2. So that would be a four-one two requirement basically. And then you have editable alternatives. Like if you have text descriptions that are automatically generated, they need to be be editable by the uh person who creates the content, which I think is a smart thing to have. Uh I think that should probably be foundational, but I don't I don't really know what the difference is. And you can see that all of this um supplemental stuff is exploratory so they're just like putting it in as like you know for brainstorming or thinking about stuff uh and then developing here is stuff that they are actually working on right now uh because as I said it's very early you know lot of lot of things will change maybe even the whole structure will change we don't know yet. Um then you get this assertion where you basically say yeah yes our content creators our content authors follow our organizational style guide for text alternatives. So this is not something that you as an external tester could test. This is just where the company makes this assertion and then that will bring you points for the conformance. So you can say, oh, I'm WCHAC3. gold level or something like that. It's all all very open how that that's going to work. But I think it's uh it's always a nice thing to like look at what could becoming in the future. Uh but there's like it's it's way too early to to do it. But yeah, if you read somewhere that like, oh this new color contrast algorithm comes in with three or this will be in We cake three or this is going to happen way too early. Don't think about it. It doesn't make any sense. I'm not thinking about it. And you know I will probably think about it like long before most other people. So uh so yeah, it's it's just way too early to to really sink your teeth into a wick three. So I would uh I would just not do it. So Um yeah, I have a couple of um WCAC 2 understandings here. I don't want to go in them like too much. Just a little bit of the structure. So if you have a WCAC 2 success criterion like 1. 1. 1 for the images. um then you can click on the little uh understanding uh link on the top right and that will bring you to the page. where I'm just coming from. And that gives you like a couple of things. It has this in-brief uh summarization of you know what the goal of the success criterion is, what you need to do and why it's important. Um this is pretty okay. Uh I don't I d I don't think it's too useful Then you have the whole success criterion as text again. Then you have the intent. So you can like say, oh what why does this exist? This is always good to know Here we have a note on captures that funny enough has capture on like uh the first word in three lines. Uh fun how that sometimes happens. happens um and then you get all the additional information like you know what's what it's very text these Pages are very text heavy, uh and that I think is what makes them difficult to understand. Uh there are better and worse examples of this. Um but uh uh but yeah this one is like basically only text despite being about non-text content, so about images, they basically only have uh have text content in there which is like that's interesting to do it like that. Um if you want to see a better like Page for understanding. The target size one has been updated relatively recently to include a lot of visual examples as well. So yes, if all targets are 24 pixels, you know, then you meet the success criterion. Um and then even like if the target is smaller, then like how do you determine that and stuff like that. So this this has been updated and is much more visual and much better and easier to understand and uh everything should be like that. So uh so yeah but these are the the understanding documents that basically give you a more in-depth understanding of the individual requirements. Uh is this some anything else I want Oh yeah, I want to speak really, really shortly, like two minutes or so, about the WCAG EM. What do we call it? Like uh it's not really a standard because it's only a working group note, which basically says it's it's more like a report. Specification, I think I think you can say that. So the WCAG EM specification, EM stands for evaluation method. So this basically gives you uh like guide on how to make a WCAG evaluation. It's very in-depth um and get goes through like things like uh uh define the evaluation scope. So uh okay what what is actually included what do are we looking at um Explore the target website. So this is where I go into the website and I look at the common things. Then select a representative Sample. So this is where I say, okay, which pages are included and are representative. They also often do randomly selected sample, uh, which I think is useful and include complete processes. So if you have a checkout process or sign-up process, those are complete processes So you don't want to like just evaluate one step in those. That makes a lot of sense. Then you do the actual auditing and then you report the findings. This is In an update right now. That is very promising. My friend Hitler is working on it and uh and so I think it will be like really good when it comes out um it has been there has been ten years um but it's like it's basically how every company is doing evaluations um At least even if not like point by point or like in in the details like the grand scheme of things. Um This is how the evaluations are done. Uh and I think it's a good thing if you are thinking about like, you know, um doing an evaluation yourself or if you think about like hiring a company for doing evaluation. situations like going through this document and say like okay how how can we structure this so that it benefits us the most? Because as a tester I tell you there's nothing more frustrating than testing stuff that is not relevant. And to the users or the client or anything, picking a good sample is like super important there. Uh yeah, uh and that gets updated. Uh let's see, is there snow link here to the Current draft. I'd like to show the draft. Uh d Probably at github. com w three C A GM Way with KPM. There we go Let's see like updates through three hours ago. So uh so yeah, I will put that into the chat as well. Like this is the latest update. Lots of lots of different people are also working on it, including Steve Faulkner, which is a uh very uh good acquaintance of mine and it's it changed a little bit of the structure. But um yeah, this is uh this is a nice nice update that is coming and that will, you know, help everyone. to make a good to make better evaluations, which is cool. Oh, and there is a TR technical report in W3. Well, at some point, I guess. Okay. Yeah. Any uh questions before we're closing out this uh lecture? Because uh I don't have anything else prepared. I want to remind you that you can uh sign up for the uh for the uh tutoring. for the individual tutoring. Um and uh please do there are still places open today. Uh I will leave it open a little bit longer than I would usually do. Um and if not, like even like you don't need to ask stuff for the current week if you are um If you are signing up, like you can you can you know put your name in for week 11 and just collect your your questions. and then answer uh ask them in the 15 minutes uh that that that we have them um yeah but uh but feel free to to sign up and uh uh and if not I will just like sit here and like play a game or something like that. Um yeah uh there seems to be no questions so let's say Goodbye, have a good rest of your day. See you around and have a nice week. Say hi to Humphos next week, and I see you in two weeks. Bye-bye.

Bye-bye