You’re (Probably) Doing Digital Accessibility Wrong

You’re (Probably) Doing Digital Accessibility Wrong

Thirty years after the historic passage of the Americans with Disabilities Act, the landmark legislation that transformed the US’s workplaces and common spaces for the better, so much of our lives have moved out of the physical world and into the digital one. The urgency of equality — and the need to ensure that web design and development consider digital accessibility and the user experience of those with disabilities — is at an all-time high.

Nearly one in five Americans has some form of disability. Globally, the number is higher than 1 billion. Although equal access to community spaces — both in the physical and virtual world — is a clear human right, for millions of Americans, the web is broken. It’s a place packed with frustrating stumbling blocks and disorienting design, and it’s in dire need of a UX overhaul.

This is evidenced in the WebAIM Million study conducted last year. The Center for Persons with Disabilities at Utah State University conducted an evaluation of the top million webpages focusing on the automatically detectable issues. Not surprisingly, the results are dire. The study found an average of nearly 60 accessibility errors on each of the site’s homepages, which was virtually the same amount of errors detected when the same evaluations were run, six months prior. The WebAIM Alexa 100 study didn’t fare much better. Across the top 100 homepages of the most trafficked websites, the study found an average of approximately 56 errors per page (including highly pervasive color contrast errors).

This all amounts to an incredible number of digital access barriers. It’s no wonder plaintiffs are filing lawsuits in record numbers. Over the past two years, alone, there have been nearly 5,000 ADA Title III website accessibility lawsuits filed in federal court. There’s still a lot of work to be done.

No matter where you are in your accessibility journey, here are some common mistakes to avoid, as well as some of the often-overlooked accessibility considerations that will have a meaningful impact for your site visitors.


Test With People

If you’re creating inclusive websites, it’s crucial that you expand your user pool of testers to include individuals with disabilities or, at a minimum, subject matter experts versed in the many nuances of navigating the digital world with assistive technologies (AT), such as screen readers.

At best, automated testing tools can only detect about one third of the potential issues

One of the most common misperceptions about accessibility is that, if you use an automated testing tool, you can find out everything that is wrong with your site.

At best, automated testing tools can only detect about one third of the potential issues. Even in the case of the WebAIM Million study, the number of issues uncovered only consisted of automatically detectable issues. It’s safe to assume, the number of issues that actually exist on the web pages evaluated in the study are largely understated. Accessibility testing might seem simple on the surface, but usability testing leveraging assistive technologies is complex and multi-faceted. Motor, visual, cognitive and auditory impairments can all impact user experience, as can the specific AT and browser combination being used. To gain a true understanding of how usable your site is with these tools, you can’t just rely on automated testing.


If All You Plan To Do Is Implement A Toolbar, Think Again

Doing something is certainly better than doing nothing, and we should all applaud anyone that is taking steps to improve the accessibility of their digital assets. But if you think that adding a free accessibility toolbar, alone, is doing enough, you should take note. It’s not.

Toolbar providers that don’t test your site with people or couple their offering with custom, human-informed fixes that correct accessibility violations, do next to nothing to reduce compliance risk. Despite many of the claims they tend to make about their AI and ML technologies achieving full compliance by simply embedding a single code into your website, most overlay solutions do not have a material impact in improving website accessibility compliance. Unfortunately, fully autonomous website accessibility isn’t a thing. Be wary of those making bold, sweeping claims to the contrary. Outsourced accessibility providers will continue to fall short without a broader, more holistic approach.

fully autonomous website accessibility isn’t a thing

Not all toolbar (or “overlay”) solutions are alike, though. A trusted provider will be backed by an expansive customer base of enterprise-grade clients who have vetted the integrity and, perhaps most importantly, the security of the service. At the end of the day, unless they are having a meaningful impact in improving conformance with the Web Content Accessibility Guidelines (WCAG), they aren’t moving the needle toward compliance, which is very much focused on adhering to these internationally recognized standards and, more importantly, removing digital access barriers for individuals with disabilities.


Stay Current With The Latest Standards

Speaking of WCAG, for the last several years, the talk of the town, when it came to website accessibility, has been WCAG 2.0 Level AA Success Criteria. WCAG 2.1 (which incorporates 2.0) was actually released back in 2018. Since the latter half of 2019, plaintiffs and claimants have begun to reference WCAG 2.1 AA. When benchmarking, be sure to reference WCAG 2.1, which includes 12 new level AA testable success criteria, which are heavily focused on cognitive disabilities and requirements for mobile/responsive design.

If you really want to stay ahead of the curve, keep pace with the W3C’s progress on evolving the standards. Check out WCAG 2.2, which will be here before you know it.


Think Different For Those Who Might Think (And Navigate) Differently

