Digital Transformation or Social Digital Transformation?

Merary Alvarado: Digital Transformation or Social Digital Transformation?

The importance to understand correctly the concept of disability is imperative to create WordPress Sites accessible and usable for all users, don’t matter the background, language, ability and technology savviness. 

But, how can we translate this concept into technical requirements to improve the user experience? Is this relatable?

With the information provided in this talk, you will be able to understand the concept of disability, translate this into technical requirements and create sustainable websites, applications, and other digital products by including a robust accessibility governance model.

Watch Merary’s Presentation

https://youtu.be/qEkpBV0ijnA

Transcript

Amanda: Okay welcome or welcome back to WordPress Accessibility Day everyone. My name is Amanda. I’m based here in Cleveland Ohio. It is not yet daylight out so it seems a bit dark and I will be your host for the next three sessions here. I have the honor of introducing the next session which is the Digital Transformation or the Social Digital Transformation with Merary Alvarado.

A little bit about Merary. She is a software engineer and accessibility evangelist with six plus years of proven experience in executing development and leading accessibility processes in digital strategies for Fortune 100 clients. She has collaborated, collaborated to create national standards and best practices to be applicable across Costa Rica for digital educational and physical environments to improve their independent living. She is the co-lead of the Accessibility Web Costa Rica a public group on Facebook which develops digital content, training, conferences, events webinars in Spanish to create awareness about the importance of accessibility in the digital era.

So welcome to Merary, very excited to hear her talk. Please feel free to add your questions to the YouTube chat feed there and we can answer those at the end. So let’s get started.

Merary: Perfect so thank you very much for that introduction. I would like to start sharing my screen right now.

Okay so, thank you so much for that introduction. I’m really happy to be here participating right now in this event because it’s the first one. I’m, I’m really happy to be participant because it’s important at least for Costa Rica because we are from a Latin American country being presenting today here is really really great for us.

So accessibility as a Digital Transformation or Social Digital Transformation. What do we, what we can say about that. So I would like to start telling a story. When I was 16 years old I was sat down at the first row at a bus just waiting to go to the high school. And suddenly, one woman stood up in front of the door bus caring a baby. She was started talking with her hands and I didn’t understand. I was shocked, neither the bus driver he was shocked as well. And suddenly the answer of the bus driver was close the door in her face. I just remembered the feeling to, to feel so bad going to the high school and I couldn’t forget her face behind the door with the baby. She wait for a couple of seconds and then leave.

That experience for me was important and in terms of disabilities it was my first experience talking or interacting with a person with disabilities. Even though I was 16 years old I didn’t have the opportunity to talk before, with any person with disabilities, at that moment with a deaf person. One of the funny things is that after like 10 years I met Martha. Martha was that woman that was at that time, at that moment and she assigned me right now the sign that we have in Costa Rica. She gave me my name for the deaf community.

So I would like to say thank you very much for being here to watching my presentation. I’m super happy you are here in YouTube just watching that. So I would like to start saying one thing. There is important to mention a couple of important concepts that we need to understand when we are talking about accessibility. Sometimes we assume that accessibility is just technical aspects, but I think implied it implies more other concepts.

For example, the first one that I would like to start mentioning is Inclusive Economy and you probably said, I’m sorry Merary we are talking about accessibility. So what Inclusive Economy needs to be related with that conversation? Well a lot. When we are talking about inclusive economies we are talking about the violence to include all people, doesn’t matter the background, doesn’t matter the level or savings in technology or the way uh the color looks like, the gender, doesn’t matter. Neither the disability. So that’s why uh talking about inclusive economy is important, because we are entrepreneurs, we have businesses, we lead some projects and thinking about this is we’re really important to create more accessible products and services to many users as possible and of course try to be more inclusive with all of users. Now one of the other important concepts that we need to understand is Disability.

Because if we want to create the accessible content, we need to understand what disability means. And actually an accessibility, well sorry disability, is complex. It’s not easy to understand. It has too many variables and we definitely understand that. But one of the things that I really need to mention here or to recall is that disability is not the problem. We need to understand what disability means, but disability is not the problem, is usually the infrastructure the way that we create the sites, uh the type of services. If they are so complex. So we need to create more things that are accessible. So that’s why it’s important to mention that the complexity of those combinations like the disability concept and also what we have around of us, it’s important. So I would like to make a question. What do you understand about disabilities?

We already read about the disability meaning, but what do you understand about disability? Because if you don’t understand the concept in the way that we expect it, we cannot create accessible websites. And you probably said, what what are you talking about? Well, usually when we think about disabilities we think and we think about disabilities with different perceptions. We have some bias or we have assumptions. We usually think about disability in different levels. For example, in Costa Rica sometimes I heard that said, oh poor babies, poor angels. And we are limiting people with disabilities to access some information, because we are not properly understanding what disability means.

And for example, we we usually associate that disabilities are always people who is deaf or who is blind or who have some physical disabilities, but we have a range of many disability types that we need to understand as well. And other things that is most related to business is probably in our team or in in in our project, we have a more accessible culture. But what about our clients, what about their business owners, what about our team members, what they think about disability. So they are understanding what is disability and why is important accessibility, when they are creating wire-frames, for example, or they are creating websites. So that’s important to mention.

So I would like to just talk as a high level about the different disabilities that we have. We have the permanent one which is the one that we can see. We can see people who is blind or people who is deaf or people with mobility impairments. That’s the permanent one. Then we have the other which is the one the temporary. For example, you are fan of rugby, martial arts, or if you are fan of American football, so sorry, if you have an injury you will be disabled for a couple of days. You will not able to do the things as the way you did before, so you need to understand that some of the things will be difficult for you, but temporary. Okay, then we have the third one and it’s the situational and I would like to illustrate that within the story.

As you can notice, I have an a strong accent, Costa Rica accent. The “r” is super strong in in Costa Rica accent. And I will like, I love to visit, I would like to to visit Korea. And can you imagine me talking in English with a Korean citizen with also they have a strong accent. Well yes, that would be a situational disability, but I would like to clarify that is not physical, is not mental, it’s just situational. It’s because the language. And finally we have the invisible disabilities and nobody in this call is is safe of that because everyone has been suffer these kind of disabilities, at any time in your life.

So that’s why it’s important to understand that invisible disabilities are really important now. And why is this important when we know what is disability, what are the types of disabilities, we can definitely understand what are the Internet Disabilities. This classification implies five main levels like Visual, Hearing, Mobility & Dexterity, Speech and Cognitive. Being Cognitive the most common in internet.

So also when we understand disabilities we need to understand what will be the Governance Models. What will be the laws that we need to cover. We talked a lot about Web Content Accessibility Guidelines and also I didn’t, I didn’t miss some of really great talks between yesterday and today, really great talks about different normatives, like Section 508 or WAI-ARIA, so that is great.

So if we understand what will be our governance model in terms of the digital product that we are creating, that will be really great, because for example talking about United States, for example, we need to consider International Levels, Federal Levels or Estate levels depending on the industry. Now taking, keeping in mind the previous information, what will be the Best Practices in terms of accessibility to create better sites, to be participant in inclusive economies and also make this kind of digital transformation? And I would like to start saying you need to define the status quo. And when I say that, a couple of days back I, I needed to start working with a project. I needed to just let some clients that why it’s important accessibility. And that’s the question that I received.

Do you know how much is the percentage of people with disabilities who access the site? I feel that way. Why? Because some people think that disability is just a number and this one this is not good. So we can just not disregard people with disabilities, because yeah it’s it’s it’s, is that it? No, we need to be really inclusive when we are creating sites. So I would like to mention this project

The Valuable 500. This product project is led by Caroline Casey which is great you need to listen to, listening her, listening her talking. So she is great and she led on a specific survey with different leaders, business leaders of great companies and one of the the topics that she discovered was that 6 6 66, sorry 56 percent of the global managers that are participating on the business plans of their companies didn’t, didn’t think about disability. And as I mentioned before is not accessibility, is disability the main point on the agenda so you can start working better accessible products. And I would like to invite you to just go back one year and try, to go work to look for the World Economic Forum, because that was for the first time the entire World Economic Forum talking about inclusive business includes inclusion, uh diversity and they talk a lot about that.

And they provide some really great recommendations about what will be good in terms of business and why accessibility is very important. So now going back to the Accessibility Best Practices in terms of our sites, what we need to do first? Well, try to Reshape the Bias. Try to include accessibility as part of the culture of my team starting with me. If I did, if I uh, if I am the leader right, because it’s important to start thinking strategically and create best practices in our team. Now try to look for support for executive managers. If they understand that accessibility is important, you can all start creating really great products.

And of course you need two advices from experts in the area, so you will learn more about what will be the best strategy for you and for your digital product. Then we have the Scope. We can do a lot of things with accessibility. We can include accessibility in everything, but sometimes we are limited and we have some misconceptions about that. We can create disruptive products, innovative products just by including accessibility. So accessibility will be great for that. Try to understand what is the business need, what is what would be your audience, what type of of project or service are you providing to to to the clients and try to include accessibility in all the process. Okay?

Now what what would be the cost? Well, sometimes I heard people say, accessibility is super expensive and yes it could be expensive, but if you include accessibility until testing rounds, without including since the planning, since their requirements validation, or since that not including in the design portion, it will be really difficult to minimize the cost. So it will be really expensive at that, at that stages in the life cycle. But if you are including best practices since the beginning, it will be really good for your teams.

Now Test Test Test and Test that’s the most important. We cannot avoid the, the importance that testing is the most critical part in terms of accessibility. Why? Because of the one hundred percent, seventy percent of the effort and the notification or the clarification for the users that the site is accessible or not, depends on manual testing strategies. So it’s important to create an specific strategy when we have trained resources that can also provide really good recommendations in terms of accessibility, because it will be the specific experience of the user, use using assistive technology and the digital product.

So we will have a real perspective about if our site is accessible or not. Then we have the automated tools which is another thing that we will cover in the next slides, but also we need to try to balance these two strategies to create a really good process. Now I would like to give you some tips and tricks in order to create some user stories. If you don’t have any anything of this created in your team, so that’s the the the starting point. So it’s important to create a Diverse Persona. When we are creating the sites we usually design what will be our, what what type of user we will have, what will be our audience, right? But usually we we we don’t think about the different abilities of the users.

Okay we usually think in our in our final product, but we are usually not think so much about the audience. So, by having this kind of tools you will learn what type of screen readers you will need in order to test and also what type of checkpoints in InDesign we need to apply, before to send everything to development. So it will be really great for you and this is a great example. This is a reference, you can check the links below and you can check that we have some really good practices. If we, if we create that, you will have a really great vision that what will be the specifications that we need to also consider during development process, design process, testing process, and in the final product, okay. Now related to WordPress, the themes, the selection of themes, it’s really really important.

Not every theme that is trendy is accessible. Even though if they are super shiny, if they’re they have a lot of colors and combinations and super complex functional elements, not all of them are accessible. So that’s why it’s important to keep that in mind. And the other thing that I would like to mention before to proceed to the next sessions, uh next section, is Be Aware the Lawsuits. Why? Because usually when we are thinking about accessibility, we think about what will be the specific technical aspects that we need to cover when we are creating our product.

What will be the test strategy, what will be the requirements? However, I would like to mention that a QA miss will be a lawsuit. So most of the users that impose some lawsuits to you, or to your company are not just mentioned that the site is inaccessible. It’s because it’s they are creating the lawsuits because you are excluding people with disabilities. So that’s why it’s important to keep in mind even the small details in terms of accessibility, because this is really important. Now what are the recommendations that I have for you today? For example, if we’re talking about WordPress you will have like a Quick Start Guide.

So you will have an Accessibility Handbook. You will find information about training resources, you will have best practices in terms of design designs and content creation, because it’s important to create accessible content as well and the visual presentation of the pages should be clear and easy to understand, even though the digital product X is complex itself. And then you will have some checklist testing strategies and also you will find some, the most common accessibility defects.

So you will be able to identify properly what will be the strategy to follow in terms of development or design of quality assurance, for example. Those, those two options are, I love these two options. I think the information that is included in these blocks are really good and you will find really best practices for developers, very technical so that is great in terms to apply best practices to existing components on your sites. And also you will have some tools to evaluate your site and with really great references.

Also one of the things that I like the most of those blogs are related to some aspects to cover public sites, because it’s different when we are working with private sites and public sites, the exposure will be a little bit different. So by having this reference will be really great. Then do you remember that we talked about about Themes? Okay we have a really great future here.

Actually when you are going to the theme directory you will find a tag that says Accessibility Ready. So as soon as you select that, you will find a list of different themes that are accessible. However, I would like to recall that even though you are clicking this label and you are seeing some things that are accessible, you need to take care of the opportunities for improvement that we can also apply after, to select this theme. Just, just, just keep an eye on that. Then we have some WordPress Accessibility Tools, for example, I would like to mention in in two ways.

The first of all, the first one is the WordPress Accessibility Plugin. It is really good. You can use it and integrate to your WordPress pages and right and try to make some, some audits using this plugin. And actually it’s important to have an specific strategy for automation. As I mentioned before, the most important is to cover the manual portion. But actually when we are also using automated tools, we can cover a really great aspects in terms of code.

So in this slide, in this slide I’m providing you some of the best tools that I work with in the past years and this is really great for you. And it’s important to mention that it’s a combination of tools that you can have better results. I cannot say that just by using the WordPress Accessibility Plugin is the one. No, probably you can use it to mix for example, with the Axe or expert or together with Accessibility Insights, because this kind of tools will provide you different reference, technical reference, so you can have some reference from one and some reference for others.

So you can create a really great strategy.

Then based on the screen readers, one of the most common questions that I have when I work with different projects is what about the screen readers? They usually ask if there is the, the, like what is the most critical screen reader that I need to to consider when we are creating? Well, I can say that it depends. It depends of the analytics of your site. For example, if the most visited browser is Chrome so you can need to try to design your strategy based on Chrome, but actually there is a combination of the screen readers that work, that works really good with Chrome and so on. So and now in on the screen I’m presented to you what is, sorry, what is the best combination that you can keep in mind when we are working with the screen readers?

Actually you need to also consider if you are working with native applications, because it will be a little bit different, right, in terms of of of screen readers and the combination. It will be different in terms of gestures, also, because we need to use gestures and other additional tools that we can apply to improve the accessibility.

And I will give you a gift. In this case, Include People with Disabilities.

It’s important just to don’t take just for granted that the, all the checkpoints that you are doing at are enough. So this is a really great page that I want to provide you. The name of the page is Fable. So you will find people with disabilities as part of the board of this company, so they can provide you in real in real time, what are the the most common defects of your page.

We, if this page has specialized users in screen readers and magnification tools and also in code best practices, so they can provide you the tools you need in order to create a really great content. Then a couple of takeaways about this project is try to reshape your bias. Try to think differently, try to educate yourself and try to unlearn things because usually when we are working in the technical part we are superstructure, right. And we usually try to follow rules, but in this case we need to think differently.

We need to just think in ways that that are not common when we are talking about accessibility. So that’s important to reshape their bias. Also always think in your users. There, there is no more important to an honest feedback from your, for from your users, so try to keep in mind the user experience.

What will be the experience of an screen reader user. So you can connect with different companies depending of the state you are, or depending of the country you are, there are specific like companies or services that you can send your link and those persons with disabilities can help you how to validate, what is the current experience from the from them in their site, so they can give you really real and honest feedback about your site so please keep in mind that option. And also, it’s important to ask for expert advice.

Why? Because sometimes when we start creating the accessibility process we, the learning curve is really long okay, because we need to understand what will be the success criteria that we need to cover in terms of of of the development code, what will be well, when will be enough to have the successful criteria on, or when can do more in terms of that success criteria. So that’s, it’s really important to ask for expert advice. And definitely, and the last one is, if you are an entrepreneur you are a business lead, you are working creating products, you are working creating services, please always keep accessibility in your agenda.

Try to don’t to don’t avoid this comment, this conversation, because it’s really important. You are creating opportunities to make more people with disabilities just get a really good education and some new job opportunities and everything related to knowledge management, etc. So if you are creating this kind of projects, thinking also in inclusion, that would be really great. So and also I would like to keep keep keep in touch with anybody so I would like to provide my point of contact. So that’s it, thank you very much.

Amanda: All right that was awesome Merary, I learned, I learned a lot. Your slides were wonderful. We do have plenty of time for questions, so and we have a couple questions here, but if anyone else does have questions make sure you add them to the chat, so we can we can ask those. So the first question is, how would you persuade a company about the benefits of developing and implementing an accessibility strategy in less than five minutes?

Merary: Okay that’s a really good question and a difficult one to answer, because one of the the most important things for companies is how will be my benefit, in terms of money, right? If we are including accessibility. And when we talk about accessibility, accessibility, we will not receive that money during after the first implementation.

It will be with a time, so make the different business owners or leaders understand that vision is a little bit difficult.
But they notice with the time when we create really good metrics, when we can create prototypes, when we have some empathy labs, for example, you can create also empathy labs in your own company. So you can have real users, real sorry, I don’t want to say that, people with disabilities just testing different sites and also you as a owner of this product, you can test using different tools so you can understand what is the current behavior for different users.

So based on that experience you can create a different atmosphere so they will able to understand, dependent of the products. So we can and a really great response response and then we have just kind of wait for better responses for other leaders, so depending on the business as well so.

Amanda: Right, that was less than five minutes so.

Merary: Okay.

Amanda: Perfect, um the next question is, as an accessibility and US 508 expert, do you think that companies that currently use WordPress as a CMS or a platform to create content, can be exposed to legal lawsuits due to their lack of accessibility?

Merary: Oooh, that’s that’s a question that is important to answer and yes, definitely yes. So you need to take care about all details when we are talking about CMS it’s critical to also use other type of normatives or best practices like ATAG which is one of the the ones that you can integrate with the WCAG and also with the Section 508 and try to create a best strategy uh for CMS, but yes, you can be affected about that.

Amanda: Okay, all right and then we’ve got one more question I see right now and it is, have you tried the latest latest version of WordPress and did you see any major issues with accessibility?

Merary: Well, yes I saw a couple of things, mostly of the standards in keyboard navigation for some functional components. And so there is important to understand what are the keyword navigation, best practices you can find that information when you are using WAI-ARIA.

So there isn’t a specific chapter talking about what will be the keyword expectations so you can use that as reference, but yes that’s the most common like diff, I don’t want to say difficult, but uh the most common error that I noticed which is the keyword navigation or the expected keyword navigation for some component, fusion components.

Amanda: Okay fabulous. Thank you for taking the time to answer those. I also had a question, because you talked about personas and in, I’m in marketing and so you know we’ve taken the time to talk about personas, but actually this was very enlightening because we actually hadn’t considered access, accessibility within that and I just was wondering, how do you go about gathering data to incorporate disabilities into personas and how do you prioritize you know, as you’re saying these different levels of accessibility and different disabilities. I know from experience developing personas could be a full-time job in some cases, so.

Merary: Yes well actually, one of the best practices that I learned with the past years is try to understand properly what what what is what is the information included in the WCAG guidelines. So based on the different
success criteria that we have, we also have some specific sections that we can find a scenario they are looking to solve, when when we have users with these kind of abilities or using a specific type of assistive technology.

So based on that experience and also providing just the site to a specific projects that include people with disabilities so they also can provide you some reference. And one of the other things that that I noticed as well was that include people with disabilities in your team, so they have a different perspective, so they can provide you some reference about how they access the site.

Because sometimes when we are working with the screen readers and everything we have our own experience right, but we are not users from of this assistive technology so by having users that are experts with assistant technology, we also have some different ambitions. But also I have some lists that we have already created also I can talk with you later and share with you some information so that that can help you out with that.

Amanda: Okay wonderful wonderful, thank you very much. Again I don’t see any more questions right here, but you did an amazing job so much, so much good information.

So I just want to say thank you so much again and thank you to everyone for attending this session with Merary and I. You can continue the conversation on the WordPress Accessibility Day site on the page for this talk. Merary provided her contact information as well so and you can continue to follow the event conversation on Twitter @wpad2020 and #wpaccessibilityday. So don’t forget to attend the next talk which is The Case for Captions with Abha Thakor

which will be actually on a different YouTube stream. The link is posted there in the YouTube chat and you can also access it from the home page of the WordPress Accessibility Day site. So we’ll be hopping on over there in about 20, 23ish minutes, so yeah we will see you there after the break. Thanks again everyone.

Merary: Thank you very much, bye.

Developers Unite: Navigating Accessibility in WordPress

Nick Goodrum: Developers Unite: Navigating Accessibility in WordPress

Accessibility for website and app developers can feel like a lower priority item or difficult to account for. Many look for plugins or quick fixes to patch up the work after the fact or often do not know where to begin. However, better accounting for all of the nuances is a lot easier when a developer knows what the end user’s experience is like. Luckily, nowadays we have more voices than ever coming together in the accessibility space to help.

In this session, we will cover what kind of users may be impacted by the code we create and the common patterns that can benefit them. We will look into how we can test our work before it reaches a QA team or specialist. All the meanwhile, we will go over the current state of accessibility tools and options in the WordPress space. Let’s join together in navigating how to build and maintain accessible code for the WordPress sites you make.

Watch Nick’s Presentation

Transcript

Nick Goodrum: Thanks, Nick Goodrum. Been working here at American Eagle for about ten years and, really, the goal of this presentation is about the two hats that I wear, right? So, accessibility and front-end development. And so, developers, you know, there’s all kinds of issues that we can do–that we create that impact end users.

Really, at the company we used to be more reactive and kind of, “Oh, if you wanna take care of accessibility, we’ll do it.” We switched to being much more proactive ’cause, really, every website is important. Every website has potential of creating barriers for people with disabilities that just wanna enjoy everyday life.

Amanda Bailey: Nick, I’m sorry, I don’t think your screen is shared. Yeah, if you double check that.

Nick: Oh, I’m sorry about that.
Well, using up–slides anyway, so.

Amanda: There we go, there we go.

Nick: Always preferred technology, right? Fun with all the Zoom calls that we’re doing.

So, yes, this is more aimed towards developers but it’s actually, really, everyone as a whole. So, site owners, site managers. What it is, is I’ve been assessing, looking at code for a long time and I kept going, you know, “Why are there issues? Why are there still problems? You know, why are we still having difficulties creating good end-user experiences?” And so a lot of times it’s probably, you know, not with bad intentions. It’s usually with good intentions but, as developers, we don’t really know any better.

So, where to start? So, we got a nice image of kind of that golden compass pointing North on a nice wooden table there, a nice sparkling table. So we can grab our compasses and let’s dive in. Let’s actually kind of take a look into the WordPress space and how we can navigate accessibility in it.

So, the WordPress starting lineup. That’s really where you wanna start. This is really aimed towards more beginners. People that have been doing this for a long time, you’re probably well aware of this, but really, there’s two areas you wanna be aware of when you start working inside of WordPress. So, one, you’ve got WordPress alone in the Themes area, you’ve got oh, about, close to 4000 themes.

But really, you wanna take a look for the ones that are accessibility-ready, ’cause really, we only have 107. And then, of course, the accessibility handbook. So let’s take a look. Accessibility-ready themes. Multiple people have probably brought it up so far and so, if you’ve been a marathon runner through this whole entire, you know, almost now, 24 hours of presentations, you’ve probably heard this. But it’s important to be aware that these take time to audit and review. Joe and the team have been working through these, trying to get as many as possible, but it takes time because we wanna do due diligence.

And it should also be noted that, of course, it’s kind of almost, you know, themes are in a sense almost kind of like hanging clothes, right? You won’t know if it’s actually truly the right fit and the right kind of accessibility until after you actually put in yourself–right?–and put in the content. And if you’re aiming to make a theme, these slides are available so there’s links throughout the whole entire area.

Feel free to go and you can reference them and jump to them. Is, you know, there’s also patterns, right? You know, helpful tools if you’re starting to actually make these things. So the handbook. So, picture here, of course, is going over all the chapters that’s inside of it, right? You’ve got best practices, development best practices, content best practices, tools, all kinds of items.

So you have to ask yourself, you know, as a developer, as a site owner, do I understand what WCAG is? Do I understand what the POUR methods, the things you’re looking for, perceivable aspects like that. Hey, there’s a quick little reference guide for that. Unsure about what–why ARIA guidelines are or what the HTML semantics for roles?

Well, hey, starting point right here too. You know, do you need to be able to send announcements? How do you do that, you know? And it covers even code of WP, you know, a11y.speak, code bases that can help guide you on how to fill these things out. And then, of course, just tools, right? Build tools, how do I put this into my CLI?

You know, how do I do it and to build tools? All kinds of aspects. So when we’re talking about WordPress and navigating it, we should also be able to know a map of where the current state is and so we’re gonna look into, you know, what aspects of WordPress are needing to be talked about. So we, of course, are gonna navigate it kind of like navigating this person with their finger going over, I think, it’s the downtown Los Angeles.

So I’m gonna talk, of course, about page editors. And so, some of you might be groaning. Some of you might know what we’re gonna talk about. I know it’s created a little bit of divisiveness but. Gutenberg. So, Gutenberg is moving forward. Automatic and the accessibility team have been working for, actually, multiple years now trying to improve and better create a usable experience.

The end goals, I can see the benefits, right? Trying to create an ecosystem where you can create blocks, move things around, have a page editor kind of like Wix and aspects like that. That, you know, if you think about it, WordPress from the beginning was just kind of a blogging platform but now it’s used to create all kinds of websites. But execution is key, right? So, of course, needed to have an audit, needed to have part of the practices, so Tenon.io did the review on WP campus. I’m not gonna rehash the whole entire history but it’s a good sign that, you know, we’ve gotten through two-thirds of the issues.

Now, of course, UI’s changed. There’s gonna be regression issues. It’s an ongoing aspect. But Joe Dolson, everyone, has been trying to really resolve this. Now, there’s still problems, right? So that’s why Classic Editor’s probably one of the most popular plugins and it’s because, yeah, things like video captions, you still need it.

Now, the Classic Editor plugin should be noted that right now, it’s supported only, really, through the 2021, through the end of 2021. Now, that might change, right? Because this is really about Gutenberg should be in a stable state, should be accessible, should be accounting for all these things by that time. So it gets a lot of flack but, you know, actually what about other page builders, right? Well, why don’t we use the others ones instead of Gutenberg? Well, unfortunately, the alternatives have pain points as well.

This is no means trying to bash on these particular ones. I’m not–Beaver Builder, Divi, Elementor, they’re, you know, they have some good aspects to it, but really, they’re most commonly used. They’re high up there. And they also have similar issues, so ATAG, you know, really about being able to easily traverse so people with disabilities can create content. They have problems with this as well.

Beaver Builder is trying to improve, you know, but it takes time and it’s been years. And so, you know, it’s nice that there’s a change of pace and really focusing on it but they still have problems.

Then of course, Divi and other people have even built plugins to fix some of the front-end issues of what’s being created. But CampusPress built that and it still has problems too, right? ‘Cause there’s a lot of work involved if you start with,
you know, sometimes not the right basis. And then Elementor, you know, they’re also advocating about accessibility but it
also has some work to do. So you can even take a look. You’ve got GitHub aspects that are pointing out multiple issues and it’s because, yeah, it’s not one and done, and there’s always room for improvement.

Okay, so, Nick, you’re not really making it sound amazing. Maybe there’s plugins, maybe there’s something to fix that. But really, all page builder tools, all plugins, they all still need work. So we’ve got a nice background here of a road in Japan pretty much in front of a Family Mart.

I miss convenience food from Japan. And pretty much people digging up and doing maintenance, right? ‘Cause it still needs work. So I mentioned plugins. Okay, this is probably better state, right? So if we’ve got page builders creating front-end code that’s having issues, maybe there’s some–one magic button that fixes everything? And so, really, I see people submitting, people talking about it, accessibility overlays. This has kind of become a popular theme more recently.

And so, I ask just, you know, ask yourselves what are your expectations for this overlay? What are your expectations in putting these plugins on your site? Because really, accessibility should not be an afterthought. So if it’s, “Hey, as developers, we’re just going to just plow ahead, keep making code, and then, okay, well, I’ll just throw in a tool at the end that’s supposed to fix everything.”

Well, they kind of don’t really fix everything.

If you really look at it, there’s so much inside the spec that an automated tool fixing everything is not really possible. Then you might say, “Okay, well, it’s also progressive and has been helping out people that might need to grayscale or high contrast or, you know, some negative contrast, some options– right?–underlines.

Now, again, if you’re making a good website, the link should already be recognizable so why I had the link underline aspect. Increase font, decrease font, if you’ve actually done a pretty decent job, it should also already be quite large in fonts. The design era of, like, 2000s with 9-point font aren’t really there anymore.

But think about it this way. So if someone with a disability needs to have high contrast or needs to have a certain font size, those kinds of things, they’re probably already going to have some tool, some plugin, some software, installed on their machine so that they can do this for every website, not just your website. So, some of these tools end up being a little bit redundant. Now, it’s not that you really shouldn’t use it at all and there’s no value. There could be some people that still somehow get benefit from it. So that’s where I kind of go, “What are your expectations?”

And there’s also some within the, you know, WordPress space that might kind of– accessibility one from Joe Dolson, yeah, that has a little bit of overlays but it’s also got snuck in some good aspects, right? Plugin making sure title tags or attributes are kind of removed if they’re not really needed, making sure skip navigation is inserted for you, so they’re putting stuff inside the P-H, P space, to actually make it a little bit better.

So the idea, though, is, you know, what is the goal? If it’s for a quick fix, there’s many voices out there. The community really expressing that that’s really not the best approach. You’ve got– Steve Faulkner. You’ve got even–let’s, this article here from Lainey Feingold, really going into how all of the issues are still around and there are still some legal battles for sites that have these kinds of overlay tools.

So, are there good ones? Yes, there are good plugins out there. Now, is this a huge list? No, and is it exhaustive? No as well. But yes, like I said, the WP Accessibility plugin, that’s, you know, a good starting point. Contact Form 7, it’s actually not that bad of a starting point for accessibility, but some of the defaults may sometimes need some help and so that’s why there’s a tool for that. Gravity Forms has some issues.

So, hey, we’re gonna patch that and fix that. Of course, there’s Accessible Twitter Feeds. This is also a lot of stuff that’s also in the handbook as well, so if you wanna know some good starting points, here it is. Video players, there’s also Able Player as a plugin. Able Player’s a really nice one that really gives a lot of options for different kinds of disabilities.

Now, of course, you have to make sure your content is also available that way. So I didn’t list a lot of options here and I’ve so far kind of pointed out everything has some problems. So, really, that’s why it’s all on us as developers, site owners, site managers, it’s on us to make sure we do our due diligence. We can’t wait until QC comes in.

We can’t wait until the end user has to complain or try and access the content. So we’ve got nice cartography tools on a workbench going over maps, and really, we’re gonna use those cartography tools. Just the tools for ourselves, so how are we going to test our sites? So test, test, test, and vet. Now you might be thinking, “I don’t know how to test or vet.” Well, at the very least, you can still do your part and look into the history. Okay, what–let’s go into the GitHub. As devs, we probably don’t feel too concerned of just jumping in and looking at the issue trackers.

They’ve been kind of showed here, right? We have Elementor’s. Making no dig at them but there’s, you know, still 21 issues still open. Still issues with maybe some keyboard accessibility. Now, there’s 64 closed, which is great. Now, for some plugins, some tools, that might not get enough traction to have a lot of people diving into the accessibility, so it’s also important to check is there even any statement at all?

So if it’s silence about accessibility, that’s probably a bad sign that they probably aren’t thinking about it. So, you know, even Beaver Builder, for example, has statements about it, trying to work towards it, right? And then, of course, search for reviews. Maybe you’re still kind of unsure, there’s a lot of specialists, there’s a lot of people, I mean, all the presenters today, I mean, there’s plenty of people that are trying to help educate and grow knowledge on maybe some pain points or in some growth areas.

Well, you know, you even have– oh, I think I shared that one. But you have, like, A Bright Clear Web. You’ve got multiple– that are actually testing out, sometimes even end users are saying, “Hey, I can’t actually use this.” But at the end of the day, it’s about actually, really, testing the demos, testing the code, testing it on a sandbox, testing it yourself. You know, even Graham earlier, watching all these streams, says, “You know, you need to know how to tab, use a keyboard. Don’t just assume it’s a mouse.” So we need to test, right?

We need to test with different kinds of tools. So a lot of people go to automated tools, right? So we’ve got Tota11y, Wave, aXe, ARC Toolkit. These are extensions you can install into your browser to be able to say, “Okay, well, quick assessment.” Then you’ve got Pa11y. That’s if you wanna create dashboards for yourself and do it through–against the A11y build tools. Then you’ve got Tenon.io, Siteimprove, these types of–hey, they’ve already created a dashboard, they’ve already created a system, that’s crawling your site and looking through everything.

And there’s plenty more tools available and out there. But these are all great starting points. Now, everyone’s throwing out different amounts, but in general, automated tools can only catch so much, maybe 25% to 50% of even the–text space. So really, manual testing is key because how would you know if a multi-step checkout process with multiple tabs, with an automated tool, needs to fill out all the form fields, fill it out, some of them incorrectly, hit submit, find where the errors are, and make sure that they’re properly tied?

That’s not that easy to achieve without a lot of customization with automated tools. Same thing, is there an automated tool to run through to confirm all your captions are well set up inside of your videos?

No, it takes humans. That’s why we even have humans writing closed captions. So I think one of the main things that I find with devs, you know, why there are so many gaps?

Why do I see ARIA hidden on a whole bunch of things that need to be read? Why are there these mistakes that are coming through? And it’s because as humans we have a hard time stepping out of our own shoes. We’re used to our normal, everyday life.

Some people are, you know, have sight and do cater everything to site users and so, really, it’s about picking up these tools. The ones that I’ve kind of listed here, NVDA, LipSurf, VoiceOver, TalkBack, all of them are actually, to a degree, free to use. NVDA, of course, would love donations, but–so if you’re on Windows and you need a screen reader, install it.

Don’t be afraid to just close your eyes and try and experience what it’s like going through your website or just regular websites and you’ll see the extreme pain points that many sites provide. I mentioned LipSurf, so Dragon is another, you know, voice dictation software.

Generally hasn’t been that great for web traversal, and so LipSurf is kind of another alternative that’s also free. It’s an extension that’s available for Chrome that also has some commands to be able to reverse everything. If you have a mobile device, and pretty much almost, I think, everyone to a degree has, now you can use VoiceOver, Voice Control, through MacOS and iOS.

You’ve got TalkBack and Voice Access on Android for the accessibility sweep, so they’re already built in so you already have options. So go into your settings, turn ’em on, see what that experience is like. ‘Cause not everyone’s going to
be–your end users are not going to be pro-screen-reader users.

