 So my name is Roxana Perot-Capella. I'm here presenting Creating Accessible Websites, Inclusive Principles and Tips. I am the IT project manager, though, by this display here, you wouldn't have known that. And I work for an agency called Cradles to Crayons. It's a nonprofit here in Boston that, unlike a lot of the nonprofits and educational institutions I've worked for, is very tech-forward and very tech-involved. That's very cool to come to a place like that. So the reason I'm presenting this website today is I have a long history of working around disability issues and accessibility is just the latest piece of that. In high school I worked for an upstate New York residential program for people who had what could be described as modern to severe IDD, Intellectual and Developmental Disabilities. And I worked there after school. My mom works there still. So I grew up really around it. So it's always just sort of been a passion of mine to advocate. So here we are. So I am curious, how many people here are trying to find something for their workplace or something they're trying to do for clients? Do you work for a nonprofit that receives federal dollars so you have to have your website accessible? Show of hands? All right. Is anyone here a developer who works for clients who also have sort of that background? And who just wants to make sure that their website is just as open as it can? Be as inclusive as it can be? Oh, I like that. Biggest show of hands yet. So when I started researching this, this sort of came up while I was looking around. This came from the founder of Accessible Journeys. It is a man who, growing up, he had an uncle with a severe mobility disability. And the family, instead of shunting him off to one of these massive hospitals that are just a nightmare, they included him in all their family outings. They made sure he was part of their life. And one of the things that I thought was just very profound, which was I grew up knowing nothing about disabled issues, I only knew solutions. So even in the 50s, 60s, and 70s, he would go with his uncle and his family and they would all go together as a unit. It wasn't, you know, we'll see him once the week before Christmas and then we forget about him for the rest of the year. He was very much a part of his family. So very sweet. So why? Why do we look for this? So I kind of covered a little bit earlier when I asked, you know, why are people here? Legally, you have to. You risk losing business or taking a trip over the courthouse if you don't. So you maybe want to reach a broader audience. You have a hobby that you're very interested in. You want to share with everyone else. Awesome. There's a reason why you want to have that broad audience appeal because these are the statistics about various forms of disabilities in the United States. So it's considered almost one out of five people in the U.S. have a disability and that's pretty close to, as our presentation yesterday about the same topic, what the U.K. is like. There's people with auditory issues. There's people with vision impairments and these all sort of need to be looked at as a way to really get your system out there. So that comes to our third point. It's just a nice thing to do. It's the idea that this isn't a school yard. We're keeping people away because we can. We're being inclusive and opening up whatever our website's about to everyone because it's just a decent thing to do to have that consideration. Here's just a short list of many legal actions that took place in the United States over the past decade and a half. So Access Now sued Southwest Airlines because Southwest's airline website was not accessible to anyone at the screen reader. They actually lost that case, but Southwest decided that they should make some changes. In 2006, Target also had the same sort of suit brought against them by the National Federation of the Blind. What happened with that was that the case was settled and that's all the National Federation wanted. They weren't looking at making oodles of money off Target. They just wanted to make sure that people with vision impairments could shop. I think that's a fair goal. So then the National Association of Death sued Netflix in 2012 alleging that it was not fair or was not considered a just thing that the closed captioning options for movies and TV shows were very, very limited. So they settled that as well. Settling, again, is better than dragging something out. And so Netflix agreed to provide more products, more content. And I think over the past two or three years, when they released one of their own series, like a Netflix presents whatever film or series, they're always closed captioned with the little descriptors of like, oh, man crashes through a building. Clearly we just finished watching Blue Cage, too. So then a more recent case was National Federation for the Blind again versus Scribe, which is sort of like a sort of journal website. You can get articles there, which is great. It's fantastic. You can read up all these articles. But they weren't accessible to anyone. So in 2015, you have a website that's not accessible to people, especially when it's all text-based. That's a little ridiculous. So that case was also settled. And what ended up happening is all of their content became accessible, I think by the end of that year. So now the Department of Justice is being a lot more proactive with sites. They're not trying to go after a medium-sized company and get them shut down. It's all about using settlements to change an organization or company for the better. One of the most recent cases I think came out of late 2016, early 2017, was actually against Harvard and MIT, local guys. And what those cases were about were they offered courses online, which is great. So you can stream this crazy good archaeology lecture by a world-famous professor, but you can't listen to it if you're deaf and they don't provide closed captions. So a lot of those more recent cases came around making sure that there were captions for those, sort of like what we're doing now. So I went to the Wayback Way Machine just to sort of see what Southwest looked like, at least on their website in 2002. So as much as they were able to procure, this is a snapshot on the top right side of what the original website looked like. If you were to scroll over the top of the menu, you would see just like oodles of links, like crazy amounts of links that for just someone trying to read with a screen reader would just be overwhelming, just very difficult to read and get through. So it's still the same in 2004. So I left forward a couple years, and so the top left is actually 2014, and this bottom left one is actually Southwest three days ago. So they've certainly come a long way. It's a lot more easy to navigate if you're, for example, just working with screen reading software or you're just having through. So live WordPress. I mean, there's obviously something to be said for the fact that WordPress is literally everywhere, or it's there for one out of four websites are created through WordPress. So that's a pretty big incentive to be accessible. WordPress itself has also decided that they are going to be accessible friendly. So all of the new content that comes out, like every theme, every plug, it has to meet that standard level of accessibility. So what are some things you have to consider when you create a website? Obviously vision and audible capabilities, neurological capabilities or those things. For age, not a lot of people really talk about age. My mom is in her late fifties and still calls me constantly asking what her password is for her Gmail account. I made it the names of her children. She only has two of us. It shouldn't be so difficult for her to navigate. Meanwhile, my grandmother, my husband's mom, my husband's mom's mom, she's navigating Facebook and the South Carolina Legislator website to do social activism to get arrested yet again at a public rally for one thing or another. So age has to be taken into consideration. And then those slide into sort of socio-economic avenues. So you can look at this as twofold because people who are older may not have so much income, but they might have accumulated a lot of income. You don't know. And it's also a clear fact that people who have a diagnosed disability oftentimes do have trouble finding meaningful employment. And then we'll earn 37% less than someone else who is the same age, same regional area, same race and all these other demographics. So that's something that you have to keep in mind because when you're building up a website and it's great because you've got all these accessible plugins that are super high tech, you may have to try to reach out to someone in Appalachia who does not have a very new computer but has a very slow internet connection and that needs to be taken into consideration. So these are some of the elements you do need to look for when you are creating your website, its colors, its fonts and sizing, its placement, its content for anyone who does SEO work. It's making sure all your tags are accurate and your all tags are filled in. One of my big projects at my current job is to make sure the marketing team does all tags. They very rarely do. So that is my little crusade that I've taken up. And of course you want to make sure that the website has decent readability and flow. So practically, what are some of the things you need to look for when you are creating your website or when you're altering or updating your website? It's names. So there used to be a time long, long ago where you would have to search for themes that were considered accessible because not all of them were, some of them were exclusively based in themes that didn't work for a lot of people. Luckily, almost everything that comes out of WordPress now is accessible due to that earlier commitment we saw to having things be easy to read. So that's pretty awesome. Color blindness and site design. I can read color in there. Can everyone, or is there a person or two who has color blindness and just sees an ugly green dot? Everyone can see. Great. So color blindness, I think, is an interesting topic because it also falls into the idea that when you're working with your marketing team or when you're working with a designer, you have to try to create a logo that's unique enough that your brand will stand out but also is not going to be just a random blob. It makes absolutely no sense to one out of 12 Americans in the world. So these are colors that really don't work well together. These shouldn't be seen as, oh, let me make a blue and purple site because that's just not going to work really well. I like to say, when we're talking about our marketing department about these sort of things, you know, it's not my space. You really shouldn't be having a black background, lime green, anything. And luckily, we're really good about professional colors and condiments, so that's awesome. If you need a resource color oracle, just Google it, is a very good source to find the colors that will work for your group that will not alienate one in 12 of your potential consumers. So music and video, I think everyone can agree that music that starts automatically or video that plays automatically is the most irritating part of visiting a website that you may not know anything about. I mean, you might have a great product or you might have, you know, a great news clip from, you know, CVS that's covering some value. But if it starts automatically, if, you know, I also sing some music late at night and then next day I come to work and then I hear from ABC at like full 100% volume, that's going to turn me off to your website. It's going to turn me off to any website. And if you are reading through a screen reader, you're trying to hear sort of the dictation of the text that's on the screen. And then you're also trying to like, you're trying to blot out the video that automatically started. So that's not a good thing for anyone. So just don't do it. So flashing images, I think most groups don't do these anymore. You have to be sensitive to people who may be sensitive to flashing whites who have some neurological sensitivities to flashing whites in the late 90s. There was an episode of Pokemon that actually caused a couple dozen kids in Japan to suffer seizures because the lights were just really, really aggressive. So there's a tool as well that people can use to see like, is your website liable to trip that option? And that's always useful because that's just a really, that's in addition to music being really loud or video automatically starting, but if that also takes place, I'm less likely to visit your page again or use your product or whatever your website's trying to do. I'm probably not going to come back to it. So scrolling considerations, you have to make sure that like any elements that are on your page like images that fly by can be paused so people can actually look at them. Keyboard functionality, I have a lot of fun with this one for some of the staff that I work with, they come to me constantly with problems like, my mouse skipped. It's like, no, your mouse, your cursor didn't skip. You're just touching your track pad. So we tend to disable the track pads for some of our staff because they will otherwise touch it and come to us with complaints about it later. So if something happens and they lose their mouse and we have to get a new one, we have to tap through our website and tap through wherever we're going. So that's a good test if you don't want to call up a screen reader or you don't want to invest in anything just yet, just try it. If you go on your website and you start pressing tab, does it make sense to what you're going? If you're pressing tab and you're doing your cursor keys, can you get to a page that you want to get to? Or are you confused or are you being sent to a completely random place? So that's always a very practical consideration to have. So before I started working here at Cradles, I worked for UMass Medical School and I worked for a particular division called CEDR, C-W-D-E-R-D, the Center for Disabilities Evaluation and Research. And what we did there was provide research for the state and for big businesses who wanted to work around accessibility issues for people with either physical disabilities or people who had IBD disabilities. So DDS here in Massachusetts actually was a big client of ours. So what this comes to is for every document that we produce for them, like any report, any graph, any summary, we had to clear this document for accessibility. It was legally a requirement that we had to have because a lot of our funding, again, came from state or federal sources, which is pretty massive. So has anyone here tagged the document before? Oh, I hate it too. Do you? Especially when you have 150-page documents with graphs. So this is luckily an innate feature in Adobe, in the PDF reader. So you go into tools, you go into accessibility, and you start your check just to see if I were a person using a screen reader, how well would I be able to read this website? Or I'm sorry, how well would I be able to read this document? So it does things like have you read the flow. So if you have your header here, your subheader here, you have two columns, you have to make sure the first column is tagged as the first paragraph, the second paragraph is tagged as the next one. Because otherwise I'm going to hear about the war of 1812, not that great, and then I'm going to jump into the second paragraph about economic conditions that led to the war of 1812. And that's just not really helpful. I'm going to confuse while I'm starting on the second paragraph instead of the first column. And so you make all your changes from there. It's very time consuming, but it's well worth it if someone can read your document in full. And another smaller part of that that I think a lot more people are familiar with is all tags in images. So I just grabbed a screenshot of our current website and a picture that we have, and a little ditty about, a descriptive all text about what someone will be seeing, or rather what their screen reader will be telling them. So that's pretty cool. So for people with vision issues, one of the big considerations is, can they read whatever's going on in there? So the bottom left document, you see, it's awfully crunched together. I mean, it's stylistically great. You're fitting a lot of information there. But for someone who has macular degeneration or just has general vision impairment issues, that's going to be very difficult to read. Firstly, on the other side, where you have very deep paragraphs, very deep space between the paragraphs, that's going to, for some people I know, it may cause them to lose their place because there's so much white space in between, but now it's harder to read. So either way, the left and the right side, it's going to be more difficult to read. So the middle two you might want to go through. The second one a little bit more. So overall, when you're just presenting your text and font, just make sure it's easier to read both for general audiences and then someone who is using a screen reader. So when they go to user screen reader, things are clearly broken up into accessible chunks. So that'll include how it's spaced. If there's bullets, if it's just one long sentence, it's for anyone that's going to be a turn off. And especially with the way screen readers work, you can fast forward almost from one section to the other, and if it's literally a 500 word paragraph, that's a lot of information I'm skipping over, otherwise I'm forced to sit there and view in order to find what I want. So a plugin that I particularly like is the accessibility plugin, or I guess the accessibility widget. I think everyone knows that if you press control and plus or control and minus, you're going to zoom in and out of the page. Some people may not know that, but it's important I feel just to give the option of having an actual plus and minus sign on your website. It's very unintrusive. So people can view the text closer or further away, depending on what their vision needs are. So this is just a little snippet of, hey, this is nice to have if you're creating a website and you want that particular thing to be an option for you people. I strongly recommend it is an option to give your viewership. And you can also make it follow some of your own personal branding. So this is actually a... Yeah, so this is something that I think is actually meant more for product purchases. But this will allow someone to zoom in very close to an image. So the way I think this would be useful for someone is, you've got someone who's looking at their 50-year reunion website, they're looking at a class of... I've got to do math on the fly. They're looking at their 1960 something class photo. Well, that's like maybe 200 people, so if they want to see, they remember that, oh, I was on the bottom third row, they can zoom in instead of peering very frustratingly at the screen. They can zoom in and see every person and find them, find their friend, whoever. So these are two apps that let you do that. Again, I think they were primarily meant for products where you could sort of see, the texture of this vase or what have you. And another feature they found for zooming in and out of the screen is font resizer. I like the other option better, but it's always there for you in case you're really not a fan of working in your theme. Or maybe your settings do not allow you to do that. So media. So you have two options as far as media that I'm going to discuss. So obviously everyone knows YouTube, everyone knows YouTube has a captions feature. The innate YouTube captions feature is awful. It's as terrible as you would expect an automated machine to do. Things are capitalized. There's no punctuation, things like that. There, there, there's wrong. So you have to upload captions, which I also did my time at UMass, to make sure that when people are speaking, the captions get uploaded appropriately in time than everything. So something that I think is really cool is Oz Player. So it's actually created by an Australian company. And what it is, is it actually does a lot more of an intuitive, a lot more, I don't want to say better, but it's a more robust media viewing experience. It's creative free for nonprofits under a million with operating budgets. It's available as a plugin as well for your WordPress site. And it's overall, if there's something you can do to make your site better for individuals, we recommend it. So a couple of resources that I recommend. It's, I mean, this is the United States. Try the government site. It will test your documents. It will test your website. I've, just through attending a couple of panels here, have found that there are other individuals who also do, individuals who run companies who will also do website accessibility checks for you. It's for free. It's cool. That's kind of nice. So if you're not a developer, if you're just a company that's looking forward to, like looking to do this, there's other resources out there. INDEX is actually a, it's a department within UMass that is run by a person who actually, he himself has vision impairment. So he knows more than anyone why it's important to have accessible websites. So I would recommend INDEX first. It's local. It's here in Massachusetts. It's based out of Worcester. So that's pretty cool. WebAIM, I also like them. Accessibility OS are the folks who put together the OS player that we just looked over. And I attended a Nifty panel yesterday from HEX Productions. They're based in the UK. That might be a difficult trip to expense, but it's always worth looking at. And then a couple other resources, just in general, if you're looking for more, if you're sort of looking for more things to supplement, like some things you've, some things you've come here and see. So feel free to check them out. And then Gutenberg. This is a slide I added just yesterday because I attended a couple Gutenberg panels. And I wasn't sure anything about it, but I did know that while they were testing it out, they did a horrible text box where it was lime green background and like yellow font. And Gutenberg stopped and said, are you sure you want to use that? So that's kind of nice that they're, like it has some accessibility features built in. And at least won't stop poor color choices, but it will at least make you aware of them. So I don't know too much about Gutenberg yet, but it seems promising. We'll see you next year, right? So thank you for coming. Sorry for the time delay. If anyone has any questions, I will try to answer them. Yeah. So I've always heard the rule of thumb is fourth grade. Back when I worked at the center that my mom works for in upstate New York, like we had kids who were considered like very low functioning, but this one kid we had, like one of the students we had, he was obsessed with watching videos of people getting their hair brushed. He could obviously, you know, people didn't, like his teachers didn't have a lot of expectations from, but he knew how to find like what he needed. And this was in like 2002. So fourth grade. Can you speak up a little bit? I'm sorry. So the question was, do I know of any plugins that can work for people who have mobility issues, who might otherwise have issues like navigating with the maps? There is, and I can't remember the name of it specifically now, but there's a roller ball. It looks exactly like a mouse. It's got a giant red ball. And you, and this is, I think, actually used for people more, or originally was used for people with carpal tunnel. So that's an adaptive device that you would use to navigate to, you know, links that would make it a lot easier than just the teeny tiny trackpad or, you know, the inch long left and right, but a click button. That's the only thing I can think of so far. Yes. I'm across anything like that personally. I mean, it's something I can definitely research just for my own knowledge sake. I don't do development as much anymore, so there's that. But that's a good thing to look at because I did mention motor issues as one of my bullet points for, like, things you have to look out for. Okay. So, the biggest thing in terms of software and accessibility for car control hardware is making sure that you've got large macerates, which is good. You've got screens. Also, no various small things. You've got the same little things which are harder for, you know, to be able to control it so you have access to that. All right. Thank you. And I'm being told we're guillotining someone. So, thank you, everyone.