On Demand: Building and Remediating Accessible Websites

Welcome to today's digital accessibility, compliance, presentation by Imedia.

Today's presenters are John Huffstutler, Partner of optimization services and Liz Gilbert, one of I media's top web developers certified by the W. 3 C. And accessibility.

Today's learning objectives are to help you understand, identify, develop, and execute your accessibility plan by understanding your plan.

You're gonna understand the guidelines as set forth by the Doj.

You're gonna understand how you can identify where to begin developing your plan.

And once you've begun that process. you're gonna set forth on developing key elements to achieving accessibility and the execution piece you're gonna continually execute. So you can remain compliant throughout the course of your digital website experience.

Now let's understand the current guidelines, and where you might find them.

The United States Department of Justice portrays websites as being a public point of access. and they should not be limited to access to, and individuals with disabilities much in the same way brick and mortar buildings need to provide access for those people who are disabled websites must also comply.

The Doj recognizes the global Wcag, 2.2 a and double a compliance as a de facto standard for website, accessibility, compliance.

There are examples of court cases being filed, particularly in New York's Southern district.

The institutions targeted are located all over the country, and also includes educational institutions, private colleges. universities, conservatories, and large research universities.

Some of the sources of the information where you can learn more about the governance behind website. Accessibility are listed in these links.

Now let's talk about the 4 components of Wcag 2 dot, 2 double a accessibility, compliance.

Many agencies refer to this as the poor method, perceivable, operable, understandable, and robust.

The information on your website needs to be perceivable.

Let's start there

perceivable means information of user user interface components. They must be presentable to users in ways they can perceive.

This means, users must be able to perceive information being presented, it can't be invisible to their senses.

So you're always going to need to create content presented in ways including by assistive technologies, without losing meaning an example of this is, don't use bold tags to emphasize text operable user interface components and navigation must be operable.

The interface cannot require interaction that a user cannot perform.

All functionality on a web page should be made available from keyboard.

You don't want to use content that may cause seizures. and you want to be able to have content that helps users find content.

An example of of operable. And one of the things that a lot of people miss during their website. Accessibility efforts are, they don't make sure the attachments downloadable attachments, such as Pdfs have meaningful titles, and those Pdfs themselves are accessible.

Adobe makes it really simple within their acrobat tool to help your Pdf be compliant for accessibility. So you really want to make sure that when you are uploading documents to your website. Not only do you have a standard nomenclature that's descriptive. You also want to make sure that you run them through the acrobat checker for accessibility compliance

moving over to understandable information. And the operation of the user interface must be understandable. What's that mean?

You have to make the text readable and understandable? Some of the programming methods that are in use today that make a website look cool and sexy may not necessarily make it accessible.

So you're gonna really have to pay attention to making sure the content appears and operates in predictable ways.Then an example here is pages should specify the natural language of the document as well. This helps screen readers identif all the aspects within your page.

Robust content must be robust enough that it can be interpreted reliably by a wide variety of user agents, including assistive technologies. maximize compatibility with current and future user tools and establish and continually revise accessibility statements.

For example, if an image is the only content and a link. It must have an alternative text component to it.

You'll find many images on many websites across the globe that simply just have a blank alt text.

So let's talk about how you go about identifying current accessibility defects. One of the simplest ways is to generate an automated scan. There is a lot of scanning tools out there that you can use to scan your website.

Every page in your website.

One of the tools that we use is by Crown Peak. It's a digital quality management scanner. And we use this to help with our remediation efforts for clients who are looking for to be accessed, you know, website accessible? so what you'll want to do is you'll want to engage with a company or with a firm that provides these accessibility maintenance services. and you'll want to have your website scanned for an initial reading.

The next step would be to remediate those defects after you've documented them and then document the fix.

Some customers also choose to have their website after this 1st step. Viewed using assistive technologies such as the jaws. Reader. you can take that step if you want to. But typically an automated scan can get you well into the A and double a compliance zone.

As mentioned earlier, one of the things that are overlooked. Printable material and and downloadable materials are are not compliant in this example. The Pdf document is not compliant, and this document is on a prominent Ivy League University's website for instructional purposes. Yet the document for download for the students is not accessible.

