 All right. Can everyone hear me? I didn't have a chance to test the audio yet. Hopefully, it's all good. Great. Sorry for the technical difficulties. This is a really full topic as well, so I'm hoping we'll have time at the end for questions. But if not, you can meet me at the hall and I'll try to answer them out there or over at the happiness bar or somewhere. So welcome everyone. Interestingly, today in Canada is the last day of National Accessibility Week. So thank you all for coming to help make Canada a more inclusive space. How many of you are new to the idea of website accessibility? Okay. So not too many, that's good. Just so we're all on the same page, accessibility is the practice of making websites usable by as many people as possible. We traditionally think of this as being about people with disabilities, but it really also covers other groups such as those using mobile devices or anybody using a slow internet network and that sort of thing. So my name is Heather Gray. I'm a freelance WordPress website developer and designer from Guelph, Ontario, which is about an hour north of here. You can find my website at trilightly.ca or follow me on Twitter at trilightly. Okay. So why should we care about this topic? Accessibility is a really complex topic, and addressing it can involve some personal judgment and some case-by-case strategizing and on-the-fly workarounds based on user feedback. With browsers and devices and assistive technologies and everything else all trying to work together and be the newest and latest and greatest thing, it can all get very, very complicated. I think that that gives accessibility as a topic a bad rap for being tricky and expensive, and all just to satisfy a few outlying visitors. So again, why should we care? How many people are not making their websites responsive to different screen sizes? Okay. Some of your clients. So hopefully we can already establish the importance of making websites that are robust, and that can work under a variety of conditions in a variety of different scenarios. Are they even fringe visitors though? 15 percent of Canadians have disabilities that affect their everyday activities, and that works out to about 3.8 million Canadians, and it's even higher in the states. It's about 20 percent in the states, and that works out to about 57 million Americans. Not to mention that 50 percent of all web traffic is made up of bots. So they unfortunately aren't admiring your beautiful design work. And for all the rest of your users, all of them occasionally face accessibility barriers at some point. Now, although I do develop websites, I don't have a disability that affects my everyday activities. So I thought we'd just spend a few minutes listening to someone who does. This is a video clip from Molly Burke. She's a Canadian YouTuber who is blind. It wasn't built for me. But what if it was? If everything was made accessible, if every restaurant offered rail menus, and every home you could buy came equipped with the ability to turn on talking software, I would never have to have somebody read the menu to me, and I would always be able to borrow my friend's phone when I die. There's the social model of disability. The idea that disabled person is not a problem. Everything around them is. Making the world more accessible is not only easier than you might think. It's more beneficial. A lot of accessibility features are great for people with disabilities, but are also helpful for everybody else. It's called a curb cut phenomenon. Splanted sidewalk crossings are great for people in wheelchairs or who use walkers. And for mothers pushing their babies in strollers, for kids on skateboards, or couples riding bikes. Our Mac door openers are perfect for people in wheelchairs. And for your arms of full of groceries. In modern parlance, it's known as universal design. Designing and building everything to be accessed, enjoyed, understood to its fullest extent by everyone, regardless of their size, their age, their ability, or their perceived disability. One company that shows this perfectly is Apple. Every product they release, I divide a store, open up and use on my own independently. No extra cost and no assistance needed. And I ask you to imagine how liberating, how empowering it is to be shown by a company that they view you as belonging to their customer base. When so many others tell you the exact opposite. Try closing your eyes and using your microwave. Doing your laundry or doing something as simple as paying for a cup of coffee. Nowadays everything is touchscreen. And 99% of it is not accessible to me. Though very soon learned, it's not made for you because they don't think you belong. I've never fit in, I've never belonged, and I'm okay with that. I've learned to adapt to my situation and I've learned to adjust to my life. But imagining a world where I didn't belong, where everyone with a disability did, is pretty amazing to think about. And to me, that world isn't one where I can see. It's one where I don't have to. Thank you. Okay, so let's just spend a few minutes thinking about how the curb cut phenomenon applies to websites. I went through and was trying to come up with unconventional ways that I happen to browse the internet these days. And I came up with a lot of them. For example, sometimes when I'm going through my Twitter or Facebook feed, a video will come up and it will have captions already turned on and I don't bother turning on the audio. I just watch the video with the captions. And sometimes for reasons that are very necessary, for example, I might be in a very quiet space with other people that I don't wanna disturb and I don't have my headphones, or I might just be in a really loud space where I can't actually hear the audio content. Other examples are sometimes when I'm driving, there's Google Assistant or Siri that maybe I'll need to interact with in an audio sense. Also, just any other type of multitasking, if I'm doing the dishes and my hands are wet and I can't get to a screen right then, there are still other digital assistants, Alexa or Google Home or that sort of thing. Sometimes I don't have time to watch a complete segment of video content, so I'll just read transcripts if they're available because as faster I can skim through it and get through that content. Also, if I'm filling out a form on a website and Google doesn't happen to fill it all in for me, it's a lot easier for me to just tab to the next form field and use keyboard navigation than it is to actually go back to my mouse or go to this trackpad and try to get onto the next field. So there are a lot of ways that making your site accessible can actually help all of your users. So then it comes to this. Maybe you're thinking right now, okay, I understand that there's actually a lot of people that this will help and that this is really important work to do, but it's a lot of extra work, maybe you're thinking, and how do I convince my clients to pay for this extra work? And so my best advice to you is to try to bake it in as much as you can. So one example of doing that is to think about when you're making a form on your website to make it with form labels right from the start to make sure that your DOM is in the same order as it is when you apply the CSS to your form. If you're using a plugin, make sure you do some research ahead of time and make sure that it's already accessible. If it isn't accessible, and I will show you some auditing tools that you can use to check things, but find out what issues exist and maybe submit that as a change request or a bug report to the plugin developer. Some of the accessibility features are also good for SEO. So it's another reason to try to get them done. But if you're just checking color contrast or things like that, just try to get into the mindset that this is how websites need to be developed these days. This isn't extra work, it's actually the work that's needed to create a robust and perceivable website that everyone can access. So the next stage of this talk, what I was hoping to do is show you how I actually audit a theme. So I have a theme. Now, I just want to say about the theme. I'm not trying here to criticize the theme developer of the theme. They clearly put a lot of work into creating it, but it is an older theme and they never say anywhere before purchasing it that it is accessible. That's not a claim that they make. But it does have a lot of common accessibility errors that I thought would be interesting to take a look at. So I just have to get that over here. I think it's full screen. It's hard to use the mouse from this angle. There we go. Okay. So, this is a theme that you can purchase on Theme Forest if you want. One of the things that is a problem with this theme straight away is actually, let's see if I can, sorry. A little tricky with the mouse. Okay, I want to go back a couple of slides in the slideshow is this issue that I find with a lot of hero images and image sliders that happens. A lot of times this occurs from you're developing a theme and maybe you had a photo that worked really well with this type of text and then you pass it off to your clients and they're maintaining the content and they replace it with something busy. And the trouble with this photo, although it shows elephants, is that you lose contrast in the letters and it makes the text very tricky to read for some people, for most people, I think. So, that's really common and it's quite easy to fix. You just need to maybe put a dark overlay over the whole image to make it darker or put some background behind the text. But, I mean, that's a common issue I see a lot. Another issue with this theme in terms of accessibility is keyboard navigation. So, if I can, I'm just gonna go back to this first link on the page. Okay, so right now I'm focused on the first link on the page but this theme doesn't have any visible keyboard focus on a lot of the links. So, I wouldn't know just by looking at this thing which link I was focused on without this helpful text from Chrome but sometimes that doesn't necessarily match what the link text says. So, in this case, I've been practicing a lot with this theme so I know which links are connected with the links on the page. But right now we're on the next event at the very top. And so, the next link that I expect to be able to tab to is actually the Facebook page. But when I press tab to go to the next link, it goes to donate now. And this does have a visible focus as you can see it actually underlines. Going to the next one is join us and then it goes to the Facebook page which also doesn't have visible focus. So, and if I quickly tab through some of the other things that will then go to Twitter and Instagram and then the logo and then there's a second logo that you can't see and then it goes to home and for some reason the home dropdown occasionally is under pages which I don't know why but then home version two and it goes through the menu and then it goes to the save them button and skips the rest of the menu and the search bar. It doesn't go to either of the arrow keys and we're now on the save them button and then it goes to our mission. So, that's a major issue. What you really need to have happen is that the DOM actually is in the same order as what you see on the page where possible because that can get very disorienting and confusing and you really need to have visible focus because if somebody is only navigating with a keyboard they won't know where they are on the page or what they're clicking on in terms of links. So, oh yes. Well, it goes to the home link and then it goes down through these home version one home version two. So, it goes down through the menu and then it just skips the rest of the menu and goes straight to save them. There shouldn't be if they follow the DOM. So, for example, if they're showing up this way in the menu and they're all actually links they should interact properly. If not, there may be some JavaScript interfering with this. It's my guess. And there could also be tab index issues which ideally you'll avoid using tab index if possible. There may be some really fringe cases where you really have to but ideally there shouldn't be a need especially within a navigation menu to use tab index. You should, if your links are in the order that they are in the DOM and you've built your menu with CSS it should just work. Okay, so the next thing I wanted to do and I'm sorry I've got to move a little quickly because we started a bit late is to show you some of the auditing tools. So, sorry, I'm just... Okay, so the first auditing tool I wanted to show you is one called Wave. No, that's the second one. The first one is Axe actually. And so if you go into your developer tools this is a Chrome extension. It's also a Firefox extension. So you just go into your developer tools once you've installed the extension. And then from there you click on the Axe tab and this comes up. And what you can do with this is click Analyze and it will give you some feedback about how accessible this page is. So the first thing it found is on the left hand side as you can see there's a menu of some of the items that have failed the auditing test. So the first one is that elements must have sufficient contrast. So it found 67 elements that don't have sufficient contrast. And then if you over here it gives you more information about what the code looks like around the element. And you can click on Highlight and it will show you it in the theme. So it's that D that's barely legible. And what they did with this theme is make a hover effect. So if you hover over this it lights up. But as we know most users are on mobile devices and on mobile devices you won't be hovering. And so really that's just not gonna be very visible to most people. And then so it found 67 elements with insufficient color contrast. So what you would do then is just scroll through the 67 elements over here in the right hand side navigation. You can also click on Inspect node and it will show you it in the element. Here you can see the DOM and here you can see the CSS that is applied to it. So then if you go back to Acts you can also click on Learn More and it will show you the actual guidelines and more information about what's going on with this. So another thing you can do. So another issue with this theme is heading levels. This is a common issue where heading levels must only increase by one. As far as I know you should only have one H1 on each page. Not necessarily true, okay. Okay, per section. You're often a page is only one section. Yeah. You're allowed to do one per section. Okay, well. Like in the blog list. Yeah. All the articles can be H1s. Each blog can be a separate section. Okay, so I'm going to close this for a second. I have a tool that can help you. The main point here really is just that every heading section should only increase by one. So if you're, I mean you shouldn't be skipping any levels. So sorry, it's a little tricky to see this because it's black on black. But there's this tool called Heading's Map and it's also a Google Chrome extension and most of the tools I'll be using in this are extensions you can install in Chrome. Most of them also work in Firefox. And so you can see that the first heading on the page is an H4 which really shouldn't be the first heading on a page. If you have some content and you want it to look in the same style as something that you've set up for a heading, just give a class to that div. And it's really simple if you're good with CSS you can just have H4 comma and the class name and the style should match mostly. So it should be a pretty straightforward process. So then the next thing is heading level one which is the branding as it should be and then it skips to H3 and then skips to H5 and then we have some H2. So it's sort of all over the place. But one other thing I just wanted to quickly say about headings is that I find this problem happens most often with widgets. A lot of times you'll install a theme and the widget heading will be given an H3 or an H4 and you might not always have a title that umbrellas over your widget section. And you can change that in the functions.php file. So it's just sort of a case by case basis kind of thing. So you'll have to look it up. But if we close the hat, if I can't see the mouse. Okay, so we'll go back into acts for a second. And it should, and unless this usually comes up faster the second time. Okay, so landmarks are another issue that happened quite a lot. That one's a little bit confusing and there's a fair bit of just needing to kind of know how it works. But for the most part with landmarks you just need to have some page structure. So you want to have a header and it's a good idea to use header tags for that. And you can give it a role so that header tags are HTML5. So if you need to do support for older browsers that might not support HTML5 then you can also give it a role. And then you can have your footer in a footer tag and you should only have one header and one footer. And then any other, all the rest of your content could be within a main tag but you can also have a size and forms and tabs and there are a bunch of other sort of sections of content that you really need to make sure that all of your content of your website is within some form of a landmark. And navigation is an important one as well. That should be in nav tags and it can have the role navigation. And that will help the screen readers understand that your navigation is actually navigation and not just a random list of links. Okay, so links must all have discernible text. I find this a common problem when you use icon fonts. So something like font awesome. And when you use font awesome, if you're not familiar with that, although I imagine most people are, you usually put an I tag or a span and just have a class and that instructs the font as to where you want the icon to be. And the trouble with that is that it, then there's no text. So any sort of screen reader or bot navigating your site isn't necessarily gonna know that what that is and what that links for. And so I know a lot of themes come with, if you wanted to have this sort of effect and you don't wanna use an image where you just have an icon. So WordPress comes with a class called screen reader text. Not all themes may have it but it should be within most themes. And if you create a span or a div and you give it the class of screen reader text, that that text won't be visible to users but it will be something that a screen reader can access. And that way you can put my Facebook page or something and label that icon so that, sorry, excuse me, so that they know what that link is. So they have some information. So they're not just going to link and the screen reader just says link. And nothing here. There's no more details about that. Okay, there's a thing I just wanted to go over with zooming and scaling. Cause this was something I wasn't aware of when I first started going through this theme. Sorry, learning about accessibility was that I thought that the guideline about zooming and scaling was about using the default browser zoom. And that's not the point of it really. So if you zoom using your default browser zoom, this will happen. So you're basically just making the entire site bigger. But that's not really the point of why people want to zoom in on the page. What they're going for is trying to make the text larger. I mean, that's why people want to zoom in because for some reason they can't read the text. So there's a tool that you can get. That's another Chrome extension called zoom text only. And what that will do is just zoom the text independently of the background. And so one of the accessibility guidelines, I can't get to this, is to try just zooming the text up to 200%. And then what happens is that a lot of themes have this kind of thing happen. So the trouble is that, for example, the next event information at the top is starting to hide behind the header. And this 96 has lost its background a little bit. And so places like that you might have trouble actually reading the text. In this case, you can still see it and you can still get a sense of what it is. But it's really important to make sure that that's always clear. Also with the heading on the slide, it's overlapping the save them button. And one simple way to fix that, for the most part, it may take some tweaking, is to, for example, the black bar at the top, likely that height is set in pixels. And so no matter how much you use in the text, that height is gonna stay that many pixels tall. And so what you can do is just set that height in Ms or REMs. And that way that height is actually dependent on the font size. So then when you start zooming, the background will zoom with the text instead of just staying that many pixels tall. It will look a bit more like, that was correct. Yeah. Quickly now, so it's understood that the save them is staying the same as ours. Is that possible that they put that in an image or does the zoom text really look at the background? Yeah, so. I know why it might be like that. Yeah, now there is, if we go back to acts for a second, I'm gonna just reset this. And I'll show you something they did with this theme. You obviously need to click there. Yeah, oh yeah, no. Oh, it actually looked like that. Okay. So when one thing that acts caught with this theme, that may be causing that issue actually, is that in this theme, they set user scalable to no. So they are trying to prevent people from actually zooming the entire site, which may be interfering with the zooming abilities of the browser and of the extension. So please just don't do that. That's actually not recommended guideline and that will make you fail. The accessibility audits every time. And it's not best practices. So please don't turn off user scalability. Users really need that. There are actually some users still on really old browsers that have, they might be low resolution, but quite a large size. And at the same time, there is also 8K monitors that they're selling at New Egg. So you don't actually have a really good sense of what size is a good font size because on a really high resolution monitor, that fonts are gonna be fairly small versus a really old monitor that's quite large and a low resolution. Those same fonts are gonna be huge. And you can set media queries, but it's really, really hard to know what everybody's particular vision is gonna be and what every monitor is gonna look like. So the best thing is to allow some ability for users to control that themselves. Okay, so that's most of what I wanted to go through with that. Now, not all auditing tools will catch everything. They tend to all catch different things and sometimes using the same tool in a different browser will catch different things. So I often will use another one called Wave and that looks very different from Axe. So what Wave does is it's going to add a bunch of little icons all over the page. And the icons give you some information. Red ones tell you which elements are problems, yellow ones are alerts, and the rest are sort of just some information about accessible features on your site. And so here it found 10 errors. It only found 62 contrast errors, which is different than what the other tool found. And if you go to this flag, it will give you more information. So you can click on this and it will show you, if I scroll up a bit, that this image doesn't actually have the proper alt tag on it. Because it's a link, it should be the title of the page it's linking to in the alt tag, but this doesn't actually have any. And a strange thing with this theme as well is that they hard-coded in a lot of the alt tags, at least on their front page, instead of pulling them from the media library. So a user using this theme wouldn't actually have control over what is said in some of the alt tags, unfortunately, which is another problem. So the logo, for example, they've hard-coded the alt on the logo as logo when it should maybe be the site title. Okay, so I lost enough. Okay, anyway, so if you click on the eye, those blue eye symbols, they will give you more information. I'm sorry, this is a little tricky. Okay, I'll try to be quick. So it'll tell you more information how to fix it. If you look at the contrast errors, you also get this contrast tool that can allow you to tweak the colors. So you can double-check them for whether they're passing the AA level or the AAA level. You can also see the whole site without any styles. And that will allow you to check on any issues with the DOM. So if you're looking at your site with no styles and the elements are in a different order than they were when you applied the styles, then you know that you might have some issues with keyboard navigation. Okay, there's one other tool I wanted to show you and it's a little bit glitchy. So it's not the best tool, but it's interesting to look at anyway. And if that closes, there we go. Okay, and it's this one called no coffee, except maybe it's gonna open again. Okay, I'm not sure if it's gonna be too slow to show you today. Okay, I may need to leave it there because I feel like, oh, okay, it's there when we... Okay, so this tool actually will show you how your site looks with different types of vision deficiencies and it's maybe not exactly what people will see, but it's still really interesting to get a sense of how your site might look with some of the different types of color blindness or with some impaired vision. And this is an example, so it will show you the change in color. And here you can see that the nice red background actually matches the grass. So you might not have the contrast you thought you had for everyone. And that can be interesting to take a look at as well. Okay, so I just wanna go through a few more slides if there's time and then we'll have time for questions, I hope. Okay. Oh gosh, sorry about this. So these are some of the tools that I was showing you. Sorry. And these are some more tools. I'll try to go back to the last slide because we didn't have... Yeah, I know, except they're not working. Nope. I don't know if it's just slow internet connection or something. Okay, well, that's some more tools. Actually, oh, let's do this here. Nope. Oh well. Okay, are there any questions? How about that? Thank you. Yes. Right. So the question was, do I have any tips on helping users generate accessible content? It is really important that everyone who's involved in website development, including your clients who you're passing your site off to or if there's content people, if there's marketing people, they all should be aware of accessibility as an issue. There are workshops that are offered by Accessibility Ontario that can help different levels of people and different types of situations where they're interacting with websites to learn about how to make websites accessible. If you're uploading documents, they also need to be accessible. So PDF documents as well. And those, they also have workshops. So it's accessibilityontario.com. I did have that on another slide, but I'm having trouble getting to all the slides. But just like, I think it's sort of a matter of, because a lot of accessibility issues are a bit of a case by case basis, you really need to know what the website is that you're working with and sit down with your client maybe and explain some of the main issues with them. But definitely making sure the alt texts are following the appropriate guidelines for content and the headings. And making sure that the links are clear and don't just say something like click here. Yeah. Yes. Does that usually, and I say it's very extraordinary responsibility to pass most of it and disability audit tests or? Okay, so the question is, if you have a responsive theme that's very good at being responsive, does it pass accessibility audits? And the answer is not necessarily, it may. But some accessibility features are different than responsive features. When people talk about responsive, they're talking about different types of devices. And is my site going to look nice on a phone versus a desktop versus a laptop? But with accessibility, we also need to know whether screen readers are going to be able to read through your content clearly and without repeating themselves very much and making sure that people using screen readers, for example, can access all the information that you're trying to present on your site. But it also helps bots. And as I said earlier in the talk, other people can benefit from it as well. Yes? The content kind of question. Yeah. It's produced this really big amount of content that is tab-like, tab, or at least table-related. Good tool advice for the user to be able to create and manage that content benefit. Is there any toss-tops and great tools there for the browser and stuff for the audience? Okay, so you're looking for tools that can help users entering content, content creators. Again, since I'm not really sure, but I might be able to get back to you on that. I kind of have to check that. But most of the tools that I work with are because I develop themes, right? And so they're theme-related. But definitely, at least making sure that your links are good, that your headings follow proper format. I mean, from my understanding, most of the issues from just entering content will be photos and headings and link text. Like a checker. Just tell them, just put this in a checker. Yeah. It will be something. Yeah. Right. Yes. So they're on Google Slides and I'm not really sure how to share them yet. But when I figure that out, I'll hopefully pass that on to the people running this WordCamp. How? My themes. So I do custom themes for clients, freelance. So I don't have themes in the repository, for example. So people would just hire me and I would develop them a custom theme. But if I get into doing repository-style themes in the future, I'll let you know. Yeah. Can you start with the framework or a... Oh, yeah. I use... Right. I use underscores and I find that uses best practices. Also, you could build on top of one of the standard WordPress themes like 2017 because they also have a team that helps check accessibility. Yeah, I use underscores. I just want good choices or any frameworks to... About like... I don't know what the current frameworks are. Can we give them in-cams and these kinds of things. Right. Are you putting in accessibility as a feature in your self-clipline? Are you saying it just comes in the mongo? How do you... Obviously it's extra work to do over that? So what I do personally is that I try to be as... As I've learned about accessibility, I try to incorporate as much as I can while I'm developing the site. So for example, I will label... If I'm creating a form, I'll label all the form fields. I'll try to follow the DOM. I'll do what I can. But what I will offer to clients extra is doing an audit on their site to double check it later. But I'm considering starting to just include that because I just feel like accessibility is so important. It's hard for me sort of ethically thinking that I can skip that step. So although like in past themes that sort of been an extra, I feel maybe in the future I'll be just including it. Any other questions? I'm sure Heather will be around for answering those. But thank you so much. Thank you. Thank you.