Live Session (2025-26)

Hello, uh so for the videos that we uh have watched or that you have watched, um there were about page structure and uh and and content structure uh or for the last time that we met. Um do you have any questions? I mean you can also ask me about stuff that um there was in um uh Hampus's videos. Uh I don't know if I can answer them v very well but uh I can try. Uh and uh Yeah, so uh any questions, I think that's the first order of business. And feel free to put it just in chat if you don't want to speak up or if if you can't unmute or or uh don't want to be on camera, that's totally fine. Fine as always.

Yeah, so I have a question. Uh it's about uh Hampus lecture about uh keyboard navigation. Bear with me, I haven't really thought of how how I will ask this. But so it kind of went through how you can navigate with the keyboard using tab. And then he brought up IKEA as an example, a a good one. But when I tried it, can you go to IKEA's website now? Is that fine?

I can do it. Yes. Okay, let me share my screen. And I guess you're on macOS?

Yeah.

I know exactly what the problem is, so You know?

Yes. Can you can you just tell me if the say is it's the same thing I'm thinking about?

So you go to IKEA. com and then you tap through it and you don't see uh the focus working uh the same Correct?

Yeah, I mean that's the part of it. And then I c I don't see it on your uh screen right now, but they have a chat function. And so so let me just tell you a backstory. So so what I learned is that it should be logical, the order. So when you tab, tab, tab, you go. And um it's not good if you kind of dis like you said, you disappear. You can't really see where where you are And when I tried this, I couldn't see the focus. Uh what do you call it? Focus mode, focus outline. Focus outline. And then after a while I discovered it has gotten stuck on the chat in the low corner, uh lower corner. You don't have it. So you I can't really show you. So maybe.

Yes, there is a chat thing.

Yeah, yeah.

Oh no, it's not yeah, yeah, this is. Oh there there are multiple chat thingies. Oh that's always great. Like yeah. Let's have more things overlapping. Like I always like that. That seems to be a thing. So yeah, so two things. So the first thing is um To make Safari, especially on macOS, work with keyboard, you have to follow a few steps. Um Ali Project keyboard at the best um why is the Ali projects not coming up Okay, that's weird. So basically you have to go into settings uh like in your um In macOS, and you have to say uh that you uh want to to use keyboard uh navigation. Let me see project dot com so the website still exists right uh day Quick tips, I think that's where it is. There we go. Browser keyboard navigation in macOS So you go into preferences in macOS settings and you enable all controls because usually macOS the tab key only goes between input elements and buttons. So that's just because in the 90s, a long time ago, before many of you were born, um the there was like Windows always tapped through all the controls and uh macOS only tapped through like a subset of controls Just historically, and they kept this, and so you have to enable that. And then in Safari, uh you have to go into settings and uh Check the highlight uh each item setting as well. So you have to change those two settings and then it works the same everywhere. It's annoying, you have to know it first once and then uh you can do it and I will put the link into chat.

So even if I use Chrome.

Yes, even if you use Chrome you need to do the first one Like the uh the uh enable all controls you have to do that. So that then works with Chrome and then you um you also have in Safari you want to make highlighting of each item, switch that that on so it works in in so far if when you're using that. Yeah it's annoying. It's just how it is, like a diff a weird default setting. I so wish they changed it uh because like these things happen all the time. Uh so uh so yeah, but now you know. Uh and I will put the link into uh Canvas as well. The second thing that you said is that you get stuck in this like button here. Let's see if that happens to me too. Here we are. Yeah, that works well. No, I can I can skip over it. So maybe it has to do with that setting.

Wait, I wrote it down. Maybe I think I use the skip link, skip link in Swedish, and then that happened.

That might be the case. Let me see. So let's go here. No, but that seems to also work. It might be just because these are all um links instead of buttons. It just thinks there are no focusable elements anymore. anymore, right? Because you haven't changed the setting. So with the setting it should work. Um if it gets stuck, that's a wickek violation, right? That's that's not what should should happen um and we we used to have that um if i show the before and after demo again uh and after demo there we go oh i don't want to change that after demo w3c. If I go here and I go to home, like this is the accessible version, so I can just tap through obviously through navigation. But then even the demo page I can just tap through. On the inaccessible page, it was set up. As you can see, it jumps up to the top again all the time before I even get like into the content. Um and that is because there's an on-focus blur which is like a thing from like 15 years ago that people did uh to not have the uh focus outline shown. Why, polypain, why are you annoying and jumping in front of my stuff that I try to do? That's that that's not okay. Um so so that would be um a focus trap or like stuff is not reachable by focus So if you if you get somewhere and you can't navigate out again, like you can't navigate back for example, then that's a focus trap. We call that a focus trap. And if you can get there but you can't like progress further, then other stuff is not keyboard accessible. So we would have a keyboard failure there.

Okay, thank you.

