The festival of WordPress
January 22, 2021

This is an archive of the January 2021 event

Accessibility Is a Moving Target

Despite our best efforts, it’s difficult to future proof a website for accessibility standards. Your code and design may follow current standards, but will your careful compliance become obsolete when new guidelines are released? What happens when the site is updated or content is entered? What browsers or assistive technology agents do your consumers use?

We will review and demo a holistic approach for the complete lifecycle of an accessible website —including how to iterate on existing content without impacting the hard work you put in during the build.

Attendees will come away from this session with:

  • How to get started on improving accessibility on an existing site
  • Tips on what useful combinations of user agents, browsers, devices, etc. to test
  • A list of free tools that a site owner/content author can use to be sure their website is compliant before and after a build
  • What WCAG 2.2 guidelines are on the horizon
Time: 6:00pm UTC
Region: Americas
Stage: GoDaddy Pro Stage

Hi there. You are tuning into the session. Accessibility is a moving target. My name is AmyJune Hineline. I am the open source community ambassador for Kanopy Studios. I am a hospice nurse by trade. I am an advocate for accessibility and inclusion, because I know firsthand how technology and the way it’s created can be a barrier for some folks.

I help organize and market ally talks. That’s accessibility talks a virtual online meetup where we have. Speakers and guests discuss all things accessibility because I believe all information should be accessible to everyone. Kanopy brings me here today. Kanopy is my employer. They’re an open source website, strategy, design development and support agency.

And we’re hiring. If you have any questions, you can reach out to me across social media for that. So let’s dive in the agenda today. What we’re going to talk about is first I’m gonna give some idea of what accessibility means for this talk today, go over some terms and definitions, go over, designing for accessibility talking about accessible content and then going over some of the free tools people might want to use to audit their sites.

So why designed for accessibility? Not only is it the law, we want to include a wider consumer base for our audience. We don’t want to exclude people from using our products and services. According to the CDC, 26% of people living in the United States live with some form of disability. That’s roughly one In four or 61 million people.

And remember, as we get older, everyone, when it comes more disabled with time, our hearing and sight can deteriorate. We have to think of situational disabilities, noisy workplaces, especially in the time of COVID. Some of us have kids at home, some of us have. I was at home in more normal times, think of the user on a plane that forgot their headphones.

And one of you do utilize closed captioning. You can’t find your mouse, you can’t, you can only use your keyboard. You can be recovering from shoulder surgery and not be able to use your mouse at all. And remember not every disability can be seen. There’s debilitating pain, fatigue, dizziness, cognitive dysfunctions, brain injuries, as well as  learning differences, mental health disorders and vision and hearing impairment.

How do we embrace it? Accessability well, first we have to understand what it means. And in the context today, I’m going to talk about producing rich, engaging media. That’s accessible to everyone. And being accessible means everyone can readily access what you’re offering services in venues and written and digital content as well.

Remember, inclusion is not giving special privileges to people. It’s making sure that the barriers are actually removed. Neil Milikin is the head of accessibility and digital inclusion at Atos. He created the Atos center for competence. Incumbent, encompassing accessibility, inclusive design, and assistive technology services.

He’s an invited expert and contributor to the w three cognitive accessibility task force. And I love this quote. He says we should celebrate narrow diversity. The world would be poor and life would be dollar. If we were all the same. So let’s just really go quickly through these terms and definitions, because you can take the time and research these more on your own.

There’s the ADA that’s the American disabilities act. The Americans with disabilities act it prohibits discrimination, and really guarantees that people who live with disabilities have the same opportunities as everyone else. So they can participate in mainstream American life. Section five Oh eight requires federal agencies to develop, procure, maintain, and use information and communications technology.

Excuse me, that is accessible to people who live with disabilities, regardless of whether or not they actually work for the federal government. Bill see, 81 is the accessible Canada act. And this is an act that ensures a barrier free Canada to parliament. It aims to benefit everyone who lives in Canada, especially those who live with disabilities by creating this barrier free Canada, the worldwide web consortium, that’s a mouthful W3C, and I’m going to reference them a little bit more later in the presentation is an international community that.

That develops and really works on the guidelines to ensure quality and growth of the web. And that’s a good segue to talk about web. Content accessibility guidelines WCG or wikag. The goal here is to provide a single shared standard for web content accessibility. And you have some numbers listed, and we’ll talk about these in a little bit more in depth, but these guidelines are really intended for people who create web content, developers, people who create the web offering tools create the evaluation tools and really they’re meant for anybody who needs or wants.