Oftentimes one of the other things that's overlooked and and are shared on on many websites are word documents. and you'll find upon downloading them, checking the accessibility. You'll find that many of them don't adhere to accessibility, compliance, best practices.

Word also, like acrobat, makes it really simple to check your document for accessibility and remediate any of the defects.

This is something that everybody should do along with again making sure your nomenclature for that document nameis descriptive in nature and adheres to some type of internal standard.

And let's talk about human review. So human review is essentially a review of your website and by individuals using assistive technologies.

This ensures a deeper level accessibility throughout your website.

It'll help you identify at a more granular layer how your website is behaving to screen readers. Now, these screen readers aren't hardware devices you can actually purchase and download software-based screen reader from freedom. Scientific jaws is de facto standard for screen readers for the blind or visually impaired. And it helps them.

The screen reader helps read your website and pulls the information to an output device like their computer audio or or a braille display.

This is critical for many websites that may be focused on serving the disabled community, but it's probably something you should take on at least once a year, and either your internal accessibility team or a authorized partner that's well versed in in the jaws. Reader. we do recommend that at least once a year. Your your site is reviewed in a human fashion with these devices.

So now that you have all the tools that you need, and you have a readout of your defects on your site as it relates to A and double A.

Let's look at developing your plan.

So your plan should really allow your accessibility team to quickly process the results of the Automated and Manual Review.

A lot of the Times. The results can be exported to an excel file and documented and reviewed and dispersed throughout different team members that are capable of fixing these errors.

What you should do is you should document the scan, date and time.guideline violation, date, remediated remediation, defect, solution. the manual review date. They remediated and they remediated. Defect, solution, detail.

What this does is. It begins to build your paper trail in the event that you receive a demand letter from a legal institution or a legal firm, saying that your site is out of compliance.and the purpose of the paper trail is to demonstrate that indeed, you pay close attention to accessibility.and that you take it very serious. And you have an ongoing program. This can really help mitigate any further litigation from whether it be a governmental agency or a private law firm as a follow-on to that.

This isn't a 1 time one and done execution.

What you really need to do is realize this is an ongoing process. So you really need to develop your plan. and you can do this with 4 easy steps. So either get with a partner or facilitate an ongoing, automated, scanning initiative with human review. Twice a year.

Our automated scanning services. Scan your website once a week and we report to you at at a high level report with your paper trail once a month we have an ongoing remediation effort depending on the output of the scans during the course of the month, and then you get a read out from us on how that month turned out from an accessibility perspective at at the end of each month. So this allows you to always have that paper trail at hand.

You want to also make sure you create an accessibility statement. You want to make sure this is validated by your legal department.

All websites should have an accessibility statement. And again. what this does is, it makes A it known to your audience that you take accessibility very seriously and you can have one listed throughout your site could have it listed on forms. You just really want to make sure that your website visitors are tuned in to the fact that that you do take this seriously.

You again. You want to conduct your regularly weekly scheduled remediation tasks on anything that has been identified.

You want to document your plan, your scans, your reviews, your policy, and you want to store them in a secure location below. We. We give you some sample accessibility statements. They can be anywhere from a paragraph to a page. It really depends on how much you want to say about it. I think the biggest takeaway here as you want to give folks a contact, a way to to reach out. If they're they're having problems interacting with your site, due to an accessibility defect.

I think one important note that you should realize, especially if you're operating a commerce site is that there are millions of dollars in lost revenue opportunities, because a lot of the commerce sites out there don't really function in a manner that's friendly and accessible.

It's gotten a lot better over the years.

But as a commerce operator, you could really benefit from making sure that your whole site experience, including obviously checkout the whole checkout process is fully accessible to screen readers.

This is an area where we would recommend that you did human review, maybe once a quarter so 4 times a year, just to make sure, as your site evolves and changes that. it's remaining compliant.

So let's conclude by just wrapping up what we've what we've learned today.