It’s gonna be people that just, “I needed to, you know, get through the day.” So I think that’s one of the key things is if I were to say, stress anything about today or anything, is pick up one of these software tools and there’s other assisted technology, of course, as well, and try it out. And that will kind of show you the pain points of what you’re building. So, ’cause what I’m getting at is, you know, as you saw, there’s many plugins that–and page tools that all have issues.

There’s even ones that are promoting accessibility that have problems. So us as developers, as site owners, as site managers, we’re gonna need to patch things. We’re gonna need to fix things. So you’re–and you know, you’ve got here a nice kind of beaten-up road with potholes and definitely needs a paving, right?

So, DIY repairs are needed. So let’s actually go into some of these, right? Well, what could we do to improve this experience? So this is where we’re gonna get more devi side. So, situations that I feel I often see in reviewing people’s code and everything, is that are missed. So we’ve got sticky headers, right? Everyone loves sticky headers. It’s still kind of a focused interface, really, for sighted mouse users or touch users.

But it’s not that it’s a bad practice, per se. The problem is, is that there are people and we are getting older, right? And eyesight, unfortunately, doesn’t really last forever. And so, people need to zoom, increase the screen size so that they can actually–or magnify it so they can actually read content. So let’s take a look at an example, right? So, let’s actually change our zoom. So we’re at 100%, and let’s get out to 200%, and let’s get up to 400%.

And what is this experience for someone that needs to zoom in order to read content? Now, again, this is with Navigation Open, but the amount of space on a 1280 by 1024 screen, this is what’s simulating here, when you zoom in at 400%, that’s really not ending up that tall. You don’t really have enough real estate space. It’s actually shorter than most phones. So sticky here, where it’s following you around and then you have navigation and that’s open, how easily can I read–“Contact,” okay.

The experience is tough ’cause now we have also a sticky “Pricing” area. And again, this is not to–I see this on many, many sites, so this is not just something with Divi. So how do we counter that? So you can actually use media queries with min heights. Many people are aware of min widths, right? But you can actually do min heights. So you can do something along the lines of min height is 30 EM, right? So ems versus pixels to account for a little bit with different font choices and font sizes people might use within their browser.

And so, maybe if you’re tall enough, then let’s have a sticky, and otherwise, just have it be normal. Modal dialogs, it’s very, very, very, very common to do it wrong ’cause it is very easy to do it wrong. It requires a lot about focus management, being able to say, “As soon as I toggle something I need to move into that area, then I need to be contained within that area,” because the idea of a modal dialog is that you need to complete this task before you move on to something else.

That’s why you often have, you know, the grayed-out areas of a page. But okay, let’s–try me. Okay, something popped up on the screen. Are you under 18? Okay, this is just a demo. And so I’ll tab through and you can see that at least we know that tabbing through this, the content is actually– the user’s focus is nowhere inside this area. So, as a screen reader user, they may never even know that something even popped up.

As a keyboard user, how do I even get to this information? So then, okay, well, I need to move focus inside and then I need to be contained within side because a screen reader user might not know that they’ve left a dialog and now they’ve ended up in–there’s hot keys to jump all over the page. And so if they’re outside of it, they don’t know how to complete the task before coming back in. And then, of course, when you escape it, it shifts that focus back to where you were.

So, some promising aspects is there’s a new attribute, a newer attribute, inert, which doesn’t have perfect support yet. So if you mix that with aria-hidden equals true and you apply that to pretty much everything behind your content modal, that pretty much contains everyone inside, because screen reader users have, really, no other content to really interact with. Same thing with keyboards.

And something of note in Safari for VoiceOver, there’s bugs across all of these operating systems and browsers, right? So they actually have an issue where focus doesn’t actually move inside if you actually have–the modal display none and then you show it. If it just pops in, that’s a little bit different, so use visibility hidden if you were to actually hide this. And something, you know, I’m talking about Safari as well, in iOS, is that actually accessible names, you should have had an accessible name to your button in the first place, but I see so many times hamburger menus that pretty much have no name and just visuals, right? The three bars.

And those pretty much are always skipped by VoiceOver because they would never even know exist. You try and flick, you try and tab, anything and nothing really happens. There’s no way of interacting with it. Now, there’s plenty of other issues but at least the screen readers and desktop might actually land on it, at least let you know that’s clickable or if it’s a link, they might actually just at least read the URL. So what are some more situations often missed? So we’ve got what I call “div-itis.”

Concerns for, you know, anything interactive, you see it all the time: pagination for carousels, you see buttons that look like a button but, really, it’s just a div. And I see developers all the time that go, “Okay, well, I’ll throw in a div and then I’m gonna put a–okay, well,” screen readers don’t know it’s a button, a–button. All right, the keyboard users can’t access it ’cause there’s no tab index set. Okay, tab index equals zero.

And then, on top of that, they go, “Okay, well, that should fix everything because I have a click binding.” But the click binding doesn’t get called because the keyboards aren’t tied to it anymore. So now you have to add in on enter, on space bar, to actually trigger your click events. Or is that even really worth it? You could have just created button type equals button. The same concerns happen with anchors with no H reference. They end up being kind of just like a div.

So, same concerns happen. So, as developers, as site owners, if you’re creating a button or, sorry, a link, and you have no real H reference, you’re gonna like, “I don’t know where that would point to,” you’re probably wanting to create an actual button. And I do note type equals button because, it’s a little thing but forms actually, if you hit “enter” inside of an input field, will actually trigger the first submit option, and that submit, the default state of a button is type equals submit. So it’ll actually trigger that.

So that’s why most of the buttons that I see if they’re toggle open, do something, type equals button is something you’d wanna throw on there. And then carousels, slideshows, I see all the time, you know, it’s automatic rotation, rotating through items and there’s even tools where it’s, “Okay, well,” and you set focus. When you set focus, pause it, or when you hover over it, pause it. And yeah, for digesting content, great.

But about someone with maybe ADHD or someone that has–gets sick from motion, they have no way of turning it off or I guess they just have to stare down a carousel for the rest of the time of being on that page. And that’s not really enjoyable at all. So a pause button is absolutely necessary in order for it to be really accessible. Or really, don’t even have automatic rotation. That would be great.

So I’ll also get into some maybe ARIA overlooked items. Aria-expanded is really the base of any toggle when you wanna open and close it because–so the screen reader, to kind of give you an idea of what that experience is like, so sighted users, sites cater to you all the time. Let’s say I click on a features or hover over a feature, and it shows something, right?

Sites have been designed to account for sighted users for a long, long time.

So I get immediate feedback provided to me that, oh okay, for editor, design, all these things have been shown. But as a screen reader user, none of that’s actually happening for you because the software itself, think of it as a pinhole view.

You’re only seeing a little–one piece at a time. So when you’re on a button, when you’re on an area, all that’s being announced is just that area. Now, there are tools within aria to help with that, so Focus Management helps, ARIA Live helps, and some of these attributes like aria-expanded. And what will happen is, when you first land on that button and you, you know, click. You land on it, it’ll say, “Expanded, collapsed.”

One of those two options. Okay, I get immediate feedback on the area around me, even though I’m just only on one button. When you actually press it, you get immediate feedback because here’s the trick about buttons and, yeah, generally buttons for screen readers, is that, as a sighted user, if you pressed on a link and nothing happened, how long would you wait?

How long before you go, “Did it work? Is it thinking? Is there something wrong?” That’s pretty much what you actually have to deal with as a screen reader user on every single button because you press it and nothing’s announced so if you don’t use aria live, if you don’t do focus management, if you don’t do these attributes like aria-expanded, how long do I wait?

Did it work? I don’t know. So aria-expanded gives that opportunity to immediately say, “Expanded,” and let users know, “Oh, okay, this worked and I can continue along in my traversal.”

Aria labels. Aria labels are great and in the presentation so far, there’s even been references to them, how to do it. Just understand it’s a double-edged sword. If you overwrite all of your links with, let’s say, “Oh, I’m gonna benefit people, and I’m gonna say, ‘Open to a new window,’ on every single link and I’m gonna do it as an aria label,” well, the danger of aria label is that it actually, all of its children inside that anchor, inside that button, are actually removed and not really accessible anymore. And only the label itself is going to be announced to screen reader users. So you pretty much negated any visual text, any information, and only supplied what’s in that label.

So if all you had was “Opens in a new window,” you’ve just ended up in a site with a whole bunch of links that just say, “Open in a new window.” Just not helpful. So you have to front load and actually include all of that visual text for it to make sense. This also impacts voice dictation users so, like I talked about LipSurf, you know. Now, the technology’s changing, VoiceOver actually even puts in grid-view option so they can say, like, “Tap 10,” and a lot of opportunities to not have to rely on the actual phrase of the button that you’re interacting with, but there’s plenty that do, and so if you overwrite the accessible name there’s a large potential for voice users to not even be able to access those buttons.

Another one, you know, is aria-current equals page, true. I kind of point those out so if we take a look at even W3C, to understand the reference, we always create sighted aspects to say, “Okay, there’s some visual indication of what page you’re on,” right? In navigation, sidebars, all these things, there’s usually some class equals active, and some background color. Screen readers just don’t get provided that information. There’s nothing visual for them.

So, that’s where aria-current equals page now will announce something for them. And pagination, maybe sometimes they’re not always going to different pages so then you also have aria-current equals true to actually announce kind of, hey, this is the current one of this set. And something that I don’t think a lot of devs realize is that CSS display properties actually impact the accessibility and the semantics of anything, really. I mean, it’s kind of, if you think about it, display none makes it so screen readers and assisted technology keyboard users, no one can access it.

It’s already showing that display properties impact the semantics and the accessibility of HTML. And so, if even, you know, Adrian also went over a nice little explanation and it’s a good example of, okay, well, responsive tables, right? So if you do display block, display flex, on a table, that loses all of its semantic value. So these are the common things that I started to see as I analyze sites, look through sites and it’s not exhaustive. There’s plenty more out there. There’s a lot of new ones here.

So you kind of go, “Wait a second. He’s pretty much spent the whole entire time saying there’s lots of problems, there’s lots of issues, and it’s all on me and I’m, you know, scared and frightened about all this.” But I’m actually not that pessimistic about this. I’m actually quite optimistic ’cause when I look at over the years that there were plenty of people announcing– making a voice.

But probably in the past five years I’ve only seen a huge increase in the number of voices, the number of devs, the number of companies, that are waking up and realizing the accessibility needs. There’s–if any time to jump into accessibility, now’s a great time. And so that’s why I kind of say, the future still looks– it’s very promising. We have so many voices out there, so many opportunities. Joe Dolson and the team putting together information. Gutenberg, all of these areas, are still improving and you can as well. And you can be part of that.

So that’s why I kind of say, you know, devs unite. Let’s work together and create a better future. Let’s get out of this, you know, image of the dark tunnel and into the brighter future that we can help so many people with disabilities and improve life for everyone. All right, questions.

Amanda: All right, thanks so much, Nick. I can really tell how passionate and, you know, how much this is important to you. We do have some questions from the viewers out here, so we have, yeah, we have about 15 minutes for the Q&A session.

First question was: “Do you recommend a starter or accessibility-ready theme?”

Nick: All of them have really good points. I don’t wanna say, like, “Oh, this has to be the one.” It’s still just, I would say, go through them. Find ones that really align with you, because they have been vetted, they have been reviewed.

Of course, there’s always room for improvement for any of them but, you know, the main pain point is, you know, we’ve worked on many projects ourselves in WordPress and a lot of times there is that page builder aspect where, you know, there’s even Genesis Frameworks, aspects like that where they still don’t have the page builder that many clients, at the end of the day, wanna say, “I just wanna drag and drop. I just wanna put something in.” And that’s usually where the pain point starts to come out.

So if you are just creating more of a simple site and you can just build it off of the basic WordPress set up, any of those accessibility themes are going to be beneficial to you and I would say, “Take a look through these themes. Find one that aligns with you and that’s probably a good starting point.”

Amanda: Awesome. Okay, thank you. Next question is: “Why don’t developers lock in required accessibility items within repository themes and plugins? For example, requiring all text on all image or video content added or color contrast, et cetera.”

Nick: So, this is where it gets tricky ’cause it’s a two-way street, right? It’s not just devs, it’s also really site ownership so content has all. You could say, “Everything needs an alt text.” But actually, it’s not that simple because there are times, so let’s say it’s all inside of an anchor, right? So you have images and text and a whole bunch of information, all inside of an anchor tag.

Well, if the image is–let’s say it’s a product, right? And you’re buying men’s gloves, let’s say. And men’s gloves, the picture is of men’s gloves. Maybe you could get into some poetic way to describe them but, to a degree, most people end up just going, “Men’s gloves.” So in that anchor, now you’ve got alt text that says, “Men’s gloves, men’s gloves.” Well, it’s men’s gloves and then the title of men’s gloves that would be inside that same anchor. So in that case, you actually want to say “alt equals blank,” or nul;, in a sense.

And you would actually still want that attribute but you don’t actually want it to be explained. Videos enforcing captions for everything is not that simple and a lot of times, like, let’s say Netflix, for example, when–having audio descriptions and captions. They went through some suits themselves and, you know, I think initially they were, like, “Okay, we have audio descriptions for 2000 videos.”

And you go, “Yeah, great.” How many videos does Netflix have?

Amanda: Brilliant.

Nick: So, enforcing is tough because content creators, would you wanna say you can’t launch because you don’t have it done yet? Okay, well, how long will it take? Now, it should be built in, it should be best practices, but it’s hard to enforce that. ‘Cause it’s really on the content side.

And there’s sometimes no answer.

So devs, still it would be great to enforce but it still probably would be, you know, you have to flag to say it’s allowed because even the WCAG spec says if this is gonna prevent a launch, that you don’t have one video with closed captions, that’s not a reason to stop. It’s about a due diligence plan, and working towards it. Now, I request it. Yes, it would be great to make sure everything has that. But we also have to be realists and I know that’s not great but if you think about buildings, accessibility of a building, how often does it get renovated versus a website. When’s the last time you updated a page? Probably maybe even since 8 a.m. today.

Hopefully, that helps answer.

Amanda: Yeah, no, I think that was a great answer and a really great question, so thank you. Let’s see. If there are additional questions, you can continue to put them in the chat. The next question for Nick is: “Can you suggest automated workflow tools for preflight accessibility checks and are there any that you would recommend?”

Nick: Okay, so you wanna kind of have build tools to kind of run through and run against it so that you could actually catch these issues before you actually even go live or go up into a production environment. And there’s a lot out there– aXe and these other tools, you can actually build it in. There’s a lot out there.

It’s–they’ll have–the main thing I would say, you know, I mentioned Pa11y as well if you wanted to kind of create dashboards and run through it and run ’em against builds. Again, it’ll only help you catch so much so the main thing I would stress is that it’ll help you a little bit but there’s always gonna be false positives, there’s going to be aspects that are going to be missed, so it at least steps you in the right direction.

But it doesn’t actually really solve everything. So that’s where it’s really important you look at your own code, review it, and make sure you, you know, just even run through it with a keyboard. Run through it with a screen reader. Run through it with these things, and help catch it before it even–it bypasses a build tool to then go to a live site.

Amanda: Okay, great, I think, yes, diligence is key, testing is key, as you mentioned. Okay, so we’ve got two more questions here. The next one is: “How would you rank the page builders in relation to accessibility? Page builders always seem to be adding new features but is one working faster or more diligently to make their product better in this area?”

Nick: Yeah, I would say, you know, we’ve switched through a couple ourselves. Again, Beaver Builder still had some issues and we kind of switched over and we’ve been working a bit with Elementor. But we still have to hack around it, to be honest.

It’s really–if you know a system and you know the structure and you know the tools that are available, at the end of the day it kind of comes down to, okay, well, if you’re getting used to those, it’s about making sure you have the job script workarounds or the PHP workarounds or the customizations to fix it.

So that’s why I kind of say it’s a lot of patchwork and a lot of fixing potholes and it’s hard to say ’cause I see times where they make improvements and then they regress. I see, you know, advocacy and then I see things sitting for a couple of years.

Because it–all the people making it, right? How many people are involved? How much time does it take? I mean, if you look at it, Gutenberg ran into the same situation, right? They had to now go back through and start to fix and resolve items, and there are still gonna be issues that come up once in a while. It’s never one and done, unfortunately. So I don’t wanna be, “Oh, absolutely, this one,” because I haven’t vetted every single one of them ’cause that’d be a lot of time on myself as well. So there could be, actually, a really good one that caters to you because you know it so well.

Amanda: Okay, great. Okay, we did get another question so there’s still two more questions. “Where do you feel developers could make the most positive impact on accessibility,” and then, in parentheses, it says, “type of contribute, feature area, et cetera.”

Nick: That’s a good one. Like I said, I think in one way it is, as developers, how can we contribute?

The first thing is getting into another person’s shoes, is to break outside of ourselves. The more–all developers–if all developers and all, you know, site owners pretty much said, “I’m not gonna just think about me,” a lot of our design concepts and a lot of our development concepts, a lot of the things that we create, infinite scroll items, all of the concepts that we create that go, “Wow,” probably would have had some more thought into them on the impact that it is.

So that’s why I kind of say, you know, the thing that I would stress is, you know, if you haven’t picked up any of these tools, any accessor technology, dive into it for a day. Close your eyes and just try and even use a normal site that you
do every single day, and could you actually understand what it is? But if you were to contribute–right?– really, if you’ve gotten really good at accessibility and you know a fair amount and you wanna be able to contribute, be another voice by all means.

If you’ve found something, blog it, post it. For these, you know, open-source tools, contribute, right? They’ve got problems and you’ve been having to hack around it over and over and over again, here’s the hack or here’s an approach to do it and try and, you know, fork and try and actually do poll requests.

Amanda: Okay, great. I think that’s very much in the spirit of WordPress Accessibility Day, you know, having so many experts together, so.

And the last question is, I guess, more of a personal one. They said–the comment is, “I love your approach on testing. So what drew you to accessibility and who has influenced you?”

Nick: Yeah, no, it’s a lot of people have. Close family, you know, they themselves have issues that they’re dealing with. Mine’s not as fanciful, like, but it’s really just, I think, maybe being abroad, maybe living abroad teaches you, it’s just like, again, break outside of your mold and break outside of yourself and start to empathize with others. And so, yeah, did I make mistakes early on?

Oh, absolutely, I made some bad code decisions. I thought, “Oh, this is cool.” But when I started to realize the impact, it really started to get to me, kind of go, like, “Well, a lot of these principles are just basics.

We’ve lost sight of the basics. You know, accessibility principles for the web have been around for 20-plus years and somewhere along the line we wanted to get cooler and cooler and cooler, and it’s not that you can’t be cool. You can create really interesting interfaces, but you just have to remember the basics.

The amount of times that I don’t see a button, you know, again, all these job script frameworks, it’s not that the javascript framework is bad as a whole, you know, React, Angular, all of them. It’s that the people doing it don’t remember the basics. And so, I guess that just deeply influenced me where it was like, “Oh, I can actually make a difference.” And then, the benefits, right? The–plenty of presenters so far have gone over SEO, user experience as a whole.\

There’s a lot of alignment. So when I first started on, really diving in, I started, you know, people would always ask, it’s like, you know, devil’s advocate: “Why focus on accessibility?” And I can hear people presenting and they’re, like, “I–’cause you should.” Like, yeah, but I think, you know, that’s not always so realistic. It’s kind of sad in some ways that, you know, you would think it should be that easy.

So it got me really passionate and kind of going, like, “How can I express this to people so organizations, clients, can finally realize the benefits?” And so, generally, if you need to express something, you know, get buy-in within your companies or a client or something, is I always go with the selfish method. You know, it’s if you just scare them with legal, they’ll do just enough ounces of flair to get along, get by.

It’s, “Hey, did you know that you’d get benefits of SEO,” and they’d be, like, “Ooh, ooh, ooh, SEO, that’s much more important.” If you kind of point out, you know, “Oh, okay, well, you know, the amount of people with disabilities that you could increase,” right? An e-comm site. “You could increase up to 20% the amount of users.”

Banks, “Hey, stop thinking of it as–you know, you always talk about wanting to be individuals, wanting to be, you know, about the people. Well, you can create marketing campaigns about how you’re about the people and you’ve worked hard to make the accessibility.” So that usually then gets the buy-in to then finally do the thing that I wanted to do all along, which is make sure the sites are accessible.

Amanda: All right, perfect. Thank you so much, and for everyone that asked questions, thank you, those were great questions. Nick, it’s been a pleasure having you and, again, thanks, everyone, for attending this session, “Developers Unite: Navigating Accessibility in WordPress.” …

Show me the Money!

Sumner Davenport: The Profitability of Accessibility

Can creating or remediating WordPress sites to include Accessibility increase clients and web designers profits?

Can you measure how much money businesses are losing out on because of a non-Accessible website?

Can profits be lost by designers who are not including Accessibility in their services?

The answer to all of the above is “Yes.”

However, there are misconceptions around the cost/profit of Web Accessibility. Let’s look at statistics, do the math, check out the bottom line and learn how Web Accessibility can affect profitability for both designers and their clients.

Watch Sumner’s Presentation

Transcript

Joe Simpson, Jr: Greetings again from Southern California. My name is Joe Simpson Jr.

I’m a volunteer wrangler for WordPress Accessibility Day, I’m also a WordCamp WordPress Meetup and WordCamp Community organizer as well as an accessibility advocate. Similar to Alicia’s story that we just heard in the last hour, Sumner Davenport shaped my re-entry into accessibility as well.

Now I know two people in my entire life that are me. I have a workout friend who is always ready to go, no matter rain or shine just like me, no excuses.

Sumner is that other person. She matches my desire to learn with inspiration, knowledge and nurturing leadership here in the North Valleys of Los Angeles.

Now I met Sumner, I went to a meetup in West Hills to see her speak, because I was hosting our first WordCamp in Santa Clarita and I had heard about her and the topic was very interesting. What happened at that meetup is why I’m here before you today.

She’s that type of magnetic personality. She killed her presentation and she said yes and presented at our meetup and we’ve been close ever since.

Sumner will present the Profitability of Accessibility, but first let me tell you more about this amazing woman. Sumner Davenport specializes in web accessibility on WordPress.

Her passion is to educate business owners and web designers using WordPress, on the increased value and ease of it of an accessible, an accessible site. Through her long-standing organization she and her team built, maintained, evaluated and remediated, dozens of WordPress websites to WCAG 2.1 success criterion. Her clients are referred by other clients and from attorneys.

She’s an active, she’s active in accessibility and legal conferences and educational venues. At WordCamps and local WordPress groups she regularly speaks on topics related to compliance issues for WordPress.

After presenting at WordCamp Santa Clarita in 2019, she volunteered to be a speaker wrangler at WordCamp Santa Clarita and is on the speaker wrangler team for WordCamp Los Angeles 2020. She and two colleagues founded a local meetup to discuss WordPress and accessibility and invited renowned speakers on accessibility topics to be guest presenters.

Partnering with two other local meetup organizers they organized the first annual mega meetup WordPress Accessibility Day 2020. She is a member of the International Association of Accessibility Professionals, the IAAP and is an active supporter of various disability organizations.

Please welcome Sumner Davenport presenting the Profitability of Accessibility. Sumner take it away.

Sumner: I don’t, I don’t, I don’t know if I can talk after that introduction Joe. Goodness, I’m glad I, I have my Kleenex handy.

You really touched me with the beginning of that introduction. Thank you so very very much.

I am very honoured to be here tonight. I’m, I am so glad that I was selected to speak.

Thank you so much to Joe Dolson for putting this together, and for saying yes to me and of course for Joe Simpson. He is a inspiration to me a lot.

So I’m going to jump into my topic. Let’s see if I can get my screen share to work here today.

If there’s any problem hearing me, if you have any problem with my screen, make sure that you make a comment so that one of the Joes here can let me know. If you have any questions as I go along, please put them in the chat on the stream on YouTube, so that Joe can let me know what those are, because I want to be as helpful as I possibly can during the time that we have tonight.

So let’s see if we can find my PowerPoint. So the topic that I was going to talk about tonight is called The Profitability of Accessibility and I feel very honoured that last night Joe Simpson took a few minutes to let me do a kind of a test run on this topic.

And I made a little bit of an edit, and then today another associate said, hey let me hear what you’re going to do because I can’t be there tonight. So I did, and after hearing what I had to say she kind of hemmed and hawed and said hmm, I’m not thrilled with the title.

I thought well you know, but the title is Profitability, the profitability is the degree to which a business or activity yields a profit or a financial gain. Although accessibility, bringing accessibility to all persons is really the right thing to do, it’s important if this is what you’re doing professionally, that you can make some money, you can have an income, you can thrive, so you can enjoy it.

So yeah, profitability. So I know, I thought about it for a minute and then she said, I think it’s all in the title.

I just don’t like the title. So based on her input I changed the title.

So tonight I didn’t, I did not warn Joe Dolson. I, already sent in my slides.

So I apologize if you are following me on the slides online, this next slide is not part of it. Just one, it’s now called, Show Me the Money, because isn’t that what people want to learn?

If you as a web designer, as a business owner, as an agency owner, if you start to put your efforts into including accessibility and do all the projects you do for your client, don’t you want to know that there’s a way that you can get a return on investment on your time and your efforts? Well I kind of figured that was a better title and for anybody that knows me, it kind of sounds more like me as well.

So tonight we’re going to talk about how you can get a return on investment on your time and your efforts with accessibility and how you can then also have a good way to explain accessibility to your clients, so that they also can see the return on investment for bringing accessibility into all of their digital products and their company. So first off just of course we all know this, but we’re just going to touch on it, but what is accessibility?

Accessibility is removing the barriers that prevent people from having access, equal access whether it’s a building, an area, a service that’s being provided, a website an app, any digital product. And accessibility is taking that initiative to create products that are usable by, with people, by people, with the widest possible range of abilities.

What some people may not know, is when you think accessibility first, and think about making things accessible to all people, you open so many avenues, so many possibilities, so much creativity and innovation, that accessibility creates good growth in a lot of ways. And I’ll touch on some of those tonight.

What is web accessibility specifically? We have seen the wA11y, sometimes the w is out there, it’s just the A 1 1 y and what that means is that between the A and the y there is actually 11 letters that should be in there, because it spells out the entire word, accessibility.

We put the W in there for web, so when you see wAlly or Ally, whichever way you want to pronounce this, it’s accessibility. It’s about people.

It’s about making a difference. So web accessibility refers to the website that is designed for everyone!

We want everyone, regardless of their ability or disability, to have the same ease of access. That’s the most important part.

It’s the user experience that everybody gets to have. So we also have to keep in mind that web accessibility, it actually involves a wide range of disabilities.

So many times we hear people talk about only screen readers, or blind individuals, or somebody needing captions without taking into an understanding that there are far more areas and ranges of disabilities that we need to consider. So then I get people that say this to me all the time, rather sarcastically, they unfortunately do.

Is there really a need for web accessibility? I mean, after all how many people really are disabled ?

I’m in the United States, so some of the figures and facts that I will present this evening are based on my area. But since this is global I also am going to show some figures and I’ll make comments on some other countries as well.

Because accessibility is international. In the United States, 25.6 percent of adults in the United States have some type of disability. And that number fluctuates, because there are disabilities that individuals are born with, there are disabilities that people suddenly get because of an accident or an illness, or surgery.

There’s disabilities that come with age. So that number is not just 25.6 percent. It’s really a fluctuating number that could affect every single one of us.

Around the world there are more than one billion people living with some form of disability. So when someone says, is there really a need for web accessibility, is there really people that need it?

I kind of think there is. I kind of think that it’s important that we take a look at what I know to be an invisible segment of our society.

When I ask people why their site is not accessible or why they don’t consider accessibility, they don’t think they have ever seen or know anybody, but maybe that guy that just passed him in the hallway, that might have a disability. They don’t consider how many people they’re overlooking.

It’s an invisible segment of our society that we need to bring visible. And it’s not them versus us.

It’s not one group versus another. It’s all of us, it’s all of us collectively that make up this group.

People with disabilities are in a community that makes up a whole lot more than just the single individual, because it’s their families, their communities, their friends, the people that they do business with, the people that they interact with, it’s a very powerful consumer base. And if a company has a website and they’re not accessible, they’re missing out on this very powerful base.

So then the next question comes up. Is there really a problem?

I mean after all, how big a problem, if there is one, how big is it? So for those of you that are familiar, there’s a company WebA I M, and every year they do an audit on the home page only, of one million sites.

And for 2019, actually I correct myself, February of 2020 they did their million sites evaluation and what showed up was, 98.1 % of all the sites they tested had errors, had barriers to people with disabilities.

Ninety-eight point one percent of the sites they tested out of one million, less than 2% were fully accessible. And I put on the screen that big number because I want people to see that number.

I want it to be important. I want it to, to let it be known that there is an opportunity for us as web designers to make a difference.

It’s a huge opportunity and the source link to that is at the bottom of the screen. But are there other problems with the lack of web accessibility?

I mean other than just WebAIMS one million report? Absolutely, because of the lack of web accessibility we are seeing one million report?

Absolutely, because of the lack of web accessibility we are seeing a drastic increase in web accessibility lawsuits. As Joe mentioned, I work with clients who are referred to me by attorneys.

Since Covid started, my phone, my email, people contacting me because they’ve received demand letters, attorneys contacting me inquiring about what can be done for their client. It has tripled.

I can’t handle all of these people. So far we’re doing a good job at either working with them or referring them out, but that is a huge increase just for me.

So this is not going to go away. Whether it’s Covid where people are now, everyone is in their home and relying upon the internet, or whether it’s going to be after Covid, when it becomes real obvious that everyone deserves the right to equal access everywhere, including the web.

And personally I appreciate that there’s a tension being brought to the lack of web accessibility, I just don’t care for these trolls at all. So the more that we make websites accessible, the more these trolls, is going to make their efforts more difficult and that’s a goal of mine.

Here’s an interesting piece of information from the report from WebAIM. The top six common types of WCAG 2 failures on these sites that they tested, look at this.

Low contrast text, 86 percent point three of pages had low contrast text. Earlier today there was a presentation about colours and contrast.

So hopefully you attended that particular presentation. If not, when these videos are available, I do hope that you go back and you watch and listen to what Colleen had to say.

Right at the top, Low Contrast. Personally, I don’t understand why people put gray font on a light gray background.

That’s never made sense to me, but I see that on so many sites,  and obviously WebAIM found something similar. The other one, Missing alternative text for images, 66%.

Come on, that’s like the one thing we talk about the most. Empty links, Missing form fields, Empty buttons, Missing the document language?

We’re not even going to tell people what the language of the website is? How easy if you had a website that had these six errors, they came to you, how easy would it be for you to remediate that site?

Keeping that in mind, why aren’t they? That’s my question.

Maybe they need you to knock on their door and tell them. Now at the same time I read legal cases on a daily basis.

I always tell people if you can’t go to sleep, something that’s better than counting sheep is to read some of these legal briefs. They’re not really entertaining, but they are educational and the most common problems referred in these cases, the website prevents screen readers from accessing primary content.

Oh boy, here we go again, no text description for an image, forms not working, you can’t increase the text to 200 % without loss of content or functionality? Here’s one that a lot of people don’t think about.

If you have something on your website that has a time limit on it, you need to let people have a way to adjust it, disable it, slow it down, restart it, instead of just timing them out and kicking them off. Because a sighted person would see if there’s a countdown, but perhaps someone with a disability either doesn’t get the warning, can’t read the warning, can’t respond fast enough to the warning, because you didn’t give them enough time.

Web pages without titles, oh my goodness. It is so easy to put a title in a WordPress site.

How could that happen, I’m beside myself. The purpose of each link cannot be determined from the text link alone, and that’s where we get a whole lot of those, click here.

And I believe we had someone just a couple of presentations previous, that talked about just that. Very, very important.

So you see that the problems that are being referenced in lawsuits and the ones that WebAIM found are simple to remediate. They’re simple to put in in the first place, but when you have a client come to you with a site that has these problems, these are the simple ones to fix.

So what’s the solution to the lack of accessibility? Very simple, make products that are accessible to everyone out of the gate.

We do know that now that there are themes within the WordPress repository that are accessible ready. I do know there are uh people that, that’s all they will work with, is an accessible ready theme.

And then they make sure that the contents and the images and everything they add to it remains accessible. They make their job easy.

Remediate products and areas that have barriers, support companies and products that are accessible and innovate with new products. You may not have known, that the disabled market or excuse me the disabled community, is actually considered to be extreme users of certain products.

What that means is, what you may not also be aware of is that voice recognition software has been available for people with disabilities for 20 plus years, and because people with disabilities were using voice technician, voice recognition technology, that same technology is now used in Alexa and Siri and Google’s assistant. So something that was done for a, what was a select group of people by their first analysis, is something that has now been rolled out for everyone.

So it’s not a small group. It’s all of us that benefit from these products.

But let’s move into what people want to know about tonight and that is, the Increased Value of Accessibility for both Designers and Companies. What you hear a lot is, accessibility can drive innovation, such as what I just mentioned, it can enhance your brand or hurt it, it helps SEO, it can minimize legal risk and it can extend your market reach.

And yet, those five points to some people are just vague. Yeah, maybe, but what about me, what can it do for me, for my company or what can it do for me?

I’m a designer with a small agency, what can it do? So I want to remind you, if my slides will progress, this market, 98.

1% of the market needs you, for your web accessibility knowledge, expertise to go in there and make a difference, 98%. So when I hear people tell me, well you know what, I, my client doesn’t want to pay for accessibility.

I don’t know what to do? Ninety-eight percent of the marketplace need you.

So if that client doesn’t want to be inclusive and bring accessibility in and you have done your best to educate them, maybe you need to turn your attention to somebody who will appreciate you and your skills and your commitment and your dedication. Just saying.

But then we come back to, well what can I charge? You know I mean, I, I don’t know, how can I mark this up?

How do I make a living doing this? When I first had a website made for me it was in 1996, 97-ish, the person charged me $3,000.

I didn’t think anything of it at the time, other than, phew, that’s a lot of money, but I also thought that must be the going rate, because I had nothing else to compare it to. But the person that designed my website was not very pleased, because I kept asking questions and I wanted this little tweak and just that change, and can we do this, and let’s move that and he made a statement one day and said, look I just don’t have time for all your questions.

If you want answers, go take a class and get the answers for yourself. So I did and I never had to ask him another question, but I also never had to pay him any more money, because I knew how then to do it myself.

So trust me, I never say that to clients, but I look back at that and when I first started working websites myself, I knew I couldn’t charge $3,000. I didn’t have that much intelligence, expertise, information, experience, even though I’d just taken a class.

I didn’t think I could and I didn’t. So I came up with a value calculator and here’s where if you have a pen or pencil handy or you take notes on a notepad or something, I’d like you to consider this.