No problem. And uh yeah, uh that's but but that's that's like an important thing and I will tell Humphre to like include that His stuff because I think it's it's pretty important. Um yeah, but but this is sometimes the thing. Like I have set the setting, I want to say 12 years ago and now whenever I get a new computer, I just migrate my account and all the settings come with it. So I have no I don't actively think about it too. So that that can happen Any other questions about last week or the week before or what you have watched for today? Going, going, gone. Okay. Um, I have a couple of things that I want to talk through. Um it's pretty um General uh stuff, but um I mean I talked a lot about site structure and how you structure content and how you structure the site as a whole. Um and HTML and uh ARIA, they give a lot of of ways to do that. Um and I always like to take the W3C side because I think it's decently complex, but also like relatively clearly designed and I don't say that because I uh helped creating it, um but you know I'm sometimes a little bit proud uh of of stuff um but you know we have here uh one navigation here at the top then we have this like secondary uh navigation in the header We have a header. Then we have the navig the main navigation here. What's happening? And then we have these resources here, which are lists, right? We have a lot of headings. So this is a very, very structured page, right? So it basically has all the things that you would want to see when you do, you know, your site and page structure. And now the question is, you know, if you are new to accessibility or if you're trying stuff out, like how do you actually figure out if a website does it right because like this is always always the thing you know um we We can tell you like how you create stuff accessibly and I think that's very important that you know how to do it. But then the question is like how do you test for it and how do you make sure that you know you have the uh the information. Um and I don't know if I shown last time uh bookmarklets I think I shown some of those, uh, but there are a lot of lot more. Um so here we have the Ali Tools bookmarklets. uh which I really like. They are they are really good. And basically bookmarklets are a way to run JavaScript on a site and then uh interact with it and you know and you uh drag it into your favorites bar at at the top. Um That's at least that's the most convenient. And then you can run these little JavaScript snippets, uh, and they can be like very powerful. So for example, here's the check headings um uh uh bookmarklet. So you click on it and you don't click too hard because that's uh you get the definition for a heading which you don't need but you drag it into your favorites bar at the top and then you have the little check headings um uh javascript here and if you um can see uh the there is a javascript function behind it like this is not a bookmark It's just a JavaScript that is then run on every page. Oh when when you click it, it's run on every page that you have open. So I can click here and now I see all the headings in here. I can go back to the homepage of Way, click the check headings thing, and I see there's a here's a heading two, a heading three. There should be a heading one probably somewhere here which it doesn't show because like you know it might be hidden um or it might be uh somewhere else, but then you see here's an H two, an H three, three H threes. Uh then there's another H two with subheadings h3. Ah and this is a way to really quickly see like oh what what are the headings uh do they work? Um is this the right heading structure, you know, for me. Uh so the I really like these bookmarklets because they work in any browser, in any like You know, even if you have like corporate restrictions or something like that, you can always use those bookmarklets because they're just uh JavaScript bookmarks basically uh and i will put the link to the book marklets into the chat as well Because I tried to do to be good about that. Um the couple of things that like uh you can do in addition. So first uh let me see if we can Yeah, usually you just reload the page to like get rid of the what the bookmarklet did. Um what else do we have here? Uh I thought he had like a list one, two. It doesn't. Um, but Paul J. Adam, which also has like a really good collection of bookmarklets here. He has like forms and headings and tables. So here's a headings one again. So I can drag and drop that up top. This has only headings. And then you can reload. to clear it out and click on the other headings um bookmark it and this just displays it differently And you can, you know, see what you prefer. You can also write your own. They are like, you know, not the most complicated scripts to write, but uh yeah, there are some things you have to to like probably Google and can figure out like how it works because it can be complicated. Yeah, and if you want to get rid of one, you just track it out and you get rid of it by proofing it out of existence. The other bookmarklet that I want to show was the list one. Here we go list one but also things like landmarks you can have a bookmarklet for that I also have them all in the in this drop down like if you you have a folder you can put them in. But you know, I like to show like how how you install them because like people people always question. question that um you know your uh images as well and then if we go back Here uh and we reload it and we say what are the lists here. We see there are a lot of lists. We have here an unordered list at the top. We have here an unordered list for the next navigation. So all the navigations are lists, which makes sense. And then we have the list here in the sidebar and here as well. And that's basically all the lists. Here we have a list with one item, uh which is you know fair if there's only one sponsor or founder, uh funder. Um and then you know you can really well see like where there are lists uh in the HTML and say like yeah this like matches my expectation uh for where list should be Landmarks, same thing, like here's a nav at the top, then there's a header that has a nav inside of it. What this doesn't do is give you the accessible names. So these are all named. um sections like the navigations because they are three. If a screen reader user would say like list all the navigation sections for me they don't want to hear like oh navigation navigation navigation navigation that doesn't that doesn't help but um here I think we call that like uh skip skip to content and uh trans translations navigation or something like that that and then you have here uh main navigation uh and stuff like that um yeah and then there are headers in here i wouldn't do this today Like I think that was that was not the most smartest idea. They don't do any harm in that context. But I don't think they need to be there. And then we have the footer here. Um it's uh always interesting what like six year of ex six years of experience do to you and how your preferences change for some of those things. things. Yeah, and this is this is basically how you make sure that like you oh you have a good overview of of what needs to be done. And then images, we're going to talk about that a little bit in a later installment. But basically this does the same thing. going through showing all the images and the alternative text if it needs one um and uh yeah just making sure that uh that you have that information really visible And Anyone else? Uh yeah, they're also keyboard uh focused bookmarklets. I don't know if uh if they made it into Humphreys' videos But like you can uh show the focused element. Uh Oh yeah, this the this is for revealing uh obscured focus. So if you have a dialogue and you can tap underneath it, it will reveal that into a to the top usually you want something like focus order um that's usually more useful so if we reload that I don't know show focused element and now I tap through it it really clearly outlines where the focus is and also what the accessible name is which is pretty nice uh not for the button though So that's pretty nice. And then you have the focus order book market. which will show you in what order you tap through. And this is also useful for stuff like the IKEA thing where you go like, huh, I should be able to navigate through that. Tools like this do not like, you know, do not require you to tap through stuff. So it can be uh can can be nice to just double check if that's uh a problem or not. And then you can also draw the path for the focus here. And if you if you hover over here you see exactly where you are on the page and you can of course tap through um and see like that you are really going along the path and that helps you to find issues where like the order is not like super convenient or like you're jumping back and forth you know you have zigzags Um having a jump like this from here the bottom to the top, that's totally fine. Um so you go to uh 38, 39, and then it goes back into the second column. And then it goes to 47 for some point. I have no idea why that is happening. Cuz it should not 3940 is getting started. I don't know why it's twice in there. Interesting. Maybe that is a pro problem I have to talk to the developer of this because that that seems wrong to me. Uh yeah, always fun. So yeah, the the that's the other thing about those tools, you know, sometimes they are just like wrong or don't don't work properly. Like they give you an indication, they're not ne never like a black and white. This needs to this is how it needs to be done. done thing. Yeah, and uh and so I often use these types of like bookmarklets um and I would recommend you to you know visit those uh two sites uh I should have put Paul's in there as well There we go. And you know, just play around with them. The uh the Paul here has um has demo pages so for example for the forms bookmarklet you can just go here and see like uh example form it's all unstyled because you know it lets you let's you see better what's going on And then you can drag the Forms Bookmarklet either into your bookmarks bar or you can just click it here because it will run it inside of the page. And then you can see like okay what is what is expected and how can like in this case forms look and we will talk about forms a lot um in the future so I don't want to go into too deep into it and uh distract from what we're doing. Um yeah so That's basically how these uh book markets work. Um and you can see like there's there's um a lot of like um evaluation tools in addition. So this is the Web Accessibility Evaluation Tools list. And it has book markets as well. I think yes here it has three book types of bookmarklets. Um interestingly not the ones that I just showed you because uh yeah, weird. Um so they they should have they should have those as well. Um but um But yeah, this is this is when you try to like automate stuff in your development workflow for example. example. So you can say okay I want stuff, I want a tool that looks through source code um and gives me feedback. So then you get like all the uh the information around like Okay, what are the features of these uh different tools? Like the X DevTools Linter is very well known and can just run tests uh over your pages uh and uh you know there are lots lots of additional stuff i've never heard of this side plugin. Oh that's for I think browser automation. I heard of that. Yeah and so you know it gives you gives you a really good way if you uh have specific r uh requirements for um for accessibility testing like oh you want to uh you want an online tool for example and you need to test For WCEG 2. 1 and you are mainly concerned with HTML and uh XHTML uh and you are on uh Linux. And then you see all the uh A tools that are applicable to like your use case. So that's it's pretty neat to figure out uh what's going on uh and uh and and have some test tools uh at hand so uh i really recommend using that there is a accompanying um evaluation tools, selecting evaluation tools article that I also recommend to like look at if you have time or if you have the need. uh to uh to look at that um and it gives you basically like okay what what you should look for when selecting uh tool for evaluations Uh and I really think it's a good thing to like think through what your needs are before you just pick something off the shelf. Uh because a lot of people are doing that Yes, uh Sean, go ahead. Did I pronounce that right? Yeah, Sean. Perfect.

