WEBVTT 00:00.000 --> 00:10.480 Great, thank you everyone, I am Teeball, pronouns are he, him, I'm a developer and consultant 00:10.480 --> 00:11.480 based in UK. 00:11.480 --> 00:15.720 I just want to say a quick thank you to my partner who is looking after our kids while 00:15.720 --> 00:20.080 I get to be here with you, so thank you Debra, I couldn't be here if you couldn't make 00:20.080 --> 00:21.080 that happen. 00:21.080 --> 00:27.880 And yes, a tag, whoever knows what that means, it's a big topic and I'm really happy 00:27.880 --> 00:32.920 that so few people know about it and yet are in the room because it's a daunting acronym, 00:32.920 --> 00:36.640 but it's certainly very valuable for us to be more aware of. 00:36.640 --> 00:41.800 And it's like a bit of a dirty world to me in the accessibility world, to be honest, we 00:41.800 --> 00:45.840 have to share examples of best practices, we have to talk about testing things to try 00:45.840 --> 00:52.560 out the audits, like we'll get to the corporate side of accessibility later. 00:52.560 --> 00:54.280 So yes, why are we here? 00:54.280 --> 01:05.360 I thought at start, with a number 95.9% that's how many of the home pages on the web have 01:05.360 --> 01:10.320 accessibility issues, according to the web I am million projects. 01:10.320 --> 01:14.840 That's how the number evolves over time, as you can see, it's definitely training down, 01:14.840 --> 01:21.680 which is pretty clear by 20, 15, 20, 20, 100s will be good. 01:21.680 --> 01:24.560 But yeah, this is a big, big problem. 01:24.560 --> 01:28.480 Those accessibility issues, they are only the ones that we can find with automated tools, 01:28.480 --> 01:32.520 they don't even include the ones that you can find with manual testing, so this is just 01:32.520 --> 01:34.160 playing an acceptable. 01:34.160 --> 01:41.360 And yes, accessibility standouts, such as A-Tag, among many other standouts, I think we'll 01:41.360 --> 01:43.360 help us to help us address this. 01:43.360 --> 01:48.920 So just in terms of standouts, you might have heard about WCAG, or WCHD, that's the most 01:48.920 --> 01:53.920 common to refer to standouts, that's lots of the legal frameworks out there are based 01:53.920 --> 02:00.760 on, it's about making websites accessible, A-Tag is the authoring two accessibility guidelines. 02:00.760 --> 02:08.680 So it's how you create better tools for people to create content that matches WCAG recommendations. 02:08.680 --> 02:10.680 I hope that makes sense. 02:10.680 --> 02:14.520 Lots of other ones, skip for today. 02:14.520 --> 02:17.640 So why do we need authoring tools, super simple? 02:17.640 --> 02:20.480 People just don't write HTML by hand these days. 02:20.480 --> 02:26.920 They use social media platforms, they use their online blog that might have a WCAG editor. 02:26.920 --> 02:30.640 Maybe they write HTML, but nonetheless they'll have a framework around it, they'll 02:30.640 --> 02:32.680 have some linking tools, perhaps. 02:32.680 --> 02:37.920 So all of those tools that help people create the content, whether it's web pages or videos, 02:37.920 --> 02:43.520 live stream even, all those tools, there is a big, big opportunity for us to make them 02:43.520 --> 02:46.440 better at creating accessible content. 02:46.440 --> 02:51.600 So again, accessible is for the benefits of the users of this content, but the authoring tools 02:51.600 --> 02:55.920 need them to be accessible as well for the benefits of people who create the content of the 02:55.920 --> 02:57.640 authors. 02:57.640 --> 03:03.240 And yeah, big concepts, I won't touch on, but I want to highlight, is accessible defaults. 03:03.240 --> 03:07.440 So the idea that all of those tools, the default experience without you making too much 03:07.440 --> 03:11.880 of an effort should be the most accessible one, then you can compromise a few ones, but 03:11.880 --> 03:16.840 I really do too should promote accessible defaults. 03:16.840 --> 03:22.680 So yeah, the standout, ATAG, our glance over the wording, it is a pretty big document. 03:22.680 --> 03:29.040 There are lots of guidelines within it, and yeah, for today, it's just like too many to 03:29.040 --> 03:30.040 fit on the screen. 03:30.040 --> 03:36.640 You know, we'll just go back to the very high level list. 03:36.640 --> 03:42.800 So back in, yeah, and all I care about really is the frame of the mental mindset of 03:42.800 --> 03:48.320 ATAG is part A and part B. Part A is the authoring tool, whether it's the CMS or social 03:48.320 --> 03:53.360 media, posting tool should be accessible, and part is it should support production of 03:53.360 --> 03:59.120 accessible contents, and we'll be looking through all sorts of examples that help in both 03:59.120 --> 04:00.120 cases. 04:00.120 --> 04:05.480 Just to make it super clear, this is a screenshots of a CMS. 04:05.480 --> 04:10.840 This is the content that's part B is about making more accessible, and part A is about 04:10.840 --> 04:18.320 all this interface to the left, making that interface accessible. 04:18.320 --> 04:23.640 So yeah, we'll look at part A and part A to be completely honest, a lot of it is just 04:23.720 --> 04:27.960 full of the week I extend out for the web app that is your authoring tool. 04:27.960 --> 04:32.720 So I only highlighted a few specific things that I think are interesting. 04:32.720 --> 04:35.600 We talked a fair bit about alt text today. 04:35.600 --> 04:40.320 There is quite a bit in a week I, about alt text and in ATAG as well, and I thought it 04:40.320 --> 04:45.080 would be interesting to highlight how important it is when we discuss decorative images. 04:45.080 --> 04:48.640 Inside an authoring tool, inside a CMS, all of the images are important, because you don't 04:48.640 --> 04:52.640 know what they're going to be used for, so in there, actually it's much better if all 04:52.640 --> 04:58.240 the images ever have quite lengthy descriptions, so people who manage the contents can 04:58.240 --> 05:00.120 pick and choose as needed. 05:00.120 --> 05:05.000 Autosave, I don't know who likes, I don't like Autosave, I'm actually a one to have 05:05.000 --> 05:10.560 a very well-being data I stand over, it's actually an ATAG requirement, some of the cities 05:10.560 --> 05:14.800 are strictly Autosave, there's no time limit to you being able to make your changes, that's 05:14.800 --> 05:17.920 okay as well, but yeah, quite interesting. 05:17.920 --> 05:24.400 Let's keep over the other ones, except for the very last, which is documentation, documenting 05:24.400 --> 05:29.000 the features in your towing tool, that sounds super obvious, but is often forgotten, 05:29.000 --> 05:34.200 and personally, I definitely feel emblems to ask my colleagues to work on documentation 05:34.200 --> 05:40.640 or do so myself, if the rules say so, basically, and in the case of something like a 05:40.640 --> 05:44.960 CMS, if we're mentioning, it's both docs for the devs who set up the websites, but also 05:44.960 --> 05:51.280 docs for people who spend their time in CMS. 05:51.280 --> 05:59.040 And so yeah, that's part A, part A, very short and sweet, and part B, we look at many more examples. 05:59.040 --> 06:05.600 So I thought I start us with B.1, fully automatic processes, produce accessible contents, 06:05.600 --> 06:10.800 what a mouthful, and all it means is, when there is some processing behind the scenes 06:10.880 --> 06:17.440 that makes the HTML that people will actually consume, that process makes accessible HTML. 06:17.440 --> 06:20.480 So I thought I'll show you an example of Google Forms. 06:20.480 --> 06:25.920 You can use Google Forms to build web forms with arbitrary fields, it's a very simple drag-and-drop 06:25.920 --> 06:31.040 interface where you configure the type of the fields and how they are set up, and there's 06:31.040 --> 06:36.800 a very simple problem with it, which is that this email fields and this, what is your name 06:36.800 --> 06:42.160 fields? Neither of these in Google Form. I can't define, oh, this is email, oh, this is the 06:42.160 --> 06:48.240 person's name, so that person gets to auto-fill those fields. So super-basic feature of the web 06:48.240 --> 06:53.200 being able to auto-complete a field on the mount, if you've already interviewed data in the browser, 06:53.200 --> 06:59.040 in Google Forms doesn't support that. I don't know there may be some privacy reasons not to do this, 06:59.040 --> 07:05.600 but definitely as far as A, that is the kind of problem we want to address, the fact that those tools 07:05.600 --> 07:09.360 don't fully support making something as accessible as possible. 07:13.120 --> 07:18.080 Second one that I really like, oh, this is a very small image, okay. Sorry about that. 07:18.960 --> 07:24.480 So we are inside a master-down, the social media platform, and over the left here we have a post 07:24.480 --> 07:29.840 editor, and that post I added an image. I don't really know if you can see, but there's a little 07:29.920 --> 07:37.040 warning sign here that says, warning alt, that means I haven't added alt text to that image yet. 07:37.600 --> 07:41.520 Obviously being able to add alt text to the image, that's just having that supported, that is 07:41.520 --> 07:47.280 essential. But the tool reminding you that it's a problem that there is no alt text, oh, music to my 07:47.280 --> 07:52.720 ears. And it's exactly what this specific week, eight, eight criteria is about, 07:52.720 --> 07:57.600 facilitating the creation of alt text. And in this case, the master-down people have reviewed 07:57.680 --> 08:01.680 like lots of social media platforms, they go above and beyond, because in addition to having 08:01.680 --> 08:08.960 that reminder, the field that they offer, they also have this detect text from picture feature 08:08.960 --> 08:14.720 right underneath. You can imagine how often people in social media put content images that have 08:14.720 --> 08:19.360 text on them, and don't necessarily take the time to write that down. Well, that says quite a 08:19.360 --> 08:25.600 bit of time, and helps people who consume that content have these alt text, which is essential. 08:27.920 --> 08:34.960 Something else I want to highlight is another example from a completely different 08:34.960 --> 08:42.240 universe, assist authors with accessible templates. Again, like, not necessarily the 08:42.240 --> 08:48.000 class, what it means. But if you spend time interpreting this, it means that whenever an 08:48.000 --> 08:54.400 authoring tool, like maybe a framework comes with built-in components, maybe a CMS comes with 08:54.400 --> 09:02.160 built-in types of block content that you combine on the page. Those ready-made templates are 09:02.720 --> 09:07.920 accessible, or at least you are assisted in knowing how accessible they are. So there's quite a few 09:07.920 --> 09:15.760 certain more detailed guidelines within that kind of umbrella of B24. But yeah, I want to share an 09:15.760 --> 09:21.360 example of something that WordPress does, where WordPress as a CMS, they supports themes for the 09:22.320 --> 09:27.680 websites, and those themes in their kind of theme shop. There's a 109 themes here that are all 09:27.680 --> 09:32.720 tagged accessibility ready. It's exactly what you want to see. So I think it's really interesting because 09:33.680 --> 09:39.520 the WordPress marketplace isn't really authoring tool needs all rights, but definitely has the 09:39.520 --> 09:46.880 place in the kind of journey towards someone creating accessible content with ready-made templates. 09:47.840 --> 09:52.880 And yeah, so they don't put this arbitrarily, they have the expertise team for WordPress, 09:52.880 --> 09:58.320 review those themes as needed, and tag accordingly to their best knowledge. And they're the only 09:58.320 --> 10:02.800 project I'm aware of that does this, maybe some others do are there, it's really cool. 10:04.720 --> 10:11.120 So another example of one of my favorite rules out there by far, I believe this specific tool 10:11.120 --> 10:15.760 was referring to the screenshot here, Sally, that has been mentioned by Mike Gifford earlier today. 10:16.320 --> 10:22.880 We're looking at assist authors in checking for accessibility problems. So it's this idea that, 10:22.880 --> 10:27.760 again, we've seen the web, I'm million number. There are a lot of tools out there that can give you 10:27.760 --> 10:33.280 automated feedback on your content. And that's exactly what ATAXA's should be embedded within 10:33.280 --> 10:40.800 each and every authoring tool. I can't stress enough how amazing it would be if any single web framework 10:40.880 --> 10:47.360 any single static site generator, any single CMS had this kind of automated checks built in, 10:47.360 --> 10:52.640 like the web would just get so much more accessible in one go. And yeah, this specific one, 10:52.640 --> 10:58.000 so Sally, we're looking at it on a on a block page here, it's kind of a little browser widgets 10:58.000 --> 11:02.800 in the bottom right, and when you turn it on, it tells you, okay, I have one error and four 11:02.800 --> 11:08.480 warnings on that page. Here we're showing the highlight of one specific error, and we're showing the 11:08.800 --> 11:17.120 text for things that might require manual verification by a human. And yeah, super simple to integrate 11:17.120 --> 11:25.600 this on any sites, by the way, so definitely worth considering. So moving on to one of the 11:25.600 --> 11:35.040 of my favorites, assist authors in repairing accessibility problems, B32, and yeah, again quite a 11:35.040 --> 11:39.840 mouthful, but it's kind of the next thing over. Once you've identified those issues with the 11:39.840 --> 11:44.880 contents, well, what can you do? You can help people in fixing them. And you can actually introduce 11:44.880 --> 11:50.560 some automation to make that simpler. So in this specific case, we're looking at alt text, 11:50.560 --> 11:57.520 where again, Mike mentioned quite a few issues, and just like Mike, I spent some time looking at 11:58.480 --> 12:04.960 sites built with this specific CMS, I'm not sure if you think too, assessing how the alt text 12:04.960 --> 12:12.160 on those sites, how good it is. And so, the bar on the left, on each side here, that's the real 12:12.160 --> 12:19.200 world alt text from about 500 pages. And that's the score that's the expedited team for a 12:19.200 --> 12:26.640 white tail that CMS gave to this alt text. So on average, basically alt team rated the existing 12:26.640 --> 12:31.440 alt text out there in the world quite low. And what's really interesting when it comes to repairing 12:31.440 --> 12:36.320 this is we can detect quite often whether the alt text is good or not, whether it contains a file name. 12:37.120 --> 12:43.120 And again, AI, quite a big buzz world, lots of things that I wouldn't necessarily agree with here, 12:43.120 --> 12:51.360 but for alt text, it is in my mind undeniable that it is better than the existing content out there. 12:52.080 --> 12:57.200 I definitely think that humans have a big part to play here. They could still write much better 12:57.200 --> 13:04.560 alt text if they give an infinite training and time. But what we can do instead of rely on 13:04.560 --> 13:09.840 AI actually write all of the alt text is give the alt text at the AI rights that scores quite high, 13:09.840 --> 13:14.880 give that to humans and then that humans decide, okay, is it good? Can I be improving it? And it just 13:14.880 --> 13:23.840 makes it for a faster process that has better results. So just to make it clear, like how 13:23.840 --> 13:29.520 I would work in practice, now we're looking inside this CMS, what else do we want to file latest 13:29.520 --> 13:35.120 designs that we've not implemented yet? We're looking inside an image upload feature where I've 13:35.120 --> 13:40.640 just dropped a new image onto my web page. And it's going to pre-fill the title from the 13:40.640 --> 13:47.040 file name, because sure that my big education of what it's about. And this description field here 13:47.040 --> 13:54.880 is what people will be able to set for the alt text collaboratively with AI. So in this case, 13:54.880 --> 14:01.360 we've decided to never pre-fill that fields. We've decided to give the user three different 14:01.360 --> 14:07.040 options to choose from, but are distributed by the AI. And they can decide to use any one of them 14:07.040 --> 14:14.160 and then edit the fields, ordinary, new suggestions. Again, like this is all quite easily aligned 14:14.160 --> 14:19.120 with ATAC, so I find it's really interesting that standouts written so many years ago had in mind 14:19.120 --> 14:29.120 this kind of interaction. Okay, we have about 10 minutes left. I'll try to end early, so we have 14:29.200 --> 14:34.880 time to change over the devarums. But I definitely wanted you to give you some resources to 14:34.880 --> 14:39.520 get started and we'll have time for questions right after this in the room. So getting started 14:39.520 --> 14:46.480 with ATAC, again, this quite a daunting acronym. So definitely I'm hoping the examples I've shown 14:46.480 --> 14:51.840 so far, they're kind of my highlights of the best bits of ATAC, which is considered reusing. 14:52.640 --> 14:58.560 But if you did want to do a proper audit, this is where I would start. So step one, 14:59.120 --> 15:04.480 definitely if you have a clear list of features in the tool you're testing, that's super 15:04.480 --> 15:09.520 important because then you know what to test. Step two, having a good demo of those features. 15:09.520 --> 15:15.360 So what I've often found is some of the more niche aspects of our CMS, find it quite hard to figure 15:15.360 --> 15:20.480 out where to access them and it says quite a bit of time, you know, to be able to do this kind of 15:20.480 --> 15:26.160 testing if I don't have a good demo really available. So I'm part of the accessibility team for 15:26.240 --> 15:31.520 Django as an example, creating a better demo site for Django for the Django. I mean that's something 15:31.520 --> 15:39.120 that's in my mind essential and worth the investment. Some knowledge of ATAC, I definitely don't 15:39.120 --> 15:42.640 want to make it sound like you have to read through the whole thing. I think just the highlights 15:42.640 --> 15:48.000 I mentioned is a great place to start. And then having an idea of how to report or keep tabs on your 15:48.000 --> 15:54.640 findings. So I spent quite a bit of time ahead of this talk, setting up a GitHub project template. 15:54.720 --> 15:58.400 I don't know here who might have heard of GitHub projects is something they've built on top of 15:58.400 --> 16:04.560 GitHub issues and GitHub projects supports custom fields that are very convenient for this type of 16:04.560 --> 16:11.200 very specialized work. So I've spent about an hour of my day setting up those two fields to keep 16:11.200 --> 16:16.880 tabs off all of the weekag guidelines and all of the ATAC guidelines. So you can add things straight 16:16.880 --> 16:22.160 to your backlog and tag them per which aspect of ATAC is about. Again, I can know it's quite a 16:22.160 --> 16:27.360 specialist tool, but definitely just click this and you get to try it out and see if it works for 16:27.360 --> 16:32.000 you or not. And for people who don't really like GitHub, I also put together Markdown templates. 16:32.640 --> 16:37.840 It's a very big markdown file. So it works well, but yeah, a bit harder to adopt. 16:42.160 --> 16:48.400 Okay, another quick and easy way to get started. So we're looking at the screenshots of the 16:48.400 --> 16:54.160 ATAC report tool that was put together by the W3C web accessibility initiative. 16:54.960 --> 17:01.040 It's essentially some kind of a form wizard that talks you through all of the ATAC guidelines 17:01.040 --> 17:07.040 one by one and helps you fill in the results of your testing. So this would be really useful if 17:07.040 --> 17:13.680 you wanted to do the full audit. But even without that, I think it's interesting to look at and see 17:13.680 --> 17:19.920 if there might be specific areas within which I would offer you completing. I wish they did more 17:19.920 --> 17:24.960 out of this. They put this together five years ago or so and it works really well, but I just 17:24.960 --> 17:34.960 wish it was better showcased. And yes, when I say I wish they invested more time into this, 17:35.840 --> 17:40.080 if you've gone through the reporting tool, the next thing you want to do after it's 17:40.080 --> 17:44.640 share your report and I definitely want to see more reports of ATAC audits out there. 17:44.640 --> 17:50.080 And they set up this authoring tool list to do that, where people who took the time to report 17:50.080 --> 17:57.200 on the SVC of their CMS or research digital web framework, they are showcased on W3C websites. 17:57.760 --> 18:02.000 And right now we only have five such authoring tools showcased because it does take quite a bit 18:02.000 --> 18:07.360 of work to put those audits together. But if you did invest into this, for sure come talk to me 18:07.360 --> 18:12.720 and help you out and consider, but you can submit your report to this site as well. 18:15.280 --> 18:21.920 So yeah, just to end, going beyond those standards, if you ever feel like even ATAC isn't enough 18:21.920 --> 18:27.440 for you, I would recommend you look at these two that are attempts against standardizing this kind of 18:29.040 --> 18:33.760 increasing of the baseline of accessibility. But the same with the guidelines, the touch on 18:33.840 --> 18:38.880 points, a lot of aspects of what this dev room is about, and I submitted a trading model, 18:38.880 --> 18:44.240 that's kind of a national level where other gaps what we should do. I'll leave these there for you 18:44.240 --> 18:51.840 to consider. And yeah, that's me and I believe we have about four minutes for questions, thank you. 18:57.360 --> 18:58.080 Goodfights. 19:03.840 --> 19:10.400 Three, two, that's a lot to make the end, three, zero, one, five, five, nine reports. 19:10.400 --> 19:16.160 Can't tell me where it is, but no. Well, there, yes, there's one. 19:16.160 --> 19:22.480 There is a big invention benchmark for my work. So for Ian, I forget the European standard for 19:22.480 --> 19:28.720 accessibility, that's based on weak act but does beyond. There is something called open ACR that is 19:28.720 --> 19:36.080 set up by the US government, GSA, and that's meant to help you create reports for section 508s 19:36.080 --> 19:41.040 or for the European standard, and they come with the Open ACR editor. Hope that helps. 19:45.920 --> 19:51.840 That's something I have mentioned at the beginning, but a problem, I have a problem of this 19:52.480 --> 20:01.600 for the short, kind of little characters. And when it's a many website, when I put control 20:01.600 --> 20:09.520 through the entire box, the text is going out, the screen, I think a single idea must be 20:09.520 --> 20:15.680 some console, it's not normal to have this kind of thing, it was price, you know, I try your 20:15.680 --> 20:25.520 thing, and so on. Yeah, that's covered in the weak act standard, and as also covered in 20:25.520 --> 20:29.360 ACR, as far as this issue happening in the authoring tools themselves. 20:34.800 --> 20:43.200 Any more questions? Great, thank you. Handover to Sarah, to say a quick goodbye, and then we'll 20:43.200 --> 20:47.040 handover to the open source design platform.