When you think about what is your value when you include accessibility into your services, what do you charge for a basic website prior to adding any accessibility to it? Put down that figure.

Now I want you to consider your personal value. If you have taken classes on accessibility, put a plus.

If you have certificates or degrees, put a plus. If you have any business awards or accolades, whether they’re related to accessibility or just because you have integrity and you are a good business person and you take care of your clients, give yourself a plus.

If you are a disabled person yourself or someone in your family or a friend that you see often, put a plus. If you have employees that are disabled that work for you, put a plus.

If you have an understanding of WCAG for each level of understanding, put a plus, or a big plus. If you are very in, involved in a particular niche market that you know real well, you know what the market is, what drives them to do what they do in their business, put a plus.

My niche market is attorneys. It’s been attorneys for the last 10 and a half years.

So I know attorneys. I know the legal marketplace, I know what they’re allowed to do and what they’re not allowed to do when it comes to marketing and advertising.

I am always networking with them. So I know that market.

If you have a market like that, give yourself a plus. Give yourself a plus for every year that you already have been including accessibility.

If you can write code, give yourself a couple of big pluses. And if you often network with other accessibility professionals, give yourself a plus.

And then think about what else sets you apart from everyone else. That is a huge plus.

When you look at all those pluses you’re going to put a dollar amount to that, not with me tonight, but at a time when you’re going to sit down, because this is something that is personal to you. Not what everybody else is charging, but what is your value.

When you understand your value you can explain it to your clients and that’s the important part. So you start with that value, then you go to something where it requires manual efforts.

This is an excerpt, a clipping from one of the checklists that we use in my office. And it’s a spreadsheet that has on the left column whatever action that we need to take in order to remediate a site, who’s going to do that, is that person someone that works internal in my company or do we have to outsource, and what is the cost.

Every person that works on a project, if they’re internal, they have either a salary or a negotiated amount that they are paid. If we outsource it, we are paying whatever they tell us is their value to do that for us.

We go down the list and we make sure that we cover all our bases. We do test everything on JAWS and N V D A by a native user of that.

When we are remediating images we don’t just throw in the alt description and call it a day. We research and maybe we have to find them a new image if the one that is on their site is really not that great.

Maybe it needs editing, because it’s too pixelated, maybe it’s too big, maybe it doesn’t fit the content? We’re going to change the meta info and the geo info for search and we’re going to do all that, because we go the extra effort.

What we’re doing for our client is more than just fixing the technical problems, we want a good user experience for them as our client and their website for their users and their visitors. So think about this type of an effort and what value would you put into each one of those?

How would you separate yourself from everyone else? A lot of times people calculate an hourly rate.

I talked to someone this week who told me he came to me and asked me if I’d hire him, because he couldn’t afford to be freelance anymore. So I looked at what he charged a client to work on a website and how many extra hours got thrown in that he didn’t calculate.

The end of the day, he was making less than $7 an hour. So in Southern California you can’t live on that.

So I told him, if you’re going to calculate your value by an hourly rate, ask yourself, what is your resentment number. What is the lowest amount you would ever allow a client to say This is how much I’ll pay you per hour and take that number and multiply it by four.

You should never work at a level that causes you to not enjoy the work that you’re doing, because accessibility can be a whole lot of fun. The people that you will meet, the clients when they get excited, it’s just fun.

And then you have more value, updates and maintenance plans. In a lot of the settlements we’re seeing, in these legal cases, they’re asking the court to require that people test their sites every six months.

That’s a maintenance plan for you. So that’s how you add value, that’s how you add more to you.

Your total value then becomes your unique value, your cost per hour, your team that you work with, the complexity of the site that you’re going to be working on, and how well your skills and expertise can do that, the timeline. Rush jobs always cost more and future offerings, your your updates and your maintenance plans.

Then you put that into a strategy. When I first started in business in the 80s, long time ago, I was out in my neighborhood asking businesses why were they successful and the guy next door wasn’t?

Why did they continually succeed when people across the street kept going out of business? And what I heard more times from the successful business, is they had a plan.

They didn’t wing it. They put in a plan and they planned it out as far as they could.

They put in that plan, not only the type of customers and clients they wanted, they put in that plan the type of education they may need in order to satisfy those clients, they put in that plan what would happen if business really picked up. So many people plan in the minute and worry about something going wrong, but as I said a couple seconds ago, my phone calls and my emails have really exploded in the last few months.

Fortunately I, have a list of people that I can call upon, that I’m able to make sure that that those contacts and those inquiries were taken care of. Take the information about your value, your expertise, what kind of websites you want to work on, and what you want to do, and put it into a plan and follow that plan.

Be transparent with your client but don’t be invisible. What we do for our clients, is we either work in Basecamp or Asana.

We work in Slack and Toggl and we give our clients reports all the time. They know exactly what we’re doing for them, so they don’t have to worry.

And what we do, is we audit their website and we give them a report. And we may audit that website with an automatic tester, before we put our hands on it and manually test it, and we will give them that report, but then we make sure that they see the difference it makes with someone who is keyboard only, and someone who is screen reader.

That way they get a better understanding of their target market. They get a better personal understanding of accessibility.

I have been working with accessibility and websites for 12 years, maybe a little bit longer and I was brought to my knees humbly, at that point. I had been designing websites and I thought I was doing a great job.

I thought I was really proud of what I had, and then a member of my family who is blind had the benefit of someone coming to show her how to use a screen reader to access the web and visit websites. I was emotionally blown away by how much freedom it gave her, but I also was humbled when I gave the man my URLS of the sites I was so proud of and asked him to test them.

And not a single one of them could be read by a screen reader. My world changed that day.

And so I’m hoping that as you get accustomed to accessibility, your world takes a shift and you shift to where this just becomes part of what you do, don’t even have to think about it. So after you get the test and you find out what you’re doing and you start working with your client, please do the easy stuff first and the reason for this is, if you are working on the most difficult part of the website where you possibly have to write some new code and redesign certain things, your client doesn’t see what you’re doing.

He doesn’t see that you’re making any sort of progress at all, but if you go through the little things first or what I call the easy things, not little, they’re all important, the easiest things first and then show your client as you go along. Your client sees progress.

Your client sees hope and knows that you’re doing what you’d promised to do. We always follow the WCAG, the checklist.

I have this spreadsheet on the screen that shows the guidelines and where they fall on the WCAG, and all of our spreadsheets we reference not only with internally to each other, but to our clients, which web content accessibility guidelines success criteria we are meeting for them. They don’t care, but they do care that we tell them.

They don’t understand it, but they care that we tell them and that’s the transparency of it. And that’s what’s important.

Plus when you follow the WCAG you learn the WCAG. When you do this, the simple stuff first you learn.

It’s easier to learn. So basically you can have an increased profit with your business by increasing your value to your client, increasing in the fees that you’re going to charge them, because of the value of what you’re bringing to the table.

This will increase your business income and unless you go out and buy a brand new Ferrari, it should be an increase in your profit. But I want you to notice that one thing I didn’t say, I didn’t talk about plug-ins as part of this process, because it’s good bad and ugly with WordPress.

The good is there’s plugins that can do work for you. The bad is, a lot of those plugins will make the site worse and you’re now going to have to figure out how to remediate over the plugin that you just installed.

And the ugly is that there are plugins that through their marketing efforts are going to try to tell you that they’ll do your job for you. And then when they don’t, you’re the one that’s in trouble.

So don’t be the bad apple. Be willing to put in the effort.

You will enjoy it, you’ll get excited, trust me. Now we’ll get to the second half and I promise that this is a good part of it that you’ll be able to share with your clients.

The Profitability for Companies. People with disabilities are not a solitary market.

They are surrounded by family members and friends. They recognize products and services that accommodate people in society.

They will refer to people when it is an accessible website. So you want to show them the money.

In the U. S., the total after after tax disposable income for working age people with a disability is 490 billion dollars. That’s a lot of money.

Discretionary income which is the income that they get to spend after they’ve paid all their their debts and their taxes is still 21 billion. Most people aren’t aware of these numbers.

You want to share these with your clients. Interesting note that we discovered, is that individuals with hearing difficulties represent the disability category with the greatest amount of discretionary income, followed by people with vision disabilities.

So when you heard about captions from Meryl earlier, earlier today this shows why that’s important. You can explain that to your clients.

If you’re in the U. K. what we have there is, internet users are 10.7 million or 10.07. Sixty-nine percent of people will leave a site if they have a problem with access and they will go someplace else.

This is called the click-away pound report and in my resources I do have a link that you can read this entire report and share it with your clients. I also have a Nielsen report that gives all the information for U.S. companies, but the worst case scenario that you can tell your clients is that the cost of a lawsuit is far greater.

An attorney retainer can be up to $5000, the settlement costs the loss of work. Those are real figures and I do not lead with this with my clients.

I lead with the numbers for the market that they can reach. If they don’t want to listen, then I’ll bring this part in.

But how should they market to the disabled community? Decide to developing products that meet that needs of people with disabilities.

They should get involved in the community. They also need to employ people with disabilities.

Inclusive advertising, put an accessibility statement on their website, because far too many designers think, well I’ll just go in and tell my client if they make their website accessible, that people will flock to it. That’s not true.

It will give a boost to the SEO in some cases, but they still need to do their marketing. It’s essential and this is the type of marketing that they need to do.

If they do this marketing, if they do it genuine, they will see a return of that marketplace, because like any other community, people with disabilities do talk about people that treat them right. And when you think about your price and your value just remember there’s always somebody who’s willing to do it cheaper.

So don’t cut yourself short when you’re talking to your clients about your value. Make sure that you go for the big value.

So some of the references are resources that I’ll share with you, is the automatic accessibility checkers that we use. We don’t use one more than another except, the top two.

We love the Deque Axe-Pro Beta, because of the type of reports that we can give our client and we love the Tenon API which you can put in your website, so that you can see as you’re working what you’re doing and what needs to be done. So you don’t have to wait till something is done to go, did I do it right?

By putting the API on your website for this one, you’ll be able to watch your progress and learn as you go along. Other resources that I mentioned, these are places where you can learn knowledge: The Web Accessibility Initiative at w3.org has a free course on the introduction to web accessibility, and you can get a certificate for completing that course and it is a great course. I’ve done that course.

I refer people to that course. It’s full of knowledge.

Knowbility, excellent resource, Deque, WebAIM, CSUN, University of Illinois, University of Washington, the information is available. The educational resources are there.

If you need to have a native user to test, here are three places where you can have, you can contract with them for someone or gain a referral. Again, Knowibility Access Works, Pearson for the blind and CSUN which is here in Southern California.

Also in my slides will be the links and resources to the statistics that I quoted for the companies, for the number of people in the community and the spending power. So in summary 98.1% of websites need remediation. One in four people have a recognized disability.

Accessibility is international. It’s a right, it’s a, it’s a personal right, it’s a civil right.

Plan your design to include accessibility, have a strategy for remediation, understand the why and how of your value to a client, understand the potential market so you can explain it to your client. Check the obvious and fix those first, fonts, structure, colour schemes, video, audio.

Don’t rely only on automatic testers. Test your site manually.

Have a native user of accessibility technology test your site. Be transparent with your clients and support the community.

And I know I talked fast. I wanted to give you a lot of information and since I know we’re being recorded you can come back and visit this information again.

But I do believe if there are questions, maybe I have a couple minutes to answer questions.

Joe: Yes you do, thank you so much Sumner.

What a great presentation, thank you. All right, let me refresh here.

Our first question is, Is there a study answering the following question: How many people leave a web page because of accessibility failure?

Sumner: Sixty-seven percent. It’s in the pound away report.

Joe: Okay

Sumner: And the report also indicates that when people leave that website they don’t give up, they do spend that money elsewhere.

So it’s a total loss.

Joe: All right, do you feel designer and developer reluctance in folding in accessibility is that they undercharge or overestimate their bottom line?

How would you recommend they address this or can you share a brief experience?

Sumner: My recommendation would be that they go through that list of what I did for value and accept more about what their personal value is as a designer.

And if they’ve undervalued themselves, this is so, this is probably a personal issue that they need to take and look at. And they might want to sit and work with someone.

I sit with designers all the time that want to discuss, how can I increase what I charge? I don’t know what my assets are?

So if, if a person will take a list of what are their personal assets, like the list I rang off and then reevaluate. What does happen, is many times they don’t charge enough, they get burned out.

And then it becomes resentment and that doesn’t work, but at the same time whatever amount they charge you don’t want to overcharge because you’re going to have to live up to that amount.

Joe: All right, next question, do you think that web development is driven too much by developers needing to rapidly solve problems defined by business rather than by users?

Sumner: Not sure if I understand that question.

Joe: Okay, let me, let me restate it.

Do you think that web development is driven too much by developers who are try trying to solve business related problems instead of trying to solve the problem in terms of how a user would use it?

Sumner: So if I understand that correctly, a client’s going to come to a designer and say I need a website built, because I need to sell a product, instead of I need a website built that’s the best for user experience so I can get more business.

Joe: Correct

Sumner: Okay, well yeah, clients don’t know. We have to educate them.

That’s what they need from us. They need us to say, hey you know what, that’s great let me help you understand how we can make that that dream of yours even bigger and more profitable.

So we as designers need to also be educators. Once we understand it, we can explain it.

Joe: All right, this is a really brief one, For the non-legal, what is a demand letter? You mentioned that in your presentation.

What does that mean in relation to accessibility?

Sumner: Demand letter is, it’s actually a form letter unfortunately, but it comes in on an attorney letterhead and it says dear website owner I’m sending you this letter because my client a blind user or a person with another disability, attempted to visit your website and there was barriers that prevented this person from equal access.

So it’s important that you contact our office to discuss some form of remuneration for the difficulties and the problems that our client has endured. And that is the precursor to them filing a case.

They send out the demand letter, because they want someone to call and go please please please and beg that you don’t hurt them. When uh most of those demand letters don’t turn into cases, but many of them do.

In either case, it’s important to consult with an attorney how to respond.

Joe: Awesome.

Okay our final question is, excuse me, if you build a website with accessibility in mind and the same site without it what do you think the the difference in cost would be between the two sites in terms of what you can charge? That’s that’s a difficult question.

I’m not sure. . .

Sumner: Well, I don’t know that I can answer it, because if I go back to when I was building sites before I knew anything about accessibility and I know what I charge then, versus what I charge now, I don’t know how I would back out all my accessibility efforts to try to figure out what that would be.

Joe: Yeah, yeah I was gonna say I wouldn’t, I mean

Sumner: I, I can’t I can’t even figure that out.

Joe: Yeah, that’s a difficult question.

It reminds me, I used to, I used to speak um at high schools um or go to the school when they had the parents come to work and there would always be a kid who would say, how much do you make, which is, I mean it’s a random question. I’m not making fun of it, but it’s a difficult question to quantify, because your value is based on that formula you talked about.

Sumner: Exactly and too many times I see in forum posts and discussion groups where someone will say, well okay I’m going to build a five-page website for a client, what would you charge? Well first off that’s not enough information to find out what that price would be, but on the other hand don’t choose somebody else’s number.

Your value and their value are totally different and and I, I, I really believe that when we get into that thinking pattern where we, so what is it I’m bringing to the table here? And be real clear of what I’m bringing to the table has a big value to this client, because no one else is bringing this same value.

And I’m going to make a difference to this client and their website and the user experience that no one else is going to do, because they’re not me. And that and it’s not ego, it’s confidence.

Joe: Great, well thanks again Sumner, um what what are you up to in the next few weeks, or what what can we look forward to hearing from, from you with?

Sumner: What well, I’ve got a lot of speaking engagements, it seems, you know since we’re not traveling the country or the world right now.

Everybody’s on Zoom. So I have a lot of that and um we’re planning for a next meetup that’s coming up that we’re going to do another hands-on.

We have the WordCamp Los Angeles that’s coming up in a couple of weeks. So there’s a lot still going on.

Joe: Awesome, well thanks again for for sharing with this incredible international audience and I know we appreciate it.

Sumner: For people that want to, for I didn’t, sorry I didn’t mean to interrupt Joe, but for people people that want to follow me I’m Sumner Davenport on Twitter, I’m Sumner Davenport on LinkedIn or please go to the meetup and look for the WordPress San Fernando Valley.

And since we’re on Zoom you can come in from anywhere in the globe and participate and contribute and let’s all learn together.

Joe: How, how can I be so rude and not let you lean on that.

All right thank you again Sumner.

Sumner: Thank you, Joe.

Joe: All right I personally like to thank Joe Dolson for his leadership, I’d like to thank my moderators Zsolt Edelényi and Danang Aprias Noor Fadilla and all the volunteers and organizers who made this incredible event possible. As it continues on, make sure you check in for our next presentation who’s going to be hosted by Robert Remedios.

He’ll introduce our next talk called Gutenberg Accessibility a Screen Reader User’s Perspective with Raghavendra Satish at at five o’clock UTC on this same channel. See you there and we’ll be back after a short break.

How to Plan & Design For Web Accessibility

Dylan Wages: How to Plan and Design for Web Accessibility

Designing an accessible website takes planning at all stages of the development process. In this presentation, I will go over key design and UX elements and how to make them accessible. I will cover topics like navigation, page structure, colors, links, ARIA labels, and testing tools to help you accomplish a more user-friendly and accessible website. 

Watch Dylan’s Presentation

Transcript

Dylan Wages: All right, my presentation is about “How to Plan & Design for Web Accessibility.”

Let’s see. My goals–my goals today are to help you gain a clear understanding of what website accessibility means, learn about the different levels of website accessibility, how and when do you plan for website accessibility, go over website accessibility design principles and how to apply them, and also just learn about a couple tools to use to kind of gauge your kind of level accessibility of your site.

We’ll go, kind of, more in detail and I actually demonstrate those when we get to that point. Website accessibility. An accessible website is one that can be used by everyone: people of all abilities and disabilities. When thinking about disabilities, we usually think about, you know, blindness or individuals in wheelchairs or hearing impaired.

Those are kind of like, just kind of standard, what people think. But there’s–but there’s more disabilities. They come in different forms like color blindness, muscular dystrophy or sometimes a temporary disability. People don’t even think about that. Someone can have a broken arm or a hurt hand, and they will just need to navigate through a website without using the mouse and that–this affects all ranges of people.

Yeah, but just–I think we need to remove as many barriers as possible for them so we can have the same–so they can have the same access as everybody else.

Why accessibility matters.

It’s socially responsible, but just being more inclusive for as many types of people is kind of what we’re trying to do here. And it’s great for SEO, which is surprising to hear to a lot of my clients when I talk about that, why it’s great for SEO.

We’ll go over some of those later in the presentation. It allows your organization to reach more people, and by doing that, increases revenue. And that’s surprising for some of my e-commerce clients that don’t even think about, well, why does that increase revenue? So we can kind of go over that in this presentation as well. In some cases, it may be legally required to be that, and that’s true on some of my non-profits and some, like, government organizations that I have worked with in the past.

Now, we’re gonna go over, kind of, I guess the boring part of this presentation, I call it. But it’s kind of, just kind of setting terminology a little bit. It’s kind of–’cause you see a lot of terminology like Section 508 and AA and AAA and I kind of like to kind of set the bar on that. I try to keep this section short and kind of brief but it kind of helps, terminology. I also wanna preface it, I’m not a lawyer, so I’m not giving any legal advice on this, but I want you to understand that just kind of where these terminologies come from.

What is ADA compliance?

You hear this term, ADA compliance. American Disabilities Act (ADA) from 1990 is a comprehensive federal civil rights law prohibiting discrimination of the bias of disability. Title II of ADA applies to the state and local governments, while Title III applies to “all places of public accommodation.” However, both sections require organizations remove any barriers to a disabled person’s ability to access goods and services.

Now, Section 508.

Yeah, I’m not gonna quiz you on every section of this. And we had Section 504. I’m not gonna go everything but this is kind of abbreviated timeline and version of all the laws haven’t passed. So we’re gonna start with Section 508. It was amended by the Workforce Act in 1998. Requires federal agencies to develop, procure, and maintain a use of information and communication technology known as ICT that is accessible to people with disabilities, regardless of whether or not they work in a federal government.

The US Access Board established the Section 508 standards to implement the law and provide the requirements for accessibility. So it’s kind of the government’s version right now of accessibility and information technology.

A little more here. In 2010, way back in 2010, the US Department of Justice issued an Advanced Notice of Proposing Rulemaking, indicating they would intend to amend the language in Title III that we talked about a minute ago of the ADA to ensure it would also apply to the website accessibility. The Department of Justice was planning on moving forward incorporating the website accessibility guidelines, WCAG 2.1 which can be found at this link, in 2018.

However, the current administration has put that on hold. So, for now, there’s no clear ADA applies to web design, no regulations, no increase, but there are increasing numbers of lawsuits that are coming out. And one of those was found in this 2019 website app lawsuit recap report and the total number of ADA web apps accessibility filed cases reached one an hour in 2018 and held around 2019. Now, the 2019 kind of drifted down because they’re kind of waiting on the Supreme Court to decide on a hearing on the case versus Domino’s. However, one should not assume that the absence of the DOJ regulations and other guidelines or by due process defense claims website connected to a place accommodations fails to comply with accessibility requirements under ADA.

So currently, the WCAG 2.1 is kind of the benchmark that they refer all these companies right now to as far, ’cause there’s not, like, a direct law that guides them. So for my opinion, why I’m not–I’m not a lawyer, but in the future I believe Title III will be updated with website accessibility standards and eventually become US law. And along the way, it’ll be guided by decisions in cases like Robles versus Domino’s that we talked about a second ago. Also believe the Department of Justice–I also believe the Department of Justice will use the WCAG 2.1 AA as a standard benchmark in law.

In some countries, like, for instance, in Japan and Norway, they already have consequences for not meeting these guidelines, similar guidelines, if you don’t comply. In Netherlands, for example, all government-directed websites need to comply by 2020 but, like the US, they’re all pushing for legal requirements for private businesses to be–hold the same level of accessibility.

So US, I think, is moving in that direction. Kind of we’re gonna eventually be–they’re gonna eventually pass a regulation that pushes even private businesses into this kind of requirements. This is kind of a visual graph or representation of kind of the levels. You’ve got Section 508 that we talked about, single A, double A, triple A, and more astringent is getting to the double A, and single A is–closely represents the Section 508 that’s currently law.

And you can see, I note on the bottom right, if you can read it, it’s kind of small, but it has one of those WCAG 2.0, 2.1, kind of if you’re wondering what those numbers mean, they kind of release versions every few years here, so you can kind of see when those are coming out and they’re expected a 2.2 coming out in 2021. Now, now we’re getting to it, so when we start planning for a–when do you start planning for accessibility? I believe the discussion needs to start at the beginning of any web design project.

In this discussion, you talk about, like, with your clients, you need to talk about branding colors, design strategy, layout, images, and even copy. All these factors play a role in the level of accessibility you wish to achieve. Building accessibility–build accessibility right into your workflow. Don’t–you know, get the stakeholders on board. Get them to understand why. It’s not just the laws, but the potential for you as in possibly opening up revenues for these–for organizations. And when I say revenue, it doesn’t always apply to, you know, businesses selling e-commerce.

Actually, I have non-profit clients that are backed, you know, by people with disabilities so they actually get more donations. So knowing that it can have a wider spread than just, you know, just the bottom line but it also has people who are advocates for their organizations. Yeah, accessibility should never just be an afterthought.

From my experience, if you do not build accessibility in your plan, it could possibly cause twice the work or money and time if you don’t build it in your strategy so, you know, as these laws come into law–into law in the future, you’re gonna have to go back in and change them but it just kind of makes it harder for everybody to kind of reprogram the brand to kind of tackle these projects again, especially after you’ve built large website projects.

Try to make it part of the–just try to make it part of the conversation every step of the way, you know. You know, if you’re talking about–it depends if you have a small team. If you have a small team of designers, developers, you know, it’s easy to kind of talk to the person who’s writing the copy and how should you plan for images and how should you plan
for page layout.

The bigger the team, the harder that gets but, you know, make it part of the conversation all the way.

All right, I’m gonna go over the main four principles. I think these are gone in over other meetings pretty extensively. I’ll try to keep it brief, but I wanna make sure that, you know, it kind of aligns what I’m gonna be talking about specifically, certain topics of the WCAG 2.1 principles. Perceivables, principle 1. Make sure you have text alternatives.

Provide text alternatives for any non-text content. Make it adaptable. A lot of web designers are know about responsiveness but also think about how that works when it’s responsive, when the framework is responsive. Time-based media, when it’s audio only or video only, provide captions or audio descriptions.

Distinguishable. We’ll be getting into this one more but–because it has to kind of more do with design. Make it easier for users to hear content including separating background and foreground. This in use includes color, audio control, contrast, resizing text and images and stuff like that.

Operables, principle 2. Keyboard accessibility. Make all function available by the keyboard. Seizures. Don’t make things flash in the screen. If you have, you know, things flashing, keep it at low because people are, you know, photosensitive. But you’ve got to have controls to kind of help stop that, and that’s enough time–giving him enough time, the user, to read the content. Stop and pause is kind of similar to that.

Navigable. Provide ways for user to navigate, find content and determine where they are.

Principle 3, understandable. Readable. Make the text content readable and understandable. Input assistance. Help users avoid content mistakes like examples like labels or instructions, error suggestions or error prevention. Predictable. Make web pages appear and operate in predictable ways, on focus, input, consistent navigation, consistent identification.

Compatible. Just make sure that the system is robust and compatible with a lot of user agents. User agents like web browsers or browser extensions, media players. Good news is that frameworks like Word Press and HTML 5 are compatible and are kind of built for future and continue in development.

But not all plugins are and other things like that, other developers you do not have control over will and, you know, frameworks like HTML 5 are great places to start. Okay, so, for this presentation we’re focusing on design and distinguishable is one of the most important principles in terms of design for accessibility. Visual elements like text, icons, input fields, and charts need to be easily perceivable.

On the most basic level, that means they need to be clearly stand out from the background. What is also important that they can be easily distinguished from similar elements around them. For example, linked, embedded in the text paragraph. The need to see things clearly is a shared among people who rely on their eyes but thechallenge are quite diverse. People with visual impairment might not be able to see certain colors. Their field of view might be blurred or narrow.

It’s also possible that the challenge is caused by the projection of light in the room or direct sunlight shining on the screen. But there’s real contrasts between a color is a key factor in making things perceivable.

But color contrast has its limitations. Creating robust visual differences between elements often require a more holistic approach. And when I’m talking about holistic approaches, it doesn’t only have to do with colors. It’s like things like arrangement, additional labeling, spacing, you know, like white space, content consistency.

Consistency is a big factor in accessibility and help make the content distinguishable–will all help make the content distinguishable on the website. All right, we’re gonna go into colors and contrasts for text. Providing sufficient contrast between foreground and background. For relevant luminance, the tone of color, whether it’s red, green, blue, yellow, is not a key factor. After all, adequate contrast is necessary for people who can’t perceive certain colors or who don’t see colors at all. This means visually distinct colors don’t automatically have a high contrast ration.

Sometimes, designers ask me what’s the best colors to use? It’s not always about the best colors; it’s about the contrast ratio of these colors. While visually non-impaired users might be able to perceive the red and green words on a blue background, for the image on the left, others will have a very hard time differentiating between the text and the background. The image on the right is how it might look to somebody who sees gray scale which, you can see, is very hard to distinguish, even for me as someone who can see.

Okay, continuing on this color contrast for text. To meet these standards, text should have a color contrast ratio of 4.5:1. This ensures that viewers cannot–who cannot see a full color spectrum are able to read the text. So this also depends on the size of the text, text color, background will determine an element if it meets these requirements. To understand kind of contrast ratio, 1:1 is the lowest contrast ratio. It means there’s no difference between the colors. 21:1 is kind of like the highest possible contrast ratio, kind of like white text on a black background.

While the highest contrast is generally good, higher is not always better actually, and research indicates moderate contrasts somewhere between the extremes is the best.

Just using black and white to reach a higher contrast is not good for all users.

This is sort of where the–this is sort of where the conversation needs to come in for branding for projects, I think, and can start with branding. I’ve had hard conversations with companies on their branding colors and what that means when translating to the web. Because if you diagnose a lot of websites out there for accessibility, you come to find out color contrast is probably one of the biggest hurdles to tackle, and the hardest to kind of for designers to keep things–they’re worried about being pretty and anesthetically pleasing but there’s a lot of techniques you can use to kind of get around that.

So moving on from text, we’re gonna do color contrast for user interface components. Version 2.1 of the Web Accessibility Guidelines minimal contrast is 3:1 contrast, adjacent colors for all UI components. Now we’re gonna start with a bad example.

In this one, the borders of input fields have insufficient contrast ratio, 1.5:1. Because of that, certain users may have a hard time finding input fields to enter. The background color of the “Send message” button also has a low contrast ratio, 1.5:1. This will make it harder for users to identify the button. Now we’ll continue on some more UI examples.

Form A versus Form B. Form B is kind of like A, on the right, is kind of saying, “Hey, this is anesthetically pleasing. This is what I like.” Form B, a little higher contrast, a lot more accessible, you know, borders, bolder text, bolder labeling text, things like that, kind of make that, make Form A much more accessible than Form B, and that’s kind of like a direct contrast on the same type of form. Now, this one is–there’s a lot of options here, 1 through 4, but we’re mostly gonna talk about 1 and 4 and how they contrast. The worst option is, obviously, number 1 in terms of accessibility.

The best option is number 4. You can see here a couple of things are happening in 4. There is the use of color, the use of icons and error messages to help the user understand what’s going on. Option 4 is a good example of not just using color to help to guide us. That’s good ’cause we’ve got a lot of other things to help use the–to help to guide the user on this. As the forms in general–as in forms in general, there can be a bigger conversation on best practice in making forms accessible.

I could have a whole presentation based on form accessibility. I think, right now, we’re just kind of going into kind of the visual aspects. As you can see on here, like, visual labeling, proper understanding–proper heading structure and sections, clear warning indicators like you see in option 4. But for this purpose, I just want you to know sometimes just how color is used when using it in user interface elements. Here’s a navigation example.

Navigation A uses color to show “Shop.” That’s–you select on “Shop.” But when you see in option B, it’s kind of what a colorblind person might see in navigation. You can’t tell the difference at all. They’d have no idea what the selection is. Now, option C, they bolded the–for “Shop” they bolded the text and they underlined it. And–which that allows for, when you see in option D, what a colorblind person, they can see, they can clearly see what is selected in this navigation example. Now, this is just–these are simple graphs.

These are just kind of to express a point. When showing kind of different types of information or displaying types of information, labels just don’t help. When someone’s colorblind, unable to tell the graph, what it is, apples, oranges, bananas, they would have a hard time distinguish between that. Option B kind of shows, hey, you can use lines or dots or some other type of indicator of what that information is conveying. You could get rid of the–but now they switch to another option, B.

You could just get rid of the legend altogether and just put the labels right on top.

And, well, long as it’s, you know, if you put the labels on top, make sure it kind of meets those requirements of the contrast ratio that we’re talking about, the 4.5:1, but, you know, you get the point with this. It kind of shows, hey, you can label this over the top and get rid of the legend altogether. And this is just kind of a extended version of what we just saw a second ago as well, just if you’re trying to identify colors or an image, you know, you can put 1, 2, 3, 4 over the top and identify with the legend on the right.

This also just helps further reinforce, you know, if someone has difficulty seeing. Include image and media alternatives in your design. For example, you might need visible links to transcript of audio, visible links to audio described versions of video, text along with icons and graphical buttons, captions and descriptions for tables or complex graphs.

Okay, so provide controls for content that starts automatically. That’s a big one. I always have battled this with clients. I have a lot of clients that wanna have automatic sliders or automatic videos playing when someone lands on–arrives on a landing page. And if you don’t have visible controls to stop those, it gets really kind of disorienting for certain users.

You can see in this one, there are links for–there are links for closed captioning. There’s links for speed control. There’s links, you know, there’s links for transcripts. This video just kind of allows more control for the user over this experience with the video. Now this is an ugly slider. Sliders are actually a big–for me, has been a big problem with achieving accessibility. People love sliders at the top of their websites or in the middle sometimes. And they all have their different challenges and, actually, there’s a lot of people who tackle them differently.

But when developing a slider or making a slider, putting one on your website, just keep some of these, you know, things in mind. You know, you wanna have controls. You wanna have navigation elements. You want ways for them to stop. You don’t want it to play automatically if you have that option with your slider.

So–and you want things to happen like if you have a–if you roll over with a mouse, just have it stop as well, so it’s not just the keyboard but other ways of interacting with this media. Needs to kind of have easy control.

Okay, now, image accessibility. A lot of people talked about this really great, you know, we have–other speakers already talked extensively about some of these. Like a presentation from Jerry Jones I think it was went on much more detail than I will compared on this–on this presentation. I’ll just kind of give you my take.

You can easily add, for example on this one, create an image that helps–help make your images more informative to the user is kind of the underlying tone of this. As you can see, the alt text I have on the screen, “Aerial view of Central Park in New York.”

You could easily just have the words “Central Park” there. You don’t even have to have–but “Central Park” doesn’t give any good indication of what this is about. Try to be relevant to the page content. So try to make the alt text sound supportive to the rest of the content on the site. If your site was about something about famous city parks, that alt text would work great.

But if it’s more about open spaces, you might be considering a different alt text to kind of drive your point home further on that. And for–and I got this question on linked. I would recommend alt text not be more than, like, 100 characters in length. If you need to go further, you can also add stuff to the description, but as far as, like, the alt text itself, you know, try to keep it around 100 characters in length. It’s also great for SEL if you do good alt text.

I’ll–two more examples on alt text, like this one. E-commerce websites, credit card–if you just use the word “credit card logos” as alt text, they don’t know which ones. A good alternative to this would be “Visa and Mastercard accepted.” So, you know, just a lot more descriptive what that means if they were using a screen reader. This doesn’t–this happens rarely in my case.

I don’t usually–I’m usually the graphic artist on the project. I don’t put a lot of–I’ve learned this from accessibility of not putting text over images. But if you do have a case of that, you know, type it out in the alt text. This example, “The quick brown fox jumps over the lazy dog.” If the text is on the image, you can put it in the alt text, is a good practice if you do it that way, but I just avoid it altogether, so.

Accessible navigation. Designers and developers should consider both site-wide and page navigation.
In general, provide multiple ways to reach any page on a site. Doing so allow users to choose whether–whatever way of finding pages and is easiest for them.

Users with low vision may find using search easier than navigating through a large menu. Users with cognitive impairments may prefer a table of contents or a site map over clicking through many pages. All right, in this–in a presentation earlier by Adam Berkowitz about building accessible navigation for search goes over accessible navigation in much more detail than I’ll go in this one today, but I would recommend to go back and listen to that presentation on how to make the navigation much more accessible.