So my takeaway right now is that If you were to do accessibility evaluation, for example, as a tester, you're the expert now, but if you weren't an expert, you would use the bookmarklet and just go through the whole list or like what what would you do?

Yeah, so so I use the bookmarkers as something that supports me doing the evaluation. So even if I'm if even if I'm professional, I think for people who are not like who don't who don't have a lot of background knowledge, uh they are not that useful. You know, they can highlight things, but like for example, if you have the uh landmarks example like you can just say like yeah there are landmarks or there are not landmarks are they done in the right way the book markets will not answer that question Right. So they are more like a visual aid to like to make it easier, you know, so you don't have to look into the source code uh and basically look at everything or use a screen reader and like You know, you can you can use a screen reader and have the list of links or list of headings uh and that works pretty okay as a As a way to test, but you might not see that there is text that looks like a heading and is not marked up as a heading. because it's just hidden some somewhere. So uh so with a bookmarklet you can easier like just scan over the side like with your with your eyeballs and uh uh and figure out like oh this looks this looks the same as the this other this other heading uh but it doesn't it's not marked up as a heading so that's that's a failure Yeah, right. So that's that's how I use it. Um and uh and I think that's the most for me it's the most efficient way to do it Um every accessibility tester uses different tools and uses them differently. And I think that's just like personal preference of like oh I like things to work like a s specific way and then you you just do it like that way and you know there's no right or wrong. I certainly wouldn't like tell someone like, oh, you're testing wrong. If if the result is okay, you know, I don't care how they got there. Okay, thank you. No problem. Uh there's another one that I want to show which is Andy. She has first the best name of all the um the accessibility book markets. But it's also it's also very handy. It's hand handy handy is now the name for it. Uh why am I doing that? this to myself. So if you if you use handy andy, you can click on it and you get this bar at the top. And it has like also So this is a bookmark that includes basically a lot of other functionality. For example, here we have the focusable elements Uh and you can click on tap order and you get basically get the same like num enumeration uh as the other bookmark did Uh you can also show title attributes which we don't have. You can uh have label uh elements shown uh which is useful. So they have several things that that you can do, but for us Uh you have structures and that gives you the nineteen headings. can click on those and then you can view the headings list and see that there's a hidden h1 and then there's the h2 h3 um and that can can be a good way to like look through it. And what Andy does, it basically also gives you like a mock uh screen reader output. So it says advanced in digital accessibility with W3C Way, keynote recording available, heading level three. So this this would be uh about what a screen reader would say. You know, some screen readers say it a different way. Uh so it's uh you know, you can't make make it absolute a lot of stuff is also like configuration by the screen reader user. So uh for example some screen reader users tiny amount like tiny number they don't like the levels b b behind headings they will only have announced heading. And that's just how it is. But you want to have the information in there in case someone wants to use it. Yeah, and then you can have the lists here Which in this case eight unordered lists. Ah, and you can't can't really do anything like more, you can navigate through them here. Oh, this is just tapping through, basically But yeah, you can't do anything like with the lists themselves. You have the landmarks here, which then highlights the landmarks. and you can hover over them and in this case it says like the ARIA label is main. And it says and the output would be main but because it's on a navigation it should actually say main navigation. I don't know why this This seems a little bit broken to me. Yeah, and then we have meta and search uh is is the uh uh accessible name for this and then for the top one it's skippling and language selector so people can like navigate around there and then we have zero life regions What's about more details? Yeah, and then you have links buttons. Links also important for like keyboard navigation, but also for like just uh visual um and page structure reasons you know it's it's good to have to have them properly and here you can see all the different links that there are and what their names are and like if they are skip links or if they are external links. Pretty neat uh as well so I think this is a this is actually a really good bookmarklet I use this like super rarely um but uh but but it is it is really good like here you have the two buttons have the height section uh and then you can see that it does not update here so you have to press the reload button here and and it updates so with dynamic content uh and uh um bookmark that's it can can be a little bit complex complicated sometimes. Um but you know in in case if if if if anything breaks you just reload the page and you start over. Like you cannot break anything like permanently luckily. So uh so yeah. that's that's what I would would recommend. Um let's see and does it show because I have used the Hiding feature for for the H1. No, it doesn't do it. Okay. Never mind. Just ig ignore the last twenty seconds. Um So that's that.