So now that we know the law and the risks and how to achieve compliance, let's just put it all together into a nice plan. So you really want to start with an automated scan.

Also, after that you want to do a human review at least twice a year. I would say up to 4 times a year. If you're situation calls for that. you want to have your remediation plan in place, which is essentially documenting the defects, both a and double a having a place to store the defect issues as well as the result for the fix.

And then all this is compiled into an ongoing maintenance plan which is essentially scan review. document, remediate rescan rinse and repeat.

That's essentially your ongoing accessibility maintenance plan. And this really helps you build that paper trail for a few reasons, but mostly if your approach with a demand letter, or by some type of legal person who is looking to sue you because they indicate your site is not compliant.

that's all for this section of the presentation. I'm going to hand it over to my colleague. Liz was going to take you through some high, level. technical side ofobservations that that she makes when she's going through a defects list.

Hi! I'm Liz and I have a certificate in accessibility from the World Wide Web consortium. And today we're going to take a look at some quick and easy tips and tricks for going through your website and fixing some accessibility issues as our example, we will be using our own website, imediainc.com.

And typically what we recommend doing is, you have an automated scanner that maybe runs once a week once a month. However often we personally use Crown Peak digital quality management. and that runs once a week and then prints out this report of accessibility issues.

and all the reports are probably going to look a little different. But they should have all the same information.

So you can see we've got our level, a issues level, double a issues and level Aa. and then if you click on these to expand them, you'll see it'll give you each of the checkpoints that you want to check. And if you're not sure exactly what a checkpoint means like looking at this, if you're not sure what image I'll attribute should not be empty memes.

We do have a link to the Wcag quick reference, and this goes into detail for every single issue that they are going to be scanning, and shows you kind of walks you through how to meet those requirements.

so you can see, all of them are over here, but you can also within here, click on these to expand it and then click to get even more information.

And so if we take a look at an example in here.

So if we take a look at on focus, it looks like we have a lot of issues here. So if we click into that and then click into this item, it'll give us details. It'll give us a list of pages where these issues are occurring. and then, if we go into one of the issues in particular, it will take, give us the URL, and then it will highlight on the page where the issues are. So you can see these issues are all down here.

And it's just saying that these are opening in a new tab. But there's no indication that they open in a new tab.

and so if we were to, then go to the page itself and scroll down. if we right click on one of these issues and click inspect. you can see that it does open in a new tab because of the target equals underscore blank.

However, again, there's no indication that that is what that's doing. And there is a couple ways that you can fix this.

You can see we do have the screen, reader, only text. So you could add something there. And we're just going to do this in the browser. You could add something there that says like open as in a new tab or something similar.

And that way a screen reader is going to read that and say, Oh, this opens in a new tab and lets the user know that if they click this link they will no longer be on the imedia site and it will be in a completely different. Tab.

Another alternative is to if you update the actual, a link tag, and you go in here and you can do aria label.

And in that label, you can say, I recommend saying the link basically very similar text to what it says in the screen reader. Only.

So something like Facebook opens in a new tab.

and if you update that, and then, once the scan runs again, it would list this as fixed, so there would be one less issue and again, a lot of them so like this in particular, because we are looking at 294 issues, this is occurring in the footer, so if you fix it in one location, it should fix it everywhere.

So if you are in the dev tools, particularly in chrome, there is a plugin called lighthouse that you can use to generate an accessibility report on the fly. So if you click on this tab in the console.

and you can just do navigation device. We want to do desktop. In this case it doesn't matter, because it is showing on both desktop. And just because we're only going for accessibility. Right now we can uncheck everything else and click, analyze page load.

And in this particular case it's not going to show that as fixed, because I just fixed it in the dev tools.

But once you have the permanent fix up on your site you can run this, and it'll show you right away where the issues are.

And so again, you can see there's a couple issues that need to be fixed. But for the most part this page is doing pretty good.and it again may not necessarily catch everything, because this is a quick run instantly, tool instead of one that scans your whole site and is very, very thorough. So that issue actually isn't in here. But you can see we have a different issue where the heading elements are not in a sequentially descending order.

