 Good afternoon and welcome to how to build accessible websites My name is Melanie adcock. I'm going to warn you up front. This is going to be like drinking from a fire hose We have a short amount of time to give you a lot of information. So I in my slides I've put in links to webinars to Resources and I have a link at the end where you can actually go get the slide so Kind of a preface to this and why I chose this topic. I'm in the process of building a website for the blind and This project has been going on since November And I was hoping it was going to be finished in time for word camp, but it's not we're still testing We're it's a website that provides Service dogs for the blind and the low vision and I've learned so much in this I thought I knew a lot before I started this project I've learned so much more and I'll share some tips and tricks along the way and some tools as well Here we go Who am I I've been doing Building websites for 20 plus years. I mean I was back in the days of go live I started using dream weaver when it was a version 2 I've been using WordPress for eight years and I'm a former art teacher. So my degree is actually in art Then I went did a whole 180 and became an IT director and I know that's like such a leap, but I am kind of one of those people that are left brain right brain equal So I'm was an art teacher, but extremely organized and anal retentive And so I went to actually be a web designer for a for a company And I was there two weeks and the IT guy left and they're like well you you do web you don't you understand computers here be our network director and So I kind of learned all that and got my Microsoft certifications and decided I didn't want to do that for the rest of my life And I missed the art part and web is the perfect combination of technology and art. So I've been freelancing. I've been presenter at local meet-ups both here in Atlanta And word camps as well. This is my first time speaking about accessibility Okay You what you what is web accessibility? It's like the hot topic right now You'll always hear about accessibility this inaccessibility like it's the mobile responsive of this time period of web design You if you are around eight years ago when mobile responsive was just starting to hit I actually the first mobile responsive website. I built the client asked me to turn that feature off because they didn't like how it looked and Now you we need to remove the barriers From websites that we build so they're accessible to everybody 20% of the population has some type of disability I'm not talking about just vision impaired, but people who can't use a mouse People who you can only use a single keyboard Navigation so we need to build websites that are accessible for everybody and that's what I've just talked about If you if you exclude that 20% of the people from your website, they're gonna go find that product They're gonna find that information somewhere else. So it behooves you to build for everybody be inclusive Start now be ahead of the curve because right now. It's just becoming an issue But two or three years from now It's going to be expected and you're going to be ahead of everybody else who's not doing that Besides it's the right thing to do Standards the web assess this is kind of wordy. So web accessibility standards The current standards WCAG is 2.0 and this is going to make sense when I show you the how to test your website And there's basically good better and best you get an a a double a or triple a the current standard is Have your website be a double a I've only ever seen like one or two pages that are like triple a so strive for double a and right now 2.0 is the standard and What are the legal demands? Right now the only legal demands on web accessibility are people who receive federal funding such as higher education Section 508 they are required by law to be web accessible now There's a lot of talk about adding websites to the American with Disabilities Act requiring all websites to be accessible You've heard about the lawsuits okay, I'm only going to speak about the top one on Wendixie and They're like well, they're not a university. Why should they have to be web accessible? Well, it happened to be that their rewards program and their little fob was tied to being able to interact with their website If you couldn't interact with their website, you were denied the ability to Have that discount and those rewards. So that's why they lost that lawsuit and had to pay the money Okay, how do you get started? You're doing the right thing start Start watching webinars start looking at YouTube videos start reading about how to build accessible websites You understand The standards you use good markup. You're using WordPress or you're you're ahead of the curve there Learned about aria. That's Accessibility drawing a blank now I'm drawing a total blank on this and I use it. I just use area all the time Okay themes and plugins Check accessibility throughout the project. That's why my project has been going on with November since November is I did not design the site. I'm only building it. I'm doing it through an agency in Louisville And I did not design the site a graphic designer who apparently did not read anything about accessibility Design the site. So I I first have to build the part that they did and then I make all my recommendations and how to fix everything So it's been slow glowing plus every time we build a section. We have both blind Users use it and low visibility user and then we go in and tweak it yet again. So it's a little slow in getting the The feedback from everybody that's involved to make sure we've got this section down before we go to the next one And we're gonna test with tools and I'm going to show you some great tools for that Barriers things that you probably don't think about non-text content such as images Videos that don't have a text equivalent. You put a video up there. Do you have the script the actual? Or do you have closed captioning or do you have a transcript of the video or audio? So somebody who can't hear can actually read it Can they access all your content? By hitting the tab or the arrow keys on on their keyboard Are the action items the call to action items? Defined with purpose or are they just common like click here read more Read more what click here to do what okay and ability To visually determine if an elephant has focus When you if you tab through your keyboard next time you open your computer just go to a web page and start hitting the tab key and There should be a faint outline on everything that has a focus on it. The browser does that Some themes turn that off. So make sure That when you tab it shows focus and there's actually a plug-in for that if it doesn't so Using color only to convey information Got a lot of colorblind people out there 8% of Men are colorblind One and a half percent women are colorblind generally. It's the red green colorblind, but there are some blue orange as well so if You have a color chart on your website to Display data if it's in black and white or if they're colorblind Can they tell the difference of what it is and there's actually something for each you can test with that as well Do you have skip links? Can they skip the navigation if they start going through your inside pages? Are you going to make them tab through every button on your navigation menu every time or do you have a skip links? So they can skip straight to the content design there's an excellent WordPress TV Session on design and accessibility. I recommend that you go watch this This is not going to be just completely on design But I'm going to touch on some of the things since we build websites. We handle this type of information Okay, again use good meaningful HTML We WordPress does that for us, but if you're writing hand-coding stuff make sure it's good semantic markup Color contrast in design This is becoming actually a lot of issues for even just older people Make sure you can actually see the text on the color background that you put it on Make sure there's enough contrast that makes it easy to read font size scalable font size Don't use teeny tiny fonts keep in mind that older people need bigger fonts and You need to have it scale it scalable So if they hit that zoom on their browser and scales up at your font will scale up Again meaningful links not click here read more continue reading meaningful headings This is the hierarchy of your web page and I say I am guilty of this one H1 H2 and H3 it should be like an outline You're writing a paper and you have an outline you have one H1 you have your H2s the H3s fall under the H2s The H4s fall under the H3s. You don't go H1 H4 H3 H2 You actually have a hierarchy. You don't use headings just to make text bigger Alt tags and descriptions for images. You should be doing that anyway for SEO This just add is an added bonus. You're also doing it for accessibility and please stop using mega menus It is not good for the visually impaired to have to deal with mega menus Color contrast black text on white background majority of web pages that we go to Are not always the easiest read for the low vision or even for the dyslexic Dyslexic people find it easier to read on colored background some of them. It's purple some of it's orange some of its green with colored text on top of that so keep in mind that Color does make a difference and you can test color contrast and White text on light background. This is a pet peeve of mine. I have one graphic designer I work with with one company her favorite color combination is white text on extremely light blue background and Every time she does this I say this isn't gonna pass and Yes, she does it at like at least every other month. I get a piece That's like that and then I have to send it in the they the actual client who she works for rejects it can't read it Do it over so but she keeps trying to sneak it by and she just must really really like it and Colorblind users you may not may not be able to see the the colored links in the body copy Remember all those time the first thing you learn in CSS is how to get rid of that underline on links put it back Okay You don't need you don't need it in the menu, but you but people who are colorblind need it in the Body copy so if if you have blue links and they're blue orange colorblind It looks the same as the text. They can't differentiate The color of links versus the color of text Don't put lots of text on top of a busy background image. I know parallax is really big right now, but Darken those images so it makes it easier to read. Otherwise, you're never going to pass any of the color contrast test Fonts, I love fonts You know the clients we all have them that want every page look like a ransom note You know they want like 15 different fonts on there But choose fonts wisely and sometimes I know you're stuck with what they have in their branding But for instance this project I'm working now for the guide dog website the graphic designer chose a tall thin Ultra thin font for the menus. I Took one look at it and said we can't use this font And you can't see it. I mean, I'm I'm like legally blind without my glasses Even when my glasses on I was having trouble seeing it So I had the base font for the menu had to be like 30. That's how Tall and skinny it was well, they I went ahead and build it their way and then said okay this is how I would do it and We actually changed the font We ended up having to make it our low vision people are now Telling us we really actually need to make it a heavier weight because they're actually having trouble seeing it So we're going to actually before we make it a heavier weight adjust the color contrast a little bit more Make fonts that are easy scalable. You've all done that where you can zoom into a web page the command Plus on the Mac my command might as Does it break your design when the fonts get really really large if you use m's instead of pixels? It will scale with the zoom very easily. Okay, test your pagers pages again using that zoom factor Or use a text scaling plug-in There's the little plug-ins that you can put you see them on websites in the top right corner with a little little a medium-sized a large a there are plug-ins that allow you to resize text and What one is built into the accessibility plug-in? headings Again again do a hierarchy thing. I already talked about that Do not skip let your style sheet do the rest Screen readers don't understand when you skip they think there's content missing If you don't do that hierarchy, and I'm like probably one of the most guilty people about doing that so Meaningful legs Screen readers unfortunately, there's lots of screen readers out there your phone Has it built into it your tablet hasn't built into it some people download free ones off the internet Some people pay lots of money for them To read the web pages to them Unfortunately, there's no set standard on what they support So if you go and look at a grid of what every screen reader supports, they're all over the place So keep it simple For instance bulleted lists some screen readers only support plain old bulleted lists So if you're using these fancy icons For a bulleted list it may not be supported in a screen reader So I said use many meaningful links I said to click here to read about leader dog versus click here Learn more about leader dog read about us. That's a project. I'm actually working on this for leader dog, and I Actually did a little e-book for for the actual staff because they're going to be actually putting in some of the content and I'm like, okay. Here's the rules. You have to follow So I actually made a rule book for them So when you go in and put your department's information and you have to follow all these rules I talked about alt tags did videos Vimeo videos for each section And this is how you are going to do it and then we'll go back in and check and see how they do and grade them Images always alt tags descriptions can't say that enough good for SEO good for accessibility Menus no mega menus Now here's a big one I'm going to show you a sample you must be able to access Submenus by just hitting the keyboard now. I had a I started this project building a theme I actually went and looked it said it was a hundred percent accessible. I Built the whole header and footer out Went to test it and it did tab through the sub menus, but it did not key the sub menu to go down The screen readers would work fine on it, but it was not triggering the sub menu So I believe the developer when they said it was a hundred percent accessible I actually contacted them and said this doesn't work and apparently something broke in the latest version So they're aware of it. They're changing it. I could not wait. So I actually went to another theme I spent the weekend rebuilding it in something. I knew that would work There is a special class called screen reader text dot screen dash reader dot text and wordpress You can put content specifically for speed for screen readers for instance You have a header right menu You don't want to you normally don't usually put a home button in there because you don't really have the real estate Usually for that but you can use that text and the CSS code that goes along with it to add a home button for screen readers And I've used it to add specific Sections on things that are not accessible to build a section out. That's just for screen readers and I put a a Bitly length there that will take you to a page that explains this CSS And this class the best and the best uses for it. It's too hard to explain it in a very short period of time themes Check your themes out. There's some good accessible themes on the repo But you got to test them just because they say it's accessible It may not be Genesis and when I talk about Genesis, I'm talking about the ones that are On studio press if you've got a third-party theme test it test it test it test it so Generate press I use Genesis for years and we're talking like six seven years. I just started using generate press And I am totally impressed by its accessibility. I mean it is awesome especially on the menus and Again, don't take their word for it read. I read documentation but test and Let's go on plugins Make sure your plugins support accessibility Form plugins There's actually an add-on in the in the WordPress repository for gravity forms to make them more accessible Just a little free add-on to gravity forms Page builders not all modules and page builders are accessible Usually the accordions and the tabs and things like that are but not all again test Install the WordPress accessibility plug-in. That's probably the best one in the repository There's a new one out there for testing called W alley or we call it walley. It's WA 11 y And it's great for testing. I'm gonna show you an example of that and Read the documentation that comes with I know we're all just install and go We download the plug-in we install it we go, you know, oh, it doesn't work who reads the direction Well, I'm a direction reader So I actually go in and actually read the doc documentation before I contact support But I test test test Here's some tools Take a screenshot of this or download the slides Contrastchecker.com You can put two colors your two main colors in for your website and See if they pass if they pass with a double a or better Sim Dalton ism is a Mac app and That you can get off the app store that you can put your images in and or your web page it and See what it looks like for the colorblind So you can actually see if it they're red green colorblind what it looks like if they're blue orange colorblind what it looks like The acts by the neat labs. It's a browser on add-on for chrome It allows you to put accessibility testing right in your browser wave It's actually my favorite one wave dot web aim dot org You put the web address in and it will actually score it You got to take it with a grain of salt and actually read it because sometimes they pick up things that aren't really there The Wally program the Wally pro again. It brings in wave And the other tools into your website so you can actually click on a little Icon and it will grade your page right there as you're building it Third-party services like site improve Tenon, Denny can do it for you if you just want to throw money at the problem a lot of money at the problem Because they're quite expensive If you're a big corporate agency, this might be the best thing if you have different people Managing different departments and you can't basically too big of a website to keep track of then this third-party service Can actually keep track and make sure all your pages are accessible Use your phone to test turn on the accessibility features now as a formal Apple tech support person Remember how you turned on those accessibility features so you know how to turn them off Because I've gotten a lot of people who called who's who can't even get through their Passcode because they turned on accessibility. So remember how you do it download a screen reader and Test your websites with a screen reader reader the more expensive ones have like a 13 30 day or 15 day free trial But there's free ones out there download a couple different ones because they all support a different markup Wordpress TV just do accessibility There's some great talks on WordPress TV Ithemes does free webinars training.ithemes.com they had one on the Wally plug-in about three weeks ago. It's free go watch it Talks about how to use the plug-in. I put the link there to the plug-in There's an upcoming accessibility summit on Ithemes next month. I think it's about three weeks I think it's $67 But it's like a whole day thing on accessibility and Search for webinars WP engine did one two weeks ago. That was excellent on accessibility go to the wordpress.org Website and read what they have they they actually have a blog about About how they're making WordPress more accessible okay, I'm gonna show you let me escape this and I Wasn't expecting to have to hold the microphone at the same time. So I'm gonna kind of work my way through Here's the contrast checker website You just put in your your color your foreground color your background color Let's just pick one here and it see it passes the double a but not the triple a and It gives you tests. I I don't usually use this one I use the one that's in the wave because it puts everything together in the one one tool Here is generate press theme and I'm going to use the tab button See the skip links come up in the upper left hand corner allows me to skip to the content But when I go through the menus when I hit a drop-down menu I can tab through the sub without using a mouse and notice there's a border around that That was the focus I was talking about it shows the focus. This is straight out No extra thing. I just this is the actual demo on generate press This is what you get when you install it this plug this Theme is free their premium version. I think it's $39 for unlimited sites. So Definitely a great theme for a cheap price But it goes all their ones go straight through just that menu alone is definitely worth it the next one Gravity forms is the WCAG 2.0 form fields It adds accessibility to the form fields and there's a lot of things that does I'm not going to list everything It's just like 12 different things that it does for gravity forms The WP accessibility plugins most popular one It's I'll show you what it does here in a minute and all the didn't they've added a lot of new features in the last year It does even more than it did before the Wally the WA 11 y accessibility toolbox It allows you to test your pages as you build them. That's the one I'm using now Here's the wave website. So since we're at Let's do a bad one first ESPN.com Let's let it generate all the errors After it loads everything And it's still loading and it's still loading They should go to the session on a quickly loading website And it's the last time I checked it was like 289 errors on the home page alone. Oh Here at 254 they got better and 36 alerts and then it talks about the structured elements and you can actually Walk yourself through each one of these We can see that It will mark every error on there with a little red flag Yeah 254 red flag on the home page alone Contrast you here's let me get over there. There we go contrast It you can go 227 contrast errors on ESPN. Okay, let's do one. That's actually good now Fiu.edu Look how fast it loaded they have Get back up here they only have two errors and Only one alert That's an excellent excellent and you can actually get click through here hit the styles It will actually tell you each one what each one is You click on that it takes you to the corresponding one on the web page and you can read it again You have to kind of look because sometimes it just doesn't Tell you now. I'm going to quickly go through here The wave we just did The WP accessibility plug-in. I've got it set up in here. I only have one more minute So what it does is allow you to enable skip links It allows you to do all these little things you can turn on and turn off depending on who your audience is Some things we've found out that we had to turn off on here because the theme handled it So you have to just turn things on test and test and I want to show you really quickly what way the wave Wally tool Looks like on the front See the little pair of sunglasses down here in the lower left hand corner When you click on that you can actually test are all the headings correct What's the contrast is? Is the link tech text meaningful do you have labels on your forms? Do you have alt tech image alt text on all your images? It will actually set there and give you a report on each one for each page So I it's a great one to put in there But I just still go to the web wave test and test each individual page So now that we're done drinking from the fire hose Let me put my presentation back up. So you can get my contact information Let's see and It gets does anybody have any questions Yes, ma'am. Oh the admin the debut. There's I think there's actually a plug-in for the admin It's pretty good at being accessible, but there is a plug-in. I know to make the admin even more accessible Anybody else yes, sir. I've heard of it, but I haven't used it Yeah, I've had that with a parallax where it shows as an error when it's really not So I I just actually actually ask a visually impaired person to test it I don't worry so much about the screen readers, but it's actually it's harder for the low-vision people than it is for the screen readers I got him through the project. I'm working on and now that I have their information I'm actually going to use them to help me in the future Yeah, I'll be in the happiest bar after this. So if you want to Contact me. I'm at MGA creative on Twitter And my slides are MGA creative designs comm forward slash accessibility and that will take you to my slides Thank you very much. Have a great rest of the work camp