I just wanna give some tips to consider on kind of my tips on it too as well. One of my first tips is using conventional locations for menus, such as across the top or along the left side. Don’t come with some, like, crazy hidden menus or along the right is also weird for people. So kind of like, that’s why I recommend the top or the left. Providing generous size for clickable areas, generally no smaller than 44 x 44 pix. You know, don’t make it real tiny, hard to hit, you know, hard to find, kind of locate these kind of links on the navigation.

Providing clear styles for hover or of the current states, also known as, like, focus. So when it’s on focus, you know where the cursor is or you know where when you tap in the keys to navigate the site, you know where you’re at. Ensuring that menus are keyboard operable and focus states are never hidden from users. Same what I said before but just kind of reassuring.

Don’t hide where they’re navigating. Avoid linking offsite when possible, unless properly marked by labels or aria-labels. Using navigation landmarks for screen readers. People go back and forth on this one. A lot of people have different ideas of how to do this kind of mark-up but I’ll go over a little bit of some examples here soon.

Keyboard accessibility. Keyboard accessibility is one of the most important aspects of website accessibility and many users with motor disabilities rely on a keyboard to navigate websites in place of a mouse. You know, I’d just encourage you to try to navigate any of your sites or if you–just with a keyboard. Just encourage you to try it, you know, use the tab key to go forward, use shift tab key to kind of go backwards, kind of backtrack. Keep in mind what we said earlier.

People have temporary disabilities that will have to use the keyboard or, you know, or later in life become disabled and they kind of need help using the keyboard instead of the mouse and they kind of prefer it.

All right, skip navigation and keyboard navigation. Skip links are internal pages links which aid navigation around the current page, rather than navigating to completely new pages. They are mainly used by screen readers for bypassing or “skipping” over repetitive page content. When I heard about ’em first, I had no idea where they were or how to even–how to figure them out so it took some time for me to kind of figure out how to use proper skip link navigation. Skip links can include, like, you know, like you see in the example, “skip over primary navigation,” but you can also have “skip to main content,” “skip to side bar,” “skip to footer.” I would keep it limited.

I wouldn’t do, like, 50 of ’em or something like that but I would keep it to kind of to the main section of the content you want people to have access to. Focus indicators. Can you tell–in this one, the question is can you tell where the element is in focus when they are using the keyboard? Does the element stop moving when it’s in focus? Elements include text links, buttons, forms, navigations, and sliders.

So all these elements you want to kind of have a way that, hey, this is what you’re focused on. Okay, we’re gonna go to the demonstration part of my project here. Let me see. Switch over to–I’m not picking on anybody when I’m demonstrating websites, I’m just trying to kind of show you, you know, how things work. Now, when you hit the tab key on–I’m using Unilever as kind of example. They’re a big company so we can kind of see. They say–the first thing you see is skip to content.

Now a user could hit enter on this and it’ll skip right down to the main part of the content. And as you continue that tab, it’s hard to tell but it went up to their Facebook, it went up to the very top of their–the main bar at the top. Then Twitter and then, you know, through all their social icons, and then it’s gonna–it moves to their logo which means their main website, you know, kind of home. About brands. You kind of see, as it’s indicating, you can see the square is moving along with me and I can choose that. Now, if I was consulting for Unilever, they have a great accessible website.

I think it’s a good example of it. But I also wish they had more skip links. I wish they had a way to kind of, you know, skip to the navigation instead of going through that top, very top bar. But that’s just, you know, that’s coming to my preference and you just need to have more users try the website out and kind of give you feedback to kind of make those corrections.

Now, landmark accessibility. What are website landmarks? They help screen readers identify sections of the website. It identifies areas like navigation, main content area side bars, search bar, footer, and copyright. On Unilever, they didn’t really have those–they didn’t have those sections identified and I can show you that in a minute as well. But I think that you use these landmarks or use aria-labels to help identify if HTML is falling short for you. It’s a good idea to have labels everywhere if possible but know that HTML 5 has a lot of this structure built in so, and not all screen readers use aria-label as its main source of information but it’s definitely still good to kind of consider adding these labels in.

Heading accessibility. Just think of each page as an outline for a paper, starting with H1 as the title at the top of the page, then continue to H2, H3, H4. You use headings to convey meaning and structure. When I’m working with copy writers I definitely, you know, I try to guide this as much as possible when they’re–when I’m working with them, try to help me kind of convey meaning to everything, including images. I bring them in the conversation across the board. All right, so, think about now they have the copy, and you’ve got the images going, think about the design and the page structure. This can help someone when navigating a website.

You can see here, you know, proper white space makes the relationship between content more apparent. Style headings to group content reduce clutter and make it easier to scan and understand. The example on the left just kind of has the main heading and a sub heading kind of grouped together. The image is kind of thrown in there. You don’t know what the association is with. The example on the right, the main heading and the image are grouped together and then the sub headings are kind of in their own area and the structure just makes a lot more sense.

Notes on reading. When reading on the screen, users benefit from having text at a lower reading level. While it’s not required for accessibility, it’s best to write it at a lower reading level as appropriate for your content. Doing so, benefits people with cognitive impairments, people who do not speak English as a first language and people who maybe are distracted while reading.

Some of the best practice for readability include writing at a high school grade level, where possible and appropriate; limit paragraphs to around 80 words if possible; avoid jargon and difficult language when possible. One of the tips I have is use a authoring tool such as Hemingway Editor. It’s a decent tool. You can get in there and kind of see what your readability is. I wouldn’t overthink this.

I know it really depends on the content of the website and, you know, if you have a very scientific website, you have to write at a certain level. But if you don’t need to make it overcomplicated, don’t.

Link and button accessibility. Okay, so we’re gonna–the example on the left shows no information. You see this on a lot of websites: “Learn more.” And in some cases, you can’t help it, like on a blog release. You “Learn more” a lot. But it doesn’t provide enough information for screen readers or people with visual impairments, kind of what that means.

Compared to the button on the right, it says, “See all events,” so you know directly where that’s gonna go. Even without context from a page here, you know that’s gonna go see all–see all the events. Also, the button on the left says “Learn more” in all caps. This is something designers never think about. We put–hey, we think that looks pretty, you know, make sure you put “Learn more” all caps.

I hedge against that. You, you know, do like it says, “See All Events,” you know, make the capital case like that. It helps differentiate the letters, it makes it a little easier to read. Okay, let’s see here. So, yeah, link the–continue on and the last thing, kind of, with button accessibility is, or link accessibility for this case. The left one said–has no information as well. “For information on device independence, click here.” “Click here,” you see a lot of people put that but click where is kind of what someone could ask. So a more meaningful version would “Read more about device independence.”

And they know that it’s about device independence is what they’re clicking on and they know where it’s gonna be going. That’s true with links going off the site. You know, you wanna address them, “Hey, this is leaving the site.” It’s kind of discombobulating to kind of just all of a sudden abruptly leave a site.

I’ve seen companies add links that go off their webpage in their main navigation and that’s even confusing for me, and I know what happened. So keep that in mind. Keep in mind the user when you’re developing links for a site. Now, tools to help check your ADA compliance. I can go to a couple of these. These are just what worked for me in my workflow. The best thing to do is actually have users use it, have people with disabilities use your website. That’s the best way to check for it.

But these are just kind of quick checks when I’m laying out a page or tackling a page, “Okay, what did I miss? What am I not thinking about?” And especially if I start adding more complicated things in there, like plugins or event things or things like that, I use these to kind of help me check or keep myself in check. Total ally, this is a live check so I broke these up in kind of live checkers that kind of float over the top of your screen and help you live check while you’re making edits. And there’s other ones you can actually submit a link.

This is another live check called Code Sniffer. This one’s really strenuous. It’s kind of confusing to use or it’s not confusing to use, it just, man, it really finds some crazy things on your site, so you’ll be, like, “Dang, I need to learn how to program better,” once you start using this Code Sniffer. And there’s also the W3C Validator. This is a well-known one but a lot of people have used it in the past. This is where you actually have to submit your kind of link to it. It checks it and spits back a report. Wave also has online and plus I think there’s a Chrome plugin. I put links here on this presentation.

You can go check those out.

These are great tools as well. Let’s actually demonstrate one of these while I’m here. Let’s do Total, Total Accessibility. Or I think they meant to say totally, but. Let’s refresh the page. We’ll go to Unilever one more time.

Let’s demonstrate this.

So the tool is a bookmark, so when you bookmark it, it’s at the top of your bookmarks, or wherever you hold it, and it puts a little icon in the bottom side of your screen. You click on it and you’re able to see, all right, check my heading structure. And this is a good example of a website so there’s not gonna find a lot of–ton of errors. But if it comes up on the right, you can see that they have a good heading structure. I can actually demonstrate what it looks like if you have a bad heading structure here in a second.

Contrasts. This is always kind of a doozy for a lot of websites but knowing that there are some warnings on contrasts like this one up here, the contrast insufficient for its–for this size. Yeah, you just kind of have to–it helps you diagnose like, okay, well, how can I correct this problem? Text links, labels, see, there’s not a lot of errors. When I click on “labels” and nothing comes up, that means they don’t–they have everything labeled. Image alt text. These are put as decorative.

I kind of–that’s from the programmer’s standpoint. I kind of wish that these images–wish these images had alt text in them. But you can mark them with a certain marking that says, hey, this is decorative element. But sometimes, designers do that to kind of get around things but I kind of wish these had alt text on them.

Landmarks. So this indicates landmarks saying there’s buttons up–these are buttons. What they didn’t do, what the–the bad thing that Unilever didn’t do was actually say, “Hey, this is navigation,” and “Hey, this is main content.” That’s something where they sort of are missing the mark, essentially, with landmarks. I’ll demonstrate the other here.

Code Sniffer. Code Sniffer, so this is where, when we talked earlier in the presentation, we talked about Section 508, WCAG 2, single A, double A, and triple A. Now, you can actually switch between the standards on this kind of code checker and, like, hey, Section 508, they only have one error. And you can view the report. And what this will do is, well, you can’t even see it. It’s off-screen, but it’s kind of pointing to this area, like, hey, this is where the problem is. It even spits out code saying, “Hey, check out this code,” and that’s what the error is. So you can switch now to double A, what we were talking about for most–there’s 150 warnings and 8 errors.

You don’t need to freak out about the warnings. The errors, you definitely need to check out. And you can–I have ’em organized by–and when I view the report, you can organize ’em by–you can see all of them and view the report or you can just see your errors and view the report. And this is just kind of a, like I said, this is a quick check. This is a good example.

This is a element, insufficient contrast. What it’s doing, it’s comparing the background to this white text and you kind of see this white image. It doesn’t really provide as much contrast. It says it’s 1.4:3, you know, it’s a small minimum contrast right here. So it’s saying we recommend 4.5:1. It actually has a 1:1. So, and even spits out a little code. So it’s kind of a work flow.

These are not a catch-all software. I recommend using a couple of different checkers as you’re working along to kind of see if either one can miss as each other ’cause they do not have–they do not catch everything.

All right, in summary, make accessibility part of your entire design process. Accessibility makes better site structure and easier for everyone to use. Better for search engines, SEO, and opens up the site to more users. For accessibility, kind of ending notes, it’s okay to start small.

Accessibility doesn’t happen, like, over–in one day or overnight. I think this was said earlier. Use your creativity things makes it accessible. Understand the guidelines but come up with your own ideas and to help solve some of these accessible problems and kind of share with the remaining–with the design community, developer community. Applying some concepts in your–apply some of these concepts you learn, kind of, in your next design project and, you know, if you do that, you kind of start setting the conversation forward and it kind of helps everybody. These are just some–my last page is here.

Just WordPress Plugins for accessibility: WP Accessibility, probably a very popular plugin. I’ve used it a couple of times. If you don’t know how to program skip links, this will help you with skip links. This also has a toggle for high contrast and large print and also helps you enforce alt text–alt tag attributes on your images. It has some accessibility stuff with Divi and Genesis Framework.

I didn’t talk about this but Genesis Framework was one of the first frameworks I use when it comes to accessibility. They really push–they, for a long time, they’ve been pushing the envelope for accessibility and I continue to support their programs and their software as far as kind of how their themes work and how their framework is, on the basis of accessibility. Thank you.

Megan: Thanks so much, Dylan. We do have a couple of questions from the audience. We have a few minutes here to get those wrapped up. So someone asked, “Is no black on white text a WCAG requirement?”

They said you were the second speaker that brought this up, and they were asking where they could find more about those requirements.

Dylan: Yeah, it’s not a–no, it’s not a requirement, is it asking–no, it’s not a requirement to have it that way. That’s–it’s just a recommendation. It’s kind of from research.

Like, it’s okay to have black and white, right, as contrast ratio ’cause that’s the highest contrast ratio. But it’s–there’s kind of a happy medium there, right? You don’t wanna overdo it because there’s actually certain types of users that are actually turned off by that high contrast. And it doesn’t work for them either.

So kind of–there’s kind of been some research on that. As far as the guidelines, they don’t have specific or exactly what color. They just want you to stay in the 4.5:1 as far as the WCAG AA. So kind of if you stick around that 4.5, 5, 6 and up, you’re good to go.

You don’t have to make it the extreme the other way. And plus, black on white’s kind of a harsh–you see on all black and white website, it’s pretty hard to look at.

Megan: So then, going off of that, would you suggest that sites provide contrast options for their users or should you rely on their operating system preferences and settings?

Dylan: Oh, that’s a good question.

Yeah, a little bit of both. I’ve had where, like, one of the plugins I talked about, WP Accessibility, they have like a toggling tool for high contrast, so it can actually switch your site into the high contrasts thing.

But, of course, people who have disability or use software to kind of interact with the web, they also have tools or preferences that are set for them. What you don’t want is to try to override those preferences for the users. I think you don’t wanna make it more difficult ’cause you’re not, you know, yeah, a good practice is try to make it the same for everybody, not try to figure out what you think this one user, how they want to use it. I don’t know if that kind of answers the question, but that, yeah, just be careful on some of those aspects.

Megan: So then for testing, for operating systems, would you recommend–is there a particular tool that you could simulate having those settings or do you recommend just testing multiple devices with accessibility settings turned on?

Dylan: Yeah, yeah, well, testing, testing, testing, right? Yeah, yeah, as much as you have access to. And also get out there in the community. You know, I’ve talked to several people on what they use, like, “Hey, what do you use?”

And that’s kind of the best gauge I can get. And you can look online the best you can but, honestly, finding users who have disabilities or who use the software and they have recommendations of the best things to use and that’s kind of where I start and then you kind of have to test on multiple platforms. I’m used to testing, as a developer or a designer, you’re used to testing on so many different things anyway, whether, you know, it’s different web browser, software, or what, but if you can find different ways to test, if you can multiple ways to test, it just helps you as a designer in general.

Megan: Great, that’s helpful. Our last question here is about a specific graphic that you showed where you had the various disabilities in different size circles, and they were asking what the different sizes were reflecting, if that was the amount of people with the different disability and do you have percentages that you could share?

Dylan: Oh no, I did run across that in research about that there are percentages. I did–I was gonna originally put that graphic in but I didn’t know–I was trying not to make it so confusing about what weight it is.

Yeah, there are certain types of users that are more and mostly probably motor skills, I think: people who need to use the keyboard is probably the most. And then, visually, is kind of the next group, but that visual group is a lot broader, I guess you could say.

I don’t know how to explain it. Like, there’s different types of visual disabilities. So I didn’t–I should have made–maybe that’s a good suggestion. I should make that image a little more kind of like, hey, this is the weight of this group. But, no, in that image there was not a–there was not a weight bearing.

Megan: Okay, well, I think that’s all we have. Thank you so much for presenting today, Dylan.

Policy versus Practice: The International Case for Digital Accessibility

Dana Frayne: Policy versus Practice: The International Case for Digital Accessibility

The World Health Organization estimates that about 15% of the world’s population has a disability, and yet, the majority of the Internet is not accessible to people with disabilities. The reasons for this are varied and intertwined with context, particularly within the realms of legislative and design practices. This talk provides an overview of the current digital accessibility landscape by discussing Dana’s postgraduate thesis findings at the University of Oxford’s Internet Institute. The talk will begin with a discussion of international accessibility guidelines, and then will transition to an analysis of the social norms that affect the implementation of accessibility guidelines. 

View Dana’s Presentation

Transcript

Dana Frayne: Go ahead and get started.

So before we dive in, thank you, Amber, for that wonderful introduction. I also just want to give a little background as well about who I am and why I’ll be talking about what I’m talking about today.

So my name is Dana Frayne. I’m at the University of Oxford as a master’s student and specifically I’m at the Internet Institute so I spend my days thinking about how the Internet essentially affects society, particularly in relation to how the Internet is accessible online.

Before coming to Oxford, I was already quite interested in digital accessibility so I don’t think it surprised any of my friends or people who know me that I wanted to study this for my master’s thesis. In particular, like Amber said, I worked as a freelance digital accessibility consultant and one of my projects working on the American Civil Liberty–Civil Liberties Union home page so that it was accessible was really great.

So currently finishing up the master’s degree at Oxford and I’m gonna be talking about some of my thesis findings today as well as, you know, some of my personal experiences working in digital accessibility. So, as sort of the agenda for the talk today, first I’m gonna kind of give a overview of my research goals and then transition to a brief discussion of the theoretical frameworks that are kind of driving that question.

Then I’m going to be examining briefly the method I use and then the findings and future directions. So, the main takeaway from my background earlier, is that I am coming from both a practical perspective on one side but then also theoretical, more academic, perspective and I mentioned my course work at Oxford and that involves a thesis which, one of the main requirements is having a research question, so on the screen now is mine which says:

“What is the role of social norms in the implementation of digital accessibility practices in the technology industry?”

So, with this question, I was essentially working toward figuring out and observing the different norms that operate when people are trying to put digital accessibility policies into practice.

So one question I got in is why study this particular topic? And there are a few reasons, the first one being that I have found there is a gap in the academic literature regarding social norms and digital accessibility, partially because there is not, I’d say, a great deal of academic research that, you know, sort of publicly exists squarely on the topic of digital accessibility.

You know, furthermore, the research that does exist is often–it can be siloed into niche topics and circles so sometimes there is a risk of being sort of put into echo chambers of people who already feel quite strongly about digital accessibility, and then you know, for the research that does exist, the data does not always, you know, cover the aspect of implementation so particularly in the technology industry, sometimes I’ve found that the viewpoints can be a bit disconnected between, you know, industry versus academia.

So one of the goals of my research is to sort of, you know, merge these two viewpoints together, not that they exist, you know, completely separately but that was one of the goals. And then, you know, secondly, or second, digital accessibility is highly, highly interdisciplinary which I’m sure a lot of people tuning in can relate to this idea that, you know, to work in digital accessibility sometimes it feels like, you know, you specialize in a lot of different areas from, you know, the technical part to the legal part to, you know, the theory part, and there are lots of different parts to it.

So I–that was another reason I wanted to kind of address social norms because they touch on, you know, all those areas.

And then finally, the third reason which is the main reason I wanted to study this is, you know, my main personal experiences with digital accessibility and working in digital accessibility, I feel like I have, you know, personally experienced these social norms that I’m going to talk about and my hope in bringing them up today is that, you know, maybe, you know, someone tuning in will also have experienced this and I think, as a community of people who care about digital accessibility, it’s important to, you know, kind of rally around, you know, advocating for digital accessibility.

So, that’s kind of the goal with my research and the goal that I’m–that I have today and I think that’s partially why events like these are so great because it brings the community together. So, moving on into the research itself, I’m not going to spend a great deal of time defining theories and frameworks but I’ve included the major theorist in parentheses here on the screen, along with, you know, their associated theories.

So if you’re interested and wanna learn more about anything I’m talking about, I have a list of references at the end if you wanna check it–check out these theories further. But the first one says the social model of disability and Mike Oliver and Tom Shakespeare are two of the, you know, leading architects of this framework.

And it has its foundations in the United Kingdom, sort of the activist grassroots movement when there was a big push from the medical model of disability to the social model. And the conception of the social model was, you know, founded in this idea that social barriers blocked participation in social groups.

So this is a problem because, you know, this, you know, potentially could lead to obstacles for people with disabilities to lead a fulfilling and high quality of life. And I mention this here, primarily, because the social model is now the primary mode in which scholars studying the topic of disability utilize and it’s therefore, you know, the model that drives this research.

Just gonna take a sip real quick.

Okay, well, so, moving on to the next theory I have listed. So, intersectionality from Kimberlé Crenshaw who is a brilliant feminist scholar. She, you know, coined and is one of the lead architects of this concept, intersectionality, which essentially means the aspects of identity are fluid as opposed to concrete, you know, single artifacts of one’s self and self-presentation.

And in other words, you know, intersectionality is sort of this idea that multiple identities like–dimensions of identity like race, socioeconomic status, gender, ability, you know, so on, they deserve an equitable weight when kind of considering identity politics.

So, based on this, you know, cornerstone theory, it’s–I’d say it’s fair to suggest that disability is intertwined with, you know, a lot of different dimensions of identity, so when talking about this research, I feel like it’s really important to acknowledge that, you know, disability doesn’t, you know, essentially exist in a vacuum.

It’s, you know, there are lots of parts of identity to think about so I just wanna note up front that I try to, you know, incorporate intersectionality into my research and just general life approach.

And then, you know, moving on to the next framework, the narrative self, which is proposed by and, you know, really led by this philosopher named Marya Schechtman and, you know, essentially the narrative self presents this idea that a cohesive collection of one’s memories and ideas about the self come together to present, you know, the self presentation so, in other words, whenever I hear someone say, “This is, you know, on brand for this person,” I sort of think of this theory because it’s essentially, you know, Schechtman’s idea that, you know, presentations of the self, you know, it’s a collection of different memories and artifacts that are shared online.

So, with these theories in mind, I’m gonna transition to a discussion of the findings and the process of gathering the findings. So for my thesis, I conducted a series of interviews with accessibility experts and practitioners and it’s important to note that the primary framework that I used was the postmodernist viewpoint because it was really, you know, I related to it a lot because it emphasized the nuanced nature of, you know, the interviewer and the interviewee relationship, along with the broader philosophical belief that, you know, multiple versions of the truth can exist in society.

Also I was conscientious about the broader postmodernist push in academia to adhere to equitable sampling practices in order to better represent diverse experiences in the findings. I’m just gonna–okay, sorry.

I feel like I’m battling a bit of a cold coming on, so, sorry about that. Okay, back to it. So, the second point was that just another, you know, minor know is that one of my concerns with the interview method was sometimes people can say, you know, interviews purely produce descriptive findings but, you know, I would kind of push back against this idea in the sense that it’s–interviews are useful, particularly in sociological research to uncover social norms and some perspectives that can sometimes be hidden.

So now I’m gonna shift to a discussion of the findings and, to do that, I am going to read off a brief scenario.

Okay, so, the–I’m gonna read what’s onscreen now. So, imagine that you’re working at a company that is launching a new website tomorrow. You primarily work as a product designer, but you’re considered the “go-to” person for digital accessibility in the company. You don’t personally work on the team that’s preparing for launch, but a manager from a different team knows that you know a lot about accessibility.

This manager emails you to ask, “Hey! Can you make the website accessible before the launch tomorrow?” Less than a day is not a lot of time to make a website accessible, but you really want to help because no one else in the company seems to know about the specific accessibility guidelines.

So you ask the manager, “Sure, but, you know, what has already been done for accessibility?” They respond by saying, “We only just remembered because we don’t want to get in trouble with an inaccessible site. If you could just check the boxes for the basic accessibility criteria before launch, that would be great!”

Okay, so let’s dissect this for a moment. You know, I cannot see the comments right now but I would venture to ask if anyone listening or, you know, watching has ever experienced a scenario similar to this. I know bits and pieces of this.

I certainly have, but essentially I wanted to share this, you know, fictional scenario that’s sort of drawn from some truths that I, you know, experienced because it represents all three of the social norms that I’m gonna talk about today.

So, the three social norms have, like I mentioned in the agenda, are–so the first one’s compliance culture which I think hopefully a lot of people find interesting. And then the second one is valuation of accessibility work and then the third one is educational opportunities.

So now I’m going to transition into a discussion of each of these social norms by talking about what they are, how they play a role in digital accessibility, and then why they exist. So, first, compliance culture. In relation to digital accessibility is a concept that’s discussed a great deal in actually Professor Sarah Lewthwaite’s research.

She focuses on studying the pedagogy of digital accessibility. So her research is really fascinating and if you’re interested in learning more about compliance culture, I would definitely recommend looking up some of her articles. Or you can email me afterwards and I can, you know, send you some as well.

But anyways, you know, as a concept, compliance culture is this idea that digital accessibility is only a set of rules to abide by as opposed to a genuine, you know, approach to accessibility that reinforces creativity and continuity.

And I, you know, I also wanna note here before moving forward that just the name itself, compliance culture, you know, can potentially be misleading in the sense, you know, when I first heard about it, I was a bit confused because on its own, you know, I’d argue that compliance is a good thing, you know, complying with policies shows that, you know, people care, but, you know, the main difference between compliance versus compliance culture is, you know, it graduates from being this, you know, practice to, you know, an attitude and set of behaviors making it more aligned with a social norm.

So that’s when it becomes more of an issue and this relates to digital accessibility because, you know, in interviews with digital accessibility practitioners working in the technology industry, there was this repeated theme about the ongoing effort to kind of stymie the practices of compliance culture because, you know, compliance culture can block, you know, sustainability of continued accessibility practices, particularly because it can sort of stand as a road block between working towards, you know, creativity, innovation, and you know, continuous accessibility process as opposed to this static, rigid, set of rules.

So, going back to the scenario I presented, I wanted to highlight this particular part that sort of exemplifies this idea.

So on the screen it says the quote, “We only just remembered because we don’t want to get in trouble with an inaccessible site.”

This is coming from the perspective of the manager. “If you could just check the boxes for the basic accessibility criteria before launch, that would be great.”

So, this certainly has elements of compliance culture, in particular there’s the sense of urgency. “We only just remembered.”

This is a problem because accessibility should certainly be a–in an ideal world, accessibility should be incorporated from the very beginning of the product development process for, you know, a multitude of reasons, but in particular, you know, one of those reasons is that it prevents sort of this last-minute stressful time of trying to make something accessible really quick because it sort of changes from this, you know, process of, okay, how can we make this user experience a good one as opposed to, okay, how can we quickly just, you know, meet the very basic accessibility criteria so we don’t get in trouble.?

You know, those are two different–there are significant differences bet those two approaches, and it’s sort of where compliance culture is really relevant. So before moving on to the next social norm, I just wanted to take a moment to reflect on, you know, some reasons why I think compliance culture exists and regarding the theoretical concerns, I think this represents sort of a quick fix mentality in the technology industry because, you know, from my experience–from my experience working in tech, I have found that, you know, there are, you know, pressures to work quickly and launch things quickly.

And, you know, I think that’s good for, you know, innovation. However, I think in order for accessibility to, you know, exist in that sort of very fast process, it’s essential that it’s ongoing consideration as opposed to, okay, let’s look at this right before we launch.

And then, another–something also that, you know, I’ve been thinking about, and some other scholars in this space, like Professor — and Professor Sarah Lewthwaite also have, you know, produced research on, also other great scholars, but essentially there’s this debate where sometimes the definitions of accessibility, the policies of accessibility, can be quite broad.

So sometimes it can feel difficult to know exactly what to do in order to make this something accessible, when if, you know, someone doesn’t know how to make something accessible, which I talk further about in the upcoming norms.

And then, the last two points: practical constraints, so again, time constraints are a consideration, and the availability of resources. So, again with this scenario, this scenario presented, you know, trying to make something accessible in a very short amount of time and there’s, you know, putting all the responsibility on one person, can be quite difficult.

You know, the scenario didn’t mention how, you know, expansive the product was so that can again be quite challenging. So, moving on to the next — social norm. I wanted to talk about the attitude and behaviors associated with the valuation of digital accessibility work.

And here, I wanna kind of pause for clarity. When I say, “valuation,” I am talking about both the financial and opportunity cost associated with the work of digital accessibility.

So, the first point I want to address is that the values associated with this digital accessibility work are quite varied, you know, based on industry and location and a lot of different factors, and also, you know, going back to, you know, Kimberlé Crenshaw’s theory of intersectionality, there are a lot of factors at play with cost and value, so it’s–so I wanna make sure I clarify here that, you know, it doesn’t exist in a vacuum.

However, there is this trend I noticed in my research and personal experience that this, you know, it is not always–accessibility work is not always, you know, compensated fairly in my opinion and, you know, one of the most common ways that this manifests is and maybe some people watching or listening have had this experience where people who are, you know, experts or knowledgeable, even, in digital accessibility practices are called on to do the work of multiple people and so, by this, I mean that sometimes, digital accessibility is sort of viewed as maybe a side project or optional and, you know, in this scenario, you know, this person is sort of–it’s not clear whether this person’s going to be compensated or recognized properly, you know, for their work.

And the second point I wanna make–the second point I wanna make–want to make about this is that the valuation of accessibility work, often it can be–it can co-exist alongside this phenomenon of being siloed into an accessibility maintenance role, even, you know, when the job description doesn’t call for it.

And sort of, by this, I mean that accessibility work requires a flexibility as I mentioned earlier with, you know, compliance culture, accessibility in my view is a continuous, you know, ongoing process. So when it’s viewed through a lens of, you know, being optional or not as valued, that really puts a strain on the whole process because it doesn’t necessarily give the space that’s needed for digital accessibility to really, you know, prosper and be successful.

So returning to the example presented earlier, the way this issue of value presents itself is through the following quote on the screen, which says, “A manager from a different team knows that you know a lot about accessibility.” So, reflecting on this for a moment, the way the social norm manifested in this scenario is that, you know, it’s not clear from this scenario that accessibility is considered a part of this, you know, person’s usual accessibilities.

It’s noted that the person is knowledgeable; however, you know, it’s also noted that they are primarily a product designer so you can kind of assume that they, you know, their whole job isn’t focused on accessibility which, you know, presents a different scenario but it’s not clear–the main point I’m trying to make here is it’s not clear whether this person is going to be compensated for their time working on this accessibility process.

It’s sort of presented as a favor as opposed to, you know, you’re gonna get, you know, recognition for your work, which is really, really important in terms of value. And then, the other point I wanna mention which is not specifically mentioned in the slide but the general attitude, sort of, of this manager kind of signals to me a lack of, you know, recognition for the accessibility process as, again, being, you know, continuous process that should be incorporated from the very beginning when possible.

So, this sort of leads to the question of why do these valuation challenges exist in the first place. Well, in my opinion, the answer is quite complicated, so it–I’d argue that there are a lot of parallels that exist, you know, with the broader disability rights movement and, you know, I’m looking at the time. For sake of time, it’s sort of hard to dive into that now, but if you wanna talk more about that, definitely send me an email and I’d love to talk about it but, essentially, the, you know, the main relationship here is that I’d argue that the struggle with value is part of a overarching, you know, broader perspective that exists in the technology industry where stakeholders don’t necessarily recognize accessibility work with the value of other disciplines, other technical skills.

And, you know, this is a problem because, you know, this can manifest in different ways where, you know, maybe someone doesn’t get promoted or recognized in the same way that, you know, other people do because if, you know, the employers don’t recognize, okay, accessibility work, it’s very significant, it’s important, and it’s, you know, critical to a product having a strong useable experience that, you know, that can create significant problems.

And then the second part of this where, you know, sometimes accessibility can sort of be viewed through this lens of volunteering where, as I mentioned earlier, it’s unclear whether this person in this scenario is going to be properly compensated for their time and, if this is just a favor, you know, that doesn’t really–that doesn’t really, you know, help with accessibility being properly recognized.

And last point I wanna make about this before moving to the next social norm is I personally struggle with this.

You know, and maybe people tuning in as well really struggle because as someone who’s really passionate about digital accessibility, I’m so, you know, I’m really happy when people, you know, express interest in it, even if it is last-minute or, you know, even if it is challenging.

So I’m definitely more, you know, inclined to I wanna help as much as I can but that can also present a challenge when, even if I help, if my, you know, work isn’t valued in the same way, it can be quite frustrating.

So, on that note, moving to the third and final social norm that I’m going to discuss today, is the specific attitudes and behaviors that people face when, you know, first entering the field of digital accessibility, specifically in relation to educational opportunities for accessibility.

Okay, so a recurring theme with that, the offerings for digital accessibility education are not particularly robust in comparison to other skills, you know, other technical skills in design and development. And the repercussions for these lack of accessibility resources is, you know, widespread and I kind of wanna, you know, focus this section on a couple of key points but, you know, one of the points I have listed onscreen is that there is no, you know, one pathway to studying digital accessibility, which on the one hand is good because, you know, I, you know, personally relate to this idea that I have picked up lessons about digital accessibility on the job which helps in terms of, you know, learning practical ways to apply accessibility but, at the same time, you know, if one doesn’t have access to work opportunities, to learn, it can make things quite difficult to gather digital accessibility, you know, specific practices, which leads to kind of the third point I have here, which is there is, I have found, as well as in my research, that there are pretty significant differences that exist between, you know, learning about accessibility from this theoretical perspective versus implementing it.

And, you know, there are lots of, I was, before moving, I did wanna mention, you know, there are lots of great resources and classes out there and, you know, if you have any favorite classes or things I would love to, you know, see them in the comments.

But I wanted to note, you know, in terms of mainstream educational options, you know, I would say there are not any, you know, major degrees that specify in digital accessibility.

There are minor certificates, you know, online classes which are great, but I, you know, I think if, for example, if there was a master’s degree in digital accessibility I would totally want to enroll in that, but from my search, there is not, and that can, you know, that is sort of a challenge in and of itself because, you know, stakeholders at universities and educational programs do not always recognize accessibility work with the value of other disciplines.

So one way this manifests specifically is, you know, from people I’ve talked to, accessibility can, you know, be incorporated into computer science classes or sometimes even have a whole course dedicated to accessibility which is great, but I feel like and–I feel like this is a common feeling but accessibility is so expansive and, like I mentioned in the previous slide, it’s hard to sort of narrow it down versus into, you know, theory versus practice, so I feel like if there was more room and more recognition of digital accessibility in these mainstream educational places and spaces, I should say, that, you know, would lead to more widespread education.

Okay, so through this example, I–the social norm sort of manifested through the quote, “You primarily work as a product designer, but you’re considered the,” quote, “‘go-to’ person for digital accessibility in the company.” So, solely from what I’ve gathered, particularly at smaller companies and startups, it’s sort of not uncommon for there to be sort of this, you know, “go-to” person for accessibility, you know, which is fine but I think, you know, I think in an ideal world, it would be amazing if, you know, every person had at least a foundation in accessibility because, you know, accessibility doesn’t exist in this vacuum.