A lot of the discussion around digital accessibility tends to lean toward vision and hearing disabilities. The vast majority of lawsuits filed are from blind individuals relying on screen reader compatibility or hearing impaired individuals requiring video captioning. But, the size of these demographics pales in comparison to the number of individuals impacted by cognitive and ambulatory disabilities, the two most prevalent disabilities in the United States.

There are several accommodations designers and developers can take to improve usability for individuals with cognitive and learning disabilities. Reading level aligns with the higher level, AAA, WCAG conformance, but making sure your content isn’t written for a rocket scientist to understand is always a good idea. Something below a lower secondary education level is optimal for lower-literacy users. Breaking up, or chunking, site content into digestible snippets is also proven to improve retention and understanding, especially for those site visitors with shorter attention spans or individuals with Attention Deficit Disorder. Providing options to change fonts and letter and paragraph spacing has proven to offer a similar benefit.

the more accessible your website, the better your search results

For individuals with mobility impairments, optimizing for keyboard navigation has many benefits and it’s easy and fun to test. Harnessing the power of the tab key and putting yourself in the shoes of a user who relies solely on the keyboard to engage and interact with your site should become an essential tool in your accessibility testing arsenal. You’ll quickly understand and become fanatic about keyboard focus indicators, skip navigation links, and if you’ve implemented infinite scroll, you might just pull your hair out. Your users will likely be better off with easy-to-follow triggers, like a “Load more results…” button.

There are a considerable number of additional factors that must be taken into account when striving to ensure a fully accessible website experience. Video transcription and captioning, audio description, color selection, layout, structure, animation and effects are just a few examples. When you start examining your website through the lens of accessibility, you’ll quickly realize that the potential pitfalls are many, but the potential to transform your site — and expand your access as a result — is significant.

Simply put, designing for accessibility is good business. Accessibility is directly proportional to SEO friendliness; the more accessible your website, the better your search results and the wider the net cast around your potential audience. When usability is good, clean and simple, reach and impact are also increased. And no one can argue with the cost-benefit analysis of that.


Featured image via Unsplash.

This content was originally published on Source link, we are just re-sharing it.

All Growth Hacking Articles

How Do You Make Video Accessible?

How Do You Make Video Accessible?

Videos aren’t inherently accessible. Even if the content comes from an outside source — like a videographer or a YouTube channel — you’re still responsible for ensuring that every visitor on your website can fully access it.

Video can serve many purposes for a website:

  • Home page videos featuring company founders or illustrated walk-throughs of a solution can serve as a unique welcome to the site;
  • Product videos give customers a better look at your inventory which helps in the decision-making process;
  • Background videos can be a nice change of pace from otherwise static content;
  • Blog post videos can provide readers with an alternative approach to consuming content;
  • Video content gives websites better opportunities to rank in search (like showing up under Google Videos or on the first SERP for a relevant “how to” question).

The last thing you’d want is to spend all that time designing your website to be accessible only for the video (which is always a crucial part of the content) to be inaccessible.

Below, we’re going to look at what you can do to make video accessible on your website.


1. Follow Video Accessibility Best Practices

When we talk about how to make videos accessible, what we’re ultimately trying to do is solve two big problems:

  1. To enable everyone to consume the content in full;
  2. To make it so that everyone can control the playing of the content.

This doesn’t just apply to visitors who have visual or aural impairments either. Accessible videos are useful for people who may be limited situationally (like someone riding the bus home who can watch the video, but not listen to it because they have no headphones).

Here’s what you can do to help all your visitors consume your video content in full:

Disable Auto-Play and Loop

Nobody wants to step onto a website or new web page, only for the video on it to start playing. This is especially so for those who are visually impaired and have to rely on screen readers to navigate them to the controls that turn off auto-playing videos.

So, remember to disable auto-play as well as auto-loop features before publishing a video to your site.

Enable Captions

Captions are basically a script that appears inside your video. So, much like a script for a movie or a play, captions are synchronized annotations that spell out what is heard.

In addition to the speech itself, captions may include things like:

  • Titles and chapter names displayed but not spoken aloud;
  • Song names or lyrics playing in the background;
  • Notes about ambient noises.

There are two kinds of captions you can use. Open captions automatically display whenever anyone plays your video. Closed captions need to be turned on by the person watching the video.

While some video player software may offer to auto-generate captions for you, it’s best to do it on your own. (You’ll see why later.)

Enable Subtitles

For visitors that don’t speak the native language of the video, make sure that subtitles are enabled or that you’ve included them (if you’re preparing your own).

Add Audio Descriptions When Needed

Whereas captions and subtitles capture the audio of a video, they don’t generally describe what’s on the screen. This can compromise visually impaired users’ ability to comprehend what’s going on if there’s something relevant in the visuals (like on-screen text or some sort of action that’s not otherwise described aloud).

So, in addition to captions and subtitles, you might need additional audio descriptions or a separate audio track entirely to complement the video.

Provide a Transcript

