Web Accessibility and Opening the Digital Door

Expert developer Amanda Blake discusses the definitions and tools associated with web accessibility and common ways to improve your website’s accessibility.

Episode

Transcript

Lisette: The transcript for this episode can be found in the show notes. Nearly 20% of all Americans have some kind of disability. About half of those are considered to be severe disabilities. By ignoring accessibility needs of your audience, you will inevitably lower your page views, limit your website statistics and narrow, if not isolate, your target audience. I sat down with Amanda Blake to get a developer’s perspective on how to make your website more accessible.

Amanda: Hi, my name is Amanda Blake and I’m a developer here at WDG and I concentrate in the front end development mainly, but I do also work on content management systems for wordpress and Drupal.

Lisette: How did accessibility start to kind of enter into that?

Amanda: So I’ve been in this business almost 15 years and when I got into development, oh so long ago, I was lucky enough to have a mentor that was very involved in accessibility and so we would attend Refreshes together. And a couple of those other events that were accessibility focused and one of the very first refreshes and Baltimore and that I had attended in my professional career was of a blind user going through websites and using screen readers and pointing out his pain points and telling us what we could do better and it that, not that it wasn’t real before, cause I don’t want to say that it obviously was, but to actually see somebody using these tools that they have at their fingertips to read the websites that we’re creating, it really does make you think about how you want those websites to be presented to everybody and that’s the whole definition of accessibility is to break down those barriers and everyone have the same functionality do across the board and be able to do all the same things no matter what.

Lisette: Refreshes are events hosted by new media professionals and agencies like WDG. They offer discussions on a variety of topics in new media. They’re also a great way to learn about topics like web accessibility, but not everyone is exposed to this type of education and that has real world consequences. In 2018 lawsuits against noncompliant website owners have hit record highs, a suspected 30% more than 2017 education and government services have been particularly scrutinized for accessibility requirements, but the private sector is also open to legal action. Many of the accessibility problems on the web are easily solved. Hopefully most of the people listening are motivated more by the prospect of reaching more users then avoiding lawsuits. But it is an important point to consider either way. What does a process look like to make your website accessible? What are the guidelines? What does accessibility actually mean online?

Amanda: Yeah, they, we’ve had a, I’ve had a few clients in the past that did have accessibility in mind at the forefront, which is awesome because sometimes you don’t hear that very often and it was just kind of working with them, educating them more if they didn’t know that some of the guidelines to hit. And then again, throughout the stages of the project, making sure that color contrast, when it comes to content entry, they’re entering alternative text for images. That’s a huge one. Uh, when it comes to the content creation and structure itself, making sure that you’re using heading tags, paragraphs, lists, you want your, your content to reflect all those items available from html semantic meaning. And that helps when it comes to accessibility and SEO, which is another big topic for, for a lot of our clients. Yeah. It’s interesting that you bring up like, um, clients that even though they do prioritize accessibility, they might not, um, know a lot about it. Like, can you talk about the types of clients that we tend to see accessibility? Like they say that it is a priority but might not have, be well versed like you, what kind of industries do they tend to? Government is a big one and maybe not necessarily a huge government agency, but an offshoot obviously for them. Section 508 is the government standards that people need to follow. It just outlines that, uh, any federal agency needs to create content in a manner that successful for everybody. Inclusive in what they’re similarly like.

Lisette: I’m curious on, um, you know, the struggle that is trying to define, you know, what these guidelines are for accessibility. Um, and how you work with accessibility.