It’s not just, you know, an engineering concern, design concern, content concern, you know, a recruiting concern. You know, it really exists widespread so I think it’s not particularly fair for the, you know, responsibility to be with one person so sort of one way to combat this is for, you know, education to be more widespread and at the university training crash course level, accessibility, more accessibility knowledge would be good.

But employers can also, you know, have a role in this when, you know, when new employees are being onboarded, be great if accessibility is discussed and, you know, acknowledged and specific practices for that company are shared.

So it’s not sort of reliant on one person. Okay, so wrapping up, we’re about 35 minutes so I think about 5 to 10 more minutes and then I’d love to take any questions for a bit. But the first future direction is, I think it’s really important for people working in digital accessibility to work towards combating solutionism, so I should say here, solutionism is sort of a concept designed by this theorist, Morozov, who I cite more in the references but, essentially, solutionism is this idea that there is a goal of solving problems, as opposed to, you know, actually addressing the complexity of problems that exist in the technology industry.

And I think this is quite relevant to digital accessibility because, you know, digital accessibility, as I mentioned, you know, it’s quite complex. Not only is it an ongoing process but it’s very widespread and interdisciplinary, so it’s critical that it’s viewed in that light. It’s not just, you know, ticking the specific boxes of policy, but it’s recognized as a comprehensive, you know, widespread consideration so some concrete ways to address this would be, you know, making sure that every person in, you know, a company or a product team, is knowledgeable about at least the basics of accessibility but also, you know, consistently testing with users to make sure, okay, this product, you know, testing with users with disabilities so there’s an open line of communication and that you’re recognizing that, okay, the goal is to make this a good usability experience, not just to, you know, tick off some boxes.

Then the second future direction is there’s really a critical need to increase the value of accessibility work.

And like I said earlier, this is not, you know, there are certainly exceptions to this. However, I would say, you know, a trend that I am kind of concerned about is, you know, it’s not always–the value of accessibility work is not always, I think, given the recognition that it deserves.

And, you know, people, stakeholders in the tech industry, certainly play a role in this but, you know, also, you know, anyone on a product team just, you know, advocating for accessibility, calling out the work, supporting, you know, people who also work in accessibility, is, you know, a great way to address this.

And then, finally, which is probably the future direction that I’m most excited about, is this, you know, starting point that I wanna suggest is that integrating creativity into the conversation is really a, you know, a great way, I think, to draw greater interest and respect of digital accessibility–greater interest and respect in the technology industry.

And, you know, there are a lot of great projects in this space which, you know, I can also share links to if you wanna email me afterwards. But essentially, creativity is, you know, a great vehicle for, you know, approaching digital access.

And sort of to, you know, wrap up, I wanted to say, you know, stakeholder changes are, you know, critical. Creative approaches are great, and then collaboration in the accessibility community is also, you know, really important, which is why, you know, events like this are really exciting and, you know, I’m really excited to be a part of this and, you know, connect and, you know, virtually meet people who also really care about digital access, so that’s it.

These are my references. The slides are available at the WordPress Accessibility site if you wanna, you know, go through the references. You can also send me an email. My email’s dana.frayne@gmail.com, and also my Twitter handle is dana_frayne.

I just want to thank quickly, you know, Joe Dolson and the whole WordPress Accessibility team for having me and I’m happy to take any questions.

Amber: Well, thank you so much, Dana. We do have a couple of questions.

The first one is: “Do you consider that the multiple truths viewpoint is reflected in the fact that there’s frequently no one true solution to web accessibility questions?”

Dana: That’s a great question. So it is something that I, you know, think about because I totally, you know, align with this idea that digital accessibility is a fluid social construction and, by that, I mean, you know, accessibility means something different, I think, to each person.

So I really, you know, hesitate, kind of, when, you know, accessibility is defined as, you know, X, Y, and Z. I think it really is dependent on local context and, you know, again tying back to this concept of intersectionality, it’s really important I think to acknowledge that, you know, accessibility doesn’t exist in a vacuum. It sort of touches on these different dimensions of identity, so I certainly think that there’s a connection there and thanks for pointing that out for who asked that question.

Amber: So the next question is “What would you like to see done with your research? Do you have goals for it?”

Dana: Yes, this is another great question. I mean, I think, hopefully, I, you know, would love to publish my research in a academic article but, you know, that is a pretty intense process, but I, you know, it’s something that I hope to do. And also next year, I hope to, you know, fingers crossed, I’ll be able to go to Morocco with the Fulbright program to do a research grant where I can sort of continue this research and, you know, approach it from a different lens of studying digital accessibility within a specific context, as opposed to, you know, this research today.

I recognize that it’s, you know, quite broad, so I think it would be exciting to sort of go at it from a different angle and be more specific.

Amber: Do you–are you hoping that it’ll inspire certain actions either at the government level or among people who work in digital accessibility on a daily basis?

Dana: Sorry, can you repeat that real quick?

Amber: Oh, I was just following up on that question. Are you hoping that your research would inspire certain actions either at the government level or with those of us that work in accessibility on a daily basis?

Dana: Well, sure, yeah. I mean, I think that would be great. You know, I think the one, you know, main takeaway that I really hope my research can share is that I think, you know, my personal experience working in digital accessibility sometimes it can feel, you know, a bit, you know, lonely if, you know, going back to that scenario where there’s one person on this team who’s considered the expert.

I feel like, you know, when I was conducting this research I think it made me feel quite an appreciation for the community and, you know, knowing that there are lots of people all over the world who really care about digital accessibility and, if you’re working on this project, you know, you’re not–if you experience something, there’s probably someone somewhere who is experiencing something similar so if you can sort of find, you know, reach out to the community and, you know, make connections and feel the sense of camaraderie, I think that would be something.

I hope that is inspired through this research.

Amber: Yeah, no, that is definitely something with WordPress, right? And accessibility as well. We’re very big on community building, so. There’s a question here: “Do you have ideas about ways to get people excited about the creative aspects of accessibility instead of viewing it as a maintenance task?

Dana: Yes, certainly. I mean, I think–let’s see, how to structure this. Well, you know, one example that I wanna, you know, I think would be great to draw attention to is there is this project called Alt Text as Poetry. And I, you know, the specific authors kind of, I can’t recall them off the top of my head but hopefully, I can, you know, add them in the–add a link in the chat.

Amber: Shannon Finnigan?

Dana: Yes, yeah, yeah. And then, so I think this is, you know, a really brilliant project because the, you know, they really exemplify how, you know, alt text is can–you know, some people can view it as, you know, the static, rigid practice but it’s, in a way, I feel like it is sort of a poetic form, and they really, you know, encapsulate that and I think projects like that are really exciting.

I know there’s also, you know, a movement in the ‘zine world to sort of push for digital accessibility and sort of, you know, when there are artistic projects like that, that I think that can be really exciting, and it’s something that excites me.

Amber: Yeah, I think we have time for one more question and it’s actually my question.

I’m wondering how do you propose to increase the valuation of digital accessibility so, you know, we see a lot of almost like fear-based arguments for accessibility and I’m wondering if you have thoughts on ways to increase that valuation that’s maybe not fear-based, or do you feel like, looking at the social, that that is just the way to go?

Dana: That’s my–I mean, that’s a great question. I feel like it’s something I sort of debate internally as well because, I mean, I think we do live in sort of a call-out culture where fear is sort of–can be a driving force.

However, I think, you know, that’s not the only way to go about it. I think, you know, grassroots activism and sort of going back to, you know, the social model of disability, I’d say that the grassroots kind of tactics used in activism can also be used for digital accessibility at, you know, in this idea of increasing value. And then also I wanna say, you know, there is strength in numbers and I think–I guess I’ve mentioned it a lot now, but I would say, you know, but I keep say it ’cause I think it’s really important, this idea of community and, you know, fostering support, you know, between different accessibility experts and practitioners is really important to show, you know, we are, you know, a strong group of people who are — like numerous group of people who, you know, really care and wanna advocate for digital accessibility.

Amber: Well, thank you.

Dana: Yeah, thank you for having me.

Amber: Yes, so thank you, everyone, for attending this WP–

Essential HTML tweaks for accessible themes

Martin Stehle: Essential HTML tweaks for accessible themes

The short talk shows developers, theme authors and plugin authors how to write the Hypertext Markup Language (HTML) code of themes and plugins for meeting the Web Content Accessibility Guidelines (WCAG) 2.1.

There are important success criteria in the WCAG which affect the way how you write the HTML code for your users. Do you know which ones? And do you know which functions are provided by the WordPress core to fullfill those criteria? This talk shows them all.

The talk provides you the tricks about

  • how to approach the challenge of writing accessible HTML code in an easy and effective way,
  • how to set informations and relationships of the content,
  • how to establish a meaningful sequence of the content,
  • how to write alternatives for non-text contents.

In detail you can learn about the WCAG-compliant generation of e.g.

  • continuous texts,
  • forms on WordPress options pages,
  • tables.

Watch Martin’s Presentation

Transcript

Martin: For whom did I write this presentation? Of course, the frontend developers, the theme authors and also plugin authors. And of course for everybody who’s interested in my message. Because this is a really technical presentation we will talk about languages. Some need to code is uh, is eh.

Ok. What do I cover in this presentation. Of course, I will talk about the conformance levels A and AA. Because you have to fulfill them. I’ll talk about techniques categories, categorized, sorry, as sufficient and of HTML and relevant WordPress functions. I will not talk about, oh, I have to rearrange my second screen.

I will not talk about um, other topics, because I have not that time to get the contents in a basic presentation about that topic. I will not cover ARIA, not CSS or JavaScript, not Frames – no no, I have not that time.

But for all the other topics you are right here. OK. Let’s say some words about me again. About my, professional – yes, I am a computer scientist interested in media for about, 20 years. But I am also an expert for accessibility in the court.

I have impairments, I am body impaired, I am a wheelchair user. And of course, accessibility in every topic of my life was in my interest, is in my interest. And so, I got in touch with web accessibility in 1998, when I’ve did my first steps in HTML programming with great potential to create accessible content for everybody. But you have to know how to do it, and you also can do it really wrong.

So, I got in touch with the first WCAG and sort, we said, at one point, we were in 1999 I think, I was a contributor for the next version of them. And, today, I am a consultant and developer for accessibility. Now. What will you get? A soft warm up, then a big Journey, dive deeply into some coding.

And I will show you some of the benefits, how you can create them. OK. We’ll start with the soft warmup. Well, the very first element of an HTML code is, of course, the HTML element.

You know that. And, that’s also the topic of my first rule of thumb. Define the page language. That is also in Success Criterion 3.1.1 of conformation level A, that you have to fulfill that if you want to call your theme accessible.

It’s a very helpful information for applications, not for the human, but for applications so they don’t have to guess what is that human language. No. If you give them it with a tag or an element with an attribute with a value by lang, then you have the application for you, and they can speak in the correct language.

Well. How to create one that do not have the correct language of the web page? The human language? And how to do it right?

You tell the human language here in the HTML element with the lang attribute. lang is short for language. And you can see here an example how to specify that the human language of that page is in Portuguese – Brazilian Portuguese.

But, you know, WordPress is a CMS for the whole world, we have many languages of course, so don’t fix that language because you do not know what language the WordPress administrator will use.

So, how to do it more dynamically? How’s that, WordPress, by the very useful function called the language_attributes(). Put that into the HTML element and WordPress will do the rest for you. You can set it and forget it, OK? Also this language changes within the content, content of the web page. For example, we have an abbreviation in a foreign language, or you do quote a foreign person in the foreign language.

It’s very useful, for a screen reader, for example, to tell that page here comes another language, so change the speaker. Well, you can also use the lang attribute in any other element of HTML, for example, a span in an inline element. Or in another block element, like blockquote, and you can specify the language change there. You can’t just also specify the language, you can also specify the reading direction – for example, in English you use left to right reading, and if you want to quote a text in Arabic, there is a change in reading direction and you can do that with the dir attribute. dir is short for direction, and you can tell properly and for other machines here comes a change of reading direction.

If you want to go deeper into that, then read the specifications in ISO 1766 and read that and you know how to write proper language standards, language specifications, like this example for British English, Japanese, and Farsi, which is spoken in Iran.

Now, my second step here in the warmup is the page Title. I do not mean the title of the content, I mean the title of the whole web page. This is the criterion in the WCAG to help you identify the web page, and give you good orientation within the website. And not only within the website, the page title is also used by search engines to put the page title on the search engine’s results page.

So it’s not only useful for disabled people, it’s useful for everybody. What can you do wrong here? Well, I saw a page with no title in it at all; I saw a page with an empty title in it, I saw a webpage with default text which it repeated on every page in the title element.

Sometimes I saw the file name, or at least there is no unique title for each page in a website. How to do it properly. Well, I do see a list of techniques you can find them in the documentation of the WCAG 2.1 techniques. Use the title element, ensure the title element describes the current page, ensure unique title text. But, you don’t know what the title will be, because every editor, every contributor, can write the title.

So, you have to do it dynamically. And WordPress again provides a useful function for that. You only need to add the theme support of the ‘title-tag’ in your theme’s setup in functions.php And in header.php, you just call the function wp_head(), and what that will do that for you.

Why is that possible? Because wp_head() calls the function which prints out the title element and this function calls another function which renders the document title. I recommend you to take a look in the WordPress core code to that function is quite short and it covers every page, of every site, for example, a single post, a search the site page, or an error page, [unintelligible].

And you can either, you can change the page title, with filter hooks, as you can see here, the pre_get_document_title filter one. I take, I would recommend you take a look at that function, it’s very useful.

But you also can’t forget that you just use add_theme_support( 'title_tag' ) and wp_head().

OK. That was just a warm-up. For you, I hope you are into it and ready. But now, to try to begin, we will get deeper into that. First, think about that, maybe, before you started accessibility, maybe, you learned about coding that a web page is purely a visual mouse-controlled interface. If you have heard all the other presentation, you already know that is not true, because when you say it is “only” a purely visual interface that is not true, because there are other forms of presenting web page content.

In reality, a web page is a sequence of content and interactive elements, controlled by different technologies for different ways of presentation. Yeah? No. Too learn requirement for that, a specific mindset is really helpful. Three things they have to know. The first is “Text is king.” Because every browser, every device, can do with text. Not every browser can do with images or with videos or with audio, or with an applet or with a Flash file.

Every device can compute text. Can do something with text, so text is king. If you have any content, be sure that it is also available in a text word form. The rest is entourage. The second played in your mind set is “Always give structure” with HTML.

Don’t think about only the visual attention of your content. Separate content and the design of it. Mark up the content with HTML elements. And I will show you examples.

And the last, third and last played in your mindset is “Keyboard first”. If a webpage is not accessible with a keyboard, it is not accessible at all. OK? Mouse and loudspeaker and so are a distance. Keyboard is the first which has to work. Again – Text is king. Always give structure with HTML elements, and keyboard is first. OK?

Now you are ready for the big journey. Let’s take a look at these big topics: Structure, meaningful sequence of the content, and alternatives for non-text contents.

When it comes to structure, we have to take closer looks to three types of content: continuous texts, like you read a paragraph, headings, headlines, lists, and so on – forms, and there are tables. If you read continuous text – I’m sorry, if you produce continuous texts in your theme, in the editor, or in your guidance page, ensure that the structure of the web page content and the associations between distinct pieces of content are available in HTML.

If that sounds a bit abstract, but no going, I’ll show you some examples. Visual formatting is not sufficient: again, separate content and design. Design, yes, it’s OK, but first is content: Text is king. If you want to give structure, specify the structure automatically, and then you can design it with CSS.

What can you do wrong? Well, just a typical HTML code with no structure: There’s a div element, div is short for division, of course it has an attribute called class with value header, it must be the headline, we have tags, we have line breaks, and maybe some type of list? Yet how we can read that?

But now, assistive technology can not read that, can not make sense about that. And if you go farther, you will see more examples. You will see now a table. In the left column, there are some type of elements, and in the middle column you see how you can do it wrong, and in the right column you see how you do it correct.

If you want to specify a headline, yes, of course, is larger and bold font the text, and more and mostly separated by a blank line from the paragraph, yes. But, that does nothing an application can detect, so instead use heading element of HTML from H1 to H6, then you can design it with CSS.

But then go through list items, and form field, and for special words, words like abbreviations, emphasis, and so on.

The last line of the table tells you why. Because if you use another device, another than a visual output, you lost all structure information if you don’t give any structure information. If you provide any structure information, then they will be preserved even in a non-visual output. OK?

So, now for the next how-to we have an example for headings.

We have a screenshot on the left, of an option page in the backend. The red dots are headings, headlines. And we can see them. If you mark them up, properly, as headings, another device, for example a screen reader, can detect them as headlines. And the blind user can jump from headline to headline, a quite benefit for him. And you can see here a visual presentation of a list of headlines, and I think them critical, right?

How to: HTML. Well, how to continuous texts. Well, in determining which we have appropriate, education is when you know where to look it up. So, I recommend you look it up in the specification for HTML: how to use the elements, how to use which element for what, and do that properly. And I can say again and mind my pronunciation, use them, use these HTML elements, and use them and not other inventions because with a standard and maybe other inventions like division or span is not what is known by other devices.

And now we come to forms. Forms can really challenge for users, with vision impairment, with mobility impairment, with cognitive or other disabilities, and with others who are using assistive technologies. Oh, forms can be really really a burden, but you can write accessible forms.

What can you do wrong with forms? Well, in HTML, is an element called label, and the label element provides an association of the form control, maybe a checkbox, and its description. You can see how to do it wrong: do not provide any label element or provide a label element but not the association between the form control and its label, its description.

With these two examples, of label elements not using properly, there is no association of the text and the form control the machine cannot distinct, cannot specify the association. And in fact there is, when there are words the user have to fill out, so called, required fields, you can see here an asterisk of form that there are form fields and one form is required to fill out and is marked with an asterisk, an explanation of the asterisk is found down where, at the bottom of the form, where that is not effective.

And sometimes you see required fields marked by color only, of course you can see that, but can you hear that? Marking by color is OK, but that is not sufficient. So how to do it right. Use the label element and use other let element more structural element like fieldset and legend, like optgroup in a selection, like submit buttons, especially if you have selections, and indicate required form controls using labels or legends.

That means, on the second example, first example is how to label properly if you use the label element, you use it’s attribute called for, and in the form control, you use the attribute called id and you use both attributes the same way you, and now the machine or the software can create association between the description and the form control.

So do can the screen reader and other assistive technology. Right? Let’s move on to second example. How to indicate the required fields properly. Well, don’t put an explanation at the end of the form, but indicate an identical description at every form element which is required to fill out. Or you can use it in a legend if you have a group of form elements.

So, and, then you can indicate it with a color, in the second step of course. First is text is king, for form structure.

Well, it is important when it comes to backend pages, pages for the backend, it is really helpful to provide a consistent presentation of forms.

And for that, it’s not, uh, for that WordPress does provide some functions inside that here see in slide, chapter three, settings_fields(), do_settings_sections(), submit_button(), look it up please to see the documentation, and you can prepare the form with these two functions add_settings_field() and register_setting(). You do not have to write the form element, WordPress will do that for you inside, with these three lines, and you will have, and users will have a consistent form.

Now tables…oh…that’s pretty important – if we come to widget on the widget page, You can create, you might prefer, instances of the widget, how to be sure that the ID is unique on that page. And for that, WordPress provides the two functions get_field_id() and get_field_name(). Use them, as you see in your code, instead of hard-coded where you use these functions, if your widget is a subclass of the WordPress widget WP_Widget you have access to these two functions.

Okay, now I come to tables.

Tables are good to present table informations. What can you do wrong? You are not using table, or the table element – you are using the div element, or you are using tables for visual only, called layout tables. And you do not create any distinction between columns, headers, and data cells for example. So how to tables. Provide the correct markup, provide a summary attribute, a caption element, and using ids and header. I saw an example how to write it, in your code, this is the summary attribute in a table element, and here in a complex table you can see an example how to use the attribute headers and ID so, for example, a screen reader can read out if the tables are the value 20, which column header the table cell belongs.

Okay. Now, we will come to meaningful sequence. A very helpful technique. The meaningful order of content means that you have, the header, you have main content, you have sidebar, you have footers, you can change them but changing them will not change the meaning of the content, Okay?

If that is the case, then you have a meaningful sequence. There might be other, may be, other meaningful orders, of course, only one is sufficient for your web page or your theme template. Yeah? And that is important because if you provide a meaningful sequence your web page is accessible not only in visual causes, it’s also accessible in assistive devices.

What can you do wrong? Well, you do not provide any content structure via HTML or you want to try it with CSS to at least provide meaningful sequence visually, but again there’s a lack of structure, that’s a big failure.

How to do it. Use the HTML elements for structure, and test your content. Either turn off the CSS in your browser, or else use a text-only browser like Lynx, or a service like Textise, to have a look, to have an image of your text.

Ok? And now, the next big step in our journey, the third and last big step, is about non-text content.

We all love non-text content, like videos, like audios, like animations. But, text is king, right? So, what are we doing? We provide text alternatives for those types of content. For example, for audios and videos, there’s a text transcript and I will show you an example in German of the Federal president. You can see here a video, in sign language, but then, the president starts to talk, and what he says is also available here, as text. Here as a PDF, and in an easy language.

So, if you have a text alternative, well that’s acceptable, right? OK. Back to our presentation. If you have video, use captions. And with the track element, you can combine video with captions files, like so. If you have applets, use the alt attribute.If you have objects, use the body of the element to provide alternative of the text.

And now, the big topic is of course, images. Well, my speakers before me told a lot about images and alternative text. I just repeat it here. Use alt attributes, use alt also in images in sitemaps, no, not sitemaps, in image maps. And if there images are decorative, don’t use any alt text. I want to provide a helpful resource on the server of the w3.org.

It’s the so-called alt decision tree, a very funny and helpful graphic to tell you how you write an alternative text. I know, of course, you can do it in a quick way, that was described in a presentation ago. There a thought called a telephone test, explain during a phone call to other person an image in not more than 10 words, maybe 11 words, or in a short sentence. How would you do it? There, you get the idea of that image.

Very quick and easy rule of thumb how to write correct and useful alternative text for images.

Wah! That’s a big journey. Let’s take the last topic of my presentation and you think, well, I’m running out of time. Right? So, I will do it fast. Fasten your seatbelt, please.

Well, keyboard support is really crucial, of course for accessibility, keyboard first. So test your web page with the keyboard and without the mouse. If you can access all form elements with the keyboard only, then you have an accessible web page.

If you can reach every link with the keyboard only, you have an accessible web page. What can you do wrong? You do not use HTML properly, for example, here’s a span with the onclick attribute. That is not a link for a machine, that’s something what you invented, no. Or the onchange event on a selection field.

There is not, there’s the at least two orientations failure. How to do it properly. Well, avoid use of JavaScript for interactivity and use HTML. Bypass blocks, that equate to topic. Blocks, I do not mean the Gutenberg blocks. I mean blocks as sections of the content, of the web page. Repeated on multiple pages, like navigation link block or the main content block, or sidebars, and so on. So, provide links to that blocks.

These links do not need to be visible, the so-called skip links. If you use, let me show you an example, Here you can see a page of my localhost, and I am using now the tab key. Once, and you can see here, the skip link. Very helpful for users with visual impairment, or use screen reader, and is read, is speaking out loud for screen reader users, of course.

I use the class skip-link and screen-reader-text, and I recommend you to take a look in the file style.css of the Twenty-Twenty theme and to re-use these statements in CSS for your themes.

Soon, we will come to an end, I promise.

Just links. As we have seen, in the presentations ago, provide useful links, because links can be read out out of context. Out of the web page context, for example, in a link list, of a screen reader, or another assistive technology. So be sure that a link text is understandable out of context.

What can you do wrong? Well, using the read more links especially on archive pages of a blog.

Then you hear, read more read more read more read more, and you do not know, OK, what’s the topic of that link? Or you use different link for the same target, that’s OK, but not optimal because the link of consistency and may cause disorientation.

And now you open your windows in new tabs without notice, for me, I think, that is not forbidden but you can do it better. How to. Well, provide a link text, which describes the purpose of a link. And uses the same link text for the same target, and of course, use different link text for different targets or different web pages.

You can extend the link text with the title attribute, but be aware that is not reliable because users can turn off speaking of the title attribute. Instead, extend the link text with visually hidden unique text. And here you can see an example of that I have found that in the theme Twenty Nineteen is a function the_content() and you can pass the link text for that, for the read more link and with that construction, you can offer a link that you print out only Continue Reading, but in the assistive technology, there is a longer description, a unique link. Again, then you see, if you put the title of the_title() into the link description, and you, so you can provide unique links hearing, but visually consistently.

And how to open new tabs. It’s very easy. just say in the link that it is opens in a new tab, in a new window, and you don’t like the text, you can hide it visually at least it is speak out loud for screen reader users. Of course, use a list, a group of links, and use an element nav for navigation. A nav element is really useful, and education, here, if you know where to look it up. I provide you a link because in WordPress 5.5. there’s great support for nav element using aria labels.

Now I come to, I think, the last one. The last topic of the presentation. The focus order.

Focus is when you tab through the content and you can reach the links, the form fields, every one, Provide a meaningful focus order, and let me provide a meaningful sequence, so you get a meaningful focus order. What can you do wrong? Use a tabindex attribute, oh, yes, there’s a tabindex attribute that you can control the order of the focus while tabbing, or doing tabbing, but you do not know if what happen if the possible with other element without the tabindex attribute, and the other there is maybe you use the :hover pseudoclass for mouse overs, but do not provide the :focus class, too. So, how do you do it properly?

Use both the :focus and the :hover class, pseudoclasses, and avoid the tabindex attribute. That’s my preferred use no tabindex, just provide a meaningful sequence in the HTML code, then the focus order is meaningful too. OK, this is my really last. We can squeeze something in not about fooling, about resizing. The window, for example, or resizing the content, with the browser functions.

Well, how can you do it wrong in HTML.

You provide the meta element, but if you put name and I have seen that you do not allow any scaling or resizing. How to do it properly. A wise technique tells you don’t put it in or if you have to, allow scaling and resizing, so you can see here in this example.

Well, congratulations! Now we have come to an end. We have learned the mindset of an accessible developer. Text, structure, and keyboard first. And we have learned how to structure the template provide a meaningful sequence without CSS first, provide text alternatives, provide skip links, and provide tab-able and resize-able content.

We have some tools which helps you in the world, some data like Nu HTML Checker, or W3.org. An accessibility checker online called WAVE, I love that tool, and a text only converter, Textise. You can find this presentation on Slideshare now, on that link, and now, the line is open for questions.

Megan: Thanks so much, Martin. Unfortunately, we don’t have time for questions.

But there are some on the site, and we’ll make sure those get answered.

We’re actually going to be able to move into our closing remarks, but…

SEO & Web Accessibility: Partners For a Better Internet

Joe Hall: SEO & Web Accessibility: Partners for a Better Internet

Search engine optimization and web accessibility share many of the same objectives. Those who provide consulting or services to either should understand this unique overlap to help improve each process. By working together with a shared understanding, we can build better web products for our clients, customers, and users.

Watch Joe’s Presentation

Transcript

Mike Demo: Hello, and welcome to the next session of the WordPress Accessibility Day. I am your host, Mike Demo, and helping us in the chat moderator, is Kayla Demopoulos.

Our next session is going to be by Joe Hall. Joe has been a WordPress developer and SEO for the last 11 years.

He first became interested in Accessibility Consulting back in the 90s, but mostly does technical SEO for medium-sized companies, non-profit, and enterprise-level brands. He is passionate about accessible, highly optimized, and fast WordPress themes.

Joe’s talk is going to be about SEO and Web Accessibility: Partners for a Better Internet. If you have any questions, please make sure to put them into the chat, and we will get those at the end.

And please remember that there is a code of conduct for this event, and we’re all part of the same WordPress community. Um, with that, thank you so much, and welcome, Joe!

Joe Hall: I am looking forward to this conversation! I’m gonna start my slides, here.

Um, okay so uh this talk is called uh SEO and Web Accessibility: Partners for a Better Internet. Um and I’m going to get started here.

Okay, so let’s get started with some definitions. Uh this talk is geared towards uh folks that are interested in SEO uh, but also for folks that are interested in accessibility obviously.

Um and so because we’re talking to uh two separate uh groups, I thought it might be smart to do some uh basic definitions, so that we’re all on the same page. And so when we talk about web accessibility, um web accessibility is the inclusive practice of ensuring there is no barriers that prevent interaction with or access to websites on the world wide web, for people with all types of disabilities.

And when we talk about SEO, uh we’re talking about search engine optimization, uh the process of increasing the quality and quantity of website traffic, by increasing the visibility of a website or web page to users of a web search engine. This may involve increasing rankings found within the results, or improving uh the presentation of existing listings or rankings.

And you know, something, one of the really interesting aspects of of SEO and web accessibility as a practice, if this is something you do professionally, or you’re just interested in it, um these two things can influence many of the same areas of product development. So they both touch on User Experience, Design and Information Architecture, Content Development, and Content Optimization and Technical Infrastructure uh.

So it makes sense that if there are so many overlapping areas that we should be working closer together with each other um. It might be smart to go uh to dispel some myths uh, because there are lots of myths around both practices um and it’s smart to be on the same page uh.

So myth number one: Accessibility is only focused on improving access for the visually impaired. I, I see a lot of SEOs with this uh, with this myth and and the truth is that um accessibility is focused on lots of different types of disabilities: Visual Impairments, Motor or Mobility Impairments, Auditory or Hearing Impairments, uh Seizure Disorders, uh Cognitive or Intellectual disabilities.

So we’re talking about a cross disability spectrum, not just visual impairments. Uh myth number two: SEO is only about optimizing content uh with keywords.

Um so this comes up a lot uh with with folks that have sort of a cursory understanding of SEO, but the truth is that SEO follows uh technical best practices. Um it looks at external signals such as, links or citations.

It informs the design or information architecture process and then of course it does focus on uh content optimization. Another myth that I hear a lot of SEOs make is that: excellent SEO means uh full accessibility or vice versa, and that full accessibility means excellent SEO.

And we’ll take a look in this talk about how the two practices uh overlap each other and how having good accessibility, can mean in some ways, that you do, when you’re doing the right thing for SEO, um and then vice versa with SEO for accessibility, but but it’s a it’s a myth to assume that just because you have great accessibility that somehow you’re going to do really well with SEO. Or that just because you have great SEO, that you know your website is accessible um.

That’s just not the case and we’ll, we’ll look into that uh in a moment. So let’s start talking about some of the areas of overlap and conflict.

I’ve put together a Venn diagram here and everything that’s listed on this diagram is of course not a complete list of either practice. This is just an example of some of the things that might be found in each area and how some things overlap.

And on the uh on the left side, here I have SEO and in the SEO quadrant of this Venn diagram I have listed: Page Speed, Structured Data, External Links, Mobile Indexing and AMP? And then on the Accessibility only section of the Venn diagram I have: ARIA, Screen Readers, HTML Landmarks, uh Keyboard Access, and Form Optimization.

Some of the main, you know shared areas, that overlap between SEO and Accessibility are: Information Architecture, uh we use some Anchor Text, Content Optimization and Media Optimization. And so we’ll take a look at some of these overlapping areas now and see how they work together and how sometimes they can cause conflicts as well.

Um, so we’ll start off with Information Architecture. So with navigation items um you know, for SEO, navigation items should follow the information architecture, have simple but descriptive labels and point to main sections of the site.

And you know for SEO, this is great, because uh these help build internal links uh site-wide, which helps spread link equity and helps the search engines find all the main sections of the site. For accessibility, navigation items should have a simple and descriptive labels and this is, you know, primarily for ease of navigation and uh those navigation items should be easy uh for the user to understand and find um easily.

Unordered list, uh so in HTML we have, you know, different types of lists. We have unordered lists and and numbered list.

Typically when we’re making an information architecture or or navigation uh, we’ll use an unordered list um and then also, we’ll use it also, for you know things like tertiary navigation as well on the page. Um search engines prefer organized content and clean HTML uh for navigation.

So an unordered list is really great for search engines, because they can easily understand that these links belong together as a set and they’ll either parse those um as uh parts of the featured snippet, if you’re doing things like featured snippet optimization um or other things. But for accessibility, uh screen readers will parse unordered lists of links for menus.

And so it’s it’s really helpful uh to think about organizing, you know, your your navigation um especially sub-navigation or tertiary navigations uh into unordered list, for both SEO and accessibility. Anchor Text: so this is our first item that has a little bit of conflict uh.

We’ll start with the SEO part of it. Search engines use anchor text uh to associate keywords within target pages that those links are linked to.

And so when we talk about anchor text, we’re talking about the text found within a link and so for SEO, uh search engines use that text to associate the terminology that should be associated with the page that the link is pointing to. And then for accessibility, uh screen readers will list links independently of content.

And therefore, anchor text should not rely on the context of the content um, it is found in. So in other words, your anchor text should never be like, you know, click here, or you know, download this.

That kind of thing. Um it should always be descriptive of the page that it’s linking to, so that when those links are pulled out of the content and and made into a independent navigation menu, it’s easier to understand what those links go to.

Some conflicts. So SEOs have a tendency uh to stuff a bunch of keywords within uh anchor text.

Like I said before, it’s because that anchor text can influence the terms that the search engines will uh associate with that target page. And so you want to make sure that as you are optimizing your anchor text, that that anchor text is also useful for accessibility.

You don’t want to just jam up a bunch of keywords in your anchor text so that when those links are taken out of the content mega menu, uh they still have to make sense. Uh so it’s really important for SEOs not to just jam up a bunch of keywords into the anchor text and make for a bad navigation for screen readers.

Let’s go to Content Optimization. So heading tags, you know, these are like your H1 H2, H3 tags uh for SEO they should structure the content with main and sub-headings, uh use tags consecutively and include the target terms.

And generally you want to use like one H1 tag per page and then underneath that use consecutive order, you know, H2 H3 uh, H4, you know, uh down. For accessibility, uh screen readers use uh these heading tags uh for content navigation um.

And so you again, you wanna use the same structure they would use for SEO um and use a very descriptive content within the heading tags that would describe the content for that section of the page. And so a good balance for SEO and accessibility, is that you know, you you can label the these heading tags with content that includes, you know, descriptive keywords that also describe uh the content that um the headings represent.

Title Tags: so title tags are a very important part of SEO um and so title tag should include unique targeting keywords for rankings of an increase, increased clickthrough rates. For accessibility, title tags should include unique terms for navigation.

Um, now a conflict that I see sometimes is that SEO sometimes include uh marketing language in the content in the title tags, uh such as clickthrough, uh calls to action, to increase clickthrough rates. And so basically the the reasons this happens is, because uh the search snippet, the what you see within the search results, that title there is taken from a title tag and so SEOs oftentimes like to write kind of eye-popping marketing language within the title tag to get users to click on uh their search result, within the search rankings um.