so we could go in and fix that on this page and then rerun this scan. and it would show these items as fixed. and another common one is color contrast. That's probably that. And using, just quote, learn more or read more as the link text are probably our most common issues that we come across with our clients.

And obviously to fix the link text, you would have to update that so that it's more descriptive. So it says, learn more about Kentiko connections. or learn more about whatever it is trying to send the user to for the color contrast, though we tend to use this Wcag contrast tracker and you basically put in the foreground color, which is the text color. And then the background color. And as a reminder, you could get those by going on this page. So we'll scroll down where it has some color. 

So if you do inspect element. you can highlight this and see what the color, the background color is. So this is our background color. and you can copy that and paste it in the checker.

And then if you go back to this tab. The text color, then, is up here, and it is black. So it is. What's in there, but you will copy it. and again paste it in the foreground. And in this case you can see this does pass Aa and Aaa, as well as Aaa on smaller and larger fonts.

however, for someone with color blindness, this does not pass the test. So if you click the C gray scale button. this is what someone with complete color blindness would see, and you can see that it is kind of it is pretty hard to read.

So then, if you go back, we could go in and modify these colors so that it passes all of these criteria, or whatever criteria you are trying to pass.

But fix as much as you can, using all these different tools.and you will be well on your way to having a much more accessible website.

Jasmine de Guzman

Hi everyone, and welcome to this breakout session for the accessibility.com event. So thrilled to have you joining us here today as we're going to be talking about the intersection of digital accessibility and trust, a very important and exciting topic and a new look at accessibility. we're very proud to present this on behalf of Acquia. And so, you know, my name is Jasmine, and I'm going to be taking you through this presentation today.

So for those of you who are not familiar with von Sydow, we are a web governance and accessibility tool that helps scan your web site on a weekly, ongoing basis so that you can proactively address and find any accessibility issues on your website before it impacts users. we have a browser extension that makes it easy for you to work on page, which we're very, very proud of and have, thousands of customers that use. for those of you who are familiar with us, you may also know that. And for those of you who aren't, you may also know that we have recently joined Acquia, and we're very proud to be part of the digital experience leader and bringing web accessibility to even more organizing around the globe, as well as Acquia. Fantastic landscape of customers and partners.

And today we're going to talk about a couple of different key topics. So as I mentioned, we're looking at the intersection of digital accessibility and trust. And so what I really want to look at first is just the digital accessibility landscape. and then look at how we're defining digital trust in the world today. there's no right or wrong, but they are definitely intertwined.

And then we'll look at and that is I will then have a look at how they intersect. Last but not least, I don't want you to walk away empty handed. So we do have some great resources for you so that you can continue on your accessibility journey as we jump into this. I do always like to go through an introduction of digital accessibility and just the different aspects and elements of it.

Many of you are here today because you want to learn about accessibility, and I applaud you for taking the first step. but one of the things that often confuses people is the difference between physical and digital accessibility. Physical accessibility is something that there was a lot of legislation around, and the 80s, 90s and early 2000 and these are things like making sure that there are ramps into buildings or that, hallways are wider so that people in a wheelchair, for example, have free mobility and accessibility in the physical space.

What we've seen in recent years, and especially after Covid, where a lot of the world has traveled to transition into more of a digital approach, is that these digital assets and experiences are not necessarily accessible. And that is because there's a couple of basic things, but also more advanced and complex ones that need to be built into these experiences to ensure that assistive technology, such as a screen reader, has equal access to browsing and navigating things like a website or a mobile application.

But other digital services and experiences also fall under the realm of digital accessibility. this can be something like when you go to an airport and you're trying to check in on one of those self-service kiosks, that's a digital experience. that is not necessarily accessible to everyone, and there needs to be valid and usable alternatives. know, we specialize, of course, in website accessibility, which is a huge thing because it is the portal and the central part of your digital experience for your customers.

While all three things here have in common is that they're all governed by the Web Content Accessibility Guidelines or WCG or what category, or sometimes here, other people in the space mention them. These are internationally recognized standards that have been published by the World Wide Web Consortium, W3C. And while they are guidelines, they're also a set of rules and rules that many different legislations, recognize and point to.