Transcripts are a cross between captions and audio descriptions. Essentially, a transcript should capture everything from the video:

  • The speech;
  • Titles, subtitles, and other onscreen text;
  • Descriptions of onscreen activity;
  • Links referenced or shared onscreen.

Unlike captions, transcripts usually live outside of a video player — either written on the page in HTML or provided through a link or download. Interactive transcripts are a little different as they attach themselves directly to video players (I’ll show you an example below).

Properly Format Onscreen Text

Even if you don’t or can’t give your visitors the ability to style the onscreen captions, it’s important to carefully consider how your choices may affect their ability to read it, including:

  • Text color;
  • Background color;
  • Video color;
  • Text-to-background color contrast ratio;
  • Text-to-video color contrast ratio;
  • Text size;
  • Placement of text on the screen;
  • Text synchronization with speech;
  • Length of time each line of text is displayed.

Avoid Flickering Content

Visitors who are prone to seizures, dizziness, or nausea may not respond well to any flickering, flashing, or strobing content on your site. Also, be careful using optical illusions as they can equally disorient, disturb, or otherwise distract some visitors.

Clearly Label Interactive Elements

If you have any control over how the video player is designed or the interactive elements in it tagged, make sure every inch of it is clearly labeled. Buttons without labels or with funky naming conventions can throw your visitors off, so stick with the tried-and-true labels everyone else uses.

Enable Keyboard Support

Before publishing any videos to your site, make sure that screen readers and keyboards can fully access them. That doesn’t just mean being able to find the video player on the page. It means controlling features like volume, enabling closed captions, or fast-forwarding.


2. Use an Accessible Video Player

There are a number of video player options that come with accessibility features built in. Here are some of the more popular and OS-agnostic options:


YouTube is a popular video-sharing solution, so you might be tempted to use this option. However, the only video accessibility features it comes with out of the box are:

  • Subtitles;
  • Closed captions.

Even then, it’s up to you to provide and refine the captions for your hearing-impaired visitors. When you upload a new video (or edit an existing one), you’re given the option to upload subtitles or captions:

YouTube - Upload Subtitles

Your .srt file can be prepared with or without timing (though timing is ideal).

If you don’t have captions prepared, you can always rely on YouTube’s auto-captioning system. They’re not going to be pretty, so you’ll still need to use YouTube Studio to go in and edit the transcript to line up with what’s being spoken:

YouTube - Auto Subtitles

But it’ll at least save you time writing them all from-scratch.

In the end, your website’s visitors will be able to enable closed captions through the small “CC” icon in the bottom-right of the YouTube video player. This is how they’ll appear when they play within your video:

YouTube - Subtitles

Users have little to no control over how these captions are displayed aside from having YouTube translate them into another language of their choosing.

I’d say this option is fine to use if you already have YouTube content on your website and you want to quickly fix some of the inaccessibility issues. But keep in mind that there’s a lot more you need to do to 100% make videos accessible.

JW Player

JW Player might not be free or as well-known as YouTube, but this HTML5 video player will do a lot more in the way of accessibility.

For instance, you can use it to enable closed captioning:

JW Player - Closed Captions

Multilingual support is provided, so your users aren’t automatically relegated to the primary language of the video.

JW Player also allows viewers to style captions as they see fit:

JW Player - Captions Styling

They can change the following settings all from within the settings in the video player:

  • Font color;
  • Font opacity;
  • Font size;
  • Font family;
  • Character edge style;
  • Background color;
  • Background opacity;
  • Window color;
  • Window opacity.

Another accessibility feature included is the HLSV4 audio track:

JW Player - Audio Tracks

While JW Player recommends using an audio track for something like laying director’s commentary over a movie, you can use this to provide important feedback on what’s happening on the screen (i.e. audio descriptions). For instance, if someone is visually impaired but able to listen to the video, the audio track would explain details on the screen as they occur.

Another useful accessibility feature that comes with JW Player is the interactive transcript:

JW Player - Interactive Transcripts

Transcripts are useful for both visually impaired users who have screen readers as well as hearing impaired users who need audio assistance. And with this interactive transcript, users can search through the transcript for key phrases, making this an incredibly useful feature for all users.


How to Make Video Accessible

When you want to make videos accessible, you have to think about how the content may be perceived from all angles.

  • If someone couldn’t hear the audio, what more would they need in order to understand the on-screen content?
  • If someone couldn’t watch the video, what could you do to help them visualize what’s on the screen?
  • If someone couldn’t control the video with a mouse pad, how would they navigate through the video player’s settings?

In other words, really think about what you have to do to ensure that no one’s experience is compromised by the lack of video accessibility on your site. By using the above guidelines and accessible-friendly media players, you’ll be off to a good start.


Featured image via Unsplash.

This content was originally published on Source link, we are just re-sharing it.

All Growth Hacking Articles