And that’s fine, but a problem with that is that, that can get in the way of providing a useful navigation item. If you think about title tags as sort of a way to navigate through the pages, either through using tabs on your browser, or navigation within a list of bookmarks, that kind of thing, you should always kind of keep your title tags um as easy to understand as possible.

And you can find a good balance between having a good call to action, but also making it so it’s, you know, kind of concise and easy to understand that’s the best method. Um, so Keywords and Language: so you want to use keywords for SEO of in a natural way.

You know historically SEOs have been kind of notorious about, you know, pumping a bunch of keywords in the content and trying to kind of force their content into those results. That’s no longer as popular anymore as it used to be, which is a good thing, because for accessibility, content should adhere to good readability standards and should be easily understood.

These two things really go together in my mind, because uh the search engines are starting to employ more and more natural language processing which attempts to understand the content the way a human being would read it. And so therefore, you know, using a bunch of targeted keywords, uh and writing your content in a way that doesn”t sound natural, may be not so smart for either SEO or accessibility.

So it’s always good to use natural language and to use content that that makes sense both for all users, you know, search engines and uh human beings. Hidden Content: so I saw this mentioned earlier today um in someone’s uh talk and for SEO, hidden content is not detected by search engines.

And in some cases it can be a violation of their quality guidelines. In accessibility, you can hide content from visual users um, but then make it accessible to screen readers um, And so there’s different reasons why you might want to do this.

So for example, you might have a completely separate navigation just for screen readers, but you don’t want that navigation to be visible to users, you know, visual users. And that’s understandable, but accessibility professionals should not hide content that is critical for SEO.

And this is just kind of common sense in a way, because if we follow the principles of universal design, then we are making all of the content, you know, kind of equally accessible to all different users. And so, you know, if there’s a special case where okay you have to hide a certain navigation just for screen readers, that’s understandable uh, but if you are hiding content just for screen readers and some of that content has links in it that is not available to the visual users, then those links are not going to be uh used for SEO.

So just keep in mind that, you know, when you’re hiding content, you need to keep things equal on both ends. You know, that same content that maybe is hidden from visual users needs to be kind of represented in some way um especially internal links, because those are very important for SEO.

So Media Optimization: so one of the things that SEOs talk about whenever uh accessibility comes up is alt tags for images um. And SEOs tend to like to optimize alt text for images, because search engines utilize the text found in um alt attributes uh to associate keywords for an understanding of the image.

And so I, I think initially when search engines started doing this, it was a really great idea, because you know if you use the alt tags the way they’re supposed to be, then you will include a very descriptive um description of the image. And so obviously the search engines thought, oh we can just take those out and we’ll know what the image is then.

Um and I think that’s true still today. However, one of the conflicts I found is that SEOs generally don’t write very good alt text.

They just stuff the alt text full of keywords. And I’ve actually noticed where it’s become a common place in WordPress, to basically just take, like the title of the post, and pop that into the image alt text or, or even if it’s, if you’re using something like WooCommerce, sometimes they’ll take like the product name and put that into the alt text of uh the product image.

Um in some cases that stuff works, but but if you’re if you’re a blogger and, you know, you’re writing about something, you have an image in your article, it’s likely that the title of the blog post is not going to match up with a description of the image that you’re posting. Uh so it’s really important not to do that kind of stuff, and it’s a really easy way I think to optimize the alt text, because, you know, if you have like 200 images that are missing alt text, it’s super easy just to go in and change your uh WordPress theme to do that, but in the end it doesn’t really serve uh your user, your users that use screen readers uh very much at all.

Um and oftentimes, it actually doesn’t really provide much value for SEO either uh, because they’re not really a good description of the image at all either uh. So, you know, it is kind of a pain in the butt, but it’s always better to write your own alt text by hand and not try to optimize it or or or automate it.

Videos: so I see a lot of folks that do videos and the obvious accessibility approach to videos is to include uh closed captioning. Um and closed captioning is, has become relatively more accepted, and a lot easier to implement.

I watch different platforms um. For SEO, what you can do is, you can take the same transcript of, for the closed captions and utilize that for SEO content.

Uh so you can put that on the same page as the video. If you have an embedded video, you can totally just take the closed captioning content uh and then put that on the same page as a, you know, video transcript.

And that turns into a really great optimized, SEO friendly content for the video um. And the same thing for podcasts.

You can, you can do the same thing for podcasts. Podcasts are very popular now.

Uh if you have an audio transcript, that can be placed on the same page um as uh the podcast is embedded in. And that creates a really great thing for SEO um and also for screen readers that would just read the uh audio transcript that’s on the page where the podcast um is embedded.

Um so that wraps up the majority of uh this talk and the talk went a little faster than I anticipated, but I do have some closing thoughts. So the best way to optimize for both accessibility and SEO is to work alongside amazing professionals that specialize in each.

And I really can’t stress this enough, because I feel like um SEO and accessibility, because it touches on so many different areas and because uh each one of the practices uh can be very detail-oriented and very specific to different types of websites, or are very specific and different types of clients, it’s really difficult to be a Jack or or Jane of all trades and do both. Uh so I would encourage everyone to make friends uh with an SEO or an accessibility professional, and encourage them to work alongside you, and and develop projects together and share in your own experience um to to build uh better products.

Of course, you can both learn about each other’s, you know, fields and and do the best you can, but it’s really important to have someone that really knows what they’re doing um and with lots of experience. My name is Joe Hall and you can reach me at these websites and at the end here I’ve included some more reading for the SEO folks.

Here’s some further read on accessibility. And then for the accessibility folks, here is some further reading on SEO.

That is it.

Mike: Cool, great job.

A lot of great information in there Joe, so we have some questions that we’re going to uh go through and we’ll see how many time, um questions we have time for. If you still have questions, that’s cool.

Kayla’s still posting them. Please just put them into the chat.

So the first question is: Do you have any recommendations for making sure you’re using appropriate language for users in SEO?

Joe: I think that you need to primarily, I’m sorry Mike, did you say for users and SEO, or for accessibility and SEO?

Mike: Sure um let me repeat it. Do you have any recommendations for making sure you are using appropriate language for users and SEO?

Joe: Okay, so you should just, I mean, really you should write um like you would if you were not focused on SEO. I mean, in my opinion uh there are lots and lots of factors uh that go into ranking a web page.

And if you are mindful of the types of terms that you want that web page to rank for, you can utilize those terms um you know intentionally, uh here and there um, but you don’t need to uh, you don’t need to, you don’t need to um, you don’t need to over optimize and use too much. You can uh, you can just, you know, use your natural language and and talk as if you uh, as if you would in any other format.

You know, um use some terminology intentionally if you are thinking of certain things, but you know, just just talk like you normally would, you know.

Mike: Sure and a similar question uh that I actually have, is: How do you SEO for language, you know, now that pronouns are becoming a bit a bit, you know, different and, you know, they could be they/them pronouns.

Is SEO catching up when you use those less traditional pronouns in your copy?

Joe: Yeah, it’s a really good question.

I had never thought of that. So I think that one of the things that we talk about about SEO, is something called query intent, and so understanding why someone is searching uh for your content um and um.

I can’t imagine a situation where gendered pronouns would require, what would like really be required uh, because, you know, a lot of times we think about SEO, we’re thinking about uh proper nouns. You know, like we’re thinking about, like you know, the names of things and people you know.

And so, I don’t think that it really matters too much about what kind of pronouns you use. If you wanted to use like uh non-gendered pronouns, I think that would work the same way, you know.

I will say that, and this goes back to like query intent, if what you’re, if what you’re publishing could be searched for verbatim, then you don’t maybe want to like change the pronouns, right. So like, if you have like a text that’s maybe really well known, like lyrics or something like that, um it it might be tempting to go in there and take out all the gender pronouns, but but it probably would not be great for SEO, you know, but but again like I said, I can’t imagine a way that they would, that that would cause an issue.

I, I don’t think so, um yeah.

Mike: We have another question, um from the chat: What are the easiest wins for us to fold into our accessibility work in terms of SEO?

I know you touched on this a little bit on your talk.

Joe: So I think an easy, uh some of the easy wins is uh to think about, like like I mentioned with uh some of the captioning, content and some of the um, some of the transcripts for podcasts.

That kind of stuff. Like you know, for example with YouTube for example, you know, if you have a captioning transcript that you uploaded with your video on YouTube, um go ahead and paste that into the description of the YouTube page.

Um and that will help that YouTube video rank higher uh in search engines um, because that content is inaccessible to the search engines. Um that’s a really good easy win.

Um another easy win is to think about how uh, how your heading tags are are optimized. You know, you for for accessibility, you want your headings to to be descriptive of the content you know um, but if you can pull that off while while also like plopping in a keyword here and there that that might work really well for that page, uh for SEO, that’s a really smart move.

You know, um and the title tag as well, like you know, really you know for accessibility, you want really easy to read title tags, but if you can kind of combine that with the proper keyword usage that that really helps too, you know.

Mike: Yeah I’m always a big fan of taking content you’ve already created and getting more leverage out of it.

So if it’s video content, taking the captions or the transcriptions. . .

Joe: Absolutely.

Mike: Podcast same thing. On that same note, do you um, there are obviously like free captioning and translation tools and then you can pay like a service like Rev to have it human edited.

Do you think it’s worth to pay for a professional to make sure that it’s verbatim and like there’s no errors in the computerized translation? Or do you think the computerized, you know, the automated stuff that’s either cheap or free is good enough?

Or does it depend on the project?

Joe: Uh for captioning?

Mike: Yeah.

Joe: I think it’s probably a good idea to

Alexa: I’m not sure

Mike: Bye Alexa, sorry.

Joe: Okay, I think it’s probably a good idea to go ahead and um integrate some humid, some human editorial stuff on your captioning. Um you know, one of the things I like to do is uh I’ll go ahead and like upload a video to YouTube and I’ll let the YouTube’s um automated, you know, captioning project uh do the captioning and then I’ll go back and edit those myself, because it saves me a lot of time of versus having to go out and like actually edit, you know, everything.

There is some stuff you can do like, I, I work in, you know, digital marketing, so sometimes we’ll have like uh video content made um and when we do that we’ll have a script written ahead of time um. And if you do that, then you’ve already got it written, you’ve already got the captioning written right there.

You just have to put in the time stamps for it um. So I think a good balance between the automated and me uh and the human kind of uh approach is best, you know. Yeah.

Mike: Sure um yeah, you know get the head start on the automated stuff and then clean it up a little bit yourself.

Excellent. Another question we got on the chat is: How important is alt attributes in SEO ranking and accessibility?

So it’s important for uh for SEO. It’s important for image search.

So when you go to Google and you go to the Google image search and you, you know, type a questionnaire or some keywords you get a bunch of images. Uh that’s how Google ranks those images, is by using alt text and then also the text found around the image.

Um and so for SEO, that that’s what, that’s really important. Uh but for uh accessibility, obviously uh that’s very important for uh screen readers and, you know, like I mentioned before, um having a good balance between the two is important.

Um I really think it’s important to maybe go the accessibility route more when doing alt text. Uh and if you’re able to throw in some keywords that’s great uh, but at the end of the day you don’t want to just jam a bunch of keywords into the alt text, because that’s not really good accessibility, at all.

And and honestly it’s not really good for SEO either. SEO needs to be natural language, needs to have, make sense to human beings and and search crawlers, you know.

Mike: Yeah and I know Twitter, I believe, just launched their alt text feature for images [unitelligible].

Joe: Yeah they did.

It’s been really nice um and that’s been good because Twitter actually ranks really well uh for SEO. And so it’s good for them, because they’re probably picking up a lot of uh a lot of new image searches, uh because of that um, but it also helps rank their images uh for people searching on web too, you know.

So that’s good.

Mike: Yeah we have another question.

It says: Would you say that the argument that accessibility professionals should not hide content also argues that if designers want text hidden, maybe it’s better for all users that it stay visible?

Joe: Uh I’m not sure I understand the last part of that question.

Mike: Yeah, so I’m not exactly sure on the context here. I kind of just read it.

So, maybe there is uh a user interface that maybe some text is hidden unless there’s a certain element um engaged with, versus maybe showing that uh text at the first.

Joe: Okay, yeah yeah I understand now.

So for SEO um Google’s crawlers uh utilize Chrome. So they actually, like Google’s crawlers actually is based on Chrome now um and so what it does is it it renders the page as if it’s being opened in Chrome.

However, it does not utilize a mouse uh. So user interface interaction um does not really help with the SEO, so so content is hidden behind a a tab or a module or or something that requires you know like user interface, a user interaction, um SEO or search engines will not see it.

Now this is actually a a kind of a debated topic among SEO nerds um, but generally speaking we have to go with what Google says and they say they don’t, you know uh they don’t surface content that’s not you know visible without um without user interaction. Now that being said, like you know, screen readers for example, um a lot of websites hide uh separate navigations just for screen readers.

Um and I think that that that’s fine um, you know, if if you are hiding content that’s that’s just for screen readers uh, just make sure it’s the same content that would be needed for SEO. Well you know, you don’t want to hide anything that could have value from an SEO perspective.

Um you want to keep everything kind of visible um and you know so that search engines can parse it and utilize it, you know, in a visual format.

Mike: Uh certainly.

Another question we got is: How do you prioritize to give focus to client content to rank more positively with SEO?

Joe: How do you prioritize clients?

Mike: How, I’m trying to parse the question, so I’m I’m I’m guessing, they’re mean like, how do you work with clients to make sure that they get their message across, but you can do your job. You know SEO, like that balance between what the client copy wants and then also what the project requires.

Joe: Yeah yeah, so so that’s a difficult thing um. One thing that, and I mean I got, I could probably write a book on this question uh, but I won’t uh.

So one thing that you can, it obviously is different for every client, right. So some clients are going to be more flexible and be willing to change uh for SEO uh.

Some clients are not. Um I think what you need to do as a professional is, on your own time, prioritize what’s worth uh fighting for and what’s what’s not worth fighting for um.

Some things you need to understand that, you know that it’s the right thing to do, but really is it going to move a needle for SEO? Probably not, so you don’t really need to argue about it with your client, you know.

Um you can uh in some cases, and I do this a lot, in some cases you can try to convince your client to create a whole different piece of content. Like I say, okay you can keep this, you know, because a lot of times clients like to have pages for things like paid search or social, uh channels, that kind of stuff and that and those things just don’t work with SEO content and so you can say okay we can keep these pages to use for advertising and that kind of thing, but let’s create like a a sister page that covers the same topics, but is well optimized for SEO.

Um and that usually works out really well, because then you can focus all your time and priority on what we call, we call those like SEO landing pages. Focus all your time and priority and SEO kind of uh perspective on those pages and they get to keep, you know, their other content um and do whatever they want with it, you know.

Mike: Sure, and our last question is: What are your thoughts um because you could, I’m just gonna summarize it. They’re talking about keyword stuffing in the alt text and, you know, what are your thoughts on that, but they had added added the specific question about adding hashtags into alt text.

Joe: I’ve never heard of that um, so I mean I I don’t think there’d be much value in that at all um, unless that hashtag was something that you think people are gonna search for on image search uh, but I don’t really see that. I mean, like like I said before, you really have to understand your query um your query uh intention and you know you’re you’re, what is the, you know motive behind searching uh query intent, you know.

And if, if you think that users are going to be searching on image search uh for a hashtag, then yeah you can put that in your alt text um. I don’t really know if that’s really beneficial um, but I don’t see a problem why you couldn’t do that uh.

Again, like you know, alt text is for accessibility uh first and foremost. So if the image is somehow related to that hashtag and that makes a good description of the image then absolutely do that, you know.

Mike: Sure, um we have a few more minutes so I’m gonna ask a question that I have that I wondering your thoughts on. Do does, do TLDs affect the SEO, because you got there’s a lot, there’s a new TLD every week you know: .vegas, .design, .vote, . nyc?

Joe: So, the answer is yes and no. So the answer is this uh, from a technical standpoint, no.

Like from a technical standpoint the algorithm kind of judges all TLDs the same. From a realistic standpoint there are a lot of other factors involved with SEO um and you have to ask yourself, like at scale, we’re not talking about, like you know, you know, small stuff.

At scale, how easy is it going to be to get someone to link to, like a .network or a .market, you know? Like there’s all these different TLDs now and .com tends to be the preferred one still, because it has the public interest, you know. The public knows about that.

It’s like in commonplace, you know, uh language now. So you know all these other TLDs uh it’s hard to explain to people that that might be linking to you, but oh no it’s not .com, it’s .market or you know something that they maybe didn’t even know existed, you know.

Um and so I would say that you know from a, from a, technical standpoint no you know, TLD doesn’t really matter too much um. It does matter though from a practical standpoint and how easy is it going to be to attract the needed signals.

And I would suggest that everyone pass their domain through the telephone test, which is like you know, trying to tell uh trying to tell, you know, someone the name of your website address over the telephone and how easy is that to do uh without having to like spell it out. That kind of stuff.

If your domain name can pass the telephone test, then it probably will work well for SEO, you know. Mike: Cool.

Well, I want to thank you so much uh Joe for your time. Everyone you can get his deck on the website of the event, wpaccessibilityday.org to view his slides. And you’re also on Twitter if people want to continue the conversation, correct?

Joe: Yeah please uh join me on Twitter @joehall. Mike: Uh please when you’re on Twitter, please uh tweet at us @wpaccessibility.

Our hashtags are #wpaccessibilityday and #wpad2020. Up next at the 1 o’clock UTC time is Adam and his topic is Accessible Navigation from Scratch.

So again, thanks to Kayla for moderating the chat and I’ll be back with you in about 15 minutes. Thanks.

Accessible Color Considerations

Colleen Gratzer: Accessible Color Considerations

A discussion of color and contrast and why it’s important for designers to think about accessibility as early as possible in the design process, even at the branding stage.

View Colleen’s Presentation

Transcript

Ahmed Chaion: Hello and welcome to WordPress Accessibility Day 2020. My name is Ahmed Kabir Chaion, and I’m working as the business development manager at weDevs. I’m also a regular contributor to the making WordPress documentation design, polyglots accessibility, hosting community learn WordPress, and marketing team. I will be your host for this session.

You’re here for the 8 p.m. talk with Colleen Gratzer. Please feel free to add your questions to the YouTube chat feed, and we’ll answer those at the end.

So, this talk is more like a discussion of color and contrast and why it’s important for designers to think about accessibility as early as possible in the design process, even at the branding stage. Colleen is a award-winning designer with 23 years of experience in branding, print, web design, and development.

Four of those years include being an accessibility specialist. She has proved–provided InDesign accessibility training to the U.S. Department of the Interior.

Her client-based business, Gratzer Graphics, provides design and accessibility services to nonprofits, creative firms, and developers. Through Creative Boost, Colleen hosts the Design Domination Podcast; educates designers and developers about freelancing issues, design, and the importance of accessibility; and offers a website accessibility course and other resources.

She’s a member of the IAAP, which stands for the International Association of Accessibility Professionals and holds a verified certificate of achievement for introductory website accessibility from W3C, with plans to pursue additional certifications, which brings to this session, Accessible Color Considerations. Colleen, the floor is yours.

Colleen Gratzer: Thank you so much. It’s great to be here.

Let me just share my screen. Okay, do you see that now in full-screen mode?

Is that fine? Okay, great.

So, in this presentation I’m going to discuss color and contrast and why it’s important for designers to think about accessibility as early as possible in the design stage, even at the branding stage, and I’m gonna get into why many designers–not just web designers, but designers in general and developers, why they’re reluctant to incorporate accessibility, and then, Who is affected by our color choices? And then, I’ll get into WCAG guidelines about color and why accessibility should be thought about as early on as the branding stage and how accessibility makes you a better designer and problem solver.

A lot of designers are resistant to incorporating accessibility, and I hear all kinds of reasons. They might think, “Only web designers and developers need to be concerned with accessibility.”

This is probably because website accessibility lawsuits have gotten a lot of attention over the past few years, but it does apply to a lot more than websites. In our industry and with color contrast we’re usually talking about apps, electronic documents, and then the text and the graphics and interactive elements that are in them.

“Accessibility is ugly. ” I hear this all the time from designers.

A lot of websites and designs are indeed ugly, but they’re not ugly because they’re accessible. They were just poorly designed.

Accessibility has nothing to do with how visually attractive a website is or document, a design, or graphic. “Accessibility means designing with only dark colors.”

Now, I’ve heard this from both designers and clients. In fact, for an email design project where a client wanted the color scheme to be accessible, they initially sent us the color codes for only their darker brand colors, which we didn’t find out about until the middle of the project.

Now, here’s an accessible website I designed and built several years ago. It isn’t ugly, and it doesn’t use dark colors.

And here’s an example of using dark colors together that I found while shopping online. People without vision issues would have a hard time reading this.

I certainly did. It always depends on how the colors are used together, as I’ll get into.

Some designers and developers and their clients think that accessibility only applies to a small population, or only to older people, but worldwide it is estimated that 2. 2 billion people have a visual disability.

One of those could be low vision, and low vision is having best corrected visual acuity at less than 20/40 in the better seeing eye, and this can be due to macular degeneration, cataract, diabetic retinopathy, or glaucoma. Another type of visual disability is color blindness, and color blindness affects 8% of males and .5% of females. Types of color blindness include red-green color blindness, blue-yellow, and there’s even different types of each one, and then there’s complete color blindness.

Some uses of color and contrast can actually affect comprehension either negatively or positively, especially for those with cognitive, learning, and neurological disabilities. Now, in the U.S. there’s 14.8 million people who have a cognitive disability. Unfortunately, I wasn’t able to find a worldwide number on that, but, as you can see, these are not small populations.

These are not small numbers we’re talking about. And here’s another one I hear from designers and developers.

“My clients don’t serve anyone with a disability.” I actually hear this from clients, too.

I mean, you can’t see who’s coming to a website. You can’t see who’s reading your electronic documents.

You might only find out if somebody complains that they can’t get around the site, or they can’t access content in a brochure, or they can’t read something, and they might just go to a competitor instead. The Web Content Accessibility Guidelines, called WCAG for short, tell us how to be compliant.

These are internationally accepted guidelines, and there are three levels of conformance. There’s A, AA, AAA, and they range from minimum to strict.

The typical level of conformance to meet is AA. AAA is a much less common request, so in my presentation I’m focusing on A and AA and focusing on WCAG 2.

  1. One of the WCAG guidelines that deals with color is 1.4.1 Use of Color, which says that color cannot be the only visual means of conveying information. And that could be text. That could be social media icons, for example.

It could be data graphics. I mean, in this case, the pie chart is conveying data on each piece of the pie, but it’s also conveying information from each piece of the pie to the legend.

Color alone also cannot be the only visual means of indicating an action. Here’s an example where color alone is being used to do that.

Sighted users with or without a disability would not be able to tell that the word “this” is a hyperlink. The blue link text is hardly noticeable against the surrounding black body text.

I mean, we could assume it’s a hyperlink, but that’s if we even notice the color difference at all, which most people won’t. Color alone cannot be the only visual means of prompting a response.

So, for example, a button. Color alone cannot be the only visual means of distinguishing a visual element.

That could be a form-field border, just to show that it’s a form-field border, and it could also be showing a field that contains an error as well. WCAG 1.4.3 Contrast Minimum says that text and images of text have a contrast ratio of at least 4.5:1, except for large text, incidental elements, and logos. Normal text is defined as 14 points or less, or 18.66 pixels, if you’re working on the web, or smaller than that, and it needs to meet a contrast ratio of 4. 5:1 or more, like I just mentioned.

But large text is at least 14 points or 18.6 pixels and bold, or at least 18 points or 24 pixels in any weight.

Typically, you’re gonna see normal-size text used for body text and header and footer text, photo captions, block quotes, navigation menus and hyperlinks, tables and form fields, buttons, form instructions, and error messages. And then, large text will usually be used for headings and sometimes block quotes and buttons.

To check contrast, you simply enter the hexadecimal codes for the foreground and background colors into a contrast checker, and in this example I’m using the WebAIM contrast checker. And then, it will give you the contrast ratio.

With this particular checker you could even click the permalink link under that and then copy the URL from it in case you wanna show this information to someone else or refer back to it later. WCAG 1.4.11 Non-Text Contrast says that user interface components and their states, such as focus and hover and so forth, and graphical images–excuse me, objects have a contrast ratio of at least 3 point– 3:1 against adjacent colors.

And this applies to form fields at their default and at their various states, so it could be a field in keyboard focus. And it could be social media icons.

The WebAIM contrast checker also has a section for graphical objects and user interface components, so it will tell you right there if that passed or failed. Hyperlinks need to meet the same requirements as text against their background, but if color alone and no additional styling, such as an underline, is being used, then hyperlinks will also need to have a 3:1 contrast against the surrounding text color.

The WebAIM contrast checker also has a link contrast checker, where you enter the hexadecimal codes for the link and the body text and the background colors, and then it will tell you if they pass or fail. Now, there are no contrast requirements for logos, images that are purely decorative.

And those could be decorative borders. They could be visual dividers or icons that don’t convey any meaning, inactive user-interface components, such as a button that doesn’t become active until someone fills out all the required form fields, content that is not visible to anyone, images that contain significant other visual content.

So, if you have text that’s unimportant or just happens to be in an image, like this street sign in a photo, that would not have to meet a contrast requirement, unless–in this particular case unless we actually wanna use this image to convey South 2nd Avenue. But other examples would be an image of a magazine article that’s being used decoratively and not meant to actually be read.

And heat maps, which have to use low-contrast colors so that you can see the page content beneath the colors. And then, screenshots.

Besides checking contrast, we can check to see how something would look to someone with color blindness. We can check for this by using a color blindness simulator, and in this example I’ve used the Coblis color blindness simulator.

And so, I upload a pie chart, and then the color blindness simulator shows how this pie chart, with those particular colors, would look to people with varying forms of color blindness. And you can see there’s quite a few types there.

So, you can see how very different this pie chart would appear to some people. In some cases you can still make out the differences in the legend, but with some types of color blindness there isn’t much of a difference between them visually.

So, once we find issues and we’ve checked for them, how do we resolve them? There’s actually a few things we can do.

We can increase the contrast between the foreground and background. In this example we can darken the light green until it has sufficient contrast, but the change is really drastic, and this might be undesirable in the design.

I mean, it would be for me. It’s actually from my own-brand color palette, and it’s too dark for my taste, so– and the look I’m trying to achieve.

In this case darkening this particular orange from a client’s brand color palette only slightly gives it sufficient contrast and the change is hardly noticeable. Here’s an example of a hyperlink that does not meet contrast requirements against the body text color.

The link contrast checker assesses the hyperlink color against the background and body text colors. Now, the link text is a different color, but it doesn’t have enough contrast to distinguish it from the body text, so it’s not obvious to some people that it’s a hyperlink.

In other words, it’s using color alone, not contrast and not styling, to show that it’s a hyperlink. Now this particular blue is slightly lighter, and it still meets the contrast requirements against the background and the body text, but it is still a best practice to underline links or give them a border bottom in the CSS.

Another way to resolve contrast issues is to use a completely different color. Here, the white text on this orange background of the button does not meet contrast requirements, and so we have several options.

We can change the background color to the dark blue from–this is from my color palette, and the blue gives sufficient contrast against the white. And then, we could change the text to that same blue, which has sufficient contrast against the orange as well, or we can even reverse those colors.

Now, here with these form-field borders the orange does not have enough contrast with the background. Instead of darkening it, though, we could choose another color from the brand color palette that does have sufficient contrast.

In this example with social media icons, these are really light, so we could choose another color from the client’s color palette. Now, with some elements we can use styling to differentiate them.

Going back to the hyperlink example, you know, if the link text has sufficient contrast with the background, then instead of using contrast to distinguish it from the surrounding body text, we could simply add an underline or border-bottom style, or we can add a background color. We could also add a background color to show a field that is in focus.

To show form fields that have an error, we could use a thicker outline and/or one that’s in a different color that has sufficient contrast with the background and the field border default state. So now, let’s talk about how the accessibility of our color choices can affect branding and why accessibility should be brought up as early as possible even at the branding stage.

Number one is that the visual brand integrity can be affected. Now, here’s an example of that.

So, this is the branding of my client-based business, and it uses a light green and gray as the two main colors. Purple is what I want to be more of an accent color.

Now, I developed these colors before I got into accessibility and was even aware of accessibility, so this is all happening after the fact. So, it would have to be a much different darker hue of green as I showed earlier, like an army green, and that would change my brand color palette and the brighter look that I wanna have.

So, you might also need to weigh whether or not the design will end up being too heavy on one color, which, you know, you may not want, so in this case, in order to meet contrast requirements in certain places, I’ve had to change the gray to purple. Now, I don’t care for having so much purple.

It’s more prominent than my primary brand colors, but it does give a warmer feel. Something to consider with your work is, How will brand recognition be affected if you end up needing to use more of the secondary colors rather than the primary ones, or having to darken a client’s primary color palette?

Plus, you don’t want the client’s website to be accessible with a modified color palette but then their other materials use the original, non-accessible color palette. It’s really important that they’re consistent.

It is much more costly to remediate websites and documents and color palettes after the fact when accessibility is an afterthought. That’s not just a financial cost, but also the cost of brand recognition.

I mean, will your client lose business as a result? Because some people may not immediately recognize the branding anymore once these changes have been made.

I mean, color plays a big part in brand recognition. Think about McDonald’s.

What if the golden arches were changed to green? Often, when I’m remediating InDesign files for accessibility, I have to modify the client’s color palette.

In this case, I was provided a fully designed file which needed to be made accessible after the fact, and so you can see here how changing the light green to an army green looks drastically different, gives a different effect, so, again, this is definitely something to consider in the beginning with brand identity design. And sometimes it’s a case of needing to rework the design with different colors, and sometimes the design itself, keeping the existing colors but changing how they’re used, needs to be done.

In this case, I changed the design to use the light green against the purple, and then I used the orange in a decorative way, but changing the design after the fact is costly and time consuming to the client because accessibility was an afterthought. I mean, in these situations you’re revisiting the design process a second time, so it’s almost like the client’s paying for the design work twice.

And it requires the client to review the new look, which adds additional time that they probably hadn’t planned on. Accessibility can affect an organization’s brand values and experience, and this can work for or against them.

Implementing accessibility is the right thing to do, and it leaves a positive impression. It gives a business a good reputation.

When accessibility is ignored, though, it gives the business a negative reputation on diversity, and people with a disability are three times as likely to avoid that business and twice as likely to dissuade others from doing business with it. Accessibility can be good for business.

Seventy-one percent of users with a disability leave a website that is not accessible. Now, color only plays just one part in that, of course, but consider how having an inaccessible website might be potentially costing your client.

For example, a young woman with low vision is looking for pregnancy support on a website. The headings are in baby blue and pink, and she has a hard time reading them because they’re too light against the white background, so she leaves and goes to another site.

A male user with color blindness is shopping for a gift for his wife online, but he’s unable to make out the hyperlinks that go to the products. He leaves and goes to a competitor site.

A legally blind woman wants to make a donation to an animal rescue but finds it hard to read the small light-gray text on the website, so she doesn’t–she doesn’t use a screen reader, and she doesn’t know that she can adjust contrast or text size in the browser on–or her operating system, and so she leaves the site feeling frustrated. Accessibility provides a better experience for all users.

Most people won’t notice that something is accessible, but they will appreciate the benefits. In terms of color and contrast that means enhanced readability and clearly distinguishable hyperlinks and interface components.

Now, here is a horrendous example, and I was shocked to have found this on a county website, a government website, but users without a visual disability cannot read this white on white text. And even with the drop shadow the text fails to appear, and I guess they want you to, too, but, again, all users would benefit from this content being made accessible.

Remember this? Well, users without vision issues, you know, would have trouble reading this.

These form fields would be hard for most users to see or to read or to know where to put–input their information. And here’s an example again with the hyperlink.

Some sighted users and users with a visual or cognitive disability would not be able to tell this is a hyperlink. So, I mean, the blue link text is hardly noticeable against the black text, and we could assume it’s a hyperlink if we even notice the color difference, but again, most people won’t.

But just don’t make people think. Ninety-seven percent of the top one million websites fail a basic test for accessibility.

Having a more accessible website could give your clients a competitive edge, and it also gives you a competitive edge because most designers and developers don’t bring this up, and you’d be the one informing them about it. Addressing accessibility can make you a better designer and problem solver, because design is not about just looking good.

It’s all about communication, and it will add more value to your branding and design work. Okay, so let’s recap some key points here.

Don’t use color alone to convey information. Sufficient contrast is good for everyone.

Check color contrast of any elements that are conveying information. So, your normal text is gonna be 4.

5:1 and large text 3:1. The checker I mentioned was the WebAIM contrast checker, and The Paciello Group also has one that’s called the Colour Contrast Analyser.

And you wanna check for any elements that convey information for how they would look to users with color blindness, and you definitely wanna educate your clients about the importance of accessibility and its benefits. Now, I have a handout that’s available on the website to accompany this presentation and there is so much more to understand about color specifically and, of course, accessibility in general.

To learn more, you can go to my website, creative-boost. com, where you’ll find my Design Domination Podcast episodes, and then design-and accessibility-related articles, and links to other accessibility presentations I’ve given.

And I also have a free guide for understanding and selling accessible websites, as well as a website accessibility course, which will get you up and running quickly with website accessibility. And I have an upcoming accessible branding course as well.

And through my client-based business, Gratzer Graphics, we design accessible publications and websites, remediate other designers’ InDesign files, and provide website audits and consulting. And I’m on LinkedIn, so feel free to connect with me there or in my Design Domination Facebook group.

Ahmed: Thank you so much, Colleen. That was very informative, and I personally also got to learn a lot.

And our viewers, using the live-chat feed of YouTube, have been asking questions, so let me just take some questions for you. We have a lot of questions– we have–time to answer them.

So, the first one, “An earlier speaker mentioned black and white can impact on a segment of the community. Are there any colors that we should be avoiding?”

Colleen: Okay, I’m sorry. Could you repeat that?

Ahmed: Yeah so, are there any colors that we should be avoiding?

Colleen: Well, too stark of contrast can cause problems.

Like, if you have straight black on white, that can actually cause issues with people who have Irlen Syndrome, and, apparently, that can kind of make the text look like it’s moving, so that can be problematic. So, you don’t wanna go for stark contrast, but, yeah, it’s always a case of just checking the contrast of the colors that you’ve chosen.

It’s always about how they work with one another. Like, you could use–you could use black against, you know, a light gray background, as opposed to a white background.

Or you could use a white background with very dark gray text, for example, but, you know, this would apply with any color, too, instead of having, like, super dark or super contrast. Although with–I shouldn’t say that, actually.