The standard for web accessibility, those guidelines and standards that we can show our stakeholders and product owners and our developers. So wikag 2.0 is a collection of more than 40 guidelines that improve usability for the use of different abilities. And these are based on four principles called poor.

And I’ll go over these It’s poor as a four letter acronym for the high level principles that describe functional accessibility. So there’s perceivable, perceivable means that the user can identify content and interface elements by means of the senses operable. Means that a user can successfully use things like controls, buttons, navigation, and other necessary interactive elements.

Understandable. We really want our users to be able to comprehend the content and learn and remember how to use the interface to their advantage and just be able to navigate and robust. This ensures that users who use different technologies can choose what technology they use to interact with websites online documents, multimedia and other informational formats.

There’s wikag 2.1. This has everything that 2.0 has plus 17 new items.  It talks about line height, orientation, color, contrast other things like that. And 2.1 right now was the standard guideline and the compliance level for many  of our websites. So if we break down Our guidelines, they’re broken into three main levels.

Each level each increasing a in the level indicates an additional criteria to follow level a is really that minimal compliance. If your website does not meet that. This level, then it means that it’s really hard for people with disabilities to use AA is the accepted, compliance level right now.

It means that your website is usable and understanding understandable for most people. And then there’s the AAA level. This is the optimal compliance, but it’s really hard to reach. This means that your website accessible to the maximum number of users with, or without living with disabilities.

What’s coming up. This is talking about, accessibility being a moving target. And one of those things that change over time is those standards. So on the horizon is this 2.2 guidelines. They’re going to be coming out later this year and it’s still up in the air about which ones are going to be definitively included, but.

The WCAG 2.2 guidelines is everything that 2.1 had plus nine new items,  have them listed on the slide, but there they talk about focus, appearance, fixed reference points, dragging a pointer, target space, find-able help, hidden controls, accessible, authentication, and redundant entry. And the reason I mentioned the.

 The ones that haven’t come out yet, because it’s always a good idea as developers and auditors to think about what compliance will look like in six months. So if you’re doing an audit today, keeping in mind the guidelines that are going to pass in the future helps you future proof, your website.

So let’s break it down. What makes content accessible? There’s four broad parameters. We want to make sure that it’s easy to see. So we accommodate visual needs. We want to make sure it’s easy to interact with. Some people are unable to operate a mouse, therefore multimedia should be delivered in a player that can be operated with the keyboard alone.

So we want to make sure we accommodate motor needs. We want to make sure it’s easy to hear. So we accommodate auditory needs. Some people are unable to hear audio. So we have to think about transcripts and closed captioning in in audio descriptions. And then we want to make sure that people can understand it.

So we accommodate cognitive needs. We really want to make sure that the experience of a website is as equivalent as possible, regardless of things, we cannot control our users. And this includes how they use it. The website, computers type tablet, size phone operating systems,

user agents. When most folks think about assistive technology for digital assets, they really think about screen readers. But let’s take a, I want to take a closer look at some user agents. Assistive technology or 80, you might see as an acronym is any device or software or equipment that allows people to work around challenges so they can learn, communicate, and function better across the digital assets.

Of course there’s screen readers, screen readers are used to listen to the content of the webpage and really they convert text to speech. So we should keep in mind, screen readers can also be used along with visuals on the web page for folks who experienced cognitive challenges as well.  Not only sight impaired people use screen readers, there’s all different sorts of use cases.

Alternative input devices. These are, alternatives to the typical mouse or keyboard interactions. And some of these users may have physical or cognitive impairment. And some of these input devices could include things like head pointers speech input, software large print or tactical.

Tactile keyboards, touch key touch screens, single switch entry devices even eye tracking in motion and tracking comes into play with alternative input devices, magnification software,  it’s used to enlarge screen content to make it easier to read for users with partial sight impairment.

These softwares you use promo primarily by people with With partial sight to enlarge the content, to make it easier, to see some screen magnifiers, provide text to speech and other functionality as well. And what’s some more assistive technology and adaptive strategies there’s eye tracking the system that monitors eye movement to control mouse pointer, and it really detects blinking.

And that what that’s what. Is used to initiate mouse clicks there’s things called accelerators. This is software and functionality that really help reduce the need to type or click. We can use sticky keys and have keyboard customization. This includes mapping of the keys shiny assigning shortcuts having filters, stuff to support single handed typing.