I have a question.

Oh, go ahead.

Yeah. I was thinking about evaluation tools and we had one on the Canvas, the Microsoft. Accessibility inside. Yeah, inside. Is that a tool that is recommended or what do you think about that one? Is it preferable or I have not used it much.

Um I think it's a good tool. Um I know that it like guides you through like a whole evaluation. As well. That might be something that you want to use. I think it has a lot of good features. It also has the tap feature, like that's basically a standard right now. uh that a lot of those tools have. Yeah, yeah, but it's it's a good good plugin and um uh and I think like if you if you feel comfortable with that, you know, if if that uh works with your flow, then I think it's one of the better ones.

It's actually the first tool I've used, so I don't have any other measure too but but it has it it has also like uh reference to the guidelines in some cases. Yes. It also says yes you could also check this um guideline because this is like an error. Uh so is there any tools that have that function also that it's like intertwined with the guidelines?

Yeah, there there are there are a couple tools who do that. So the X tool does that. So that's uh from DQ. Um let me DQ And that's also available as a browser plugin and uh other things that you would want. Um I don't know if it works in Safari. because I'm I'm always in Safari. I'm always the the person who uses Safari the only person of course it doesn't that's that's annoying but like um you can you can install it into your to your computer and it it it is pretty pretty nice let me open edge and see if I can show it Loading, loading, loading.

But w which is which would you recommend to use?

