12 Things You Need to Know About WCAG 2.1: How it Impacts Your Work & Laws Around the Globe [TRANSCRIPT]
SOFIA LEIVA: Thank you, everyone, for joining us today for the webinar, 12 Things You Need to Know About WCAG 2.1– how it impacts your work and laws around the globe. I’m Sofia Leiva from 3Play Media. And I’ll be moderating today.
And today I’m joined by David Berman, president of David Berman Communications. David is one of the few hundred people worldwide to hold all of the highest certifications for accessibility professionals. David has over 30 years of experience in design and communications and has worked extensively in the adoption of content for electronic distribution, including accessible web and software interface development.
He regularly teaches WCAG accessibility as part of his professional development workshops. And his work includes award winning projects for the city of Ottawa, the Ontario government, and Canada’s federal government. And with that, I’ll hand it off to David, who has a wonderful presentation prepared for you all.
DAVID BERMAN: Hello, everyone. And thank you so much for inviting me back, Sofia. It’s so great to be back with 3Play again and helping with your ongoing leadership in terms of educating people about how to create experiences that include everyone. Now, today, I’m wearing a clear COVID mask. And it’s something we worked with with a remarkable frontline hero named Sarah Bloomfield.
She’s a double hero because she’s a nurse as well as a design thinker in northern Michigan. And she developed this mask, which you can create at home using spare parts around your house. And the thing about the COVID mask that I found really remarkable is that we thought that it would just be something to help people who are hard of hearing or deaf or have cognitive challenges help understand us.
But what I find is, when I wear a clear COVID mask in public, that everyone prefers it. All of the emotions that are expressed through the mouth are shared by everyone. And so everyone appreciates a clear mask. So today, we posted the instructions on our website on how to make a DIY mask. We’ll share the link with you a little later, but there it is.
It’s part of, more generally, the upside of what we see in the time of pandemic because one of the silver linings of COVID-19 has been that, suddenly, so many of our clients are saying, now we get it. Because everyone’s working remotely, and it’s distanced everything. And really, distance education, distance meetings, distance collaboration is really just a basket of temporary disabilities– not being able to see, not being able to hear, not being able to have– to be able to touch.
And so, when we design well, and when we design for the extremes, and we do it well, everyone benefits. Indeed, the very technologies that are keeping us connected during the pandemic, so many of them were developed originally to help people living with disabilities be included, everything from the telephone to the microphone to the amplifier to the loudspeaker, transistors– I could go on and on– were invented originally to help extreme users. And then, they went mainstream. Imagine how difficult the pandemic would be if we didn’t have the internet, if we didn’t have the ability to communicate.
Now, another silver lining– this is a delightful video that is from a fellow Canadian. I’m broadcasting from Ottawa today. This is [? Maeve. ?] And she’s improving her sign language skills through listening to our Prime Minister Trudeau address the nation on COVID challenges.
Sofia kindly introduced me. I’m going to talk about a few things today. And we are going to talk about what’s most important about WCAG 2.1, so you can know what’s that all about. But I’m also going to start with saying, how did we get here? How did we get to WCAG 2 and then onto 2.1. Because the road that has led to where we are today is one that includes innovation and technology in ways that couldn’t have been imagined decades ago.
And every device, every tool I show today– we have a link on our website. You can take a picture of this QR code. Or davidberman.com Accessibility Links will take you to a list of all of the links for everything I mention today.
Now, we could argue, though, the road to WCAG started on a sidewalk in Illinois in the 1950s. And I know, in the audience today, we have people from 18 countries and counting, Sofia? Is that right? And a lot of people from higher ed in the US– and there’s a lot to be proud of in the history of inclusion in higher ed.
It was at the University of Illinois, post-Second World War where a lot of vets had come back, and many of them injured permanently. And so the invention of a curb cut began as an accommodation. Fast forward to the ’70s, the 504 sit-ins. The cradle of WCAG starts with some nerds in the community that resulted in the 504 sit-ins in the uprising of Gallaudet University to demand that the leadership of the university itself should be someone from the deaf community.
In the 1990s, the Capitol Crawl where people with mobility challenges pulled themselves up the stairs of the US Senate to make sure they could be heard at a time when there were no wheelchair ramps at the Senate. And this ultimately resulted in one of the pieces of legislation, the Americans with Disabilities Act, arguably, one of the most powerful pieces of human rights legislation in the history of humanity, in 1990 in Washington.
And, indeed, hosted in New York City, the UN Convention on the Rights of Persons with Disabilities followed. And WCAG comes along in 2008. The first version of WCAG comes earlier than that. But WCAG 2.0, the one so many are familiar with, comes along in 2008.
In 2010, President Obama signed into law the Plain Language Act. In 2015, the European Union jumps forward with EN 301 549 legislation, which I’ll get into the details because it’s a key part of the WCAG 2.1 story.
And even in 2018, President Trump– I could be corrected on this. But I think the only bill that has been passed in the last four years that got 100% bipartisan support was the signing of the Marrakesh Treaty, which altered copyright law so that accessible versions of documents that conform to WCAG 2.0 and conformed to WCAG 2.1 could be made without having to pay royalties to the authors, an international treaty that, by the US signing on, made it as impactful as it is today.
In 2019, here in Canada, we got our ADA. We got our Accessible Canada Act. I keep saying here in Canada. I’m located Ottowa, Ontario. And the reason that Ottowa, Ontario, and Canada are especially important on the map is that the road to WCAG travels right through Ottawa, the capital of Canada. Because the Canadian government, the federal government, was the first government in the world to make it the law that all public-facing web pages had to be WCAG-compliant– W-C-A-G. WCAG– cool kids call it WCAG.
And indeed, today, and as a response to the deep embracing of WCAG, it’s no surprise that, if you do a Google trend search today, and you localize, you’ll find that the focus is in Toronto, capital of Ontario, first region on the planet to make WCAG 2 compliance conformance the law, not just for government, but for private sector, NGOs. Any organization over 50 employees in my province of Ontario must have WCAG 2.0 level A conformant websites, now for years.
And come January 1, 2021– there’s a deadline coming up in three months, that all of those organizations need to be 2.0 AA compliant. So Canada, the US, England, other countries in the world are leaders in this trend. But WCAG 2.0 challenges us because, as I said before, WCAG 2.0 became a reality. It was finalized in 2008.
And 2008, that’s a long, long time ago in internet time. Imagine, like 12 years ago was a time when the majority of humanity was not yet on the internet. And we weren’t all carrying mobile devices everywhere we went. So many technologies that we hadn’t even imagined yet have come to pass.
And so it makes sense that for WCAG to continue to be in a leadership space, that it needs to be updated. And what we’re going to find is WCAG 2.1 basically updates WCAG 2 in a very convenient way– so fear not– to include more success criteria that embrace mainly mobile, and touch, and cognitive challenges.
Now, I just want to get a sense of who’s here today. So I’m going to launch a quick poll. And I’m going to– going to launch a quick poll. And I’m going to ask you– I’m launching a poll. And I’m saying– my question is this. How many of you are working in organizations that have already said that, at some point, you’re going to have to make your documents or your websites or your apps WCAG 2.1 conformant? How many of you have been told that?
The answer is yes or no. And you can either use the online poll. Or if you find the online poll not feasible for you, you’re welcome to post your vote in the chat window. And we’ll assess it. Now I’ve got the poll running. And I see we’ve got over 100 people have voted already.
I’ll keep it going. We’ve got about 70% of us have voted. I appreciate voting. Voting has never mattered more than right now in our society. So please vote. Settled in. I’m going to say– well, that’s interesting. So I’m going to close the polls in about 10, 9, 8, 7, 6, 5, 4, 3, 2, 1.
And here’s the results. Turns out that the majority of us– a slim majority, but slim majorities count. 52% of us– just taking into account– yeah, still 52% of us work in organizations where WCAG 2.1 AA or 2.1 is required. So that’s great. Thank you so much for participating in that.
So the challenge is that we have new assistive technologies come along. So for example, an organization like 3Play, which is an industry leader in terms of making it feasible and affordable for organizations around the world to be able to provide captioning, especially in the classroom, this invention called SignGlasses, invented in Utah, actually allows a student or a professor/administrator– but it’s mainly designed for students– to wear glasses where the captioning is actually going to be projected on the glasses.
And therefore you, get an overlay. So the sign language interpreter in the room or remote can actually have a conversation in sign or have captioning coming up right on the glasses. So this is why I’m showing this picture of these fancy glasses as well as a picture of people learning in a room remotely.
Or here’s another technology. I’m going to actually show you this one. So this is a LipSync. Now, this is a device. I’m holding up to a camera a device that has a USB port on one end. And it’s got this device on the other end.
And what happens is that the LipSync, which is designed here in Canada by the Neil Squire Society– so it allows you to put this in my mouth. And just by moving my lips along this stick. As well as blowing, and sucking on the tube, I can control any WCAG 2.0 AA conformant website.
And so I can plug this actually into my computer. And I can actually use my mouth to move to the next slide. Now, typically, how this would work is we then mount it on a mount. And so let’s say I had a substantial mobility challenge. I can have this set up on, say, my scooter. So it’s mounted, and it’s connected to a standard mount.
And therefore, it can be right next to my mouth. So I can just lean over and navigate or do all kinds of things. The key is that WCAG 2.0 didn’t anticipate there being this many different types of technology available to us. And here’s another one.
I’m showing now a picture of– and I’m also holding it up onto the screen. This is an Eye Tribe developed in Europe. I’m trying to bring all the continents in. So the Eye Tribe is a device which tracks eye movement. There’s a few different versions out there. The Tobii and the Eye Tribe are the main ones. And so in the picture, I’m showing how a standard Windows tablet can have an eye detection controller attached to it through a USB port.
And this allows someone to control where the pointer is on a screen that they can see as well as blink their eyes in order to be the equivalent of a left click or a right click or a launch. And in this way– now this was developed for gamers. But of course, it’s an amazing technology.
Now, this type of technology costs $10,000 10 years ago, and now $400 for that. And to take it back to the LipSync– this is why I find the LipSync so especially cool– is that the idea of having a sip/puff device is not that new. But the LipSync, you print it on a 3D printer. With $300 worth of parts, you can build your own LipSync. And although I’m showing an ad from the Neil Squires Society site Connecting Canada, in fact, this allows us to connect the world.
When we were doing a presentation in Islamabad, Pakistan, we were sharing the plans so these can be printed there. And there’s such a large population there that deserves to be included. And we’re proud to be part of making that happen. So therefore, as the technologies evolve and the assistive technologies become so more economically accessible, it’s more and more important that WCAG was updated.
Now, when we think of the whole ecosystem of how to create inclusive design, we have technical accessibility. And that’s the technical standards, like WCAG 2.0 or 2.1. We also have functional performance standards. And this allows us to figure out– hmm, WCAG was the web content accessibility guidelines. How does this apply to something like an airport kiosk where it’s not just important that I can touch the screen and interact with it.
But maybe I’m in a wheelchair. And so we have to make sure that there’s enough room for my knees so I can actually roll up close enough to be able to touch the screen. And this is where these functional performance standards come along because we can, then, come up with an approach where any ICT can be measured against standards. And so that’s part of the WCAG 2.1 and beyond part.
And then we have style standards. An organization may have a branding manual or an editorial policy guide. Canadian government, for instance, has its canada.ca style guide, which governs how you write for the web. And it’s thinking about inclusive design as well. So these three key things come together. And the overlap point is an accessible experience.
So just to review then, for those of us who are familiar with WCAG 2– WCAG 2, which as I said before was ratified in 2008– is made up of five conformance requirements. And it includes a whole bunch of success criteria that are classified by three levels– A, AA, and AAA. And the great news is, for those of you who are new to WCAG 2.1, you’re going to realize that it’s the exact same structure. So you don’t have to get your head around a whole new way of thinking about this.
The W3C has wisely made sure that we’re doing this in a way that is familiar and is backward-compatible. So WCAG 2.0, three conformance levels– A, AA, and AAA. If you wanted to pass 2.0 level A, you have to conform to all 25 level A success criteria. AA– all 38 As and AAs. And if you’re going to go all the way to AAA, which is uncommon, there’ll be another 23 success criteria. So for a AA of 2, we’re looking at 38 success criteria.
Now, WCAG 2, 2.x, is the standard around the world. There are very few competing standards for digital accessibility, e-accessibility. And so the benefit is that, whether you are working where you are now or you change jobs, change countries, WCAG is going to be the thing you want to know how to do.
And very conveniently, when WCAG 2.1 came along, which was ratified two years ago, we simply added 17 new success criteria to the existing 2.0– five more level As seven more AAs, and five more AAAs. So the great news is that all of the existing success criteria in WCAG 2.0 remain absolutely unchanged, word for word, even the parts that weren’t so great.
The pragmatic decision was taken to leave them exactly as they were. And that way, if you have products that already have been certified as conforming to 2.0 AA, then you need to just concern yourselves with the new success criteria. You don’t have to go back and reassess everything. So that’s very convenient.
And so 2.1, then, also uses A, AA, and AAA. Except now, because there’s five more level As, now we have 30 level A success criteria. Because there’s seven more double AAs, we now have 50 in total. Most legislation that calls for WCAG 2.1 is looking for it at the AA level. And so we now have 50 success criteria to conform to an– [INAUDIBLE] so that we can declare a document or a website or an app as WCAG 2.1 conformant at the AA level.
Now, [? Nancy ?] [? Sherwood– ?] [? Nancy, ?] thanks for asking a question. I see your– Nancy’s asking, what recourse do US residents have who are blind regarding websites that refuse to implement speech-accessible formats? Well, Nancy, it’s tricky. And I’m going to get to it shortly because I want to unpack the situation in the US where the regulations, unfortunately, they could be sharper. They could be clearer.
But of course, it’s possible to– well, the straight answer, Nancy, is, if the website is a government website, then US government websites, or any site that is funded by the federal government has to conform to Section 508. And Section 508 points to 2.0 AA. And so you can complain to the government.
But if it’s anyone else, including the government, you can file a lawsuit as a discrimination against the ADA. Because the ADA, although it’s not specific about what digital accessibility– what measuring stick is used, the precedent law right now is 2.0 AA because it’s the same measuring stick that the US government has specified for itself. So it seems reasonable that, if you’re 2.0 AA conformant, that’s a reasonable precedent for ADA.
But unfortunately, the Department of Justice keeps ticking down the road making a clear statement about what digital accessibility is. The challenge is that the ADA was virtuously invented before the internet was ubiquitous. So it doesn’t say anything about online accessibility in the law. No one thought of that. Whereas, laws in every other country address, because they came later on, they address digital accessibility. I can go deeper on that during Q&A if you’d like.
So here’s the picture. I’m showing a diagram which demonstrates how WCAG 2.0, which was made up of 38 success criteria, is completely contained within WCAG 2.1. And so this brings home the point, again, that we have 50 success criteria. And the 2.0 is simply a subset of 2.1 AA components. So these 12 new success criteria– they’re intriguing, and we’ll get there.
But first, I made a claim in the advertisement for this course. I said, more governments in the world are now pointing to WCAG 2.1 than 2.0. And indeed, here’s a list of governments on four continents that have now designated that they either have designated that the regulations are 2.1 or that their best practice is 2.1.
Well, we’re going to look at this EN standard from the Europeans shortly. EN 301 549– a real mouthful– but it’s a standard that the EU developed. And yet, governments from around the world have been saying, wait a moment, we really like that standard. We’re going to embrace it as well. So we’re going to see that parts of the Canadian government have embraced EN 301 549, the Mexican government, the Australian government.
And EN 301 549 includes WCAG 2.1. So although Canada’s laws, at present– the Treasury Board policy says that public-facing sites must be WCAG 2.0 compliant. Indeed, the best practice has already been declared, that, in the federal government space, whether it’s outward-facing or internal-facing, WCAG 2.1 is now the expectation in the Canadian government.
And in that Ontario government, the province of Ontario inside Canada where I mentioned, it was the first region in the world to make WCAG 2.0 compliance the law for businesses and NGOs as well as government. Norway followed, and then Israel followed. Now, the current recommendation we have in front of the Ontario government is to, indeed, up the game to WCAG 2.1. And indeed, the potential is to embrace EN 301 549.
So what is this EN 301 549 thing I keep jabbering about? Well, the idea is that the EU wanted to have a standard. And they decided the standard would not just point for digital accessibility to WCAG, but would also add other aspects for things that can’t be measured by WCAG. So the way the EU works is, the EU passed a rule that said that every member state of the EU had to pass legislation by a certain deadline– that was in 2018– that each of the countries that is a member state would now have to conform to EN 301 549.
And EN 301 549 essentially has two pieces. One is WCAG 2.1, and the other part are these functional standards, which I’m going to talk about right at the end of my talk. The EU actually developed this standard working with Americans. The back channel is that the leadership in the United States and leadership in the EU work together because they want to make sure that these functional conformance standards would be in alignment in US legislation and in the EU legislation.
And the anticipation would be that, at some point, the US legislation would also get upgraded to WCAG 2.1. So maybe it’s more something I’d cover in detail in our upcoming half-day course in November– shameless plug– upcoming course November 12, 2020– lots more of this stuff. But the idea is that there is international cooperation, making sure that we all can stick the landing on international standards which work in ICT and extensions of it.
Now, when the EU, then, first passed the law, the WAD, that demanded that every member state had legislation in place, they all pointed at the EN 301 549. And EN 301 549 currently identifies WCAG 2.1 as its standard for ICT. So for example, if you were in a country like– well, just to unpack this further– this Web Accessibility Directive does not demand that every country have laws that apply to every business or corner store in every country.
But what it did demand– it obligated organizations would be governments at every level– federal, national, provincial, municipal– as well as member-state-funded things. So as long as something is funded at least 50% by the government, then those organizations also have to conform. So to unpack this, the deadlines for conformance have already come and gone except for mobile apps.
We’ve had four years of deadlines. And as of September 2020, all websites, intranets, and extranets had to conform for all obligated organizations in the EU. And within a year from now, 11 months out now, mobile apps will also have to conform. They gave a little bit more time because they know mobile apps were perhaps a little more difficult to do. And so there’s some exceptions.
But now, if you’re in the UK– because we got folk here from the UK. You may be wondering, well, wait a moment, we’re not part of the EU anymore kind of, so what about us? Well, good news for the world is that the UK’s Equality Act embraced EN 301 549, embraced the WAD before the UK left the EU. And therefore, the Equality Act in the UK does, indeed, point to EN 301 549. So it’s the law there.
And so for example, in a country like the UK where all colleges and universities are public– there are no private universities and colleges. Therefore, the entire education community, for example, is obligated to meet WCAG 2.1 as of last month for their websites and a year from now on their apps.
Now, another example would be a country like Denmark. And I’m just choosing a somewhat random rank-and-file member state. So Denmark has their law called the Web Accessibility Act. And so it is their way of adopting WAD. And so it’s the case that, again, organizations in Denmark have to comply.
Norway is an interesting case because– I’m not sure how much you know about how the EU is structured. But there is the member states. And then there’s some organizations like Norway, Liechtenstein, Switzerland, Iceland, who have a relationship with the EU. They’re part of what’s called the EFTA, but they’re not actually member states. But these organizations also have the opportunity to embrace the WAD, which Norway has done. And therefore, they’ve interpreted it for themselves. So again, Norway is a WCAG 2.1 AA country.
Now, as well, in Europe, there is a plan to apply, WCAG 2.1 and the rest of EN 301 549 to more than just government. And it’s called the European Accessibility Act. It’s already been drafted. They’re still working out the rules and the deadlines, but it will be the point– we’ll get to the point that all organizations of a certain size, economically, in Europe, will have to conform to EN 301 549 once the deadlines are settled upon.
So where do we start? The key is that we need to take a look at where we’re at because it’s easier to make a product WCAG 2.1 compliant if you’re starting from scratch. And of course, we have lots of legacy products. But whether it’s a new product or an existing one, we walk through the same nine-step process that we teach in our courses, which makes sure that everyone involved in the development team– for documents, for apps, for websites– is on the same page.
And it starts with orientation and follows through to make sure that accessibility is habituated every step of the way. So WCAG 2.1 now, speaking of orientation– first new success criteria is called orientation. Now, I said that WCAG 2.1 introduces to us–
I’m sorry. I see a question from Charles [? Campbell. ?] And Charles, if you could refine– I’m not sure what you mean by an OTT app. Could you spell that out for us?
And Susan, you’re saying you’re fairly new to ADA information, and can we define websites? Let’s talk about that during the QA, because that gets pretty legalistic, and we can get into it. But I won’t define websites right now for the ADA. But thanks, that’s a great question, Susan. And we can bring that up in the Q&A.
So WCAG 2.1– there’s, as I said, there’s 17 new success criteria. And I’m showing them here organized by the principles. For those of you familiar with WCAG 2, you know the WCAG 2 is organized by four principles– 1, 2, 3, and 4. Now, there’s no new principal 3 success criteria.
So there’s seven new principal 1s, and more in principle 2, and just one added to principal 4. Now, this list includes all the A and AA and AAA success criteria. However, today, I’m only going to dwell on the 12. They’re A and AA, because those are the ones that concern us all the most. And then I’ll touch on the AAA just a bit.
So here, again, I’m showing you the same success criteria. But now I’m just showing you the five new level-A success criteria and the seven new AA success criteria. Some of them are pretty nerdy developer-only kind of stuff. So I’m going to just touch on a few of them that are the most approachable. And we’ll see what we’re grappling with.
So for example, here is the success criteria called “Orientation.” And hopefully, you’re going to discover, as you, let’s say, go back and check out to see if your site may already comply with some of these rules. You’re going to discover that some of these are no-brainers. So for example, I’m showing 3Play Media’s website, both in a desktop view as well as a responsive view on mobile.
And so I’m showing those two– I’m showing screen captures of those two screen captures. And orientation is about making sure that, no matter how I rotate a device, whether I’m in portrait or landscape, that all the information is going to be available to me. And so I’m showing the 3Play Media site, both in horizontal and– in portrait and landscape. And as you can see, it works great. Way to go, 3Play Media. So they’ve already passed one of the 12.
Now, there are exceptions to this because you can come up with apps where orienting is going to be a problem. So for example, I’m showing an example here of a bank check depositing app where, understandably, the app needs to take a picture of a check, and checks are very horizontal because they’re physical objects. And therefore, it’s an allowable exception.
That, as you can see in the– as you can see in the– I’m just going to zoom in here a bit. But when you’re in the app, it says, to take photos of your check in the mobile app, you will need to rotate your phone horizontally. For this demo, please keep your phone as is. So the point is, that’s OK. The Venmo check-depositing app still will pass WCAG 2.1 because that’s an understandable exception where the orientation is required to make it work.
The next success criteria I’m going to dwell on is called “Identify input purpose.” And this is nerdy, but it’s a blessing for all of us. What it’s about is this. When you fill out a form, there’s name, and address, city and all. There’s these common fields. You may or may not use software that helps you fill in the form automatically.
Well, the W3C came up with a standard for autocompleting fields where they came up with a common vocabulary. What should the field name be for a first name, for a full name, for an honorific, for a family name, for a password field, for a new password field, for an old password field? All the most common form fields now have this standard.
And the way to comply, the only way to conform today, to the identify input purpose success criteria, is that you must make sure that you give the your fields these names, not the names that a user would hear or a user would see, but rather, in code, how do you identify these fields? Because then, if you identify the fields with these reserved words– and there’s a whole bunch of them. So here’s some examples that, in code, you’d say honorific prefix or given name.
If you use these, then you’re making it easier for all form processing software to understand the semantics of what you’re doing. It makes it easy for something like RoboForm, a third party application that helps you fill in forms, work. Makes it easier for Google Chrome to help you fill in forms. And it also makes you comply with WCAG 2.1, so a blessing. Identify input purpose.
The next success criteria I’m going to dwell on is called “Reflow.” And for those of you who are familiar with WCAG 2, you know we already have success criteria that makes sure that if you zoom in or out up to 200%, that no important content is overlaid. Well, reflow just ups the game. Reflow now says that the content has to be presented without loss of information or functionality if your dimensions are within a reasonable size of vertical and horizontal scrolling.
And the goal here is just to make sure that we don’t end up with an unfortunate situation like the screen capture I’m showing here from the USPS website. I’m sure no one intended this, but I’m wondering where’s my package. I pull up their usps.com on my mobile device. And this is the crazy stuff I saw.
What I’m describing here is, a lot of type that is so large and so scrambled, because it’s had to be constrained to a mobile screen size, that it’s absolutely unreadable, uninterpretable. Well, this is a failure of WCAG 2.1 to do that. There are often much more subtle examples of that.
So for example, here’s the– I miss these times– flying on United in Canada. And as you can see some of the wording– well, if you can see this image, you would see that some of the wording is now sitting on top of other wording– a much more subtle problem. But it’s the same idea that we [? don’t ?] want to make sure that any information is obscured.
So that type of reflow applies now to WCAG 2.1. And it applies to documents as well because you may be wondering, well, does WCAG 2.1 apply to documents, apps, and websites equally? And the answer is, absolutely, yes. So here’s a great example of, for instance, the reflow success criteria is fulfilled that, when you make a PDF conform to PDF/UA, to the international standard for accessible PDF, you automatically get this reflow approach.
I’m showing three examples of a typically 8 and 1/2 by 11 or A4 size sheet that’s being shown in different sizes. And the magic is that, in this PDF file, depending on how I size my screen, the line endings are changing to flow into the size. So that flow, that forming itself in, is how you pass WCAG 2.1 for PDF files, is one way.
Now, anyone involved with WCAG 2.0 is familiar with the existing contrast minimum success criteria. That’s what I’m showing right here. I’m showing the WCAG 2.0 AA contrast minimum [? criteria of ?] 1.43, which essentially says, you need to have sufficient contrast between the foreground, the type, and what’s behind it. Because everything’s better when everyone can read the type for sighted users.
So I’m showing an example here of colors, which are so hard to read– I, as a colorblind person, I don’t even– I have trouble seeing that there’s type there at all. And for a more typically sighted user, it may just be challenging.
Now, I’m now showing an example of a graph. This is a graph from the national elections in Israel last year. And this is one of those countries that enjoys having many political parties rather than just two huge ones. One of the downsides is, when you try to graph the election results, I’m showing how, if you can’t discern between all of these colors– there must be about 12 of them– you can’t match up the legend with the colors.
And therefore, it’s impossible for someone with a color deficit to know who did well in this polling leading up to this election. So what’s happened in WCAG 2.1 is the rule for minimum contrast has been strengthened in that it no longer applies just to text. Because in 2.0, it’s just text on the background of text. Now we’re seeing the non-text contrast success criteria, also AA, now applies to any visual presentation.
So that’s icons, graphs, buttons, any situation. It’s the same color contrast as before. It’s the same 3 to 1 and 4.5 to 1, but now, any interface component has to conform. And this is good news for all of us because it just means we can see things more clearly. But it does make for more work.
So I’m showing some examples for– example here of graphical objects. And how, here’s a graph of market share on the left side. It’s a pie chart. And there’s slivers on the pie chart. However, if you couldn’t tell the difference between the colors, you wouldn’t know where one color begins, another ends. Now, here’s a better solution.
This middle one, I’m sharing the same pie chart. But now I’m showing how there are the statistics that describe each pie are next to each slice. So even if you couldn’t get the pie chart, you still know that Firefox has 20% of market share.
But the best solution is the one on the right, a best practice approach, where not only do we have the wedges of the pie chart labeled. But we also have a thin edge around every slice, so even someone who’s colorblind would know where they begin and end with a break in the white. So this affects graphic design.
And so I’ve got more examples here. For example, so if you’ve got this chart of Star Trek deaths by shirt color, whether you can perceive all those colors. And they’re high contrast to each other, cleverly arranged, but also each slice has its name and its percentage identified as well. So that’s a passing approach.
Now, here’s what they could have done for that Israeli election chart. I’m showing a chart where each line has a different color, but it also has a symbol attached to it. So even if you can’t perceive color, you can see that the no votes are squares. And so all the square lines of that one, so it’s easy for us to all see the information.
Another success criterion I want to dwell on is called “Text Spacing.” And it’s basically saying that you have to make sure that there’s a certain amount of distance between lines of consecutive type and the distance between letters. Basically, it’s making sure that we have great typography. Now, you may say, oh no, does this mean I have to recode my entire site so that the line height between consecutive rows of type are 1.5?
Because that’s a big change. No, no, no, no. All you have to do is make sure that if someone turns their own dials using assistive technology or browser settings, that they can change the settings this much and not lose the ability to get all the information. So I’m showing, for example, on the right-hand side now, I’m showing an example of how, in Microsoft Word– Microsoft’s done a brilliant job in introducing what they call read mode.
So I could take a Word document. And the document doesn’t look like this to most users with this extreme spacing between letters. Rather, I can go into Read mode. And I can say, well, because of the way I think differently, I find it easier to read a document laid out in this way. And so the document conforms to WCAG 2.1 AA because it reacts well to this assistive technology changing how someone wants to personalize their way of seeing it. And that’s the way to conform with the text-spacing success criteria.
The next success criteria I want to dwell on, just to point out how straightforward it can be, how easy it can be to conform, is called “Label in Name.” And essentially, it’s making sure that, whenever we have, let’s say, a button, we have to make sure that the label of the button– that’s going to be announced to a screen reader, for example– in this case, I’m showing a good approach. Send the email now button, tag, open, submit, button close. So now I know the button is submitted, and it’s all clear.
An even better approach is to use an ARIA label where we say, send the email. So the typical visual user would experience the word send. But a screen reader user has the additional context. Send the email is what they will hear announced in their screen reader.
For the sighted user, send is probably enough because there’s enough context to clarify that more clear. But without it, it’s nice to know that, for a nonvisual user, that you get the extra context. We can have a more verbose sentence without having to burden the visual user with more words than they’d want to see.
And finally, I’m just going to show one example of a AAA just to show you the kind of stuff we have. There’s five AAAs. And so this one is called animation from interactions. And so it’s designed to make sure that, if we’re dealing with a device or an experience where a motion animation is going to be triggered by interacting– and that could cause challenges for people depending on how they perceive or interact– that it can be controlled by the user.
So for example, I can turn off that type of thing. And so, as an example, in this PowerPoint, I intentionally put in that type of movement. So if I gave you this PowerPoint file, I’d make sure to turn off this type of thing to keep it WCAG 2.1 compliant. And that’s where it is.
And so now I’m just unpacking some highlights of these 12 new success criteria for you. But the bible for this is W3C’s WCAG 2.1 site called Understanding WCAG 2.1. And it takes every– just like with 2.0, it takes every success criterion and breaks it down for you in terms of what’s the short version of the rule, why does the rule exist, how can you pass, how can you fail, discussion about it, tools out there to help you out.
Now, you may be wondering, what’s going on beyond WCAG 2.1? Well, WCAG 2.2 is in the works. Not to intimidate you, but WCAG 2.2 has been in the works for some time. And it was originally scheduled for release later this year, though, getting released is different than countries or organizations adopting WCAG.
Typically, a standard is out in the world– any kind of standard is out in the world for quite some time before an organization will say, our law will be to point to that standard. But WCAG 2.2 is coming. And there is a WCAG 3 in the works. Now WCAG 2.2, just like 2.1, will just add more success criteria. Except it’s also going to move the one success criteria called “Focus Visible” down to level A, which I lobbied for that. I’m proud of that.
And WCAG 3.0, that’s going to be more of a major rework. But just to give you a glance of what’s, so far, in the current draft of WCAG 2.2– so far, there’s nine success criteria. And my favorite is called “Focus Appearance,” because it makes the visible focus– you can’t just get away with a minimal amount of it. It actually sets rules for how much focus you need to demonstrate in order to pass visible focus.
Now, beyond that, I mentioned earlier that I talk about, another way of going beyond WCAG 2.0, which is functional performance criteria. So the EU has these 11 standards of how we describe ICT in a way– if WCAG isn’t effective for measurement, what we can do is simply say, OK, let’s make sure this airport kiosk is usable without vision, usable with limited vision, usable without perception of color.
And basically, we break down the human senses in a way that we make sure that everyone can use everything. The revised Section 508 in the United States has a very similar list of functional performance criteria. Again, there’s no coincidence because the two organizations developed them together.
So the idea is that, even if we can’t measure it with WCAG, we can measure. We can make sure that we can create ICT that’s included for all. And in fact, the VPAT standard, which was, again, developed in concert between US government and EU government people and brilliant volunteers from around the world, is a way to measure whether something conforms.
So for instance, I’m holding up a VPAT report. And the idea is that the VPAT, Voluntary Product Accessible Template, will tell you whether you conform to 2.0 or 2.1 and at what level. And then we go through every one of the functional performance criteria and include them as well. And then, that way, the Voluntary Product Accessible Template is the typical way, at least in the United States, to declare how accessible you are.
The problem is, the voluntary thing’s the problem. Because it means you can write a report on your own product. The best thing to do is to get a certified professional to sign your report. It’s like having Boeing measure their own products to see if they’re safe. Doesn’t work out so well.
What we need is arm’s-length certified professionals to be able to develop your VPAT or your conformance claim so that you can comfortably go to customers or clients or judges, and say, yes, our product conforms, meets or exceeds every aspect of WCAG 2.1, or whatever legislation is in play. And therefore, we’re confident that we comply with regulations as well as our inner souls.
Now, there’s a lot more that can be said about this. And we have white papers. In fact, 3Play and I developed a white paper together, which is available on their website. And as well, we’ve got a course coming up, which 3Play is going to help us with aspects of putting it on.
We have a course coming up November 12, 2020. And we’re giving our coupon code to every friend of 3Play. And this takes $81 off our course. If you’re interested in this half-day course that goes deep on a full introduction to everything that’s about e-accessibility, point to that QR code. And I did promise to give you the instructions for the clear COVID mask.
And indeed, we have posted this on our– on our wcag2.com site, we’ve got a thing called the Accessibility Cookbook. It includes all kinds of nerdy recipes for how to do things. This is the least nerdy one we’ve ever had. It’s the clear COVID mask recipe. And of course, the recipe is completely WCAG 2.1 conformant. We’re proud that anyone can follow our instructions and make their own mask, so there it is.
It’s what I wanted to lay down on the table for you today. And you can see how– we don’t know what the world’s going to look like 10 years from now. But we do know that if we stay ahead of this, that we can make sure we’re ready to make sure that we can continue to develop the best civilization we can. There’s been, perhaps, 7,000 generations of humans ever.
We just happen to live in the first generation where it’s truly possible to include everyone. And whether you see that as fate or you see that as religion, whatever the case is, I think because we can, we must. So thanks for taking the time to stay on top of nerdy standards. And thanks for taking the time to be part of a community, which is making a world, designing a civilization, which allows everyone to participate in all aspects of society.
Is that what you were looking for, Sofia?
SOFIA LEIVA: Yes. Thank you so much, David. This is really, really informative. So we have a couple of questions here. The first one, which we visited in the middle of your presentation. But if you want to get into now that we have a little bit more time is, I am fairly new to the ADA information. Can you define websites?
DAVID BERMAN: Well, Susan [? Lamparter, ?] I appreciate the question. Some people define websites as anything you’d see in a browser that is publicly-facing. Some legislation, depending on which part of the world you’re in, websites have been defined to include intranets, certainly extranets.
And then we get into web-based applications. And it gets tricky where you’re– is it an application, or is it a browser-based experience, and is it a website? Now, the challenge with the ADA, though, is there is no definition of website. Since 2010, the Department of Justice has been threatening to issue what’s called a notice of rulemaking, which would say, we’re on the way to providing guidance as to how the ADA applies to information communications technologies, including websites and apps and everything.
But each year, it’s been pushed along. And when the current administration took power in the United States, one of its promises to the people was to have less regulation. So there was a list of regulations which were put on the back burner. And unfortunately, clarifying the ADA was one of the things the Department of Justice was asked to hold off on.
So maybe we have to wait till 2020, maybe 2024, I’m not sure when. But we’re looking forward to the day that the ADA does have clear direction as to how it applies to, not just websites, but to all information communication technologies. Now, there is guidance in the ADA regarding telecommunications. In fact, a huge chunk of the ADA points to world-leading standards in terms of how we work with television and radio and making sure that everyone can participate in broadcast and national emergency systems.
So it’s not that the US isn’t a world leader in all that. They are. But unfortunately, the ADA itself doesn’t clarify at all what it means by website. So instead, decisions are made by precedent law.
So I’m not sure if you heard about the Dominos case. But it was the first time that an ADA case for ICT went all the way to the Supreme Court earlier this year. Because Domino’s was sued because their mobile app, someone argued, I, living with a disability, cannot order pizza on your app. And that that’s not fair; that’s an ADA violation.
And the question as to whether the website had to be compliant, the app had to be compliant, and to what degree went all the way up to the Supreme Court. It’s a first. And it just demonstrates to us that the expectations are understandably and virtuously rising and rising. Our entire community, our entire population, is more and more recognizing the importance of taking care of everyone, including everyone.
Just the awareness of ASL interpreters, just in terms of, during the pandemic, the amount of people who recognize that the role of ASL in society has gone up just because we’re seeing that on the broadcast. So I’m sorry I can’t give you a firm answer, but that’s the best answer I can give you for now. Ask your Department of Justice, and vote often. I [? didn’t ?] say that. I mean vote once, yeah.
SOFIA LEIVA: Thank you. The next question we have is, how does all of this apply to digital signage, especially interactive signage?
DAVID BERMAN: That’s a great question from Kurt. Kurt, where are you in the world, if you don’t mind telling me. Because I can interpret your question based on that. By the way, Sofia, if you don’t mind, I’ll stick around as long as there’s questions. This is my favorite topic.
So I know we’re at three minutes to the top of the hour. But if people want to just go, we can go as long as you like, Sofia. Or we can go a little longer if you like. It’s up to you.
SOFIA LEIVA: Yeah, that works.
DAVID BERMAN: All right, so Kurt’s asking, how does all of this apply to digital signage, especially interactive signage? Well, that’s a great example of where we get into the functional requirements. For instance, we had a project where we were involved with airport signage, what we call dynamic signage. That is, there’s signage that static; it doesn’t change. Dynamic signage is signage where someone remotely could update the information.
And so WCAG is technically the web accessibility guidelines, so it applies to the web. But then it’s been interpreted through something called WCAG2ICT where the W3C figured out how we can apply it to documents as well. But we get into digital signage, way-finding systems, that’s where we get into the functional specifications.
And we will then measure something against those very– I’m just going to bring up that slide again– the functional performance criteria. So we can say, hmm, we want to measure whether this digital signage is, indeed, usable without vision. And so you’d say, well, what does that mean? I mean, how can I see a sign? Well, it’s not that you can see the sign. It’s that there’s an accessible equivalent available.
So for example, I was in Washington, DC, the main train station– Union Station it’s called? Main Station? Sorry– gorgeous building, and such brilliant usage of fully accessible notification systems. Because there’s signs. There’s also the audio channel. So I’m hearing that a train’s late. But also, there’s signs up telling me that trains are late.
And they have a visual language. So I’m more likely to notice them if it’s urgent news. And so the idea is that a digital signage system has to be part of an ecosystem to make sure that everyone is getting the information. If there’s health and safety issues afoot, the rules get even tougher.
And in the transportation sector, there’s specific rules just for transportation in America or in Canada or in the EU. So it’s something we can unpack. And Kurt, if you’d like, I don’t mind if you want to call me afterwards. We can talk for a long time about how you unpack it for digital signage because there’s a lot of layers to it.
SOFIA LEIVA: Thank you. The next question we have is, are there any actual requirements to allow the OCR to dictate timing on fixing ADA items? Or is it still acceptable to provide a roadmap showing a timeline for completion?
DAVID BERMAN: I just have to read that one again from Charles Campbell. So Charles, I’m assuming you’re in the United States because you’re talking about the ADA. Are there actual requirements that allow the OCR to dictate timing on fixing ADA items? Or is it still acceptable to provide a roadmap showing a timeline for completion?
Well, so again, I have to reiterate this frustrating answer, which is, there’s no hard-and-fast rule as to what constitutes e-accessibility under the ADA. However, the ADA is very clear about making sure that we’re serving– that everyone can participate in all aspects of interactions in our society. So I believe, Charles, what you’re talking about is– and I’m glad you brought this up– OCR is Optical Character Recognition.
And so often, you’ll have documents that may be a picture of words rather than actual machine text. And so, therefore, because it’s a picture of words, an assistive technology like a screen reader that would read a document out loud to someone has no idea what information is there.
Optical character recognition software can look at the words and figure out what they are and convert them into machine text. Once they’re converted into machine text, then an assistive technology can then take that stream of information and present it in all kinds of ways. So to get back to Charles’ question, there is no hard-and-fast rule about what makes up ADA compliance.
But the precedent law would suggest that you’d have to have the documents, either available in an accessible equivalent, the same information available some other way, or the document itself would have to conform to WCAG 2.0 AA based on what is most frequently cited in American courts these days when such a challenge is put in front of a judge. So the safe answer is, make that document WCAG 2.0 AA compliant, or make sure that the document makes it very obvious where one would go to get an accessible equivalent.
And that aspect of the document, at minimum, has to be accessible enough so someone can perceive where that accessible alternative is. Like, I’m saying, if it starts off with, for an accessible version of this document, go to www.blahblahblah. That one sentence should be the first object in the reading order in the document. And it, itself, needs to be in machine text.
As well, we recommend putting that in the metadata. We actually have a recipe for this, Charles. If you want to email me, I’ll send you a recipe for how we recommend you come at a document in a very straightforward way, in three different ways, if it’s really not realistic to convert it into machine text, how you can, indeed, in a conformant way, in a way that’s conformant to WCAG, identify that the document is not accessible and, yet, how people can find the same information or equivalent of that information elsewhere.
SOFIA LEIVA: Thank you. We had a question from earlier. Mobile apps conformance due to 9/23/2021, does this include OTT apps as well? Which, by OTT apps, he meant Over-The-Top, such as Fire Stick or Roku, anything that delivers film and TV content via the internet.
DAVID BERMAN: So Charles, I think you’re asking– I think, because you’ve mentioned the September 23, 2021 deadline, I’m assuming your question is through the lens of the EU legislation, the web accessibility directive of what EU member states must do. And because of that, I’m going to take that assumption.
So I want to show you, actually, what the scope is. I’m just going to nerd out here a little because the legislation is very specific about what’s included and what’s not included. And so, then we can say, hmm, do we consider that an OTT app or not? I’m not sure if I included all of the– yeah, so here’s a list, which gives you a sense.
But the challenge, Charles, is that each member state of the EU has the option to interpret where they draw the hard line between who’s obligated and what is obligated on a national level. So the hard line is that we talk about websites, intranets, and extranets and then mobile apps. So from the Web Accessibility Directive situation, it would seem that all mobile apps must come conform.
However, an individual member state of the EU can choose to have their own exceptions. For example, here’s a number of exceptions that are EU-wide– broadcasters or NGOs that are providing services that are essential to person with disabilities. So it depends what country we’re talking about.
So Charles, if you want to contact me directly and tell us which country we’re talking about, I can unpack that legislation for the particular member state we’re talking about. Is that a satisfying answer? Oh, and Wanda Perez would like that recipe too. So look, guys, so on that final slide– let me just get to that final slide.
Here’s my email address. Sorry, here’s my email address, [email protected]. Here’s my phone number. Here’s how to reach me on social media. And here’s how to do your evaluation, which Sofia– I should have mentioned this before. So if you want to– we’d love to hear what you thought of this because we and 3Play want to keep putting on awesomer and awesomer events.
So if you will go to davidberman.com/evaluation, you’ll find a completely accessible form that you can quickly fill out and tell you what you thought. And to motivate people to participate, I’m going to give a prize of the accessible e-book version of my book Do Good Design to the first person who– the first three people. The first three people who provide a substantial evaluation of the course are going to get an accessible PDF of our book, Do Good Design.
SOFIA LEIVA: That’s awesome. Thank you. And we’ll make sure to also include the link in the email that goes out so that people can fill it out there. We had one last question here. This is from Kurt.
And the question asks, your closing slide shows an animated image with a cat swaying its tail. How do you accommodate blind participants in regards to this image, in particular, when the presentation is a video?
DAVID BERMAN: That’s a great question, Kurt. Because the truth is, on this slide we’re all looking at now, if we’re looking at the slides, there’s a cute animation of a cat that’s fallen asleep on a keyboard. And so the distinction we have to make is we have to decide, just like any website or app or document, which objects are decorative, and which objects truly communicate information?
And so if you were to look at the PowerPoint, we could add an alternative text to that. But when we have a timed presentation, a presentation like this one, it’s essentially like it’s a live video. Under AA, we have the license to realize that we have to– we may have, like, we say, well, this webinar’s going to be exactly an hour long.
So I have to make sure that I pack in what I can in an hour in a way that works both for the typical audience members as well as the atypical audience member. So, for example, you may have noticed, as we were going through the slides, I would often audio describe images because I know there’s people in the audience who aren’t visual.
And so what I do is I try to make sure that I balance making sure that I describe everything that is essential for you to get the information, but I don’t bother describing what is decorative. So that cat on the keyboard, I figured was decorative. The color scheme’s decorative. You saw there’s a few other things that are decorative. But the balance is, because we have a time-limited thing, we’re allowed to say that we can include as much audio description as appropriate for the time of the event.
Now, if it’s a AAA product, then there’s a success criterion which says– what we call extended audio description. And so in that case, what we do is, instead, we either have to declare that we have a fully accessible alternative to the presentation available, or we will actually extend the video. So to give you an example that’s more typical, imagine you went to a movie.
And if you’ve ever turned on the audio description track on, let’s say, Netflix– like, watch Crip Camp now on Netflix if you haven’t already for the great history of Section 504, et cetera. In the typical Netflix version of the movie, the movie’s going to be three hours long no matter how much audio description is packed in.
But in a extended audio version, it’s possible that the audio description version of the movie, maybe it’s going to be 3 hours and 14 minutes because there were times in the movie we have to pause the action because what’s going on is so complex that extra time is required so the audio description can go inside without overlaying the vocal track of the actors doing what they do. So at the AA level, we do what we just did. At the AAA level, we would actually extend it and pack in more audio description, so everyone would know about the cat on the keyboard.
SOFIA LEIVA: All right.
DAVID BERMAN: All right.
SOFIA LEIVA: Yeah, well, that’s all the questions we had. Thank you so much, David. This was incredibly–
DAVID BERMAN: Oh, my pleasure.
SOFIA LEIVA: –informative and a lot of really great information in here.
DAVID BERMAN: Thank you, Sofia. I want to thank everyone at 3Play who helped us put this together as well as everyone on my crew who is here to get it done. I’m standing here in front of you, Sofia. But you know you were working with Noah and Anna and Michael and Sarah and [? Maham ?] and [? Steven ?] and Ray and Ben. These are all people who were involved in pulling this presentation together, researching it, delivering, and perfecting it. So thanks for letting us all be part of the 3Play series.