Amanda: Sure. Well, there is guidelines, it’s called WCAG, which stands for web content accessibility guidelines. And that’s made up of a consortium of people throughout the world. It’s individuals, organizations that all come together and try to define these rules and regulations that people should follow. And they do have pretty good documentation on their website. Sometimes it’s a little hard to weed through if I can say that, but they do a very good job of giving you those baselines to hit how to even test for them and the, uh, criteria to pass on those things as well. So I can’t say that I know every single detail level of that in and out, but I do refer to those, um, during projects and making sure that we’re hitting, uh, our basis. We also have an accessibility checklist that we try to follow here just for some of the standard things, making sure that we’re checking off those boxes as we can throughout the project. Yeah. So with the web content accessibility guidelines WCAG uh, there’s three levels, one, A AA and AAA. And it’s just the how, how far you go with making the websites accessible and, and what your needs are. So level A is the lowest level. It’s fairly easy to make a website that is a level I or I’ll touch on almost everything that’s a level eight in those guidelines. And then as you move up, it becomes the AA, which is something that we here at WDG try to adhere to when we are creating our websites. Or at least that’s what’s in our mind as developers and whatnot. And when we’re going through the websites. And then AAA is the more detailed, deeper view of accessibility. And a lot of times it’s more geared towards a specific disability in mind. So it’s like taking that level 2 and just making it like making a few more tweaks to really get it down. AAA is specialized and you see that a lot of times in certain industries. So finance or banking, uh, healthcare, government could be one. It depends. Um, you know, and, and something to keep in mind with that is who your user base is too. It’s not just that you have to follow these cause you’re in a certain industry, but who is your end user base, you know? And, and what are you trying to, what goals are you trying to accomplish too hefty amounts.

Lisette: Would you say that there’s any particular feature on a website that’s more difficult to make accessible than another?

Amanda: I think it depends on what you’re trying to do. Forms are, like I said, they’re, they’re not always most difficult, but it depends on what’s available to you. So a lot of people use content management systems. So if you have a plugin that does forms, make sure that that form plugin is accessible or double check that it is. Maybe work with the code a little bit more, maybe reach out to their development team. Depends. So as developers, we do rely on third party software and that’s not always accessible. Right. So that’s something else to keep in mind as we’re developing. Yeah. And for people who are, who are, you know, in those content management systems, trying to like, oh, use this plugin for our forms. Not knowing whether or not they’re accessible or not, especially if a decent chunk of your audiences are going to require you to be accessible.

Lisette: Do you have a time where you felt like that was something was inaccessible to you and not necessarily just like, like reading, cause I know for me, um, when I had a concussion two years ago and I couldn’t, I was screen sensitive. So a lot of the stuff that I could consume, I couldn’t, I couldn’t be on a screen for very long. So I noticed that, you know, I, I couldn’t watch a lot of TV or when I did like I could just only listen. I listened to a lot of podcasts, but like, you know, it was there a time where like you started to recognize like things that were not accessible to you. Or maybe because like, another example that it was just written just very badly. Something was written very badly. It was not explained very well.

Amanda: Sure. I mean I think we all see that every day. Uh, even as developers and you become more cognizant of, of how websites should be. I’ve definitely run into some doozies of websites where, you know, even as a sighted user able to use my mouse, everything like that, I still couldn’t get through and complete the form because forms are a big one. I will say that forms are one of the hardest things and yet one of the easiest things to also make accessible. But we, a lot of websites fail at that and one of the big things is not providing that feedback when you’ve got an error or whatnot. And if I get something like that, I’ll just go to a different website. I’m done with them, you know,

Lisette: I literally just had that happen to me. I’m like, I think it was like yesterday when I was, I was trying to buy some shoes and I was trying to, like they gave the popup on my phone and to sign up and it just kept like doing air and I’m like, hmm,

Amanda: Why? Why?? That’s exactly, that’s exactly, the forms are a big issue. Um, and uh, yeah.

Lisette: Like what are some of the things that you use to make forms more accessible?