It’s probably more of a black-and-white thing but–because with WCAG AAA the requirements are higher contrast, so there–it’s a higher contrast ratio, so it might just actually be for the black and white. Ahmed: Okay, thank you for the suggestion.

So, next question is the question says, “Thank you for bringing some light to the way we should approach to color and accessibility. So, the question is, How much more costly could it be to redo a design because colors weren’t accessible?”

Colleen: Well, in my experience it–sometimes it can cost double the cost of–for the work because of that. That also could–it’s not just necessarily the color.

It’s also involving, you know, relaying out something in InDesign properly, but color is a big part of that. And yeah, it’s if–especially if you’ve got a client who comes to you with, like, a pastel color palette and not much more and you have to come up with, you know, creative ways to get these colors to work to try to maintain their brand integrity.

Or you’ve got to tell them, “You know, we have to change some colors here. ” Ahmed: Okay so, our next question, “Is there any legal implications for the inaccessible websites?” Let’s talk about some legal stuff.

Colleen: Oh, well, I’m not a lawyer, of course, and I don’t play one on TV, but yes.

I mean, there are certain types of clients that need to abide by accessibility laws, but, you know, everybody should just go ahead and start talking about accessibility even if their client doesn’t need to– if there’s no legal requirement, I mean.

Ahmed: Okay, next question.

“Working with design system that are not tested accessibility, is that a challenge?”

Colleen: I’m not sure what you mean by that. Like, a website or–

Ahmed: For a website or– yep, of course.

Colleen: You mean, like, to remediate the colors on it?

Ahmed: Yep. Yep.

Colleen: I mean, it depends on–you know, sometimes it’s a case of changing the color palette, and then just providing the new hexadecimal codes and suggesting what colors need to be replaced with which ones. Like, it’s more of an advisory role and sometimes it’s okay going in and actually making the CSS changes to the site in addition to that.

Ahmed: Okay, great. Thank you for that.

Next question, “Form fields often get very artsy and use colors in accessible ways. What is your approach to color and design for forms?”

Colleen: Oh, with form fields, I mean, you can be– yeah, you can be creative. And even with hyperlinks.

I mean, you can do something–you don’t have to always have–it doesn’t have to be text-decoration underline. I mean, it could be border-bottom, you know?

It could just be–it could be maybe a dotted outline. It doesn’t have to be something that’s just a straight line underneath, you know, all the time.

It could be something creative, and you can still, you know, change that based on whatever the default is, have it look different on focus or on hover, so you can have those look different and get creative with those. Ahmed: Great.

Thank you. So, we talked about hyperlinks.

The next question is also similar to the topic of hyperlink, “Better, that is, more accessible, to use high-contrast color for hyperlinks or underline/border? What about hover state effects?”

Colleen: Yeah, so you wanna make sure that the hyperlinks contrast enough with the surrounding body text, so, like, in the example I showed you have a blue, and then you have black body text. So, it’s gonna to depend on what color the body text is, but you have to ensure sufficient contrast between that.

But then, it also has to have enough contrast between itself– that color used on itself and then the background, because you have to be able to tell–you have to be able to read it, and you have to be able to tell that it’s a hyperlink. And if you just add the–some kind of styling to it and make it really obvious, then you can’t go wrong.

I mean, it’s better from a usability and an accessibility standpoint to do both, the contrast checking and adding styling.

Ahmed: Right. Great. The next few question is more like suggestions coming from you, so the first one is your suggestion on how we can educate clients on accessibility.

Colleen: Okay, yeah. So, I would definitely talk about the benefits.

And sometimes, unfortunately, with clients you have to– you know, you have to talk about money. You have to talk about business and, you know, sometimes that’s what gets people– people’s attention first.

So, you know, you might have to talk to them about how this is affecting their business. Are they losing potentially up to 20% of people coming to their website because their site’s not accessible?

Or you know, they’re–maybe they’re–’cause their documents aren’t accessible. Anything like that, so, yeah, talking about that, talking about why it’s the right thing to do, why it’s important.

You know, a lot of people that don’t have a disability don’t think about accessibility unless, you know, they know somebody that has one. And so, everybody should be having this conversation, because a lot of people think, “Well, it doesn’t apply to me, so it doesn’t apply to my audience, either.”

Ahmed: That’s very true. We’re also seeing a lot of great praises from our audience in the YouTube live-chat feed.

We have a couple more question as we still have a couple more minutes to go. So, some examples from you, Colleen, about websites with WCAG AAA-compliant colors.

Can you think of some website names right away?

Colleen: Oh, no. I don’t know of any offhand, no. And it’s very rare.

It’s very rarity. I mean, I’ve never had a request for WCAG double or triple A, so, no, I can’t think of any off the top of my head. But it’s very rare.

Ahmed: Yeah, perhaps we can take advantage of the question-answer that we have set up on the WP accessibility website, and if you can think of any– I understand that’s so rare.

Perhaps our audience are looking into that. All right, so the last question that I have here so far is, “Do you use rem or pixels to set font sizes?”

Colleen: Oh, always rems or ems, because you never wanna use the font size–you never wanna set the font size in an absolute measurement. You wanna set it in a relative one, so rems and ems.

And even if you do your margin and padding that way, it makes things easier, too.

Ahmed: It’s an absolute pleasure seeing more questions coming up, the enthusiasm from our audience.

So, there’s a follow-up to this question. “If you’re using rem,” which you are, “do you calculate the rem against your browser font size pixel setting for color contrast, or ratios for font differ on that?” Any thoughts? Any thoughts on that?

Colleen: Wait. Say that again.

Ahmed: So, I’m going to repeat that. So, “If rem is used, do you calculate the rem against your browser font size pixel setting for color contrast?”

Colleen: I typically think of a rem as, like, about 16 pixels. I mean, everybody is gonna have their browser sizes set differently, but I typically–like, if I’m look–if I’m working on a site that’s already– that needs to be remediated, right?

It’s already been built, it’s already got everything coded in pixels, the font size in pixels, I typically divide that measurement. Well, I have to think about how I would do that, but I base one rem typically on 16 pixels.

So, if something is at 2 rem, I estimate that to be at, like, 32 pixels. So, if I see something–like a heading that’s 32 pixels, I would say, “Okay, that’s 2 rem.” But there is–and I can answer this later on and provide the link, but there is a rem calculator, rem converter that you can use that will help you do that, convert from pixels to rems.

Ahmed: All right.

Thank you for that information. So, so far the last question says that “Colleen, you mentioned not using color alone to convey information. In the case of that error state on the email input field, does contrast make that sufficient, or does it need an error icon as well?” Talking about contrast.

Colleen: Yeah, so you need to have–you need to make sure that the field that’s an error is gonna contrast enough with the default field, so that could be by color that meets that contrast, or it could be– like, in my example I used a thicker border. It doesn’t have to be red.

It could just be a thicker one, and it doesn’t have to have the icon. But if you use an icon and you don’t use any other styling, like you don’t use any thicker border or anything on that particular field, then the icon would have to meet the contrast requirement.

And if you have something–like, usually you’re gonna see a red triangle, right, with a white exclamation point, for example. Well, the red background of that icon is gonna have to have sufficient contrast with the background, and then the exclamation point is gonna have to have enough contrast between itself and the red background of the triangle, because it’s gotta be able to be seen.

Ahmed: All right, then. Thank you so, so much for the informative presentation and taking–having patience answering all the questions from our audience.

I would like to thank everyone for attending the session with Colleen and myself and–

COGA, Scoring, and Process: What’s coming in WCAG 2.2 and Silver

Sheri Byrne-Haber: COGA, Scoring, and Process: What's coming in WCAG 2.2 and Silver

Accessibility is a continuous process improvement program, and the guidelines for accessibility are continuously evolving as well. WCAG 2.2 is scheduled to be released in November 2020, and WCAG 3.0 is coming in 2022. Laws such as EN 301 549, the European Accessibility Act, the Accessible Canada Act, and the California Consumer Privacy Act also are providing “teeth” that people with disabilities can use in retaliating against inaccessible sites. This talk will briefly overview the existing standards on a global level as well as discuss new standards that are pending at a broader level.

Watch Sheri’s Presentation

Transcript

Sheri Byrne-Haber: I am here today to talk about “The future of accessibility.”

There’s a number of initiatives underway, and if you’re not tracking what the W3C is doing, this will kind of be a summary of what’s coming, plus or minus over the next two years.Some of the things I can talk about in fairly concrete terms. Some of the things are a little bit still up in the air, so I’ll try to point out at each step what stuff is done versus what stuff is still a little bit in flux.

Recently, I transitioned, a role at VMware. I went from being the Accessibility Manager for the program that I started up into being an Accessibility Architect. And so what that means is I get to focus on accessibility innovation and outreach, and that freed up a lot of time for me to work on a number of different accessibility initiatives.

So I belong to the ITIC group, where they’re the people who decide what the VPAT templates look like. I’m on the IAAP Global Leadership Council.I work in two different segments of W3C. One segment is the overall Silver program, which we’ll talk about in more detail in a few minutes, and the other is the Maturity Modeling Subcommittee.So part of Silver will contain a maturity model where you can figure out where the organization is doing well at maturity and where you need a little bit of work. And that program is set to scale from one-person consulting companies, all the way up through companies the size of VMware, and universities and government organizations.So with that introduction, I’m going to go ahead and get started.

So first, I’m going to assume that you guys don’t really know anything about W3C, and I’m going to take us through an accessibility timeline. It’s like how did we get here, where we are today and what isit that we know is pending. I’m going to talk a little bit about general WordPress accessibility advice. I’ll talk about the guidelines in the WCAG that are going to be updated in the next release, and also the new guidelines that are pending.

So first of all, the timeline. So accessibility started before 2006 but it really hit the mapon 2006. I can’t believe it’s been 14 years since the Target lawsuit. So the Target lawsuits was the first lawsuit in the United States, we are a very litigious country, that went all the way to a written ruling. And the written ruling was yes, websites have to be accessible.

And coincidently, that’s also around the time where can 1.0 came on. At the end of 2008, WCAG 2.0 came out.So what happened around the same time as WCAG 2.0? iPhones. So there were no mobile specific guidelines in WCAG 2.0 because mobile and native apps really weren’t a thing when WCAG 2.0 was released.So then we had kind of a long gap where of about ten years.

And then in the summer of 2018, WCAG 2.1 was released,so this was plus or minus two years ago.

And also Section 508 merged with WCAG 2.0, which was the older version. So Section 508 is the public sector purchasing rules in the United States. And in the United States, the definition of the public sector is anybody who’s spending federal money either directly or indirectly. So that includes things like, you know, government organizations, the military, health and human services, the TSCA. But it also includes people who get money from the feds.

So it’s anybody who’s spending Medicaid and Medicare money, which is hospitals. It’s anybody that’s in any type of publicly supported schools, all the way from preschool head start programs, all the way up through public graduate programs in universities. It’s all the states. It’s all the municipalities.It’s the civil service, the post office, the court systems, the police systems.

Everything I just identified there, comes under Section 508. And there rules in 508 that say you can’t buy anything that’s not compliant with WCAG 2.0. Now, unfortunately, for the 16 years that 508 had existed up until that point, because it had its own standard previously that also said things had to be accessible,but it was being measured in a different way, 508 was more known for people not following the rules,then following the rules.

So, in 2019, September 23rd, the EU had its stop sell web soft deadline. And what that meant is any software that was released after this date that was going to be public facing had to be accessible or the EU governments wouldn’t buy it. So again, the United States is very litigious so what happened? People who have disabilities started suing companies who weren’t complying with WCAG 2.0. And we’ve had 4600 lawsuits in the last two years.

Looking at the 2020 trends, it might’ve dropped a little bit, but only because the courthouses were closed for three months for nonemergency cases in most states. And so, the trends now are back up to where they were in 2018 and 2019. 2020 will be a little bit lower overall but only because of COVID, not because filing lawsuits is slowing down for accessibility.

So initially, it was the public that was suing for over accessibility. “I can’t buy my Beyonce goods.”
“I can’t buy my NBA tickets. Now, what’s happening is employees are suing employers for disability discrimination over inaccessibility.”

I couldn’t get this job. I couldn’t get this transfer because you choose to buy inaccessible software.”
So putting the pressure on companies not only to build accessible software but to buy accessible software. Okay, we just passed the stop sell firm deadline for the E.U. in 2020. That was September 23rd, which was, you know, a little over a week and a half ago. You are here, so that’s where we are with respect to this accessibility timeline. In 2021, in Canada, AODA, in particular, A-O-D-A, 2.0 AA, will kick in January 1st. Up until now, Canada in Ontario has only been required to meet WCAG 2.0, and the native app piece of the European Union legislation will be taking effect.

And then, finally, the AG 3.0 Project Silver. And let me explain what that means. So WCAG accessibility guidelines W-C-A-G, it’s a bit of a misnomer. The W.C. is for web content, but the guidelines are for any software. It’s for native app software whether it runs on mobile or on a desktop platform. It’s for HTML-based software that uses the web. It’s also for documentation.

So originally, they decided to drop the W.C. from WCAG and just call it AG: Accessibility Guidelines. For those of you who remember your high school chemistry, AG IS the periodic symbol for silver. And so that’s how this ended up being called Project Silver.

Another thing that’s coming out in 2022 is the European Accessibility Act. That will be the first extension, in terms of adoption by the E.U. member states, where each E.U. member state will had to have locally adopted pending European Accessibility Act, and then the European Accessibility Act will be final in 2025. And that will include websites regardless of whether or not they’re public-facing, so it will be all websites, and it also includes products that have hardware components of them.

So the European Accessibility Act is much broader than EN301549, which had these stop sell deadlines in 2019 and 2020, and then for the web, and then the apps kicking in, in 2021. So this is a “how did we get here” and “where is it that we know that we’re going.”

So what’s going to be part of all of these W3C guidelines? Well, first of all, I want to talk a little bit about WordPress accessibility, and this may have already been discussed in previous conversations, so I won’t take too long to go through it. But they are a bunch of accessible templates out there. There are accessible plugins out there. If you take an accessible template and you put an inaccessible plugin in it, you’ve just broke accessibility. So the entire experience needs to be accessible. It’s not just enough for the template to be accessible.

Things that are commonly used with WordPress that are mostly accessible, but you have to make sure that you implement them in an accessible manner are Microsoft and Google forms, SurveyMonkey, MailChimp, Qualtrics, and Survey Gizmo. Lots, and lots and lots of survey systems, especially survey systems that are designed to go with design tools, those tend to be inaccessible. It’s the standalone survey systems that occasionally are accessible.

But you need to check these things because if you implement, for example, Hotjar, on an inaccessible–sorry. You implement Hotjar on top of an accessible system; Hotjar is inaccessible, that’s going to cause problems for your disabled users.

Okay, so, as I said, make sure that your entire experience is accessible. That includes the surveys, the communications, you want to have an accessibility email address where people can send in comments or complaints. You should have an accessibility statement on your site. You need to make sure that your customer support can handle people who are contacting you using assistive technology. That usually means you want to have two modes of customer support, one that’s voice-based; one that’s not voice-based.

At a minimum, if you’re a teeny, tiny company, email is going to be the most accessible customer support.My deaf daughter will rarely pick up the phone and call people through a relay service because it’s just too slow and aggravating for her.

You want to make sure your social media posts are accessible.That means use captioning and described audio for your– any videos that you’re posting when necessary, but don’t use an accessible WordPress template and then partner it with inaccessible vendors because you can’t call yourself accessible anymore at that point.

So the first thing that’s coming, and it’s already somewhat released, is COGA.And COGA stands for Cognitive Accessibility. So before I get too far into COGA, I’m going to talk about the W3C process overall for doing updates.

First, they charter a task force. And so, there is a COGA Task Force. Every Task Force has a charter. That means it has a very specific focus list of things that the Task Force is allowed to research and published guidelines are.

Then the second thing they do, is they solicit volunteers.W3C is largely a volunteer-driven organization. There are some permanent employees, but I would say probably about three quarters, if not more of every Task Force is volunteers.

You can join at any time, and that is a hint. If you go to the W3C website, you can set yourself up an account and you can request to volunteer for particular a Task Force. Then there is this, what seems to be sometimes endless series of meetings that includes drafting new guidelines, and in the end, there is a vote amongst the Task Force to decide whether or not the guidelines should be presented to the public.

That is a system that was set up because the groups, the Task Force are large enough that you’re not going to be able to make all the people happy all the time. And everybody has their own perspective. I am participating as a person who works for a super large public sector–not–sorry, not public sector. Super large private sector tech company.

Other people who belong to the Task Force work for small consultant companies, large consulting companies, accessibility specific companies. We have people who belong–who work for banks, who work for Google, who work for Amazon. So there’s a lot of different voices on the Task Force and not everybody is going to be happy with the end result all the time, which is why there’s a vote.

Okay, so we repeat number three as many times as necessary to get something that we feel is good enough to release to the public. So right now, if you want to join the Silver Task Force, you have to commit at least six hours a week of time to the meeting that are happening and the outside drafting homework that you may be assigned, after you feel that your skills and your integration is at a good enough level that you can participate in some of that week.

Okay, then what happens is something called the First Public Working Draft is released.Sometimes, additional information is released as well. For example, there is a note that’s currently been published about the challenges of applying the W3C guidelines to SAS,to cloud-based software that don’t have monolithic releases, that are releasing little, teeny tiny updates all the time.So some things are notes but some things are–there’s definitely always a First Public Working Draft.

Then there’s a comment period where people can submit in the public, non-volunteers can submit comments and we loop back to number three. So we take the comments, we have more meetings, we decide whether or not we’re going to update what we published in the First Public Working Draft and then we vote again. Once that is done, then we have the Second Public Working Draft.So this will be an updated version that contains comments integrated that were decided to be included.You know, again, a comment period, obtaining comments from the public. Loop back to number three.So you can see lots, and lots and lots of meetings. And then the standard becomes final.

So this is what we’re working on right now with WCAG 2.2, Silver and COGA. All three of those are in the middle of these processes. And then after the standard becomes final, it’s outside of W3C’s control, but it does get incorporated into laws, lawsuits and settlements. It took four months from the time that WCAG 2.1 was released until we saw it in the first settlement agreement, so that was really, really fast.

Most of the time you’ll see that companies that are entering into settlement agreements get about 18 months, from the time of the settlement agreement was executed until they have to be compliant with what’s in the settlement agreement. But it can be shorter because the settlements are purely within the control of the company that got sued and the people who sued them, the plaintiffs and the defendants, effectively.

Okay, so looking at the Cognitive Accessibility Task Force, it’s a joint Task Force between the AccessiblePlatform Architectures Group and the Silver Group, the Web content accessibility guidelines.We call that A.G. WG. So they are producing a whole ton of documentation, and guidance documents, and research and updating all W3Cmaterial that addresses issues that are in the cognitive space.

So what’s in the cognitive space? The cognitive space includes things like neurodiversity. So that would be attention deficit disorder, dyslexia, dyscalculia, anything related to autism or Asperger’s. It also includes traumatic brain injury. It includes memory loss. It includes dementia.

Basically anything that your brain, where it might not be functioning at 100% either for temporary reasons such as situational depression, for example, or chemotherapy side effects, all the way to permanent disabilities. And the permanent disabilities can either be acquired such as traumatic brain injury. That’s always an acquired disability or they can be congenital like Down Syndrome.

And I have put in a link. Everything that you see that’s blue and underlined in this deck is a link. And so, that is the link to the current COGA publication, and the current COGA publication, in turn, is being used to inform new guidelines that are going into WCAG 2.2 and Silver WCAG 3.0. Okay, sorry, I got a little bit ahead of myself. So this is what disabilities does focus–does COGA focus on. Aphasia. I always forget that one. So that’s my own cognitive issue. So these are the lists of all the disability that COGA covers.

What types of guidelines is COGA going to bring us. First of all, there are a series of plain language requirements. You want to make sure that you’re using language in your website. So content, for all intents and purposes, that is at the level of your reader. And when it’s beyond the level of your reader, you want to make sure that you’re linking to definitions that your reader can find easily. So, for example, the word dyscalculia is not super well known to most people with 6th to 8th grade reading levels, so you would want to have a link whenever you use that word in your website, if it was included in your website, to a definition where somebody could read, “Oh, this is what dyscalculia means.” The second type of groups of guidelines that COGA will bring us, is clear purpose requirements, making it obvious to the users what it is that they’re supposed to be doing and what steps they’re going to be taking. You know, basically telling the user what the happy path is.

And the third set of requirements that are coming are the need to be able to operate without having good memory. So leaving more breadcrumbs for your users to figure out how they got to where they are, and more importantly, how to get back to where they are when they don’t–when they forget things quickly, where they don’t have good working short-term memory.

So those are the three different categories that are–guidelines that are currently pending, and I’ll get into more specifics about what we know about what WCAG 2.2 and 3.0 that include instances of these types of guidelines.

Okay. So now, moving out of COGA and onto WCAG 2.2.So WCAG 2.2 is currently–has its Second Public Working Draft out. It is still a work in progress. What we’re about to talk about is still subject to change,but it’s getting towards final. Originally, it is planned to be final in November. That got delayed a little bit because of COVID, and we’re looking at WCAG 2.2 becoming final in approximately June of next year. So that’s June of 2021.

And if you add the standard 18 months to when–that 18 months is not a W3C you have to implement this in 18 months guideline. That 18 months is a somewhat safe buffer range that we have seen in the United States, where once a standard becomes final, if you implant that standard within the next 18 months, chances are you won’t get sued. So that means 18 months from June of 2021, takes us either to the end of 2022 or the beginning of 2023, that you would have to have these nine new standards implemented by, in order to be relatively safe from lawsuits.

I’m kind of using some fudging words here, because of course, you can sued for WCAG 2.2 noncompliance, the day after comes out. But that’s not really reasonable, but reasonable doesn’t always factor into United States litigation. So 18 months is typically the amount of time before you start to see the new standards reflected in laws and lawsuits.

Okay, so there are nine guidelines, new guidelines that pertain to WCAG 2.2. Eight of them are A and A.A.Some I’m not going to cover the AAA guideline. I have a link to it in the references section. But typically, people don’t implement AAA guidelines. They’re fairly restrictive, especially with respect to colors, the AAA guidelines in general. And in the U.S., in particular, A.A. is the standard that everybody seems to have adopted. So the focus here will be on the eight new guidelines that are either A or A.A. And you can see I’ve mentioned in the link in each of these slides, whether it’s an A or double A requirement.

So the first new guideline is Focus Appearance. So this guideline is related to two other guidelines pertaining to keyboard focus indicators. One of the guidelines is 2.4.7, which is that you have to have a focus that’s visible. And one of the changes in WCAG 2.2 is that guideline in particular, is moving from A.A. to A.

So A is the dealbreaker. If you don’t do this, you’re making it not work for a whole ton of people with disabilities. A.A. is you’re making it hard. So that’s kind of the distinction between the two. So the other guideline that this is referencing is 1.4.11 which is Non-text Contrast. So all three of these combined relate to how you treat keyboard focus indicators for actionable objects. Okay. So the summation of all three of the guidelines put together, so not just the new one, but all three of them, you have to have a keyboard focus indicator. Nonnegotiable. That comes from 2.4.7, which as I mentioned, is moving from A.A. to A, in terms of requirement level.

Keyboard focus indicator has to have a contrast of 3.0 to 1.0at all times. That comes from 1.4.11, which came out with WCAG 2.1. And then finally, the focus indication area has to be thick enough to be able to see. So, the first requirement in 2.0 was you have to have an indicator.

The second requirement in 2.1 was, “Oh yeah, you have to be able to see the indicator.You have to have enough contrast.” The addition that they’ve made in WCAG 2.2 is you really have to see the indicator. So it added an aspect of thickness. So it either has to be at least 8 CSS pixels on the short side or it has to be 1 CSS pixel all the way around. You can’t make it any smaller than that. You really don’t want to make it dashed. Okay, so people have gotten creative in trying to be compliant without–compliant with the letter of the guideline without being compliant with the spirit of the guideline. Spirit of the guideline was people like me with glaucoma who are keyboard-only users, need to be able to see the darn keyboard focus indicator.

Because people were trying to skirt that by making keyboard focus indicators, you know, light blue or yellow, so that, you know, the designers just didn’t want it to impact what the website looked like. So then we added the darkness requirements, the contrast requirements. Then designers tried to use fancy patterns to again make it not so visible, and so now the guidelines have specific rules about thickness. So that is the first new guideline that’s coming with2.2, and also the related change to 2.1, making the keyboard focus indicator requirement moving from A.A. to A.

Okay. And then finally, the keyboard focus indicator can never be blocked by content. You’ll see that that is a trend that started in WCAG 2.1, with guidelines pertaining to popovers and it’s been extended into over the keyboard focus indicator, that you can’t block a keyboard focus indicator with a popover or with a dialog box or something, that’s just going to make it really hard for the keyboard user to be able to see it.

The next guideline that’s being added is what are calledFix Reference Points. So–and you’ll see that most of these guidelines’ additions come from pain points So the pain point for 2.4.11, which is the one that we just talked about, is keyboard-only users who use magnification. The pain point for Fixed Reference Points is for people with any degree of vision loss who use magnification or users with dyslexia who are using special CSS sheets to reformat the text, to put better spacing in or to turn off justification. And what happens is when you magnify it or when you add additional spacing, all your page numbering goes to heck. So if you are in a classroom setting or in a legal reference setting, somebody says, “I’m on page 37.”

For you, it might be page 53 because you’ve added that spacing or you’ve added that magnification and the page numbers have totally gotten out of sync. So you need to make sure that when you’re on your table of contents, and it says this section starts on page 37, if it’s really on page 53 on your–what you’re looking at, that when you click on that link, it takes you to page 53 and it doesn’t take you to page 37absolutes, because that’s not the information that you’re looking for. So there have to be fixed reference points so that people can get to what it is that they need to see in their environment that matches what somebody else is looking at it, even if the page numbers are different.

In the next item that’s being added is for drag and drop. All drag and drop operations need to be accessible from the keyboard. To me, that’s kind of a “duh” requirement. I felt that it was a miss in the previous visions of WCAG.Inaccessible drag and drop had to be flagged as a keyboard violation, and somewhat of a pillar violation, in that something wasn’t operable by people using assistive technology.If you’re looking for how to implement accessible drag and drop, Salesforce Lightning which is an open source design system, has good accessible drag-and-drop patterns, and I’ve linked to an article that explains how to implement them.

The Clarity Design System which is at clarity.design, it’s one of the–it’s the design system that comes from VMware that I work go on, will be having accessible drag and drop in a soon-to-be-released vision.It will probably come out before WCAG 2.2 comes out.And each one of these items, I think I may have mentioned it, but just in case I didn’t, these are all links to the currently proposed text. You can see that there will be comments in that saying open issues that need to be addressed. I’ve just tried to translate the spirit of the requirement into English on these pages.

So 3.2.7 to me, like 2.5.7, was something that was kind of a miss. It could be implied that there was a keyboard operation violation, which that requirement didn’t actually work for mobile.So, for example, you could have a hidden control, for example, a swipe left to delete in a native app, and there was really no guideline in WCAG 2.1that made that illegal. And you have to remember not everybody can touch their device.

Not everybody can use a keyboard, so you need to have a way from the keyboard to trigger hidden operations which then, Sip and Puff devices and switch devices use keyboard simulation to order–in order to access those, even though the user still is never touching a keyboard. So swipe left to delete in a native app is where hidden controls are most common. Advancing controls for a manual slide carousels. So if you have a carousel that doesn’t automatically move, and it’s got arrows that only come up when you mouse over to them, those controls are considered hidden.

So you need to have a keyboard controls or they have to be visible without requiring cover. So another way you could do it is making them persistently visible. How do you make them persistently visible? You could make that a feature that’s associated with the login, so that would come under personalization where you could have somebody set up things in their accounts saying, “I want closed close captioning turned on all the time.I want all hidden controls visible all the time. I always want to use a dyslexia friendly font.”Accessibility features that you could associate with the login, so that when the user logs in, all those features get set automatically. Okay, Pointer Target Spacing is another add-on from WCAG 2.1.2.1 had a guideline for what they called inadvertent activation, but it didn’t have a spacing. So that gave us a guideline of minimum size of 44 CSS pixel squared, but he didn’t talk about spacing.

Okay. So this addresses the spacing requirement.So it expands on the 2.1 requirement pertaining to the size.And also in–this was one thing that really frustrated me in 2.1. I lost the vote on this one. Originally, it was proposed to be a A.A. requirement and the minimum touch target size became a AAA requirement, which meant really nobody was obligated to implement it. This Pointer Target Spacing guideline is a A.A. requirement, so people will be obligated, for the most part, to implement that.

Hey, then there are three new guidelines in WCAG 2.2 that pertain to Silver. One is Finding Help, one is Accessible Authentication,and one is Redundant Entry. And you can see all three of these are A-level requirements, because you’re blocking an entire group of people with cognitive disabilities from being able to interact with your site or your software, if you’re not doing these three things.

So Findable Help, every single page has to have help available somewhere, okay, either how to get in touch with a human; how to contact the human, so a phone number or an email address; a self-help option, so context sensitive help for that page; or a fully automated contact mechanism. So you need to have one of those minimum on every single page. You know, probably in the footer. Although, WCAG is not prescriptive about how you do, how you implement the guidelines, just that the guidelines have to be implemented.

Accessible Authentication. So authentication meaning logging in,if it requires on all cognitive function test, you also have to have another method that doesn’t rely on a cognitive function test. Memory, which includes remembering a password, is considered a cognitive function test. So that means that to be compliant with WCAG 2.2,at the A-level, you’re going to have to have at least two methods of being able to log in.

The standard username and password and some type of secondary login, such as biometrics or sending a link or a code to a registered phone, so that somebody who has memory issues and can’t remember their passwords, still has a secure way of getting in.Okay.

WCAG, the next one, Redundant Entry. This is one of my pet peeves. I’m so glad that they implemented this feature, because to me, this happens all the time. So you try to log in on something that you haven’t seen in a year, the login fails, you press “forget password” to reset your password and it asks you to type your login again. It had the login. You already put it in when you tried to log in. The website had the information, but it’s making you type it in twice. It takes a long time for people with disabilities to enter in things, especially when they’re using assistive technology. So making people type things twice is not satisfying the spirit of being accessible. Failing to implement auto-population is not following the spirit of being accessible. So do two things are going to be part of WCAG 2.2 under Redundant Entry which is part of COGA.

And then finally, where are we on 2.2? The Second Public Working Draft is out.It’s anticipated to be final by next summer. And as I mentioned, in the U.S., that means you’re going to have about 18 months before you get in trouble in terms of litigation.

I’ll quickly go through Silver. As I’ve mentioned, Silver is the next evolution in the W3C guidelines. We took–and the Silver name came from the idea that it was just going to be called Accessibility Guidelines, but we took a vote and we decided to leave the WCin because it’s what people are familiar with. So Silver is WCAG 3.0. It’s more of a focus on functional need than is on guidelines.

So, for example, remember those three different guidelines that pertained to keyboard focus indicators? Those are all going to be grouped together. I’m responsible for something that’s being called content structure. Content structure will be the three different heading guidelines that currently exist grouped together. In terms of scoring, there will be a scoring function of how compliant you are, which is going to be more of a focus on being substantively conformant. Right now, as the VPATs and WCAG stands, if you have 5000 pieces of alt text and you have one little, teeny piece away in a corner that’s not working correctly, you’re considered to be noncompliant.

Here, the focus is on the absolutes of compliance versus noncompliance.
It’s more focused on can a user with a disability use this software? And there’s also going to be completely brand-new areas of guidance, one will be on V.R. and X.R., so virtual reality and extended reality.

And another area that’s being added is maturity modeling. This isn’t intended to be an exhaustive list, just to give you an idea of what types of things are coming in Silver and where it’s going to be different than the visions ofWCAG that we’ve had since 2006.
Okay. So resource summary at the end. These are all of the guidelines that are coming with 2.2.And I am happy at this point to take any questions that Amber, I believe, is going to pass those to me from the YouTube feed.

Amber: Yeah.

Sheri: And I’m going to drink some coffee.

Amber: Well, thank you so much. That was very informative. There are quite a few questions here about how you got started and volunteering. Volunteering. Can you share a little bit about your background and what got you interested in this?

Sheri: Sure. So I’m what I like to call really overeducated.I started off, let’s just say more than three decades ago with a degree in computer science. I went to CAL in the early ’80s. Then ten years after that, I decided that I wanted to go to law school. My third year of law school, we discovered that by middle daughter was losing her hearing.

She had a progressive hearing loss. So I had intended to go the anesthesiology of law, which is intellectual property, especially because I live in Silicon Valley. I was doing things like trademarks and copyrights and patents. I ended up going into advocacy for the deaf instead.And so I did that for eight years. And then, basically put myself out of business because I was suing insurance companies for failing to provide equal treatment for deaf patients.

And I won a class action lawsuit against Blue Cross, and everybody folded. And I was doing it through a nonprofit anyway, so it wasn’t exactly like I was making money hand over fist with these lawsuits. So I needed to pivot again, and that was just when accessibility was really starting to take off. That was about eight years ago, and I’ve been in digital accessibility ever since. So I think it makes, it’s a really nice intersection of what I love to do the most.

It’s tech, because if some developer says, “Oh, that’s going to be hard.” My response is always, “Would you like me to code that for you?” I mean I can actually tell when they’re trying to avoid doing something just because they don’t want to do it. You know, I use my legal degree to interpret the laws.And then, I also went back and got an MBA, so I also see the business perspective of accessibility and I could write really strong business cases for it.

So people automatically assume that because I’ve used a wheelchair since I was five, that that’s why I got into accessibility. But I actually got into accessibility because of my deaf daughter. To me, my wheelchair is just a mechanism of getting around. I don’t particularly consider that a disability. And then what was the second question? The second question was about volunteering?

Amber: Yes. So there’s a couple of people who have asked what kind of tasks do people participate in, in W3C Task Forces? What are the tasks that they end up doing? What is the volunteer experience like?

Sheri: Sure. So like I said, lots, and lots, and lots and lots of meetings, and a little bit of take away and go and do some research on your own. So, for example on the Maturity Modeling Subcommittee which I co-lead with David Fazio, right now what we’re doing is we have built a framework of dimensions and attributes, and everybody on the team has one dimension, and they are defining all the different attributes. So we are proposing, and this hasn’t even been reviewed. I have to be a little bit vague here because it hasn’t been reviewed by the Silver subcommittee yet.

That’s happening in about a month. But everybody has been assigned one of those things. So we go in, we put in straw man information about what we think the attribute should look like for that dimension. So let me give you an example. For a dimension of software development lifecycle, it might include an attribute of you have a software Q.A. plan that references accessibility and assistive technology. And then we get together and we meet as a group and we talk about each other’s work, and we wordsmith it so that in the end, it all looks like it was written with one cohesive approach by one individual, instead of actually being worked on by six or eight different individuals, because that’s really important to the end product. So meetings to discuss what’s going on.