Folks can use pop-up in animation blockers. These are web-based plugins or other software tools that stop that automated popups or help pause or hide animation. Some folks use refreshable braille, Display to have the text show up as braille there’s reading assistance, there’s all different kinds of reading assistance.

They can do things like customize the font size or spacing. They can scan the text for complex words and phrases and link to dictionaries and glossaries. You can hide parts of the content you can provide outlines. And some of these reading assistance read the content out loud and highlight the text.

As it’s being reading, re being read as well, page maps, they display a small image of the entire webpage. And they indicate, by highlighting the portion within the webpage that’s being currently viewed. And I want to take a look closer at how some folks use assistive technology.

I may be on the bus and I’m using a mobile phone. So obviously desktop layout would be awkward, I plan on catching up with my favorite TV show, but I forgot my headphones, so there’s the combination of having a mobile phone, but needing captions, when you test and build your websites for accessibility, you have to think about all the different ways people can use your software and programs.

Another scenario might be that someone has misplaced their mouse or only use their keyboard to navigate. But they have low vision. So there’s zoom is amped up to 200% and perhaps the page shifts into responsive. Size and mimics mobile design when that happens. So we need to make sure that when that happens for keyboard users, that when things shift to accordions or downs, that they can access that by the keyboard.

That the tech sections are still there and that there’s no keyboard traps. And now thank, maybe they need to have a text to speech device or a screen. A screen reader enabled. So the content on the page should match how it’s read. Take into account all of these things.

Things need to have the same flow and be predictable. I might have CSS and images disabled and I’m navigating by keyboard. Yeah. We need to be sure that we don’t miss out on important visuals that are important for context and content as well. Look at all these user agents and throw them up in the air and catch a few and test with those.

With those different scenarios, build personas. So let’s moving into, why is, why are our websites moving targets for accessibility? So let’s talk about some of the design now design and content creation can be close together, but they happen at different times of the website’s life.

Design is before launch content can happen at all phases. And I just want to go over a couple of, or a few of some design aspects. So we want to make sure that we use visual and semantic space. Space is a important visual tool that helps us identify where content is and how it’s related on the page.

Do you know? So we want to make sure that we provide the right amount of space between lines of text. This is line height, and usually it can be applied automatically. Using clean topography is super important. We want to avoid changing the type page typeface from page to page on our website.

We want to avoid using all capitals. Readability is greatly reduced when all capitals, because words have a uniform rectangular shape. And some readers might not be able to identify words by that,  That plane rectangular shape don’t underline text. We want to make sure that we reserve underlying for identifying links.

Left aligned text is easier to read, having a consistent margin. Don’t put two spaces after a period. Period. This is leftover from from print days and we want to make sure that we support text resizing, check how your content responds to having enlarged text. Now let’s talk about accessible content because you can have accessible design and you can have accessible code, but what happens over time when content is added, this is one of those moving targets, especially when a team of people, w when we have multiple content creators and multiple authors involved and then maybe we have a Wiziwig a text editor that.

Includes all the bells and whistles and people are allowed to change their font size, add headings and things like this. So let’s look at some accessible content. We want to be sure that we use plain language that’s difficult to read and understand is really a barrier for. Almost every user, but particularly for people who live with cognitive disabilities,  maybe low reading literacy and people who the content is an unknown topic, or maybe it’s even written in an unfamiliar language.

So plain language improves the ease of interaction on a website. It can be things like clear headings and labels, things that make it easier to navigate and operate that website and web application. So plain language, when content creators really think about plain language content and controls are easy to understand for all users.

 Things are clearly defined. People who are unfamiliar with the topic or language are better able to understand when there isn’t a lot of complex language and things like that. People who have disabilities that affect the ability to access and read content. When we use plain language, they’re not held back by that unnecessary complex language.

And I always like to mention that it really benefits people who use English as a second language. If your content is meant to appeal to an international audience, plain language is even right, more crucial. And it’s easier to translate. Familiar language, this is really making sure that you use familiar words are familiar combination of words, and our content authors and writers should really strive to communicate with their readers, not impress them with using, showy words or uncommon words.

So we want to use language. That your users can relate to, think of those personas, the, your user base. So avoid jargon and buzzwords, jargon and buzzwords are unlikely to be clear language. Often these words are too vague and lead to MIS misinterpretation or empty meaningless text.

We want to be consistent with the words that we use. If we refer to the same person or object several time in our text, we always want to make sure that we call them by the same name. We also want to be careful when we use symbols irregular characters or certain types of punctuation in our texts, because think about characters like ampersands or symbols.