Amanda: Forms have a pretty large guideline, a subset in, in every, in the documentation. And one of the biggest things that people tend to not want to include because it takes away from the design for whatever reason is labels. We want to know what my form field is and why I should be filling this out. Like what, what is it? You know, and then a very simple thing to do is make that label, relate it to the input. So as if you tab or click on the label, it should bring you into the input and you can start typing right away. And um, a lot of times the, in some of the design patterns that have been out there, the labels may be hidden because that’s a way to do it too. You might not see it visually on the screen, but it might be there, but at the same time, time, why isn’t it right there? Because even when you’re, when you’re busy, you don’t want to like I’ve definitely, you know, put the wrong information in the wrong field because I didn’t know which aligned with right, cause it’s not very clear. So, and then, um, providing that guidance on whether you’ve filled out the form properly or the field properly right away is also kind of a good indicator. So if there’s some sort of validation on there that tells you no, you’ve messed something up, you forgot the, the “at”. I think it’s called the “at”. If you forgot the at symbol in your email address, then it should tell you. Yeah, you’ve forgotten something like that. Uh, another easy thing, especially if you have a content management system is make sure all your pages have a page title. This is the first thing that the screen reader reads and first indication of what your content is about on that section. It’s a very easy thing to do. Something else that we recommend is to never use images that contain text that that has gone away with the progression of html and CSS. You don’t really necessarily need to create images that have a lot of text in them cause there’s other ways to do that now. But that’s still something that you do see in the, in the web world. Yeah. Yeah. Yeah. And we touched on it a little bit with video and audio. So having no transcripts, captions, yeah, that’s super important. Very important. And it, it’s daunting sometimes to people to do that type of stuff and to cover all those bases. But you know, at the end of the day there’s multiple uses. There’s also multiple uses for making sure that you have all texts, even for your own internal teams to make sure that you know where content needs to go. It’s a little bit more organized, more governance associated with it. Um, so it actually ends up being easier further down the road, especially if you use like automated transcription tools or you use these testing. Um, and it also, Eh, for, for, for content and making sure that you’re writing, um, at a certain grade level, it also just makes your writing better. Um, and I think that’s, that’s something that a lot of people kind of avoid doing. Making the web works accessible is just making your content better in a lot of ways and making your user experience better. And that’s one of the things that we start at with our, our clients too, is are you going to look through your content and do a contact refresh? Cause that was at the time to do that. And, and it should be done. You should be reviewing your content fairly regularly, making sure it’s still in line with your, your ultimate brand messaging and, and your goals at your websites trying to accomplish and something that should always be done. Developers are not just considering what the client’s need for their site. They’re also communicating with designers and with themselves on how to best serve users who need a more open and accessible web.

Lisette: Yeah. So what is, um, uh, one of your favorite areas of creating these systems in a way that’s accessible? Cause when we talk about accessibility, we’re not just talking about, you know, like at hearing to the Ada, the Americans with disabilities act, but we’re also talking about accessibility and user accessibility and ease of use. Right. So what are some of the things that you like to, to prioritize in your work?

Amanda: Yeah, definitely. So when we start a project development usually involved, so we get to see some of the wireframes and designs and that’s a good time to start the accessibility process. It starts at the very beginning and we’re looking out for color contrast and link text and how the images are laid out in such a way that they make sense with the content and how ultimately contents laid down on a page as well. So even though we’re, we’re developers and we’re focused on mainly, you know, producing the html and the styles. Yeah. Building everything, we still concentrate on some of those forefront accessibility areas, you know, and we’re always keeping that in the back of our mind and trying to educate others and make awareness of that topic.

Lisette: What are some of the things that um, you found are important notes to pass along, even kind of back team to like to designers in terms of accessibility?

Amanda: Oh definitely colors. Um, so one of, one of the easiest things that you can do is have your colors be accessible and that has to do with the contrast ratio between the background color and that text color that you’re using. And it should be differentiated from the rest of the text on the web page if it’s in a content area. So we always try to make sure that we’re adhering to to those specifications. And it does change depending on some of the, the rules and ins and outs of the accessibility guidelines. Us as web developers need to be on the lookout for things like those third party plugins that we have the choice to, to city it suggest one over the other. If it’s not working the way that we want it to work, then we should darn well be changing it out for something else. That’s our due diligence.

Lisette: 20% is a massive number regardless of how you personally break down your audiences. When you think about who you are bringing to your site, some of those considerations and access points may be unintuitive. Do you have any ideas of audiences that, cause we talked about people who have hearing and sight impairments, but are there any other um, uh, disabilities in mind that you’ve, you’ve been exposed to that might not be intuitive when it comes to accessibility?