We all work in Google Docs together and put in comments about each other’s work. We’ve refined the comments, then the Maturity Model Subcommitteetakes that and reviews it with the Silver Committee. Once it’s approved by the Silver Committee, then we take it up to the–what they call the A.G. W.G., the Accessibility Guidelines Working Group. Once it gets approved by them, then it gets published for people, for the general community to comment on. And at any time, somebody who is identified as a volunteer can look at any of the draft material in GitHub. We use Git for versioning all of our documents and that’s where we release from. So hopefully that answers your question.

Amber: What’s the time commitment?

Sheri: And like I said the first–

Amber: I’m sorry.

Sheri: Minimum time commitment is–yeah, that’s all right. No, minimum time commitment is probably practically about six hours a week.

Amber: Okay.

Sheri: It’s not for people who just want to pop in now and then and see what’s going on. It is definitely a significant amount of time.

Amber: Good to know. What’s the best way–someone asked what’s the best way to build yourself into WCAG expert?

Sheri: What’s the best way? So, I would say for starters, IAAP, the International Association of Accessibility Professionals has two certification programs right now and they’re about to add several more. So there is the CPACC, which is Certified Professional Accessibility Core Competencies. That’s for lack of a better phrase. The Accessibility Manager certification. Then there’s the WAS, which is the Web Accessibility Specialist certification. That requires significant coding chops. And then the third certification that’s coming is Strategic Leader in Accessibility.

So that’s people who are looking at implementing accessibility at the organizational level. How do you set up training programs? How do you set up support programs? How do you may sure your documentation is accessible? So certifying through those groups definitely demonstrates that you have a particular level of accessibility skills.

I write a lot. I’ve been writing twice a week now for two years. I’m up to, I think, 154 articles when I counted last week, on various different approaches to accessibility. So the last article that I wrote was about making sure that people use context when they’re identified what their alt text should be. So that’s a way that you can demonstrate your accessibility skills. I think building your accessibility brand on social media is really important. I wrote an article on that. You definitely need to have an accessibility elevator pitch so you can explain in 45 seconds what is it that you as an individual bring to an accessibility program.

So those things are all. And then, obviously doing presentations like this, and preferably recorded presentations so that people can get them on demand. That–so I submitted seven presentations to seven different conferences a couple months ago. Usually about 50% of my presentations get accepted. For some reason, six out of seven got accepted, so I’ve been really busy giving talks this month, but that’s another aspect to building your accessibility brand, of people being able to watch recorded presentations.

Amber: Well, we really appreciate you coming and sharing all the information with us. Those are all the questions we have time for today. But I’m sure that if you have additional questions, you can reach out to Sheri via the information that she has shared on the slides or via her Medium blog. Don’t forget to attend the next talk.

Sheri: Just–

Amber: Oh, yeah.

Sheri: Oh, sorry. I was just going to say drop me a–on LinkedIn, that’s a social media that I pay most attention to or put a note in one of my articles on Medium.

Amber: Okay. Well, thank you so much, Sheri.

Gutenberg Accessibility: A Screen Reader Users Perspective

Raghavendra Satish: Gutenberg Accessibility: A Screen Reader User's Perspective

I have been building websites using WordPress for about 12yrs & during this time I had the experience of working with WooCommerce, BuddyPress, bbPress & a great number of plug-ins & themes… I have seen WordPress evolving in incorporating accessibility day by day…when Gutenberg came out there was a cry from the accessibility & disability community & I was curious initially… I waited for Gutenberg to merge into core & then slowly followed its progress during all this time, as a person with visual disability & accessibility specialist I took a critical look at the accessibility & usability of Gutenberg & I will be sharing my findings, learnings & my opinions in this talk.

These are some of the things I will be covering in my talk

  • Why Gutenberg needs a learning curve even for power screen reader users
  • Demo of using Gutenberg with a screen reader
  • Usability problems while working with a screen reader
  • Accessibility problems

Watch Raghavendra’s Presentation

Transcript

Roberto Remedios: Hello everyone, uh, welcome to the WordPress Accessibility Day 2020. My name is Roberto Remedios. I live in San Jose, Costa Rica, um

Raghavendra: Hello everyone.

Roberto: I’m user experience and user interface designer. I’m also an advocate to accessibility. I have been working on accessibility a couple of years already I fund with a couple of friends a local meetup group here and Facebook group, mostly material in Spanish. My native language is Spanish, so if you know the accent sorry um. Well the next talk that we’re gonna listen is the Gutenberg Accessibility, A Screen Reader User Perspective.

The speaker will be Raghavendra Satish. Raghavendra is a Digital Accessibility evangelist. He works at the Deque Systems as a Senior Accessibility Consultant. He’s always breaking the web and uh mobile accessibility challenges.

He’s author of an Accessibility Blog, and is galvanizing the adoption of accessibility by inspiring inspiring the local tech community with meetups and mentorships. He propelled his thoughts by founding HelloA11Y, a community accessibility, accessibility professionals.

When he’s away from his computer we can find Raghava at the local cafes and restaurants sampling cuisine, attending local meetups, these audiobooks or writing on his personal blog. He also helped the small business um, help a small business and individuals, digital training, marketing and SEO consulting. He has been building websites and doing SEO consulting for more than 14 years. So please, let’s welcome Raghavendra. And thank you.

Raghavendra: Thank you Roberto. uh am I audible now?

Roberto: You have your presentation right now and your presentation is full screen, so you’re ready to go.

Raghavendra: Okay, hi everyone. Welcome to WordPress Accessibility Day 2020. I’m excited to be here to sharing my views on Gutenberg Accessibility. Uh I’m a person with visual disability. My name is Raghavendra and I’ll be sharing some of my insights as a person with disability who is using Gutenberg.

I’ve been building websites on WordPress for about 12 years now. And just because it’s easy to build websites on WordPress. It’s it, like I fell in love with WordPress. I worked with Joomla, I worked with Drupal and other CMS content management systems, but I fell in love with WordPress about 12 years back when I initially started uh with web.

And as Roberto introduced, I work with Deque Systems as a Senior Accessibility Consultant. I also run a meetup community called HelloA11y, HelloA11y.com and we do a lot of meetups and small conferences here in India for to nurture accessibility and promote accessibility within the tech community.

So today’s agenda is going to be about Gutenberg Accessibility. We all know that Gutenberg is a rich editor that is introduced into WordPress and I, I’ll be taking you through some of the accessibility challenges, usability challenges, uh like how people with screen readers and people with disabilities perceive content and some of my insights on how I work with Gutenberg and basically how I work with content more for my blogs that I run.

I run about five to six blogs actively and earlier uh about few years back I used to own and run more than about 20, 25 web blogs. Basically I’m into affiliate marketing, search optimization also, so that’s where all my experience working with content editing and content management comes.

So today’s agenda is going to be why Gutenberg needs a learning curve. So even as a power screen reader user, when I mean a power screen reader user, I’m, I’ve been using screen reader for about 15 years now since 2005, 2006. I, I’m not born blind. I became blind at a later stage in my life due to Retinitis Pigmentosa  a genetical disorder. So I’ve been losing my eyesight for a while and I’ve been a low vision user.

I used a screen magnification software like Magic and then slowly I transitioned uh in using screen readers full time like JAWS and NVDA, uh which I regularly use now as part of my job and day-to-day activities on the computer.

So even as a person with a power screen reader user, like I’ve been using for 15 years the screen reader, even for me when I initially uh started with Gutenberg, it needs a lot of learning curve, because there are no tutorials on how to use Gutenberg with a screen reader.

So I’ll be demoing some of these challenges like as soon as as soon as you get on to the editing part of the post, what happens really and how, what are the challenges that I faced.

So, so how to work with Gutenberg using a screen reader. We will be walking through a demo and the usability challenges and and then the some of the accessibility challenges that I have seen in Gutenberg.

So what is Gutenberg? So Gutenberg is the introduced in WordPress 5.0. It is a rich uh editor and in my perspective, what I have seen is that you basically being used to create a rich content. When I say rich content, it’s not just headings, lists, paragraphs, great design also.

The topography, all the layouts and and it has evolved. Like it came into existence in WordPress 5.0 and right now the version WordPress 5.5 is running, and the core uh Gutenberg plugin gets updated every two, once in two weeks. And with every major update the core is merged into WordPress core.

So what I have seen is there’s a collection of blogs, when initially the collection of, when everyone started talking about Gutenberg and the saying, it’s a block based design. As a person with disability I did not understand what is a block. So I, I when I was reading articles on other blogs and websites they said heading block, paragraph block or you know all the list block. I did not understand what is a block.

Theoretically it was very difficult to understand what was a block.

Then when I started working with Gutenberg, then I got a clear picture that every section of the content area is designated a block, is called a block. Like you you create a heading, it is a block on its own. It, you have a paragraph, it’s a block on its own. And Gutenberg gives a lot of control over the content and the layout of these blocks.

So you can customize all the font size, colour uh and styling of all the fonts and all. So these are some of the options that I have seen and uh from the technical standpoint like for a person with visual disability, it was not very useful for me to go and edit, because I’m not sure what exactly, what the color is going to be on the front end. And also I normally generally use the basic themes settings that are there.

So we all know that the Gutenberg accessibility story, it’s merged with 5.0. There was a lot of push back from the accessibility community and a lot of accessibility professionals and the wider community itself said that it should not be merged with 5.0, because it’s not mature.

And what, there were a lot of articles on the web where it was told that it was written, like the design aspect, like accessibility is not considered from the start. But what I see is for, with a two week, every two weeks development cycle and being pushed every two weeks, it’s very difficult to keep up with both accessibility design, development, and fixes of accessibility bugs and all that.

So there were a lot of challenges because there were a lot of moving parts, but uh after two years, after two years and what happened in 2019 is a WP Campus called for an independent audit by an agency, and the agency provided it results and we had like close to 300 accessibility bugs that were found, that that were found on the Gutenberg.

And the Gutenberg was audited, not on the plug-in, but was in the core that was merged with WordPress. So what did the WP Campus audit show? It showed like considerable amount of accessibility bugs.

There were more than 300 accessibility bugs.

Like couple of more of these bugs were related to authoring tool where you upload a video and there were no there is no way to provide caption.

So some of these are authoring tool challenges and some of them are pure accessibility bugs.

And after the WP Campus audit there are a lot of bug fixes on the way and the accessibility team started, the development team started fixing a lot of these accessibility bugs. And we have seen, I’ve personally seen some of these accessibility fix being uh, in place, during the subsequent Gutenberg plugin releases and in the core merge also.

And if you go to GitHub, I, I provided the link here. There are a couple of significant more accessibility bugs still that are open. And some of these bugs are, you know, like pure technical related maybe as a person with disability you might not be uh finding it very difficult to navigate, but they are technically an accessibility bug, that’s why they are called upon.

So what, how Gutenberg is uh, very difficult, like, as I said in the previously, it’s very difficult for screen reader users.

So what I did is as a person with visual disability, I work with a lot of other people with disability uh in the local community, so me and couple of uh my friends who are all screen reader users and some of these people are accessibility specialists, so what what I did, I gave them the Guten, I installed the Gutenberg plug-in and we, I I studied them how they’re going to use.

And some of the power screen reader users found it very difficult. They they did not understand, but like, the there are a lot of elements like, as soon as you open the post screen add new post screen, there are lot of elements and you click on add block and your focus moves to a search field.

So there they are like caught off guard completely. So we are going to discuss some of these during the demo. Like I’ll be running a demo of how I use Gutenberg and how you know, it is very different from our Classic Editor. What happens in our Classic Editor is like you have the title screen and there you have the content area where you type in the content.

Or generally what happens is as a person with disability, we generally use uh Microsoft Word and we type in our content and then we put it in the Classic Editor and we use screen uh shortcut keys in the Classic Editor to give a heading paragraph and block code and other markup to these, to the content that we created. So it was pretty easy for us and some of them you know said

that, we know HTML, so what they do is they use the Classic Editor text, text mode instead of visual editor and they mark up the content directly in Microsoft Word and they just put it in the editor and just publish the content. And that’s where you know as a screen reader user it needs a lot of learning curve here. And it, it’s a lot of visual aspect Gutenberg, as I said, earlier uh.

It’s, it’s there to create great visual design, but as a person with disability and who has been writing content for more than 12,12 to 14 years uh, I did not find it, like for me it’s just headings, paragraph, it’s more of content than visual aspect of the [unintelligible].

So one, one of the challenges that we also faced is with regard to the block definitions. So some of the blocks, like if you go out onto the Gutenberg search area and go category by category, there are some of these blocks like markdown block or uh some of the code or you know it’s a separator or so there are some of these blocks that we we did not understand, what it, what exactly that block does.

Okay so some of these blocks for which we tried to find definition and we were not able to find. So we felt that you know, if there is a help what exactly this block does? Like how it is going to show up in the front end? It would have been very helpful for us to use some of these blocks.

So I’m going to show a demo right now. So Robert, Robert, I’ll be sharing my uh screen reader sound, on over the zoom so that people will be able to hear what I’m navigating.

Roberto: Yeah the the thing is um let me talk with the administrator, because I think what you are sharing is your computer sound.

Raghavendra: Yes

Roberto: Maybe can you place uh your mic close to the screen reader?

Raghavendra: Okay, you’re able to hear my screen reader?

Roberto: Yes, we hear your screen reader.

Raghavendra: So I’m here on a screen uh, this is a post, I created a demo post here. So first to get a feel of this particular page this screen, I use headings. So what I’m going to do is I’m going to press control home to go to the top of the page and then

Screen Reader: [unintelligible]…. slower slower slower slower slower.

Raghavendra: I’m going to press H.

Screen Reader: Edit post heading level 1, script setting level 2, status and visibility heading level 2 button expanded, permalink heading level 2 button expanded, view post heading level 3, categories heading level two button expanded, tags heading level two button collapsed, feature image heading level two button collapsed, excerpt heading level two button collapsed, discussion heading level two button collapsed, link suggestions heading level two clickable, wrapping to top, edit post heading level one.

Raghavendra: So, I know I’m at the edit post then, I’m going to press tab here.

Screen Reader: Tab, document tools, toolbars only, add block toggle button.

Raghavendra: So that’s a tool bar, so as soon as I hear it’s a tool bar, as a person with screen reader user, I know that I had to use arrow keys to navigate. Let’s see what happens.

Screen Reader: Tool, undo button, redo button available, content structure button collapse,
block navigation button, add block toggle button, tools button collapsed, to activate press spacebar, undo button

Raghavendra: So, let’s add a block.

Screen Reader: Add block toggle button enter, toggle button, press search for a block, block library region, search for a block edit, search for a block, type and text, 110 results found.

Raghavendra: Okay

Screen Reader: Tab, tab, blocks tab, selected use clause key plus plus m to move the controled element, one of three.

Raghavendra: So if you see here, there are three tabs: one is blocks.

Screen Reader: Patterns tab selected styles …

Raghavendra: This, these are block patterns.

Screen Reader: Reusable tabs selected used

Raghavendra: And reusable blocks. So one of the one of the things that confused me is about this block patterns and the block templates. So uh after reading a lot of articles and tutorials, I came to understand that these are some of the pre, pre-designed templates that a person can use. Just select one of these block pattern and you can, the visual aspect of the pattern will appear in the front end and just you need to update the content.

So it was very difficult to understand when the blocks came, I, it took me a while to understand and then block patterns is something again it’s confusing for me. So let’s go to block.

Screen Reader: Blocks tab selected, use tab, blocks tab panel, text list box, markdown, one of 11

Raghavendra: Okay.

Screen Reader: Paragraph, heading, list, quote, five of 11, code, six of 11.

Raghavendra: Okay, let’s

Screen Reader: Five of 11, enter, editor content region, add block, block tools, add title demo, content right heading, paragraph, block,write heading, paragraph block, empty block, semicolon, start writing or type forward slash that chooses a block, block colon, quote block, add block, block colon quote, right quote, edit contains text, type and text, percent, right quote edit, contains text, empty block, semicolon, start writing block colon quotes, right quote, edit contains text, type and text, write citation, edit write quote, edit contains text, type and text, home selected, out of table, right citation, edit, contain write quote, edit, contains text, type and text

Raghavendra: Okay

Screen Reader: t-h-i-s space i-s space a space e-x-a-m-p-l-e, home selected, this is a example quote

Raghavendra: Okay so I, I wrote a quote. So what if I want to insert a list block inside this particular quote?

I don’t know, I still did not able to figure out, I was not able to figure out how to embed one block inside and like generally what I do is like I write the HTML markup. It’s easy for me, but if I have to put a list block inside this code block code, I don’t know how to do it. Let’s see if there is an option.

Screen Reader: Shift tab block colon quote, shift tab, add block, block tools, block tools toolbar read only, change block type or style button menu, press space

Raghavendra: So I am here on the block tools. So there are some accessibility challenges with this particular version of Gutenberg, on the core right now.

Screen Reader: Space

Raghavendra: So I press space

Screen Reader: Space, change block type, or style button menu, press space to activate the menu then navigate with arrow keys, add title edit, contains text, type and text

Raghavendra: I press space, I’m not sure…

Screen Reader: demo content, demo content, add title

Roberto: We’re on the title right now.

Raghavendra: Yeah the focus has completely shifted. I, I was trying to expand the more tools.

Screen Reader: Add title, tab right, heading, edit, contains text, type and text, space

Raghavendra: Space, okay.

Screen Reader: Shift tab, add block, block tools, block tools toolbar, read only, change block type or style button menu, press space to activate the menu then navigate with arrow keys.

Raghavendra: I’m going to press space bar here.

Screen Reader: Space, expanded, menu, change block type or style menu to move through items press up or down arrow

Raghavendra: It says expanded, okay. I’m pressing down arrow here, I’m not sure if something is happening over there.

Roberto: Yes, you have several options about paragraph, group, full quote, but they are not accessible at this point.

Raghavendra: Yeah, yes so none of them are read and one of the

Screen Reader: Escape, leaving menus, editor content region, add block

Raghavendra: And it’s very difficult, one of the challenge that I’m faced, we faces, is like creating content directly in Gutenberg now.

If I have to keep adding, like just imagine I have like you know, like 10 paragraphs with 10 headings, if I have to go through the process of…

Screen Reader: Escape, virtual

Raghavendra: Building each block inputting content

Screen Reader: Add title, add title

Raghavendra: One more challenge that I face is

Screen Reader: Demo content, right heading, edit, contains text

Raghavendra: I’m inside this heading, but if I press, if I press down arrow from
here, it moves to the

Screen Reader: Paragraph block, edit, contains text, next paragraph,

Raghavendra: Next block.

Screen Reader: Right heading, edit contains text, type and text, home right heading, hello world, edit

Raghavendra: So if normally generally what happens is like when I use up and down arrow, I expect the content to be read in an edit area, but here what is happening is we move from block block to block.

And if I, if I want to select the content in this particular heading suppose,

generally in an edit area, I do control A, what what happens is it select all the blocks.

Screen Reader: Hello world

six blocks selected, main region, editor content region, add block, block tools, add title, demo contents

Raghavendra: So if you are seeing, have selected all the six blocks that are there in the

Screen Reader: Escape, edit post, single left point, edit post, add type

Raghavendra: So I’m going back to the screen.

Screen Reader: Right heading, edit, contains text, type and text, escape virtual PC, cursor, escape, tab right heading, button, paragraph block, row two, this is a paragraph block, we are trying to demo this with screen reader.

Raghavendra: So this is one of the feature that I really loved about Gutenberg where you shift tab.

Screen Reader: Shift tab, right heading, button heading block, row one level…

Raghavendra: So there are like six blocks I know, row one, row two, it reads out this is a paragraph. So once the blocks are in place the hierarchy is easily understood, but creating content inside a Gutenberg, it it’s becoming very difficult.

Because or generally we create content like me and my friends or any all the people who manage this blog, that we create content in a Word document and we edit, we do spell check in Microsoft Word. We edit everything and we put it on a Google sheets, people take it from there and then we used to put it in the Classic Editor, format it, publish it.

But now taking each piece of content, like copying each paragraph or heading into this one became difficult. So now what we are doing is we are using the Code Editor.

So what I do, is like I press alt ctrl shift and

Screen Reader: Alt control shift, right heading, code editor selected, edit post, single left point add title, edit, add type, tab, type text, read [unintelligible]

Raghavendra: So what we do is we put the content here then we do the HTML markup on our own. We are not using the Block Editor as much as we are supposed to use. So generally what we do, we create a

Screen Reader: Alt control shift, edit post

Raghavendra: We create a block.

Screen Reader: Set of collapse, main menu ,add block toggle button, enter.

Raghavendra: We select the Classic Block

Screen Reader: Main region block library, cell A, sic, tab rest, search button, tab tab blocks tab selected, use [unitelligible] keyplus tab blocks tab panel text list box classic, one of one enter, editor content region, block colon classic block colon classic edit right heading right heading right head paragraph right heading, paragraph empty black semicolon start writing in the right quote edit block colon classic, classic, edit, toolbar blank edit

Raghavendra: So we we take the Classic block, we paste all the content here, then we go back to the Code Editor using alt, control, shift M.

We give the markup, the necessary markup, or we use some of these rich text  tools here.

Screen Reader: Shift tab, block colon classic shift tab, tab, block colon classic, toolbar with a paragraph button menu menu

Raghavendra: So it’s been easy you know

Screen Reader: Bold left bearing control

Raghavendra: Because

Screen Reader: Metallic left parenthe..

Raghavendra: So it is easy to mark a paragraph, to add text bold, hold it

Screen Reader: List left pair numbers list left block with left parenthesis line left left pair of the line center align right left insert slash at least left barricade

Raghavendra: So this has been very easy to do, otherwise it’s becoming very difficult for us to navigate within blocks, select content then put it here.

And some of the other challenges that we face is with the plugins.

Screen Reader: Edit post

Raghavendra: One of the confusion that we ran into is understanding the block structures.

Screen Reader: Block hold block block block hold block hold block insert tool bar and save button, preview blink left paren opens the publish button collapsed, settings toggle button

Raghavendra: So the settings we, we thought these settings is part of something to do with Gutenberg.

We, I did not realize these are post settings. So if I select this post this

Screen Reader: Heading publish button, publish button collapsed, settings toggle button pressed

Raghavendra: So all the

Screen Reader: Insert classic heading level two, scripts setting level edit post heading level wrapping to the bottom, classic heading level two, percent deep [unintelligible] notifications [unintelligible] classic heading level two, scripts setting level to toggle command, table with two header scripts clickable, edit the lab tool under content block nav and certainly output save draft button, preview button collapsed save draft button, enter, saving, preview button collapsed, settings toggle button pressed, space, main scripts setting level two, wrapping to top, edit post heading left percent D block blank notification blank, main reach list end, classic current, rightwards arrow, document button block bread crumb list of two items, document button, block breadcrumb list of two items, open publish panel button collapsed, open document settings button collapsed, blank, table end, combo box bottom pulling before closing a table, blank and open document settings, button collapse, space list, document button, block left parent selected right pair classic heading level two, wrapping the top, edit post edit heading, percent, document button open publish panel button collapsed, enter, main region visibility colon, publish heading, publish colon immediately, at suggestion colon add tags, share post heading level

Raghavendra: So if you see all these settings are hidden inside this button. It’s been very difficult to find some, of these settings for us. In the Classic Editor it has been very easy. Like you have the Classic Editor, you have the categories, you have the sharing settings you have the uh you know your store rank math, the SEO snippet where you can edit everything.

It’s just one screen with uh you know what what you want to show on your screen or not. Like in in the screen settings we we used to customize them in the screen settings show these these these uh custom meta boxes and you know they used to, we used to edit them, but it after the Gutenberg it’s been it was difficult.

Like one particular time we spent half an hour trying to find where the categories heading was, because it was assigned to a default uh uncategorized category, one article. So we were trying to find out where the categories is.

It became very difficult for us to.

Screen Reader: Feature image heading level two share this post heading level two button expanded suggestion colon

Roberto: For regular users we, we got lost at the beginning with all the interface.

Raghavendra: Yeah so it’s, it’s been very difficult for us like that and

Screen Reader: Edit post, add the tool under content struct, block navigation button collapsed, content structure button collapsed

Raghavendra: So content structure, this this one I understood at a very later stage. It gives out the structure of the content like which headings, paragraphs you have, but all this needs lot of learning curve and there are no tutorials like how how to, see there’s a specific way we are taught how to use screen readers on the web.

During one of our uh you know like we, me and our friends we gone through professional training because we are late blind people and they are taught like how to use screen reader on the web. But after a while you get hang of it, how you know, things are laid out on the web.

But all this is so confusing because there’s so many moving

Screen Reader: Block navigation button circle toolbar end, preview button and [unintelligible]

Raghavendra: And this preview also.

Screen Reader: Preview, tab editor top shift tab, preview button collapsed, space

Raghavendra: I expand it.

Screen Reader: Tap, menu to move through items

Raghavendra: Nothing happens there also, even in the preview and I think this preview, I’m not sure if it is broken or if it is like accessible

Screen Reader: Tab

Raghavendra: Because when I press enter

Screen Reader: Enter, title, edit post single left pointing tab, T equals 4206 and shift tab, tab, B equals, tab tab, PC cursor

Raghavendra: I don’t know

Screen Reader: To move through items press up or down arrow.

Raghavendra: This stuck

Screen Reader: To move through, tab tab P equals 4206 and preview equals true.

Raghavendra: It reads some code. I’m not able to preview my posts also properly most of the time.

Screen Reader: Escape, leaving menus, editor top bar region, preview button

Raghavendra: The preview button is also not accessible.

Screen Reader: Virtual PC click left pane opens in a new tab right, publish button expanded, settings toggle button pressed, Genesis toggle branch toggle button

Raghavendra: So the these been, after I understood what settings, what Genesis,

Screen Reader: Jetpack toggle button

Raghavendra: All these things do, I understood all the options of these other block related plugin are here.

Screen Reader: [unintelligible]

Raghavendra: [unintelligible]

Raghavendra: I understoond that as soon as I press rank math table

Screen Reader: Edit collab, add to the content block added, certainly change block, move up, more option, preview button collapse, publish button expanded, settings toggle button Genesis toggle button, rank math toggle, button enter

Raghavendra: So what I’m doing is I’m using the button B, uh the keys key stroke B to move from button to button.

Screen Reader: Scripts heading level to focus keyword, heading level two, basic scale, six errors, heading level two button expanded

Raghavendra: So I’m pressing H to go to the headings.

Screen Reader Additional seven errors, heading level two button collapsed, title readability two errors, heading level two

Raghavendra: This has been pretty easy once I understood the layout of this, uh how the plugin block plugins work, I understood that the plugins are, they they come in the top region and I have to you know activate them and select the options.

I think this is pretty much what I wanted to show like some of these accessibility and usability challenges. Uh I think we have, we can go for questions.

Roberto: Yeah, sure thank you very much for the demo. I mean it has been really really nice um get the real vision of people who interact with the Gutenberg usability. I mean for regular users, for most of the users at the beginning is kind of difficult, because there is like um a lot of stuff to learn.

I mean visually it looks very clean, it looks very simple, but I think it’s a lot a lot more complicated than the regular editor. Even at a pro tip when you create content you can paste all your content on the Classic Editor and then convert your Classic Editor into all the different blocks and most of the times uh WordPress it will translate all your different content, but yes it’s difficult.

And about the plugins, I mean, most of the plugins are available as a block and then you call the plugin, but then you need to make configurations in the same plugin. So it’s very difficult. Let’s start with the first question and the first question is: Will you find useful to have easy options to disable blocks that you can’t or you don’t wish to use?

Raghavendra: So there are too many block.

I think the, it’s not the question of disabling the blocks uh, like I think there are very few blocks that I use on some all my websites. So sometimes you know, I might use the Jetpack, Eventbrite, the calendar leave block. They, I use them rarely, but I need them. So disabling is not an option, but maybe you know the way I want to approach the content itself should be a little different, because I, I don’t use all these blocks all the time and all the options. Robert?

Roberto: Yes sorry sorry, hello over here uh. Okay the the next question actually is my personal question and is away from the native blocks, because there is a lot of native blocks uh, did you find the other blocks the the plug-in blocks accessible for example, Woo-Commerce, Yoast SEO, other Gravity Forms, Contact Form seven, stuff that you usually use a lot to create content, are they friendly with screen readers or not?

Raghavendra: Okay Woo-Commerce I’m playing with Woo-Commerce right now and Contact Form seven, I’m not using it right now, because I tend to use the Jetpack forms, Jetpack forms are very accessible and Mailchimp block is accessible uh Ranked Math SEO, Yoast SEO and there are other plugins that are very like Atomic uh the Atomic Blocks from StudioPress, they are accessible, the accordions, uh the testimonials block and the author block.

So most of the blocks that are coming, the blocks are whatever I encountered are very accessible. Like creating content has been very easy inside them.

Roberto: Okay thank you very much. The next question it will be: Do you find any particular combination of the screen reader and browser to be better?

Raghavendra: I use JAWS plus Chrome, NVDA plus Chrome these are my default screen reader combination.

I used to use NVDA plus Firefox earlier, but now I prefer NVDA plus Chrome. It’s more supported and and you know I come from that era where I used to, I learned screen readers using JAWS. So it’s a very little difficult transition for me to use full-time N-V-D-A, so I tend to use JAWS a lot uh when I’m not doing accessibility testing, but when I do accessibility testing specifically for my clients and or I’m testing some widget for accessibility I tend to use NVDA plus Chrome.

Roberto: Okay thank you, we have the last question is:

Unexpected changes of focus are one of the WordPress Accessibility Team common complaints about Gutenberg. How often or rarely do you feel that happen in your users of Gutenberg?

Raghavendra: Robert can you repeat the question?

Roberto: So often, but like the unexpect, the unexpected changes on, from one element to another one, the focus, is one of the main complaints of of Gutenberg. How often did you get that, that do you think you are on one specific place, where you want to go to another place and it’s not working properly?

Raghavendra: So the the major problem that you run into Gutenberg is because you need to understand how this Gutenberg is laid out. Like you you being a person with screen reader user or you you can be a even a sighted person, just can’t open Gutenberg and understand it instantly.

Like I run the, I run the Island, Hyderabad blogging club also here. I run a club full of bloggers and most of them, I think I’m the only person with disability me and another friend are the only person with disability in that club and lot of them are sighted. And when the Gutenberg came in, they are like, is there a way to switch back to the Classic Editor? Is the question they asked.

So we told about the Classic Editor plugin, but a lot of them uh did not transition to Gutenberg immediately. That took a long time to understand.

Like we we did a lot of workshops with them uh to make them understand how Gutenberg works and how it helps with the design and all that and uh now they fell in love with the Gutenberg. They don’t want to transition back to Classic Editor. So because it was so easy for them to create stories uh it was visual, visual stories storytelling and all that.

It became very easy for them to create, so they don’t want to transition back to the Classic Editor. They’re using Gutenberg. It takes a lot of time to learn Gutenberg, that’s the only aspect here and as a person with screen reader use, as a disability and the screen leader user, it took a lot of time for me to understand Gutenberg end-to-end.

Like now I can create blocks, content and all, it’s just a little difficult for me to manage content rather than create content. Like if I have to copy each paragraph from Word, Microsoft Word and put it here into, create one block, put it in a put it inside that block then go back to Word again, come back here put it in heading, it’s taking too much of my time.

Roberto: Awesome, thank you. Uh, well we don’t have more questions at this moment so please the people who is watching this over YouTube feel free to add your questions into the YouTube chat and we will those answer that on on the presentation um. Meantime, maybe I have a last question because we have another two minutes maybe uh.

What what did  you recommend for people who is blind who have the disability uh, to interact directly with Gutenberg?

You already say it take a lot of time not just to understand how Gutenberg work, but great content beyond the tip that you already give, create your content on a Word document and paste it into WordPress. What other kind of uh tip did you have for the people?

Raghavendra: So one of the other thing is, as you said earlier what I do is like I create the content I put it in the Classic Block, Classic Editor then I use this plugin called I think uh bulk Gutenberg, so you change all the posts into blocks.

So I, I converted the old posts and new posts. I put them as a regular Classic Block and then I convert them into blocks. So what I also did is right now I had a virtual assistant who is helping me with, who’s a sighted person helping me with all the visual aspect of the design aspect. Like I only concentrate on the content and they take care of the pictures, the visual aspect of all the other things.

Roberto: Okay, awesome thank you. And maybe the the last question, because we don’t get any other ones and I have always questions: If you run as a lead of the WordPress project at this moment and you decide let’s do this 100 percent accessible, where did you focus to make Gutenberg and this experience more accessible? What do you want to see on the future or what do you want to see on Gutenberg to be more accessible?

Raghavendra: If you ask me like what I am thinking is as I said, uh I want to create content in Microsoft Word.

Just come here put it and then work on the formatting and then maybe you know a button or uh option where it will convert everything into blocks. And then I hand over it to my design team.

So basically I, I come from the content aspect of this and as a person with the visual disability, I don’t know if I insert a picture, I don’t know where I’m inserting it, or you know what is the, is it taking completely over what is, you know the cropping of the image, where it is placed. Is it placed to the left or right, all that aspect. So I normally tend to leave all the design decisions to the design team and then just work on the content aspect.

So uh if you ask me right now what I would want to see is, I just want to see uh uh like how this Classic Block is there right now, if I want to input the content I want to input here, format it, then a button or you know an option just to convert everything into blocks. And then you know where the design team can take it forward from there.

It should be easy for me to publish content, format content, uh edit content also. One of the main challenges that we are facing right now is with the editing of the content.

So once we put all the content into blocks uh editing of the content is becoming very difficult.

Like you want to edit a certain line in a particular paragraph, earlier what we used to do is we used to copy all the content into Microsoft Word from the Classic Editor do Control F, look for that particular keyword and wherever we are supposed to edit them and edit and just put it back into the editor. But now with the Gutenberg, it’s it’s like you know I have four paragraphs, four headings, couple of lists, uh it became very difficult for us to edit the content. And if I copy from the Code Editor, all the HTML code also comes in. So it’s just not really working out. So it should become easy for us to edit content in the Gutenberg.

Roberto: Awesome, well thank you very much um great.

This talk, you have been amazing um um I think that’s all for tonight guys um. Please let’s thank Raghavendra and let’s um remember we we’re gonna have our next talk on possibly 10 minutes, 6 UTC time uh. It will be Accessibility by Default in Authoring Tools by Susanna Laurin. It will be on the same channel. So uh let’s gonna take a little break and we will see you again soon. Bye.

Raghavendra: Thank you, thank you everyone I’ll be updating my presentation and put it on, give it to the team here and you can all follow me on Twitter and other accessible, all the other channels.