 I want to pass on to Claire, the tool to person for accessibility. I'll be talking about your site in Gelden. Let me introduce you to Claire. Hi, I'm here talk about what place paid builders and how accessible are they or rather how accessible is the content they produce. Just a quick summary of what we're going to talk about today, I'm going to talk a little bit about accessibility needs and requirements, and then we're going to look into two popular page builders, Booger Builder and Elementor. Then we're going to look into what the page builders actually do. They have templates, modules and with it. So I tested some of these to see what accessibility issues they might have. And then finally, summing up, what could they do better? What do you need to think about if you're using them? So, very quick summary here. This is the four principles of accessibility, as given in the web content accessibility guidelines. It's four elements, perceivable, operable, understandable and robust, which spell the acronym for. So going through each of these procedural means that you should be able to get hold of that content in any way through the senses. So that's predominantly sight or hearing, but in some cases it might be touch. So if you've noticed the picture on previous slide, that's a refreshable file display, which is converting the text on the screen or whatever, to something that the user can fail on a sense of that. Then operable, whatever means you use to access a website, whether that's a mouse or a keyboard or a switch control or whatever it is or swiping on your smartphone, you should be able to operate the controls. Understandable means it's predictable, it's consistent and it's appropriate for the audience. Finally, robust is slanderous compliance and it works across various devices. Desktop, laptop, tablet and phone. But we're mainly going to focus here on the first two categories, perceivable and operable. So these are the kind of issues that I wanted to look for within the Pedge Value ecosystem. So starting with the first one, it's images and icons. Are they labeled appropriately for people with sight loss who would otherwise not get the meaning from them? And in fact, if they don't have any meaning at all, are they ignored? Because you don't want decorative content to lead out to people. That's just a waste of your time. Then looking at color contrast, those items and the difference between the foreground and the background, is it not to clearly make out text or are there any issues or problems there? And keyboard operation is pretty important for both people who are reliant on using keyboard. You can't use them out for people who use screen reader applications where they are heavily dependent on keyboards to do things. So can they get to everything with the keyboard? Focus is important as well. Can they actually see where they are on the page when they're navigating through it? So that will be through links, buttons and form files. And if there's moving content on the page, have they got some way to pause it, stop it or hide it if they can only use the keyboard? So these were the tools that I was using to test my content. Starting with the NDDA screen reader, which is the free and open source screen reader for Windows. Anyone can download it. And that pairs well with Firefox browser. Start screen reader to work better with certain browsers. I mean, if you're a Mac user, I'll test a bit on Mac as well. I'm using the voiceover screen reader, which is built into iOS. It's not just on Mac, it's on iPad and iPhone as well. And that works best with Safari. And then the keyboard, obviously, to get through the pages. The most important key in that, as you can see in the graphic, is the tab key, which is what you'd normally use to go forward through the page to whatever is interactive. You shift and tab to get backwards to use enter key to activate links and buttons. And also you can use the spacebar for buttons as well. So moving on to our page builders. Does anyone here use the paper builder? No one? So anyway, it is a very popular page builder. It's got over 400,000 installed, active installs. But the free version is very limited. It's only got six modules as part of it. So you have to get the premium version to be able to do anything much with it. But with that, you also get a bunch of templates for landing pages and pre-built content pages at the same time. So here's an example of a beaver builder template. This one's called About Me Too. And you can see it's made up of different elements on the code. So you've got herring at the top. You've got some text, you've got photograph. And then you can see four different number pointers. So it's split into rows. And then in that one, with the number counters, it's four different columns. And finally at the bottom, you've got a testimonial slider. And then moving on to the second page builder is going to look at which is Elementor. And this one is really widely popular. They've just passed the 4 million active installs landmark. And the free version of this is actually surprisingly functional. You've got 30 widgets, as they call them, in Elementor. The cool version has got another 52. And then you get a whole bunch of templates for Yantro for this one as well. And here's an example of an Elementor template. And that's not even... I couldn't even fit the whole thing in the screen, actually. So that's just part of it. And you can see it's built quite a number of different widgets all within that. You've got images, you've got a contact form in the bottom, you've got social icons, buttons and so on. So this, moving on to my testing, one of the first things I tested was either builder's social icon module, which comes from the icon group. And that can be found on a template called one page. So I'm going to point out what was the grade on it. Not so good here. Something like this, where it's just basically the icons, social media icons, there's no text associated with it. So you do need some way to tell a screen reader user what the icons actually represent. So they used the ARIA label for that. They also put an ARIA hidden on the icons. And that's also good because some screen readers would, or other groups of tech, would try and read out the actual icon font, and you don't want that. The not so good part is, if you can see on the graphic, everything that they have called, you know, all these three different social icons, they also link to you at the beginning. And that's not necessary because screen readers will announce something as a link when they get to it. And the other really clunky thing is, they put in the entire URL, and if you can imagine that being read out, that is just not a good user experience at all. Now, this is Elementor's version of the social icons. This is one on, it's one from template landing page stylus. Now, this is a bit better in some ways because you can see, if you can look at the speech viewer representation here, this is what is actually read out in a screen reader, it says, visited link Facebook, visited link Twitter and so on. So it's not reading out URLs, which is a good thing. They've also done it in a slightly different way rather than aria label, they use what's called screen reader text. They put a special class on it, Elementor's screen only. And then it just reads out Facebook, Twitter, et cetera, et cetera. The bad thing about this particular template is they didn't actually put any link destinations in, they put the links opening the new tabs. So when I tried it out, it was basically re-opening the same page over again, but in a new tab, which is not good at all. You can, of course, change these things in the settings. The downside with the Beaver Builder one was I don't think there was any way to actually change it from using out these URLs, but with the Elementor's settings you can turn off the options in the new tabs and you can put new link destinations as well as you would expect. This is a specific module in Beaver Builder. We're meeting at the phones now, and this is the version of the display form, so this is for signing up to MailChimp on other email marketing service. So I don't know if you can spot anything just as you look at your source to see what might be wrong with this particular form. Well, there are a few problems here. First of all, we don't have visible labels on the form. We've just got the placeholder text, and the problem with the placeholder text is that when you put the cursor in to race in that form field, then it disappears, and then you might think, oh, well, I was doing it popular from there. You'd have to have a really bad memory not to remember what they are, but still it's not good practice. The other thing is that the name and email address placeholders are so faint, so vague. I mean, I can barely make myself it's very, like, grey and white. The other thing is at the bottom here where I clicked sign up button, it will say, it will give you the messages enter your name and address, but it didn't tell me straight off which were the required fields, which just seemed like a silly thing not to do for a form. Another problem was that I actually used the keyboard just to get onto the button. No kind of indicator that was really outlying round it or anything to actually indicate that I'm on that sign up button to click it, so I could have missed that completely. The error messages are not read out to you if you're a screen reader, which is another issue, and in fact, if you tab between the two fields into your name and into your email, these error messages disappeared, so if you're a site of keyboard, these are again, that's not good. Finally, for some reason, instead of using a native button for the sign up button, they decide to make it into a link and stick a bit of barrier on it to say, actually, it's a rule of the button, but this is not. Aria is used to enhance HTML. It's not really meant to be a substitute when the first rule of the barrier is don't use aria if there is perfectly valid HTML in the element. So this form has major problems and, unfortunately, a lot of them are not able to be renovated by changing settings in that module. Elementors version, you can see it's simple. We've just got the one field and we've got the button, but it's still got some issues. We do actually have a form label on this one, but it's hidden. It's available if you're a screen reader user, so that's nice for them, but if you're a sci-fi keyboard user, then you've got to make do with the placeholder text. Another issue we've got here is the email field has not been marked as required, so it's actually possible to submit this form without giving anything at all, which just seems a bit daft to me. Moving on then to the VergoList contact form, and it's the subscribe template that this one's on. This is a bit better. Better. It's got the visible label, so you can see it says name, email, your message. Yes, it's still got the placeholders as well, but at least it's got visible labels. But again, they didn't bother to tell us which ones were required fields. Also, the error messages are not really adequate. They're not really indicated very well for screen readers. And yet again, they have used something that's not a button element for the send button. So this is Elementor's contact form from one of their templates, the digital agency contact one, and maybe you can spot few issues with this. This one has got labels and correctly and programmatically they're associated with controls, but when I see they've got labels, you can't actually see the labels, and that is because they're heading them and they're putting them in screen reader text. And again, we've got the placeholder text substituting for the labels why can't we just have the labels because labels don't necessarily what you take from fields. We've definitely got problem with the colour contrast on the button at the bottom. It looks a bit strange on this screen but in their example, this is a cyan blue red text on it. When I tried it out on my own version of them in Elementor's site it was blue, lively, white, but either way it's not good enough colour contrast. Again, error messages, not really informative enough. It says please fill in this field but I want to know which field that refers to. And you'll also see the red border around the email field there when you've left that one blank. And if you were colour blind, would that be enough to indicate that there was a problem with that form? Who ideally, the developers, would have put something else into indicate the error like little explanation point or something. So some of these problems with the settings, they can be a remediative. You can get the label for sure. You can use, you can add from the choirs to the labels or you can add little afters to them as well. So you can make a better form but it's still not perfect. The error message is really hard to get that right because ideally what you want to do is if someone is looking to form using a screen reader, you want to give them a little sort of summary of all the errors and then link to where they are on the form. I'm not going to show like an actual moving down of the slideshow. This was like the first slide in a slideshow but basically this is just moving images across nothing more than that. The big problem with this is it's automatically set to auto-flight and there's no way to pause it. And these navigation errors that you can see on it, they're not keyboard accessible. As far as the screen reader is concerned it just completely ignores everything in it and nobody is going to get any content from that. Maybe you can put the images in and there's background images which you can't add all text to anyway. You could add some controls to it. There is an option where you can add some controls to it but it's still not great. It's still got some issues. Elemental's version of an image carousel but this one is different from the logos. It's just one word across at a time and I think there's seven and there's five on display at any one time. And again they've chosen to have it automatically auto-play and you cannot pause it. Another issue, the best particular implementation is the alternative text for all of these logos is taken from imaging so you've got something like 4.png or something which is absolutely hopeless and is not going to give any information to the screen reader usually whatsoever. Right, so now we do the Beaver Bowler testimonials module. Again this is a carousel and these are the two different testimonials and basically they're cycling round after a few seconds it swipes across and the next one comes into view and so on and so on. Well this one's got real real big problems. Again we've got the auto-play and the text is moving, I can't remember how many seconds it is, but you move so fast that you just cannot read all the information one and even though both of these and example ones are exactly the same more mixed in text you know if you had real text and it was moving like that I wouldn't be able to make any sense of it. There's no way of pausing it with the keyboard and then when you actually want to use these arrows as controls when you get use the tab key to get onto them you cannot see which arrow you're on which again how is anyone supposed to control that that way? Another thing that bugs me is that the order of the arrows is the focus is wrong from my point of view because I can see the previous arrow is first in the visual order but they've chosen to put the focus on the next arrow first and then the previous which I don't think makes sense There you've got another bizarre decision let's put aria pressed on a link cause you know aria is good and it makes things more accessible except that it doesn't and it doesn't make any sense to have it on a link because it was a toggle button but it's not and I think the worst interval is that the individual screen read the content each testimonial like twice and then I was browsing going down the page and as soon as the testimonials scrolled across to the next one then it started reading it all again you just wouldn't be able to get anything else done on the page with that this is the elemental one and I did have I did have an animated gif but I chose to take it out because it just thought it was too annoying so I've got a quick video here so again you can see it's just automatically swiping across so again problems with this it also plays and so there's no way of causing it with the keyboard and in fact there's no controls on it at all and yes you can you can actually you can stop the auto play on both of either build one and the elemental one and you can add controls to this one you can add some of these little dots at the bottom and you can add forward and back eyes but they've still got issues the dots are absolutely tiny quite difficult to make out the focus on them isn't very clear the focus on the colour contrast and the arrows is pretty poor because they're like grey and again you can't see the focus around them so this is just in general caracels to be used in and I would argue no and there's serious reasons it's not just the accessibility issues but if you are to say turn off the auto play completely and you expect the music to go forward and back then nine years of it ten just won't bother they'll just look at what's on that first slide and then you know just ignore the rest of it there's also like a kind of banner blindness where people are so used to seeing these things that they kind of filter them out and they ignore them so the most set of things that was going to consider from the overbindment border and elemental templates is accordions and toggles bit of a debate about what constitutes an accordion or a toggle in general an accordion is thought that you have one item open at a time you press the button you see some content and then with a toggle you could actually open all of them at the same time accordion just the one like the music instrument well again we've got some problems with the the border version of the accordion and unfortunately we can't fix them all ourselves one problem we've got here is that when you actually do use a keyboard to open one of these you find there's actually three different elements that will but you have to tab through to do it and that's a bad user experience you've got hidden div with a tab in some zero you have got that title there that opens it up and then you've got the little plus or minus symbol as well so it's like why have three different things to do the same job it's just not necessary and it just gives you using more work and then again we've got some area that's being kind of thrown at the thing to try and allegedly make it more accessible but it doesn't really do it they've decided to give the whole the whole structure an area will tab less I think it is and that's not really ideal because using not tabs this is a different kind of design so elementers one is this any better well there's a couple of things you can really see with this one when you've opened it you can see that the title is changed colour and you can actually see that focus around it, that board around it but again they've also used an area rule a tab list it's not a tab list it's an accordion or toggle and if you have to use for the user you do not have any way of knowing that when you are focused on something that there is some hidden content there because it doesn't tell you that it's expanded or collapsed so what do we make of this something like that basically if you're going to use these page builders and you want an accessible website you need to check the default settings of these different things and I've used examples from I've used examples from templates if you just create a brand new page and you stick a new module or widget on then sometimes a little bit better the default but you are going to have to check with the social media icons I would definitely watch links with the new window if you want to avoid that of course you won't and we need to get be able builder to improve these icon labels because looking at URLs is not good for when it comes to forums I would argue that you'd be better using form plugin but having said that it's difficult to build accessible forms anyway I don't think any of the form plugins are actually accessible out of the box gravity forms is working in it but they're not quite there with sliders and carousels yes, they look actually nice and client-loving but do you really need them they're just hard they're just hard to make accessible and with the accordions and toggles I would say there are actually some better clear examples online and what you should be doing if you want to use these things and you want to use these type builders and say to developers could you take one of the existing accessible accordion patterns and you implement that rather than trying to remediate something that you've done that's made before so I'm not expecting to wait with your phone this is just links if you want to if you want to have a look at your templates yourself you can go to the builder's site and the elemental site and browse through them and try to yourself I've also let in a couple of posts going into a bit more depth a bit more about the code side I'm just trying not to put all that in my presentation this time a whole bunch of videos just testing various things if you want to watch them at the leisure area and you can see a bit more about the code side but I don't want to make a video on the presentation because everyone can't see the audio in it so you know I just have that very short clip so thank you very much for listening Are we going to the Elementor or the other one? I think there's some horrible kind of questions in a way I want to say neither but of the two I would have said Elementor was better but I'm still not really certain of the picture of the question Does anyone have any questions at all about what is the port of accessibility in general as well I think that by your answer you are completely rolling out that Gutenberg was together I think Gutenberg is a bit of a different case when it came out the accessibility of it and I did look at it and write about it at the time it really wasn't very good when it was launched but the WordPress accessibility team I'm working pretty hard on the new views and the things and the development stage of it is that part that my speech is always going to read things coming out but you know they have worked pretty hard it was a really thorough audit for both Gutenberg and they have been basically working for the tickets and things by and by and triage into the fiction I mean I don't have much experience of page builder but everything I wanted to do on the website I couldn't know if it was enough so I never bothered to learn about the page builder I think just Gutenberg the page builder was sort of more mature maybe for the building but I think it's just that hidden thing of how we just want something quickly quite nice but not interesting or realising that the underlying problems in it Thank you very much I remember a few months ago I had a talk about Elementor but one of the things that I didn't look at was how it was accessible to others so it was quite interesting to hear your talk on accessibility side of it and also I also had a lot of problems with the contact forms for getting them to appear visible they obviously had trouble blending into the background I couldn't get the background colour up so it just appeared as lines I couldn't get the weak boxes so it was good to hear that it wasn't just me that had that problem Have you got a good alternative to using a parallel? Well probably the simplest one is just to have a hero image just like a large image where you might have a line on it but even if you do that if you'll really text on it then you've got to start thinking about what it's going to look like if the screen was a microfider or something like that and that needs to text and it's going to pop off and they've got to fix a bit and become unreadable that sort of thing it's just having a lot to call and a lot of testing people so it's just with WordPress page builders or is that a general thing? Well I don't think the three builders because I'm not dedicated for them I don't think they've got a good point but I know even that regardless of the ones at the moment there's another plugin that you can add on to it to make it more accessible like you start with the end point why don't they just make it accessible in the first place but I know that there is work on going on that so I'm just hoping to hear in a few months maybe we'll make it more accessible and get to the three builders accepting the front plugin but it all looks like that so not everyone is going to support it or want to use it Thanks very much and don't forget to give it a hand for the day when I talk to her and she'll be able to pat me out and if you can talk to her if you want to talk to her