So the landscape, where you might be in your state or your country can definitely vary. There's plenty of national and federal legislation. but may or may not apply to certain types of organizations. Same with state legislation even more local in some instances. Most of these types of legislation. I highly recommend that you consult with your legal counsel to find out more about what you should be looking at, at what your specific cases in terms of accessibility compliance, both on the physical and digital side.

But the one thing that a lot of these regulations have in common is that they're not setting new standards or guidelines for digital accessibility. Rather, they are referencing the web content Accessibility guidelines. So whether you live in Manitoba and Canada or in New York or Texas, the Web Content Accessibility Guidelines are a very safe approach for you to work towards accessibility, compliance.

accessibility compliance is also changing. the web content Accessibility guidelines exist in several different versions, the latest one being 2.2 that was published in October of 2023. And so, yes, legislation may not yet be referencing the latest version that's published. We do always encourage people to make sure that their digital experiences are as accessible as possible by trying to maintain that, uphold and work towards the latest guidelines, and ensure that all aspects of their website or other digital experiences are, equally accessible for all.

So why should you care about digital accessibility if this is something that's totally new for you, it might be something that you underestimate of how many people it impacts. the World Health Organization has a statistic that around 16% of the world has a disability. That's about a billion of people in the world. so it is definitely something that we do need to think about as well.

A lot of accessibility principles don't only benefit people who have a disability, but all of us. if you have a temporary disability, meaning that you need enlarge text on your phone or on your digital devices, accessibility principles will make that more of more of a user friendly experience for you. Same as we age, the elderly segment is growing immensely and some of the latest updates from the accessibility community, like the wcaG, recently introduced, a new standard that says button sizes.

need to be of a certain size, which is incredibly helpful when you're on a mobile phone and you have a shaky hand, for example. This is something that could also be, situational. For example, let's imagine you're riding a train or a subway and you're holding your phone and trying to press a button and your hands are shaking because of the vehicle.

ensuring a certain minimum target size is incredibly important and makes the digital experience more usable for you to. Beyond that, of course, it is a legal requirement, so make sure you do go out and educate yourself on what's applicable for you. But as I mentioned, it does really impact and benefit everyone. having clearer, error messages on forms instead of just red highlights helps all of us better be able to understand and engage with our digital experiences.

It makes it easier and straightforward. Of course, it also creates new job opportunities. There is lots of different things to do in accessibility and we are all responsible. And I always say accessibility is a team effort. We're all responsible. But it does also mean that you can get more, experts into your organization. But last but not least, it is the right thing to do.

There's, of course, a lot of different human factors that play into this as well, because accessibility is essentially also about inclusivity. And so, whether that is ensuring that everyone has equal access. the other things that it also plays into is making sure that it is an inclusive experience, regardless of diversity, or ensuring that there is diversity, that you're embracing language.

And a great example of that is that there's a large part of a population in the United States, for example, that has English as a second language. Are you making sure that your content on your website is accessible for these people who have English as a second language? but making sure that you're using plain language or simplified language, but also other factors, of course, include gender, age, culture, ability and environment.

And by embracing accessibility, you're hopefully also embracing these other factors for inclusivity as you're building up this accessibility and inclusivity. championship for your digital services. All right. Well, what does this have to do with trust? And this is where I want you to think about how would you define digital trust in today's world? Because for me, a lot of different experiences depend on how seamless, the experience is.

And that's what makes makes it trustworthy for me. Would I go back to that website? Yes, I would, because it was a smooth user experience, but a smooth user experience also means an accessible one. Let me give you an example. one of, a person who I know who is an individual who was blind was booking a hotel trip.

And it was absolutely fantastic because most of the different elements on the hotel's website were fully accessible until the very end. As the person was getting ready to check out the I accept terms and conditions checkbox was not accessible and so does not make it a trustworthy site or no. Maybe it's still a trustworthy site, but it definitely wasn't a seamless experience.

