This week we’re still talking about video. They say a picture can say one thousand words. Video is thousands of images that tells us more than what the audio alone says. Most video on the web these days is between 24 and 30 frames per second. That potentially would put a one minute video at roughly 1.8 million words. Even if 30 frames equal one picture, you are still responsible for up to 60,000 words. How do we do this?
Comments closedWhat is an Audio Description? Video has two main elements to it, what you see and what you hear. Imagine you go to watch Back to the Future. However, your vision has failed to the point where you can’t see the image. Audio description comes in to make it possible to get the visual cues needed to follow the plot. Let’s take a look at what they do.
Comments closedWe’re still working with video and audio in 1.2.2. I’ve mentioned captions in the previous A11y 101 posts. Success Criterion 1.2.2 lays out the specifics for captions.
Simply put, if there is video with speaking you need captions. Did you provide an audio description? Those get added to the captions.
There are two basic ways to provide captions, open and closed. In either case, you need to have someone transcribe the audio. They need to include the time when the display of the text starts.
Open captions are the minimum support you should provide. Open captions are “printed” into the video. They are baked in and designed to fit the design aesthetic of the video.
Why do I call this minimal? Well the user lacks control to customize it. Additionally, this only supports deaf and hard-of-hearing folks. Our next version offers more features.
Since open captions are part of the video, they can actually create problems. The most problematic is that they may move around the screen depending on what the video needs. This makes it hard for users, especially low-vision users, to keep track and find them.
Closed captions provide and answer to this. Closed captions are a separate file called in the <video> element. Usually it is a .VTT file. It’s pretty simple to build. I have an article on a11yproject.com that I published in 2013 that explains how to do it.
The next thing that closed captions bring – screen reader and Braille display support. Closed captions are considered real text on the page for screen readers. Now the Blind-Deaf can get the story too. The low-vision user can lean back on the screen reader to help. It also helps with SEO.
Comments closedI discussed non-text content last week and mentioned video. WCAG decided to be specific when addressing items that fall under the bigger 1.1.1 criteria.
In success criteria 1.2.1, we’re informed we need to provide one of two options, unless the audio or video IS the alternative. Let’s look at our options:
https://www.w3.org/WAI/WCAG22/quickref/#audio-only-and-video-only-prerecorded
- Prerecorded Audio-only: An alternative for time-based media is provided that presents equivalent information for prerecorded audio-only content.
- Prerecorded Video-only: Either an alternative for time-based media or an audio track is provided that presents equivalent information for prerecorded video-only content.
OK, what are our key words? “Time-based media” is mentioned in both. We see in three places, this is about pre-recorded media and not live. This means we can use the edited audio or video. We can then give it to someone to create a transcript. They can also make closed captions for videos.
Once returned, we offer a link to the transcript. This can be an accessible PDF, but it is often easier to to make it HTML. The transcript doesn’t need to live on another page. The preferred method is to use a disclosure next to or below the media. When closed the content is hidden. The user who needs it, can expand the transcript to read.
If we are working with video, does it have an audio track that describes everything in the video? This is usually an audio description track. It’s provided in addition to the regular audio track. It will describe what is happening without needing to see. One of my favorite examples is a Frozen trailer:
Transcripts are easy. There are many ways to get them done, and some are super cheap. But before you ever put the transcripts on your site, have someone, better yet several, proof them.
Comments closedOne of my roles as a consultant is to coach others. Clients & colleagues, from junior testers to CEOs. Each of them learns in a different style. That is why I’m starting this A11y 101 (short for accessibility – pronounced “ally” or “a-eleven-y”) series. It will break down some of the major topics in different ways. This approach hopefully connects easier than technical specification documents.
What is “non-text content”? The Web Accessibility Content Guidelines (WCAG) makes it pretty simple, if it isn’t text, it falls under here. As a developer, you are promising that there is a text fallback for the non-text content.
Videos, images, charts, animations are all examples of non-text content. Some times these are decorative. Sometimes they add meaning. When we are talking about non-text content, we really only mean meaningful non-text content.
For video, we have two options for text alternatives, captions and transcript. Captions come in two types. While both cover the text alternative for video, one carries us beyond 1.1.1. Users can choose real-time captions. Alternatively, they can take their time to read the transcript.
Open Captions are captions that are embedded into the video. They can be positioned within the video to maximize the visual. Yet, this jumping around the view can be problematic for users. Additionally, this style of captions are not screen-reader accessible.
Closed Captions consist of a separate file the user can turn on and off. Each file will include a time-stamp followed by the words used on screen. Bonus feature is that closed captions can be read by screen-readers and Braille displays.
Not everyone reads at the same speed. Many factors affect reading speed. People with issues like TBI, ADHD, Dyslexia, or low literacy may need to slow down the tools. This allows them to read at their own pace. Transcripts allow this as well as supporting screen-readers and other assistive technology.
When deploying a video to your site, the best practice is to provide both the transcript and closed captions. You can save yourself time by creating the closed caption file, then using that to create the transcript. It works the best when the transcript is HTML loaded directly next to or under the video. This can be behind a disclosure or a link to another page. You can provide an accessible PDF as a transcript. Still, these are rarely easier to create than HTML.
Images are the first thing we think of when we think non-text content. There are many image types available. We need to consider just a few methods to provide a text equivalent. This is highly dependent on how you call your images.
<IMG>
When using the <img> element, it MUST have the “alt” attribute in the tag. Here we provide a value that doesn’t describe the image, but rather the meaning of the image. Keep this in mind, we’ll talk more about it later.
<SVG>
There are several ways to place an SVG into a page. This technique addresses when the <svg> is placed into the HTML. First, we need to understand the SVG and how it is to be used.
Static image placed on the page? Then we can provide aria-label and put the meaning there. We could also provide the meaning in the SVG <title> element. Provide an ID and use aria-labelledby. This is super handy if your design teams are building SVGs this way.
Referenced by the <img> element as the source, use the rules for <img>.
Inside the <picture> element? The picture element requires several source files, but also includes a fallback to the <img> element. In the picture element, the alt text of the fallback image serves as the text alternative. So, don’t leave it out!
Using the <figure> element? This is a fun one because it combines all the techniques into one. A figure can have anything in that creates some sort of drawing. Whatever you put inside will dictate how to create the text alternative. For example, you can use an <img> inside. Or <svg>. In either case, we’d use the same rules as above.
Of course you could also draw something with HTML & CSS. In this case we provide an aria-label on the wrapping element of the drawing and also provide a role="img".
Figures also allow us to provide a caption using <figure>. While it is not required, if there is a complex message this is where we put it. We still need alternative text for the image, but we can go into more detail here.
Canvas is a really cool set of tech we can use on the web. Yet, due to it’s nature, it isn’t really accessible. You can put HTML between the canvas tags. You can map the bitmap images to HTML elements. There are easier ways to do this too.
Always provide an aria-label; or aria-labelledby on the canvas element. Your descriptive content can live inside the canvas element and still be referenced.
Charts and animations are a combination of the above. Usually charts are crafted using SVGs on the client side or static images on the server side. Animations are usually made in JavaScript with SVGs or Canvas.
Keep in mind, that charts get complex really quickly. You should strive to provide two types of interaction:
Lastly, if you can, provide a summary for the chart. These usually either lead or follow the table in the HTML.
Comments closedThis probably isn’t the first time you’ve heard it. Somewhere along the line somebody asked you how well your site or application works for people that are blind. You probably mumbled something along, “They don’t use our stuff,” or maybe, “I don’t know, does it matter?” The short answer is, yes it matters. And you want to pay attention to why.
Accessible products and websites are often built with the blind in mind, however what it means to be truly accessible runs much deeper than that. Accessible by it’s very nature means that anyone, anywhere, with any tool of their choosing can use it. This means the disabled, which is not just the blind, but those with hearing, neuro-diversity, mobility, physical, and learning disabilities; and it means the abled that are compromised by other means.
Economics plays a huge part in accessibility. AOL still has 2 million people using dialup internet. This is an economic issue. ISPs have decided it isn’t beneficial enough to run faster lines to these areas or they are on fixed incomes and can’t afford the rising cost of internet access. Developing nations don’t have access to the funds to buy the latest and greatest technology, so they use products released years ago to get online.
As developers we all cheer when we hear that Microsoft is dropping all support for browsers below Internet Explorer 11 next week, but how does someone in an African country who can’t afford to upgrade from XP going to feel when we don’t support IE9? And what if that great new mobile application you created only works on iOS 9+ and Android 4.4.4? Many lower income folks in the developed and developing worlds have phones that are 2, 3, 4, or 5 years old and don’t support the latest things we can do with the web or mobile.
Building accessible products and sites means taking all this into account. It is using responsive web design to make sure your content is readable on all devices regardless of size. It is using solid HTML to make sure the content is parseable by a variety of technologies on the client side from browser, to apps, to refrigerators and TVs. It is using progressive enhancement to make certain that the product is usable even when the CSS or Javascript fail to load. It requires building products that while that may be single page applications running on Angular, React, or Ember continue to be useful applications when the CDN doesn’t connect or the connection is slow. It means setting a performance budget so that we aren’t trying to load 3 megabytes of data to run a blog. Knowing to reduce images, minify scripts, use CDNs to load things faster, and trying your darndest to limit any single page to something that will load in under 4 seconds and be usable.†
Getting back to the disability side of things, recently the DOJ has taken to pushing through that public websites are liable to be accessible to the disabled. There is recent legislation that is forcing airlines to improve their websites. Netflix, Target, H&R Block, and eBay have all been sued by disabled people because their websites weren’t accessible.
You probably have a good idea what a lawsuit brought in federal court would cost your company even before remediation and damages are incurred. Why get sued when you can save money fixing the problems first?
Your competitors haven’t solved this problem yet. Many are in the same boat as you and don’t know where to start.
With over decade of experience in front end development, user experience design, and accessible development I can get you ahead of the curve. Working together we can do a proper assessment of your website in all the major assistive technologies to make certain any deficits are found before you end up in court. With an active assessment done and a remediation plan in place you can resolve many legal actions before they get started.
Once you know where the problems lay, I can work with or train your team on how to resolve those issues bringing your site up to par with WCAG 2.0 AA standards. This is the standard level used by the Canadian, United Kingdom, Australian, and Japanese governments to write their web accessibility legislature. The European Union has used it to craft theirs; and the United States has similar legislation based on WCAG 2.0 AA facing it for a vote.
Contact me to set up a time to discuss your needs so we can set your product or site off as a differentiator in your industry because it is accessible.
† 4 seconds is a magic number that will cause people to think your app is slow. If your customer is using dialup, then a 500kb page will take 1 minute and 13 seconds to download. Sure 3 megabytes is instantaneous on your home cable connection or 4G smartphone, but in the developing world it could be a minute.
Comments closed
