 All right, can everybody hear me okay? Yeah, good Welcome, this is using the editorially module to improve accessibility and Drupal, and I have to apologize in advance I the title of the module is misspelled on the in the In the brochure, so you're gonna want to add the extra I Come here, thank you There's an I there that was did not make it into The title of the talk I gave this talk also in Asheville Camp and I had it incorrectly done there. No one corrected me So I blame the entire state of South Carolina for that issue So welcome to this talk. My name is Mark Cassius. I'm a Drupal tech lead for canopy studios I've been doing Drupal for a while if you want to reach out to me marky at Canopy comm I'm also marky on all the Drupal spaces Drupal slack and all that stuff We are hiring we are constantly looking for tech leads now the irony of this is I'm giving the stock in Europe And we do only hire in the North America Areas so if you're gonna if you're willing to travel it's a great place So anyway, we're looking for that kind of stuff canopy is a great site We do all sorts of great builds And work with a lot of really good clients and whatnot. So please feel free to apply and check us out I also do a thing called alley talks. What it is is a monthly accessibility talk We do it online on it's actually a YouTube live stream This month's talk coming up on the 25th is aria winning son, which I love that title And if you want to check it out, it's alley talks. That's a one-one-wide TLKS calm and We will do it and if you want to speak we're always looking for speakers So please reach out if you have a topic that you'd like to talk about Do want to talk about some stuff. I am part of the contrary Drupal contributions So we have some contribution opportunities coming up Throughout the rest of the week Friday is the big contribution day But if you want to attend one of the first-time contributor workshops We have a couple that are still coming up for you to take a look at This is my dog Drew. I just have to do pictures of her. It's just how it works All right, what we're gonna be talking about in this 20 minutes is the editorially module Which is spelled correctly in this one Huh, well, there you go. Okay, mostly. Thank you for the QA You're five minutes late, but that's fine I'm also going to talk about another module called the accessibility checklist module that just real quick It's it's really easy to install and then we'll be done and we'll move on to DXP. So Real quick another quick thing is an accessibility overview. I Leave the slide this slide blank because there are a lot of really great talks about accessibility You're obviously in this room. You know about it You know about the great features or their great reasons for it six benefits of web accessibility You know, you're avoiding the legal issues that are out there. You're reaching reaching more of the audience because there are so many possible People who need accessibility assistance. You're building your positive PR which marketing people really love and improving SEO But you're increasing more so to me This is what I think is the usability of your website making it easy for everybody To to get to your content and get to your data and whatever and then you know writing higher quality code. It's hard to Flub the flub is not a good word. Anyway, it's it's hard to mess with you right crappy code That's even worse word. Anyway, there's a link here at the bottom where I got this information They've got to go into a little bit more detail But you know, obviously we're all here to discuss accessibility. We all know that's good use Go see Amy Junes. Oh her sessions already over. Well, there's gonna be another accessibility shot That you can see. All right, so let's talk about the editorial e module, which I think is misspelled there, too I don't know and anyway, it's what it is is a check. It's a module that just sits on your Site and for your editors, it'll show different things that are Possible issues for your site. It's already embedded in there It checks automatically so the authors don't have to be taught How to enable it how to run the lighthouse how to do anything like that? It checks the rendered content what's actually being shown on your Page as well, and it'll give you a little notices as to what kind of issues are and I'll show you a quick demo Here in a couple seconds and Exclusively focuses on the content of a page because you can have your structure All set up excessively all day long and if somebody comes in and edits a page and does something That throws that content off You don't have as a developer or as a project manager You don't have the ability to control that kind of stuff It uses a project called the Sally project And what that does is a JavaScript that goes back and checks Goes back and checks the an accessibility checklist one like we're sure gonna show you later And that's all done through JavaScript. It's done automatically. It's not weighted heavy And the other good thing about it is it's only allowed you can set your permissions on it So not everybody can see it only your editors will we'll see what's going on and whatnot Here's a quick view of what it'll show it'll give you like Little examples that give you question marks as if there's an issue It'll actually show if something's an actual problem And then down here on the bottom In the corner it a little pop-up that gives you all the different issues that are detected and available to you And how to address them possibly It's testing for text alternatives image alternative images aria leads for your links stuff like that Images with long file names which get without alt text actually get picked up as the alt text and that's a Kind of a debacle right there image of photo of the bad kind of Images or bad kind of alt text that people show off in there It also does meaningful links links without text click here read more things like that Things that you don't want to do but people tend to in their writing because they don't know any better especially without the links with the titles and stuff like that Links that open new windows without warning definitely or is one document outline and structure the H1 or the The titles that that are in a row so that you don't have an H1 or multiple H1s You know the all your H elements are there for structure not for prettiness and People tend to forget about that Tables without headers all the things that you know again these are accessibility things that we can learn about all day long But and set up for all day long, but if an editor goes in there and doesn't think about him You'll never know until somebody calls it and complain and then it does a bunch of quality assurance checks caps locks Links to PDFs without references social media embeds and all that other stuff all this is all done automatically again and Here I'll do kind of a I've got a site here With Drupal 10 and I've already got it set up and Editorially install, you know, you do your regular composer Drush or excuse me composer Drupal editorially and then in the front page. Oh, you know actually sorry I went to do the wrong way. I want to uninstall that Security Drupal cool Because I wanted to show what it looks like before or so I'll install real quick Go to the front page and here's my page front page real quick It's got just some links some stuff that I installed on on devil. It's smart trim I use I'm a maintainer of the smart trim module So I use that just to knock it down and also because I know the smart trim module right now has a Accessibility issue that it picks up So I can one day fix that so going back to installing it edit Orally Once that's installed we can go back and take a look and down here. You'll see there's a Little issue up here you click on that and it shows the different issues that are on there We've got tags that are out of order actually Did I fix that then Because the more link actually was an issue at one point and now that's gone So all right, but this actually pops it up for you. Yeah, I fixed something anyway So it actually will give you the ability to change that now the problem with this is this tags issue is actually Part of Drupal core that would needs to be addressed in your initial config So this is not something that the actual editor would be able to fix But I wanted to give you a reference as to what it looks like for y'all When it when it's point it going in there It gives you the ability to see what your outline is and actually check make sure that your links are all good You know you have your h2 There's no h1 on this page because there's no title on this is just your basic out-of-the-box Drupal install, but it shows that you're all your h2's are in there It'll show you all your alternative text for your images, which you know since this is all devil generated stuff It's this great Pig Latin stuff That's there, but it gives you an idea that it's there and if for some reason your images do not have The all text it will show it and and and highlight it as well And then if you have any questions it actually does the excessive Assistive technologies and whatnot some description of what's going on And then you can close this back up. It's out of the way, but it sits there and persists For you for your users of the website of your content People configuration actually there's not much to it You know it shows you can actually go through and redo the sleep the theme There's some actual customized tests that you can update So that you're actually checking for the right information if the hrefs a PDF it does a different thing How the results appear you can actually change when the nodes are created or change if it's Where this it shows in the corner and whatnot and then you can actually customize your dashboard as well With all this information In there But that's really all there is to this Module which makes your life a lot easier And that is the editorially I'll go back into the slideshow The next thing I want to talk about was alley project checklist This is a module that's actually been created by Jim birch Who happens to be my boss and I am not Covering this module to do favor with him at all But what it does is it uses Something called the checklist manifesto Basically having your site set up you run through a checklist and that way you know that everything is Good to go before you release it into the wild And I could actually show you an install on that So normally in the reports, there's uh, oh actually it's already in there never mind. Oh, no, there's not Jen there could I go in there and extend and you can go Accessibility checklist alley project checklist Is what it's called not accessibility project checklist. Yeah, cool. Um Once that's installed you can actually go in here and in your checklist area You have an alley project checklist. There are other ones that are in there Uh for a variety of checklists that are out there, but this is the only one I care about Um, so it shows about your content whether or not you're using plain language Kind of talks about how your speech is going Make sure your buttons and labels are good goes through all these different checklists and You can check them off yourself To say that you've done this and verified them Cool. Um, and then there are some automated checks that also happens Well, the video ones are a good one for you to confirm that there's captions in your presentations Unlike what I did because I did uh, she's supposed to start captions on my uh Slides, but I didn't sorry Amy June. Uh, I'll apologize to her later But also, uh, so you have your captions you have some uh, the the seizure triggers the ability to turn off everything And this module what it does is it makes your life a lot easier because it goes through all these different accessibility things that are out there uh through the alley project and Just basically says here's uh, here's what you need to do and also here is the rule or not rule but the standard That you're going to want to use and to verify that you're actually going through this information and whatnot so That's all There is to that So this also has a little bit of information about the uh, alley project itself success criteria and whatnot Now when I did this oops not share Learn how to click the right button Slideshow when I did this uh talk in ashill. It was an hour session So as you can tell this is a 20 minute session. I'm already blown through the entire thing Uh, so I'm glad can you imagine how much I had to fill in there? Are there any questions uh out there that you would like to Step up to the microphone for Oh, we got we got a microphone If you want to get on camera too you can like come here And does it also pick up uh errors outside of the content area? Like if you have a block maybe on the page would it pick up issues there? It will pick up anything visible on the page. So yes Uh, whether or not that like that tag thing, uh that I was showing you I'm gonna go back here On the front page Yes, leave site This tag issue here It's not the content of the page itself. That's the problem It's actually the structure of the way that this site is built But it shows you that and then you have the the the ability for the editors to raise a flag and say Yes, please come fix this developer at this point. So Any other questions? You mentioned a dashboard. Um, is there a dashboard that Has a summary of all the issues across the website? um Not that's actually more of the alley checklist the uh editorially content Is it doesn't necessarily have a full dashboard the dashboard that i'm discussing Or mentioning is actually this is the small thing in the corner Of which which shows the content of that current page and that makes it more relevant to that particular editor or You know, whoever's looking looking that over if you have one that's kind of just overall Oh, no, sorry. Actually, let me take that back. There is actually one um Where is it? Yeah, this content accessibility one actually will go through and if you have like you can go through and dismiss alert This will show the ones that are dismissed or uh, thank you for bringing that up the different types of issues that are there So here's links with no accessible text. That's the one that we have on that front page that are nine of them Thank you, I appreciate that I knew that was a um And then the different pages that have issue. This is just the front page. So if we go into the main, uh sub page itself there actually Are two issues detected on this one Which is still once again with the links and then a question about the manual check and then you go back into the uh The page with the issue it actually shows what those issues are You can check out the issues found and everything like that. So yes, thank you very much for that so And any any other questions? No, the checklist project is actually a link to the alley checklist itself Which is an external site and it's just basically a reference of the different Standards that you should be looking for as you're going through there. And again, this is one thing What we do at canopy when we're standing up a site We actually have a launch checklist that we make sure that you know Whether or not uh cashings turned on whether or not productions have turned on and you just go through it Then you click click this you check it off. It actually you save it And it'll say that it's actually been checked and when it's actually been completed Let me You know by whoever completed it that way we can have a detail of what's going on We do that for launches accessibility everything like that Just kind of like I said that and if you haven't read the checklist manifesto, I do recommend it It's a pretty decent read I listen to it to be honest with you, but it's still a good listen but yeah And for because because he didn't have the mic. I just realized the question was Is it is the x alley project checklist linked to the editorially module and that is no Any other questions? I actually filled my 20 minutes. I'm very happy about it. So thank you very much We're going to switch up here and then we'll go into a droop on dpx dxp Thank you very much