And that person probably wouldn't recommend that hotel website to another person who was, for example, a screen reader user. So yes, while accessibility and digital trust are two different things, they are inherently interlinked because making an accessible and user friendly experience increases the level of trust in a website or did other digital experience, and thereby also hopefully spreading the word of mouth amongst other people.

Another important accessibility. feature that I always like to talk about when it comes to digital trust is consistency. So as you start digging into the guidelines, some things that they'll talk about is ensuring that you have a consistent structure for different websites. And so what you'll see common here is that all of them have a top a navigation in the top.

They have a similar layout in their navigation. I'm sure if we scroll to the bottom of all of these websites, there would also be a sweater in the bottom that also follows a very similar pattern. Making sure that you're following tried and true trusted best practices for website design or other digital experiences helps reduce the confusion when you're navigating, these different experiences.

And it's also good accessibility practices. So that is something where digital accessibility and digital trust really go hand-in-hand. If you go to a website that is testing a new, setup where the navigation was in the footer, you probably would be a little bit suspicious and not see it as a sign of trust. So while the very small subconscious changes, those things can really have a big impact as to whether or not we feel comfortable, engaging with the digital experience.

And also, if they're not accessible, that will add another layer onto it. Another couple examples are for for example, here on the right we have an SSL certificate. Making sure that these experiences are accessible. And this might be an SSL but make sure that there's it's trustworthy. but also making sure that screen reader, for example, is able to navigate this kind of a pop up message is incredibly important.

So, yes, there's some people who forgot to add an SSL certificate to the website, but making sure that people can navigate around that and not be stuck in a keyboard trap is incredibly important. Another really important example here is with banks and other kinds of systems where you require login nowadays that want two factor authentication. A lot of different systems, digital experiences are built up around two factor authentication.

That's not necessarily, accessible. So for example here, if I were to have if I discovered unauthorized use of my card, I would get a text message from my bank letting me know. The interesting thing was, and the first thing I did was Google, is this the right phone number that I should be receiving this message from?

To make sure it was not a scam? And this is where your website with an SSL certificate is incredibly important, but even more so, it's important that this is accessible so that everybody can access this information and not get confused by any kind of two factor authentication. In addition, two factor authentication is notoriously inaccessible. So making sure that you're building an alternative method, whether it be, sending a link to someone's email instead of asking them to retype in a code that's an important consideration.

Last but not least, I did just want to go through a couple of different elements of digital trust. All of these are not related to accessibility. Some of them like an e-commerce experience, making sure you have a secure checkout flow and trusted payment options are, of course, more related to the e-commerce experience and digital trust. But if the e-commerce experience is not accessible, you will then again lose digital trust and someone will choose another vendor.

Same things go with compliance statements or just the user experience in general. If there are any one of these, if they're not accessible, how are you supposed to trust the organization? Right? So if, for example, wider recognition, a lot of websites have a customer logo bar, that's great. It's supposed to create some kind of recognition for you as a consumer as you come in.

But if you have not properly like label those different logos explaining what it is in the context that their customers that you're already working with, then it might just appear as a screen to a screen reader user of logo 54. And that's not helpful. That doesn't create digital trust. In fact, I believe it decreases digital trust. And the same goes for privacy and ethics.

If someone needs to, for whatever reason, requests personal data, making sure that all of these key processes, that people need to be able to perform in your digital experience or your website is incredibly important. I hope with that. it was a little bit helpful to think about how improving web accessibility can improve your digital trust of your organization on your website.

we're very excited to be celebrating Global Accessibility Awareness Day later this month, and we'd love for you to join us. We are hosting a webinar on the hidden costs of ignoring digital accessibility, and you can visit us at acquia.com/guide for more information. We've also got lots of great content on Acquia TV, which you can subscribe to, and we're excited to have a recent episode, that was published with Merrill Ovens.

And with that, I just want to say a big thank you for joining us today. If you're curious to learn more about Von Sydow, please do feel free to drop by our virtual booth here today, and you're welcome to reach out to us on our Qualcomm as well. And you can request a complimentary website scan. Wishing everyone a lovely day.

Thank you so much.