Web developers serious about accessible design ensure that all web page and app elements — buttons, links, form controls etc. — are reachable by the tab key on the keyboard.
Why?
Many users are physically unable to use a mouse, and need to navigate through the page using only the keyboard.
How can you test a website or app using only the keyboard?
Here are some common key combinations used when testing keyboard operation of web pages and apps:
Tab – move to the next link, form element or button. Shift+Tab – move to the previous link, form element, or button. Enter – activate the current link or button. Space – check or uncheck a checkbox form element. Will also activate a button that currently has focus. Up/Down arrow keys – move between radio buttons or, in some cases, menu links. Right/Left arrow keys – in some cases, move between menu links or adjust sliders in audio and video plugins. Escape – Close the current modal dialog or dropdown menu and return focus to the element that spawned it.
Great ideas are all around us. You just have to listen.
Case in point: a chance meeting with my neighbor John last week when I was out walking my Black Lab Gracie.
“My vision is not what it used to be, Mary,” John told me as he bent to pet Gracie behind her ears. A retired business executive in his mid-70s, John was diagnosed with diabetes a few years ago, and has been dealing with low vision for the last few months.
According to folks at The Cleveland Clinic, low vision is “vision loss that can’t be corrected with glasses, contacts or surgery. It isn’t blindness as limited sight remains. Low vision can include blind spots, poor night vision and blurry sight. The most common causes are age-related macular degeneration, glaucoma and diabetes.”
John told me he was having a difficult time reading online content…especially product information so he could make informed purchasing decisions. I suggested he give a screen reader such as NVDA or JAWS a try. “Cheez, Mary,” he replied. “I am so ‘old school.’ Every time I try to install something new on my laptop, it messes everything up. A friend of mine has a screen reader, but the voice sounds so monotonous I find it difficult to understand what is being announced. Some people I know have those Alexa gadgets, but, to me, they feel intrusive. I don’t want all this confusing technology in my life.”
So what can be done to help a not-so-technically-savvy Internet user who is in the process of losing his/her sight?
“I just wish I could push a button on a product page and have the content read to me,” John said as he turned to walk back to his house.
Hmmm…interesting.
In his article Voice Content and Usability, product architect and strategist Preston So writes: “There’s one significant problem with screen readers: they’re difficult to use and unremittingly verbose. The visual structures of websites and web navigation don’t translate well to screen readers, sometimes resulting in unwieldy pronouncements that name every manipulable HTML element and announce every formatting change. For many screen reader users, working with web-based interfaces exacts a cognitive toll.”
And remember that conversations mean business. According to Michael McTear, Zoraida Callejas, and David Griol in The Conversational Interface, we start up a conversation because:
– we need something done (such as a transaction), – we want to know something (information of some sort), or – we are social beings and want someone to talk to (conversation for conversation’s sake).
Enter The Talking Web Page for Products
Inspired by John’s wish, I contacted marketing audio pro Frank Pival of Never Alone On Hold, a Washington-state-based company specializing in the scripting and production of on-hold marketing messages. My thought was if an audio message could be professionally produced in a conversational tone, then it can also be embedded as an audio file on a web page so the content could be easily played and understood. Successful human conversation has many nuances: emphasis of certain words, pauses that attract attention and so much more.
“Conveying your content message clearly to customers is imperative in these challenging times,” Frank told me. “Providing a unique economical way your “voice” can be gently amplified over the din of your competitors is the key to continued business success. The on-hold audio messaging concept can certainly work for web page product content. You are providing the user with an easy way to comprehend the product’s info and your call-to-action message. This is something your competition has probably not even considered.”
Hear It for Yourself – Monotone vs. Conversational
As an experiment, I decided to use part of the information from a web page about an e-book I’ve authored called “PDF Accessibility Remediation: How to Fix 40 Common Errors.” You can see the original page here. For this test, I reduced the script to certain sections of the content for a shorter test.
I sent Frank the script and he produced and returned an MP3 file that I could place on the web page using an accessible media player called Able Player, an open-source fully-accessible cross-browser HTML5 media player you can use to embed audio or video within a WordPress page.
I also made an audio recording in MP3 format of the NVDA screen reader announcing the same script I sent to Frank.
Monotone Audio Example: NVDA Screen ReaderThat Also Announces HTML Elements As Part of the Content
Conversational Audio Example by Frank Pival, Never Alone on Hold
Some items to note:
In the NVDA Monotone example, the tone is flat. You can hear the screen reader also announces information about some of the HTML elements it encounters:
1) the words “heading” is announced before a headline is read 2) the phrase “list with four items” is announced before reading the bulleted list items
There are also an announcement glitch on the word PDFs:
3) The word “PDFs” is read as “P-D-F-S”
In the Conversational Audio Example created by Frank, the tone is enthusiastic. The information simply flows and is more easily understandable due to the emphasis on certain words and pauses. There is a clear call the action that attracts the user’s attention.
An Important Review
Yesterday I demoed the Talking Web Page test for John. When he heard the screen reader version of the audio, he was not impressed. But when he heard Frank’s version, John clapped his hands and exclaimed, “Yes, that is what I am talking about! I have no need for your PDF remediation book, Mary, but now I understand what it offers. Such a simple process. And I didn’t have to read a word.”
Give It a Shot
Remember: the senior population is growing. By 2030, people over the age of 65 are predicted to make up 20.6% of the population of the US. Vision loss is by far the most common disability reported by elderly individuals.
If seniors can make use of your products and services, make it easy for them to hear about your offerings via Talking Web pages.
You’ll be outsmarting your competition and increasing your business.
Is your PDF document really technically accessible? Have you checked to see if the PDF/UA identifier has been set? This enables reader applications and assistive technologies to fully process PDF/UA conforming files to maximize accessibility.
By adding the PDF/UA identifier, you are claiming that the PDF document conforms to the structure elements as stated in ISO 14289, the informal name for the International Standard for accessible PDF technology.
NOTE: If PDFs were created in Microsoft Word 2013 for Windows or in any version of Adobe InDesign, you definitely need to add the PDF/UA identifier.
How can you tell if the PDF/UA identifier has been set in a PDF?
Download PAC 3, one of the most comprehensive free testing tools that checks PDF documents for compatibility with the PDF/UA standard. Distributed by the Swiss organization Access for all and only available for Windows, PAC 3 evaluates the failure conditions that should be tested by other software apps. It also includes a screen reader preview tool to check the failure conditions which need to be tested manually.
How to test a PDF for its PDF/UA identifier with PAC 3
3. In the Summary Report, if you see a red X to the left of Metadata, this means the PDF/UA identifier is missing.
4. Click the Results in Detail button
5. On the Report screen, click the arrow to the left of Metadata and Settings, then the arrow to the left of Metadata, then the arrow to the left of PDF/UA Identifier.
If you see a red X to the left of the option PDF/UA identifier missing, this means the PDF/UA identifier needs to be added to the document. You can fix this using Adobe Acrobat DC.
How to add the PDF/UA identifier using Adobe Acrobat DC
1. Open the PDF document in Adobe Acrobat DC.
2. Select More Tools > Print Production > Preflight
3. In the Preflight dialog, be sure PDF Standards is selected from the dropdown.
4. Activate the wrench icon above the list of Preflight checks. This should open the Document info and Metadata settings.
5. Select the Set PDF/UA-1 entry option, then click the Fix button.
6. In the next dialog box, you will need to re-save your file with a different name.
To check to see if the PDF has been updated with the PDF/UA identifier, return to the PAC 3 app.
1. Go back to the PAC 3 app.
2. Click the Upload button to select the revised PDF you want to test.
3. In the Summary Report, if you see a friendly green check mark to the left of Metadata, this mean the PDF/UA identifier is now part of the PDF document.
===
Instant Download!
Whether you have limited experience with the PDF remediation process, are expanding your knowledge on how to remediate PDFs, or simply need a resource that can help remind you how to fix a frustrating error, the info provided in this e-book can help.
Need to count the pages in multiple PDFs without tediously opening each file and counting the pages manually?
Welcome to PDFsam, the free, open source tool designed to help you count PDF pages, as well as split and merge PDF files.
Available for Windows, Mac and Linux, PDFsam allows you to drag and drop multiple PDFs to its interface. The app then generates a spreadsheet-like report on the number of pages and info of each file. You can then copy and paste the report into Excel or other spreadsheet programs.
Whether you have limited experience with the PDF remediation process, are expanding your knowledge on how to remediate PDFs, or simply need a resource that can help remind you how to fix a frustrating error, the info provided in this e-book can help.
Forms are frequently designed so that they submit automatically when the user has filled in all the fields, or when focus leaves the last field.
From an accessibility standpoint, this causes two problems:
1) A disabled user who needs more context may move focus away from the field to the directions on how to fill in the form, or to other text, accidentally submitting the form.
2) With some form elements (such as a select menu), the value of the field changes as each item is navigated with the keyboard, again accidentally submitting the form.
Best Practice
Better to rely on the standard form behavior of the submit button and enter key.
WCAG 2.1: 312 checkpoints covering A, AA and AAA W3 accessibility guidelines Section 508: 15 US federal guidelines covered by 59 accessibility checkpoints
In the Credit Union Times article Credit Unions: Mitigate Risks as ADA Suits Mount, author Tina Orem reports that the “number of credit unions hit with lawsuits in recent weeks over the accessibility of their websites continued to climb into double digits, and experts warned that even more credit unions could become targets if they don’t get up to speed on the issue.”
More from Tina Orem:
“According to the lawsuits, that discrimination includes failing to do things such as embed code that allows screen readers to vocalize descriptions of graphics on websites. Without those efforts, visually impaired users can’t determine what’s on a credit union’s site and in turn can’t browse a site, look for locations, learn about amenities or determine which branch to visit. The complaints also claimed the credit unions’ sites contained redundant links that created repetition for screen readers and were missing form labels.”
WCAG 2.1: 118 checkpoints covering A, AA and AAA W3 accessibility guidelines Section 508: 15 US federal guidelines covered by 55 accessibility checkpoints
Funkify is a plugin for Chrome that helps you experience the web and interfaces through the eyes of extreme users with different abilities and disabilities.
The free demo version helps web developers, designers and content creators experience the web through the eyes of people with different abilities:
Blurry Bianca – Experience blurry vision through a foggy filter.
Dyslexia Dani – Scramble letters and make them dance.
Trembling Trevor – Lose some control of your mouse pointer.
Tunnel Toby – Simulate partial vision loss on your screen.
Color Carl – Manipulate colors with different filters.
Elderly Ellen – Try both lowered vision and trembling hands.
Sunshine Sue – Simulate sunshine on your screen
Funkify is created by a team of usability and accessibility experts in Sweden. The project is financed by The Swedish Post and Telecom Authority (Post och telestyrelsen, PTS).
WCAG 2.1: 118 checkpoints covering A, AA and AAA W3 accessibility guidelines Section 508: 15 US federal guidelines covered by 55 accessibility checkpoints