Amanda: There are a few different aspects of accessibility that you definitely need to account for. And what you said was a great example about your concussion and it was a temporary thing. Something else that would be a temporary impairment would be even pregnancy is considered that to a degree. And then think about you’re in a crowded cafe and you can’t hear what’s going on to your headphones in and you need to be able to watch those captions on those videos and stuff like that. So you’re, you have a broken arm and there’s like a whole wide variety of that aren’t permanent disabilities but more on a temporary basis that you just need to think about as well. Um, it was at a different refresh in Baltimore and uh, we had a young lady come in that was fully disabled for the most part and the only way that she can navigate the website and she had a little robot that kind of came with her and on there was a joystick to that was how she toggled through the websites was through this joystick that then talked to the websites. And that was another thing too. So I think we all just need to keep in mind that it’s just about making the web inclusive for everybody.

Lisette: Exactly. It’s interesting because, um, I think this is this connection to one of our new clients. Um, they have, um, one of, and, and also actually a couple of our clients I’m sure also have this consideration, but they don’t think about it and accessibility sense is that there’s age, older audiences tend to have disabilities, especially sight and hearing. Um, so when you think about also your target audiences, if any of them include people who are seniors, you need to consider their capacity. Um, cause that’s a, yeah, one of our, we had a conversation with one of our clients recently about how to attract both audiences from varying age groups because they were trying to get younger audiences, but they, they’re, I think their target, their target, what are their target audiences are primary audiences were like 70 plus.

Amanda: So that type of thing, it should be an automatic like yes, you need to be considering how, uh, people with sight and hearing impairments are going to be using your site. Definitely. And, and that’s more where that, uh, AAA level kind of comes into play with some of those more ingrained issues that you need to account for. And it’s something easy is, uh, and I think this might even be a AA compliance guideline, if I remember correctly, but your website should be able to be zoomed to 200% and still be completely legible. So for the, that elderly, um, user base, that’s definitely a big thing for that. Yep.

Lisette: Yeah. Cause, I mean even whether it’s on, on whatever, whichever device too, I would assume is is also important. Um, I do have, yeah, like I do have actually a question on it like it in terms of being able to magnify regard like across devices,

Amanda: That’s also something that is kind of universal on our end. Yeah. We like, we’re, so we try to do that just with, if it’s a desktop, we’re just, you know, zooming into the 200% and then if you’re on your phone. Yeah. Just making sure that when you do the, the touches zoom functionality that already exists on your phone, that nothing’s really broken there. But luckily with the phones, I feel like it might be a little bit easier because okay. That just produces the scroll kind of effect to it. So it still looks all the same. You’re just kinda zoomed in a little bit closer. Yeah. Yeah. You can scroll around the page 11. Cool.

Lisette: Amanda’s experience in listening to people with disabilities and alternative needs makes her to be a better developer. You don’t have to be a developer to make your website more accessible. Sometimes the basics of making sure you label things well and adding all techs can go a long way still. If you’re convinced your website is just fine as is, Amanda has a test for you to try out.

Amanda: I’ll leave one, one final test for clients that we would, you know, recommend doing are just not even clients, just just anybody with a website and who has cares and concerns about accessibility. Tried to use your keyboard to navigate through your website and see if he can do that. Maybe you knew that. Great. So what you’d be wanting to do is, you know, can you navigate through everything in that and usually there’s a main navigation area. Can you get to all the pages from that? Is it, are you performing all the intended functionality of your website with just that keyboard? Do you know what links you’ve clicked on and everything else and if you’re frustrated then so are your users. Yup.

Lisette: That’s pretty clear. That’s a, that’s a really good, that’s really good basic tasks. And I would say in general, if you’re frustrated with your website, you’re probably right. The future of web is hopefully increasingly more accessible. However, we can only reach that future if we make sure we are listening and learning. This is Lisette Alvarez signing off for now. Thank you for listening.

Lisette: Cool. That’s great. You did great!

Amanda: I’m going to go cry now.