Do you have any like favorite or I have a favorite and I'm gonna show that in a bit. Great. Um Yep. Uh da. So sharing that would help. So there we go. So here we have uh our Um do I have accessibility insights here as well? Oh yeah, I do. And I have also the XDEF tools. So this is uh it's almost as if I I'm prepared for this. Uh which I tell you I'm a little So copying this here. So so and and this is something that you might see that like the results of those tools should all be relatively similar. Of course, because they all look like back at the same um uh requirements. So you know, don't get that that's also why I don't think you really need to like decide for one tool uh apart from like the one that that you think works best for you. Only two for uh tool to edge. Um so uh so for example here uh this is accessibility insights You get this fast pass, quick uh assess, uh and then full assessment, and then ad hoc tools uh that give you visualization. And the ad hoc tools, they are mostly like the um uh like the bookmarked it so you go to headings and then you have the headings highlighted uh you can switch on landmarks uh and then you see all the landmarks. So this is this is useful basically the same thing. Tap stops also the same thing. Why did it close? I think there are just too many tap stops on this page. Um So yeah, that that should also work. But you can also go to these like assessment things. Oh, why is it opening a new New window? Don't think that's what's supposed to happen. Uh let's try it again. So yeah, if you if you open FastPass and I have to share that window separately, um then you're basically um Guided through an evaluation, right? You have the automated checks. So in this case, because this is W3C website, there are no failed instances. Then you look at the tab stops. and you can switch on the visual helper which doesn't work which is like a little bit annoying uh but basically you should also have like the one two three in here and the lines be connecting between stuff and then it basically shows you shows you what you should look at like keyboard navigation all interactive elements can be read using tap and arrow keys um and you can basically say like yeah that passes Then there are no keyboard traps, so that passes. But then you might see like oh the focus indicator doesn't work. So you go to to fail here and then I think here you can add a comment. hard to see exclamation mark. Um and that's then how you get your uh your um Your really quick accessibility audit basically for yourself. Like here you have a couple of color contrast issues that might be there They are not really colour contrast issues. But like, you know, it is not sure if this is enough contrast because of the CSS definition. Um, and then you can, you know you can mark them I think somewhere as uh as issues. There we go. File issue. Oh for for GitHub now you don't want to do that so lot lots of things you can do with that and they have different um different types of tests as well so you can go and you have like the full assessment And if you start new, you now have a lot more things to look at, right? Uh but this is like if you are starting out and you're like, oh, I want to do an assessment of this, but I don't know like what my steps are. Then I think this is like the best tool to start out with. Because it like really guides you through like steps one, two 25. And I, you know, doesn't doesn't feel like we're doing so many steps, but like a lot of stuff happens just like automatically when you do it like a couple of times. So uh so yeah that's basically like really guiding you through you know closing content, focus order, focus not obscured, uh and it tells you like gets you through uh what the requirements are. So it's it's really good. And I like this. Like if you want to get really into like how to do it, it works well. You can export it, you can save it and load it and you can also um start over of course if you say like oh I made a mistake and I have to like test the section anew Um yeah, and then you have quick assess, which is basically something in the middle. I don't know why they have three of these, but these are basically only 11 things to tell But uh yeah. So I th I think it's it's super useful to to do those. Uh and you know also like they take the automated checks and they do them for you Um and if you are on a page that is actually bad, uh let's say oh let's let's go to Microsoft. dot com. I'm sure they are they have issues. Let's see. Uh and then you can go here into assessment start new automated checks are they they make all the automated checks because it's their tool Well, because they probably test with their tool. takes a little bit of time. There we go. Start new. Want something to fail automated checks This is this is boring. And we go to the before w3. org slash way slash demos slash bad. I need a bad page for this So here we have failed instances. Yay, finally. Um So yeah, so HTML needs to have a lang attribute, which this should totally have. Select needs to have an accessible name. So those are all the automated testable things. And I think they are very like nice in in terms of like you know how it's presented. You can highlight the issue as well. And then you have all the little exclamation marks on the page. So I think I think this is actually really good. And then like also making the difference between what you can test automatically, which is about 30 to 40% of all issues and the stuff that you need to test like manually, which is like the rest of the In the quick access and in the big assessment, you know, you have a lot more that you need to test. Like if the captions match the video, you can only test that. you know, by listening to the audio and and and looking at the captions. So there is no automated way to do that. Yet So that's uh accessibility insights, which I again I think it's it's really good and I would recommend it uh to use. Uh and then you have X which works in the developer tools. I always forget how to open an uh thing in edge Command alt I yeah. And then you have here the X DevTools tab. And uh, you know that you've updated your extension correctly, which is great. Okay, this is weird. Oh, I know why I'm not using Edge all the time. Um But basically that uh does the same thing. Now they have a paid for version and a you know normal version. Uh and I personally think like especially for this course uh paying for the paint version is not worth it like it doesn't like help you much uh because you can use accessibility insights uh which has all the step by step stuff. Um the paid paid stuff for uh X is also a step by step thing that like guides you through the um the testing process. And then they also have partially page scans, so you could say like, oh I only want to scan this top half, but I yeah, why would you do that So full page scan it is, uh, and then it runs the scan and then it it gives you out the total issues, which is 45. And if you think like, oh, it was 45 in uh the X uh in in the accessibility insights as well, they basically are using the same testing. Uh framework underneath. There is a standard testing framework called ACT, which is developed in W3C and basically gives you gives you the same or comparability between different tools. So you have the 39 alternative text things you can highlight them. Same thing as before. Also share the issue, which is a great feature, but you have to pay for it. It's a bit annoying. And then it also gives you like the um the element location and the uh HTML and then what you need to do to fix it. Um it's for me this is all very wordy and very abstract but uh But it but it works for for what it is and then here at the bottom you have like WCAG 2A WCEG 1. 1. 1 section 508 so you can actually So they are tagged this way. And that's how you know which success criterion you need to know. You can also click more information Uh and that uh brings you to the Stiq University page and there decline the cookies. Uh and then uh you can see like you know where they uh where they link to basically um including the uh uh other resources for um uh wick hack uh related stuff. So yeah, I think I think it's pretty good. Um I think these type of pages are very wordy and like often a very high level of tech technology technology language. So um so be aware. The other thing you should be aware is that when you are using X Core, it's really easy to click best practices on Here and then you get seven more issues. Things like what do we have here? Document should have one main landmark. So currently this has no main landmarks because they weren't invented yet when we built this. But like this is a best practice. This is not something you have to do. So just be aware that like if you uh click on best practices, you get stuff that you don't have to fix. Um, you know, uh I mean in this case, yeah, I think I think there should be a main uh landmark somewhere, but it's like uh you know it's it's it's It's not like that uh clear cut of an issue. So um just be aware of that because we often get questions about like oh X set this and that and then you have to say like yeah but that's just a recommendation, it's not an actual issue. So I wanted to uh to say that. Um yeah. So X is pretty good and and accessibility insights. I think they are both worth having because they Scratch different itches. Um this don't want to close. Okay. Technology is not my friend today I see what's happening. Yeah, so so I think those are both good tools. And then you have the bookmarklets and you know and you can use basically all of those um tools and find out like what works the best in your situation, in your um uh in your company, in your uh in your day-to-day practice. Like the X tools are interesting because they also have a server-side component, so you can run them automatically and you get the same results Right. So you can you can say like oh I'm looking at this page specifically in my browser, but you can also have like oh once a month we test all the things that we have on the on on the website like all pages and make sure that they are accessible, you know, or if we see that something is cropping up, we can fix it really quickly. So that's where these automated tools are the best. Any other questions If not, I would say we do we're making like a seven-minute break, that sounds about right, uh until two, and then I will show you which tool I use and like uh and uh and and how I use it. Um yeah, so see you at uh two o'clock. Wonderful. So before the break I announced that I would show you which tool I like to use. So I have to preface this. This is a paid tool. So it's it's really only if you are like a web developer or something. But it has like uh I think 30-day or even unlimited testing period. So you know if you want to use it for this course it's okay. And I think also as a student you can have it through like GitHub or something like that. I don't know. Um because I have I've just paid for it. Um because I use it for um uh for for for my you know, occupation. So uh so that was um that was uh a no-brainer in that case. Uh it's called PolyPane. It's a browser for um for web developers basically. So it's very technical. It's not super intuitive, I have to say that. But I think it's like from the tools and how they work together. and what you can do with it. Um you know, especially if you're doing accessibility testing like often, I think it's it's a really helpful tool. And like uh, you know, I know the developer, it's a one person project basically uh and he's like super interested in putting accessibility features in making sure that it works so um yeah I'm I'm really really uh happy with that um And I will put the link into the uh chat as well. Homelypain. app Yeah, without the apostrophe. That was typing who who can do it best, it's not me. Um that's that's what I can uh very confidently say. So if we go to uh to uh a page uh for example the the way page again PolyPane is basically a Chrome browser. So like your Edge, your Chrome, your Opera, like these are all the same browsers, but this is specifically for uh people who develop websites. So you have tools that you can use like here you can go into horizontal mode and now you have a breakpoint like responsive breakpoint here and uh this um site has four breakpoints so you can just with one click you can create all those breakpoints in one click and then you can compare it. Like this is is basically the f the feature that you know is why this browser exists and everything else is like afterthoughts basically. Um, but the nice thing is uh inaccessibility, you know, we are doing the tests and we there is no um breakpoint or no uh like window size or anything that you have to test at. Well you have to test at 320 pixels for the important success quite here But in general, it's not like oh we only look at the full screen view or we only look at the mobile view, right? You have theoretically you have to Look at all the views. Um, and this is a nice way to just get that overview and say like, oh, they look all the same. you know there's nothing that I that I don't like. And that's good. And here there's a little bit of horizontal scrolling because this heading is too too large So if you if one wants you could do like the H2s a little bit smaller for for this type of view, but usually there are no two columns like this. This is a front page special, I guess. Yeah, and you can and it scrolls like all in unison. So you can you can look at stuff like at once. And this also works for focus. I thought doesn't scroll really the same for focus, unfortunately. But like, you know, you can you can make sure that that it works in both um both ways and when do would you want to do that? For example here we have the menu is behind a button and then here only the submenu is or or this like secondary menu is behind the button. So, you know, you're just just noticing those differences and then sometimes in testing that's important. Often it's not, sometimes it is. Yeah, but this is uh the this is the general like the the function why you would want to use polypane or why um developers would want to use polypane. You can also have like uh uh other breakpoints uh and you know you can you can change this like how how how you f you want to um and that's that's great um you can also use a split view so you have a small view on the left large view on the right um super useful for um interacting with with with some stuff and then you can of course like say, oh we I want 5050 here. But I usually use it in full screen mode. I'm like I'm not that pretentious uh of like needing to to to need all the uh different uh things. Uh and then you have a couple of um ways to do accessibility. stuff here. And for us the most important thing is stuff that is here in the sidebar. So when we look at the sidebar we have uh under info and meta we have the title of the page we have things like the language noted um and so you know it's really easy to like know what's going on you can also see like how your uh website looks uh in on LinkedIn or on Discord or uh blue sky or mastodon wherever you share your stuff um so that's useful um you also can get like is it mobile friendly maybe there might be small tap targets good to know um uh and so you get that information really quick There is an accessibility tab here and if we click that it basically does an X test. No issues found. Good job. Let's celebrate and you get a little bit of of confetti. Awesome. Um but if we go to the before and after demo uh demos bad and we go to the news page which is inaccessible we can also open the sidebar here um And then we already see that the language is missing, which we did see in a couple of tools already. And then we can analyze the page issues. And after a few moments. After a few moments. This should this should be quicker. Come on. Kilian, these are too many moments. I don't know. Usually this goes like instantly, like the X test too Yeah, I don't know. Um, so yeah, you would get the same uh X uh result. Let me reload. Even with reloading it doesn't like really reset it hard reload. Nope. There we go. Okay, I don't know what I did, but now now we have the results like HTML element must have a lang attribute. And this is basically the same as you have in the X tools. But this is a little bit smarter because this is integrated in the browser. So if we have like one of those images We can just hover over the the uh element here in the sidebar and it shows us what you know what the culprit are culprits are. Like here on the side there's a gif and then there's There's like the logo here at the top. That does not have an alt text. And then I can click the little like pointer to a button, which opens it in the element panel. This is basically where you get your normal like browser inspectors panel, but with accessibility enhancements as well. So you get the direct like link here, uh, and you can uh click on the image you have here your uh your contrasts it shows that um not not relevant for this image of course and then here you have also the alley panel that gives you the role of the um element that you use, which in this case is an image, and uh the URL where it points to, and stuff like that. So that's that's super useful, not for images, but for for uh if you have like buttons like this drop-down button you can inspect element click on it And then it says like, oh, your accessible name is missing. This has the role combo box. It's focusable. It has pop-up menu. That's all default. stuff that you get. But yeah, you can you can really quickly like see those accessibility things by just inspecting the page like you would. But you also get that from the uh X um result here. And if we close it, uh here there are some links here at the left that don't have a name because the images that are inside of the links don't have an uh alternative text So if you hover over them, it will give you like, oh, there's uh the accessible name missing, and then you can go into To the uh elements panel and look at it. And if I write an accessibility report, that's super useful for me because I have here a little like screenshot icon and I can click that. Technology is not working for me today. Why don't you This is weird. This should really work. So if I do right click, element padding. Uh are you kidding me today? Does this work? Viewport? Yeah, that works fine. So you get a screenshot here. And then you usually can get a screenshot from other Pages as well. I don't know why it doesn't like me. Maybe it likes me in another another browser window. Let's say Inspect element. Oh no, now something is wrong. I just restart the pro the polypaint. Oh fun technology, don't we love it all? So there we go It's back. Uh let me try the other thing again. So let's say this news button here. There we go, we have selected it. Uh it has the hashtag news ID and then I click on this element screenshot, doesn't do it Annoying? Okay. Then we look at this uh image here. There we go, this SVG and we want to make a screenshot of it. Really not one. Want to go? Oh maybe that's just a bug and I just discovered a bug. So that's fun. Um But the idea is that you can like highlight an element really quickly and I can can do it like this and then you get a screenshot and you can paste that basically directly into your report and stuff like that. So that that's why it's neat to have like this integration and usually like Like just clicking um the uh screenshot here does the same thing. Or did I put it in a folder accidentally? Did I set that? And that's why it doesn't show? No, it doesn't. Okay. Weird stuff is happening sometimes uh you can also um to get back into like uh testing and how how you would use that um there are other tools here as well so we have talked about the meta tool and the accessibility tool But the really powerful tool that I use all the time is the outline tool. And that gives you your headings, as we have seen before. I'll make this a little bit bigger so it looks looks a little bit nicer so you have your h1 that is hidden visually then you have your h2 here h3 h2 h3s And it shows it on the right and you can just hover over it. Again, you can just click it and you get into the inspector. uh and uh and work with that uh but you can also show the overlay oh i navigated away did not want to do that. So you can also click show overlay and then you get your H2, H3 stuff like the book marklets. Like it's not not you know rocket science, but it's all like in one thing. Um and it also allows you to show issues. So this page doesn't have any issues, but of course our bat um uh demo has. So if we go to info and outline and headings here, we can show the overlay and we see we only have one h1 here. And because there are no other H1s, it doesn't show any issues because it doesn't know that there are actually headings in there. But this this would be one way to use that. Then you have also the landmarks. Of course. And here you have the advantage of like having basically both. You have on the right you have the information of what the landmark is and you have also a little bit like uh a border around it and uh and and a highlight which is useful but on the left you also get like a real like tree view of the whole thing and it says things like main navigation then you have the section here which is making the web accessible region. So you get get all that information of what the individual labels are for the individual individual pages and I think that's actually very good to um to notice where issues are as well. So this would be like, I don't know, if you have like multiple navs that are not named, it would highlight that for sure. Sure. Then you can also show potentials, which I think is a fun, fun thing to do. So here we have these header elements, which I would not use again uh knowing what I know today. But basically it says it has to be a top level to be a landmark because that's only how they work right when they are uh not inside of a section or a uh or a main or an article. So um so it shows you that as well. Uh and you know maybe if you have a ID footer it would say like hey do do you want to use a footer landmarks. like that so that can be useful as well. Um yeah focus order of course uh it also has To serve a little bit on Humphus's uh coattails there. Uh so you also have these this nice overlay here uh where you can that also highlight the individual items and again if you click it goes into the uh uh uh the elements tool. So I like I like that very much and uh and it helps you really easily to uh to to easily find like you know reading errors, reading uh order errors And uh of course tab navigation errors. Um yeah, and then there's the accessibility tree, which is probably something you have already heard about. So this is also if you go in Chrome, there is like a little man I'm might be an uh a thing that you have to enable in settings somewhere, but you can basically create this accessibility tree. But that gives you basically the semantic outline of a page. Why did I do that? I wanted this to look like this. So you have the root web area which is the uh title and the URL and then you have a navigation here at the top. That navigation has a list, that list has list items, that list those list items have links, and those links have static text inside. of them so this is like really getting the um semantic uh outline of like what you want to see then we have a banner that banner has a link that uh Penner has another link, then there's some static text in there, then there is a navigation which is called Meta and Search and has three lists, list items in it uh with links and it also shows focusable so you don't have a link that is not focusable for example Main navigation here for the heading. We have the regions here. We have the section header here. Which like yeah, it's not not something thing that you should use. Um and then you have the other like heading three in there as well. So this is a way to make sure that the structure that you see on the page matches what actually screen readers and other assistive technologies use because they all use this type of accessibility tree Uh anything else I want to show here? Forms we're going to do when we when we look at forms in a couple of weeks. Links Yeah, I don't think that's too important. Uh what's happening there? Yeah, I think that's all good. Um Yeah and images. works the same like other other book merklets so but but I really like that it's in this type of format. There are a couple of things that you can also do with with tools this is this like debug tools um icon here in the um in the toolbar and that shows you roles uh and uh area attributes for example which is the thing that is mostly um relevant To like what we're talking about this week. So if I click on show roles, you have here the image roles. Um and the rest is all implicit, like comes from HTMLs. so we don't see it. Oh yeah, here the search form uh has a role search on it as well. So you can see that um here as well. But I think that's all we have here. Oh yeah, it it has a couple of things. I never use this, so uh oops Clear it, uh technology today I never use this, but it has a couple of things that are interesting for like marking up or making sure that you can You can show things to colleagues. For example, here there's the edit content and check spelling functionality. And now I click this and now I can just like click anywhere in the page and add text um and just make sure that like how it looks. And here we can see that I cannot do something like uh like lists. I don't know if that's actually supported. some way no right click also doesn't show anything so it's a little bit limited but like if you want to like make sure oh we have this like W3C text but it should be you know worldwide web consortium you can try that out and that can be useful for uh things like uh content in uh structure as well like if you say like hey this this looks like text or like what's going on here um Can be useful. I'm as as I said, I'm not you I'm not I'm using that rarely. Mostly for like changing things like when I when I come across a heading that I think does not explain the content underneath it like very well then I might make a change and say like hey this this is how it could look dear client um but rarely uh there is a readability tool I have no idea what that does It highlights things in green. Oh, this is for a readability index. So it says this is a 19, this is a 15. I think lower numbers are better. 6. This is probably like very hard to read, yeah. 19 again. So you know this is super hard to read apparently. um but yeah so this I didn't know that this exists existed but like you know it's it's also good to like see what the structure is You know, for example, here it's uh split up into uh bullet points and that could be a good way to to like handle more uh difficult to read sections. Um I don't know if professionals instructor students is hard to read, but like I think it's more made for like proper complete sentences. You can add a little bit of content chaos as well. Like test if your layout doesn't break with more content or less content or both. So if you want to do that, you can click on both and then you know some of the content gets like paragraphs added like here uh and some gets removed, uh which is nice. Uh and let's say if you have a page where you're working on And that's really important to you. You could go into um split mode, for example and make it half and half about uh a little more like this, yeah And then you can uh uh these debug tools then go into these like secondary um uh Toolbars and you can click on them and basically modify them only for this. So this is more content and this is less content And then you can basically see if like if it still makes sense or if it still still breaks or something like that. So you can do that at the same time, and I think that's always fun to do. Um yeah. Hampus is doing the color contrast stuff. I can I can show a little bit of color contrast there. in a in a second as well uh with polypaint because i think i think it's a great great demo uh but yeah that's what that's what you can do you can use hostile css which like formats it really badly uh on purpose uh or you can go here and also do uh placeholder fi, uh and stuff like that, but they also have accessibility simulators. I'm not the biggest fan of simulators But you could do a dyslexia mode where basically the letters are changing all the time. I don't think that's a reasonable Like that's that's usually not how uh dyslexia works necessarily. I mean a lot of people describe it as like imagine that um that letters like jump around, but that's usually not the like the real experience. It's more like you're looking at a letter or at a word and you cannot make out what the letters are. are. That's that's how I had it explained to me. But it might also be different from person to person. Yeah, and then you also have in the sidebar, apart from all these like uh accessibility things, uh you have have you know your storage your source code you have your uh your live css if you want to uh highlight you know all the headings level two you can do just border one pixel solid uh red and write yourself a css for it which Which apparently doesn't work because I need to import it. Is that right? Doesn't like me today. Oh, there it is. It worked. And then you also have the Chrome DevTools in there, you know, just for for sure to to be sure like if you if you like anything that that they do uh you can actually go into chrome dev tools as well and they link to each other like here is the little edit in Chromium dev tool Tools button and then that will throw you over. Yeah, you have a browser in there so you can look stuff up. But the interesting stuff is here in the custom workspaces. So sometimes you want to look. What's the thing that we usually don't what I have not uh talked about uh let's say resize and reflow checks so you can open those panes and I should actually like this disable the live CSS. There we go. And now I have in my in the right side here I have the um different um viewports with these um uh like spaces applied to it it uh that you know are the maximum basically uh what a user must be allowed to change uh fonts uh on your on your site uh and you can look at that really nope can look at that really easily you can do it horizontally or vertically uh which uh i like to do when i have a lot of panes like that Come on, let me scroll to the left. This is really not a good like technical demo day for me Uh but you can zoom this out so you can really see like all the paints on one at one glance here you have the top three and then you can scroll through and see if something overlaps or something something like that. I think I think that's really useful to be able to have those overviews. And then if you found something, let's say this, we are unhappy without this making audio and video accessible looks. We can click on the screenshot tool here and it will make an overview screenshot of all those panes. So you can you know put that into your documentation. Uh pretty neat. And the other uh and final thing that we're going to look at is uh the color blindness simulation So as I said, I'm not the biggest fan of color simulations, but it can be useful to like see how different how how your page looks differently with different like uh disabilities in that uh in that sense. And again I put it into vertical and here 25% or you can make it even. smaller and then you can like at one glance see where the issues are like uh chromatopsia is one of the like uh heaviest things because like light parts of the page like basically blend into like the the text and so it's very hard to see um and if you have like a good good place where you want to like show that a client again it's like one click and you get the uh get the image and can put that into your um into your report. And takes a little bit of time because it basically makes all these screenshots individually and then puts them together which also explains the like space here at the bottom which you can then crop and then you're you're in a good place and the nice thing is If you have named your uh your panels, it will include that uh here as well. Um in very, very bad contrast, I'm aware of that. Uh I wish I wish the whole UI was a little bit more contrasty. You can go into light mode, then I think it's it's much better, but I like dark mode better. Yeah, uh so that's the tool that I usually use. Um and uh Where did that come from? Uh and uh and yeah, I'm I'm very happy with it. And it basically combines a lot of the other tools. Now you would say, okay, but if I want to use something like uh accessibility insights how can I do that well you can use extensions here in here as well so you can go into the extension manager you can go to find more extensions and then go accessibility insights for web Add that to PolyPane because it's just a Chrome browser, right? And then add the extension. And then you have your accessibility insights right in here. as a very small loading thing. Which I hope is only the first time you click on it. But technically it should work. I don't know why it shouldn't work. Um Yeah, sometimes because this is not built on Chrome, it's actually built on Electron. It's very complicated in the background. Some of the extensions don't work as uh smoothly as they should uh because they are well extensions are still beta beta so uh So you have to look, but uh for example for the Ali Tools book markets that has an extension and you can use that. So uh You can click on headings list and you get the same view. So if you feel like oh I really like some bookmarklet, you know, especially if it has like uh the uh the extension you can really uh really use that as well. Like force focus styles and stuff. There's lot lot you can do uh with all these uh these tools and they all like work together in some some form All right, any questions about anything? The world, life. Doesn't look like it. Yeah, I think that's that's all I have to share. Um if you have any like specific questions uh in in between, like before the next time we meet, just feel free to put them into Slack. Uh I'm not uh I'm I'm only working a couple of days every week, so uh it might might take some time until I get to uh to answer them but like you know I try to keep up with uh with stuff and you're always by priority. Uh so uh so yeah if there are any questions uh you know just make sure to put them to put them into Slack or like uh book a uh a tutoring meeting and then we can talk talk through stuff. Yeah Just looking if there's any other questions or like if you want to shout at me you can do that like if you have aggressions.

I have a question.

Oh go ahead.

I'll put you in the um in the calendar for right after this uh session. Is that okay?

Do you have time?

Okay, good.

I do have time. That's why we we have these. Uh but I don't see you in the book booking tutorial thing.

Shall I do something?

Maybe I should now I see you I think you have to stop editing. So now I see you and now I will be there. Perfect. Good.

Thank you.

Alright, take care. Have a good rest of your week, everyone, and see you around. Bye. Bye, thanks