For percent, some of those might be unfamiliar to people. Be, especially careful when using acronyms and abbreviations and numerous, an acronym is a word that’s made up from the first letters of other words. For example, NHS is national health service, there’s BLM Bureau. That can mean a couple of different things.

BLM could be Bureau of land management or black lives matter. So make making it clear what your acronyms and abbreviations are numerous stand for. Is important to the reader. So identify them the first time that they’re used. And also think about search engine optimization. It’s easily searchable and will often give you better SEO ranking.

When you have familiar language, you want to make sure that the words you use in your copy and on your pages reflect the words that people might enter into those search engines, looking for your site. These are some of these like high-level principles with accessible content, know your audience adjust your languaging to your audience and provide context.

Alternative texts, not only images, but for links, graphics, and charts, it’s original purpose and still primary purpose is to describe images to visitors who are unable to see them,  using scan patterns can help the information be more presentable and show up in a logical order.

That makes sense. In general keep your words sentences and paragraphs short remove any redundant information and opt for short, widely understood words over using more obscure and, multi-syllable words and stick to predetermined reading levels,  readability dot Gov’s suggest the ninth grade reading level.

For the North American audience. But as you think about the world opening up and having a world stage, that reading level needs to adjust to a fit to fit your users. And then use the active voice before using the passive voice, speak with the clear actor. This really reduces the word count in your text.

Remember I want to talk about testing tools and I want to remind folks that automated tools are great, but they only catch 30 to 40% of the errors on a website or digital asset. They are only as smart as their program. So I want to go over some testing tools that will help you with manual testing as well.

And I really only want to highlight the free ones because they’re definitely more accessible than the pay for services. So screen readers,  screen reader, like I said before, converts text to speech, some free ones that you can look at, depending on your operating system would be NBDA Mac, voiceover, Chrome, voice Orca, or spoken web.

The wave tool is a browser extension with the one-click functionality. It’s a suite of evaluation tools that help authors make the web content more accessible to individuals with disabilities. You have a button in your browser that you click and it runs these tests for you and spits out a sidebar for you to look at the results.

The browser extension that’s in your ex inspector tool is the ax tool. The accessibility engine, it’s a compact JavaScript library. That’s open source. So you can look at the code and it’s available on get hub. Lighthouse is an open source automated tool for improving the quality of websites.

You can run it against any webpage, public, or requiring authentication. It’s also in your inspector window. It has audits for performance accessibility, progressive. Web apps, SEO and more, it’s a great tool. The keyboard, remember all of our functionality must be usable with the keyboard.

Users should be able to access and move between links, buttons, forms, and other controls using that tab key and key strokes. Web site should not require a mouse. For example, pop-up calendar should also let users type in a date. There’s the web contrast, the web AME contrast checker. This is a free website that helps determine the accuracy or clarity of texted contrast of your visual elements.

The site improve accessibility checker is a browser extension, which I love to use. They don’t pay me to say that, but it’s a great tool because you can evaluate your page for accessibility issues at any time it provides. Really intuitive visual feedback about your content, about, and highlights those issues.

It also highlights warnings and makes suggestions what to be manually checked as well. The totally T O T a  is a tool that helps visualize how site performs with assistive technology. It has things like screenreader wands and heading checks.  is a brand new extension for Chrome that helps you experience the web and interface through the eyes of sort of those friends users.

You can test different disabilities and different abilities with this tool. Zoom a plus 200% lots of people, adjust their web browsers to have slightly above default font size. This is a screen magnifier tool that increases the size and the graphics on your computer screen CSS and HTML validation.

It’s important to make sure that all of your code is right, so the web browsers can read it properly. Readability tools. We talked about reading levels, there’s a great one by web FX that you can just put in the URL and it will indicate scores for different reading levels across the board, the ally project checklist This is a good reference point.

It has a checklist of all the things that you should check. It’s a sh it goes by the wikag standards that shared standard for content accessibility. And I have some links to tools. I’ll make sure that these are included for folks too. For folks to be able to click on them after the presentation.

So thank you. I welcome people to reach out to me across social media. My name is Amy June, but I go by Volkswagenchick across all of the media. You can find me on LinkedIn. You can find me on Twitter and you can find me on Facebook. So reach out to me any time.

Thank you.

Share this session

Share on facebook
Share on twitter
Share on linkedin
Share on pinterest
Share on email