The most recent version of Web Content Accessibility Group (WCAG) criteria for accessibility is 2.1. Version 2.1 mostly adds new criteria to fill in gaps, especially related to mobile devices, low vision users, and people with cognitive and learning disabilities.
Below is a list of the new WCAG criteria most relevant to what we have seen at CU Boulder, as well as to low vision and blind users. Each one contains both a personal story of how the criterion applies to an individual, and the formal WCAG language:
1.3.5 Identify Input Purpose (AA)
Sarah is a screen reader user. When filling out form fields, she stays in forms or focus mode (this link will show you problems related to filling out forms), so she can quickly tab from one input field to the next. Otherwise, the process requires a bunch of extra steps, and it’s tedious. When filling out a form to apply for a scholarship, she finds the input fields are not properly labeled, so her screen reader cannot tell her what should go into the field when she tabs to it. It takes Sarah two or three times longer to complete the application than it would if the input fields were properly labeled.
The following criterion addresses this problem:
The purpose of each input field collecting information about the user can be programmatically determined when:
- The input field serves a purpose identified in the Input Purposes for User Interface Components section; and
- The content is implemented using technologies with support for identifying the expected meaning for form input data.
1.3.6 Identify Purpose (AAA)
Dan is a screen reader user, and he dreads using a site that has videos about chemistry, because the site is full of a ton of helpful resources and information, but it feels like the people creating the site just sort of vomited everything all over the place. He suspects someone looking at the screen gets a sense of organization from color and placement on the screen, but he cannot detect any of that information. However, Dan continues to use the site, because the content is valuable to him. One night when he pulls it up, he notices everything has changed. The markup now includes regions, so his screen reader can convey the information that one segment of the content is main navigation, another is secondary navigation, a third is the main content, and a fourth is for topics of special interest. He also knows what all the icons that his screen reader previously read as “icon” do, including saving content to his own favorite’s folder, locating transcripts, and downloading content. Dan is both able to do more and able to find what he wants more quickly, because the owner properly labeled material such as regions and icons.
The following criterion addresses this problem:
In content implemented using markup languages, the purpose of user interface Components, icons, and regions can be programmatically determined.
1.4.10 Reflow (AA)
Nikki has low vision, and she increases the font in her browser whenever she has to read a lot of text. In her class this semester, they have to read a bunch of content on this one site. Every time she magnifies her screen, the text goes off the screen instead of continuing onto the following line. This means that when she reads a line, she also has to move her cursor to the right to find the end of the line, and then all the way back to the left to find the front of the next line. She can’t always move the cursor perfectly straight, so sometimes the cursor jumps to another line and she has to go back to find her original spot. It is tiring because she cannot simply move her eyes back and forth as she reads. When she’s trying to describe what it’s like to other people, she tells them to imagine reading through a hole cut in a piece of paper, the hole being the part of the screen she can see after it gets magnified. Research that shows people who scroll, like Nikki does, have worse reading comprehension. For all these reasons, Nikki prefers to increase the font in her browser rather than magnifying the full screen. This only works if the website has proper reflow.
The following criterion addresses this problem:
Content can be presented without loss of information or functionality, and without requiring scrolling in two dimensions for:
- Vertical scrolling content at a width equivalent to 320 CSS pixels;
- Horizontal scrolling content at a height equivalent to 256 CSS pixels;
Except for parts of the content which require two-dimensional layout for usage or meaning.
1.4.11 Non-Text Contrast (AA)
Leah has red-green color blindness, along with about 8.5% of the population with Northern European ancestry. She was trying to complete a lab for her genetics class online, but all the buttons to complete tasks were red on a green background. If there was enough contrast between the red buttons and the background, or at least if there was a black outline around the buttons, she’d be able to find the buttons to click. However, the brightness of the green and red are too similar, so they looked identical to Leah. She tried to guess where the invisible buttons were, but she kept clicking on the wrong buttons, and she eventually gave up on trying to get the task done.
The following criterion addresses this problem.
The visual presentation of the following have a contrast ratio of at least 3:1 against adjacent color(s):
- User Interface Components: Visual information used to indicate states and boundaries of user interface components, except for inactive components or where the appearance of the component is determined by the user agent and not modified by the author;
- Graphical Objects: Parts of graphics required to understand the content, except when a particular presentation of graphics is essential to the information being conveyed.
1.4.13 Content on Hover or Focus (AA)
Ethan, a screen magnifier user, needs to navigate through multiple levels of menus on a website where he is trying to buy used textbooks. He moves his cursor to the top level of menus and it works perfectly because the menu item is enlarged, and the next level of menus expands. However, the second level of menus is not enlarged, so he needs to move his cursor to read that area. When he moves his cursor, the first level of the menu closes. He tries to find a place where he can put his cursor and magnify what he wants to read while keeping the menu open, but he cannot find it. In addition, there are photos of each book that you can enlarge by hovering over them so you can see the condition of the book before you purchase it. These images are also close to information about the cost of the book, so Ethan repeatedly accidentally expands the book images when he is trying to look at the cost. The expanded image covers the information he is trying to read. In the end, he gets frustrated and gives up.
The following criterion addresses this problem:
Where receiving and then removing pointer hover or keyboard focus triggers additional content to become visible and then hidden, the following are true:
- Dismissible:A mechanism is available to dismiss the additional content without moving pointer hover or keyboard focus, unless the additional content communicates an input error or does not obscure or replace other content;
- Hoverable:If pointer hover can trigger the additional content, then the pointer can be moved over the additional content without the additional content disappearing;
- Persistent:The additional content remains visible until the hover or focus trigger is removed, the user dismisses it, or its information is no longer valid.
Exception: The visual presentation of the additional content is controlled by the user agent and is not modified by the author.
1.4.12 Text Spacing (AA)
Franklin, a screen magnifier user, always loses track of where he is when he tries to read whole paragraphs of text. Lines and words are usually too close together, so he tries to increase the spacing so it’s easier for him to stay on the right line. Unfortunately, objects or text boxes in content are sometimes fixed, so they don’t move when he creates more space, and end up overlapping or being hidden behind the static objects. When you are reading for a Russian literature class, you don’t want to have to search for the right words in the right order. It’s frustrating when content is designed in a way that doesn’t allow Franklin to increase or adjust the spacing.
The following criterion addresses this problem:
In content implemented using markup languages that support the following text style properties, no loss of content or functionality occurs by setting all of the following and by changing no other style property:
- Line height (line spacing) to at least 1.5 times the font size;
- Spacing following paragraphs to at least 2 times the font size;
- Letter spacing (tracking) to at least 0.12 times the font size;
- Word spacing to at least 0.16 times the font size.
2.1.4 Character Key Shortcuts (A)
Naomi, a screen magnifier user, is editing a video for her Shakespeare class. She has low vision and finds that when she’s editing, it’s easier and faster for her to use shortcut keys whenever possible. Unfortunately, some of the shortcut keys for editing overlap with shortcuts for her screen magnifier, so when she tries to edit a clip, she winds up moving the magnifier to the bottom of the page, and when she tries to begin recording a narration, she increases the magnification. Naomi wishes she could change some of the shortcut keys for the editing app.
The following criterion addresses this problem:
If a keyboard shortcut is implemented in content using only letters (including upper- and lower-case letters), punctuation, number, or symbol characters, then at least one of the following is true:
- Turn off: A mechanism is available to turn the shortcut off;
- Remap: A mechanism is available to remap the shortcut to use one or more non-printable keyboard characters (e.g. Ctrl, Alt, etc.).
- Active only on focus: The keyboard shortcut for a user interface component is only active when that component has focus.
2.3.3 Animation from Interactions
Elijah uses a screen magnifier, but sometimes he wonders if he’d be better off using a screen reader. There are some fancy ways of displaying information in websites that make him feel disoriented. Parallax scrolling is when part of the page moves, while part of it stays in place.
This can be helpful if something like menus are always close by, no matter how far he’s scrolled down the page. But sometimes the menu area takes up so much space when he magnifies the content that it fills the whole screen. Other times, content will move across the page, like this one webpage about astronomy. Little facts would go flying across the page like comets or rockets or something, but animations or other aestetic design elements are only visible if they happen to go through the page area he has magnified", and he couldn’t read them, because he needed them to hold still in the magnified area. He understands why people might like animations, but he really wishes he could turn all that off.
The following criterion addresses this problem
Different View triggered by interaction can be disabled, unless the animation is essential Different View to the functionality or the information being conveyed.
4.1.3 Status Messages (AA)
Maria is a screen reader user, and she uses the web-based version of Gmail for her personal email. There are varieties of notifications that pop up, based on what she is doing, but she only knows what the actual notification is some of the time. When she sends an email, her screen reader will say, “Alert.” She assumes the alert is simply telling her that her email sent, but it would be nice to know, because there is always the chance that there is other information she should know. She has changed the settings to put a 30-second delay between when she hits “send” and when her email actually sends. Unfortunately, she does not know how to actually use that. She wishes the notification would tell her a shortcut key to stop her message from sending. She knows too much information would be problematic too-- for example if her screen reader told her every time something on the page changed, especially if there were an animation or something else constantly updating but she thinks they could do a better job of getting her the important information without overwhelming her with too much.
The following criterion addresses this problem
In content implemented using markup languages, status messages can be programmatically determined through role or properties such that they can be presented to the user by assistive technologies without receiving focus.
Conclusion
WCAG published the 2.0 version of its standards in 2008. There is a lot more we do with digital content in 2019, and we use devices and apps that simply didn’t exist 10 years ago. It is an important development to have added 17 new criteria, not all of which appear above. WCAG 2.1, like 2.0, still does not fully encompass every facet of accessibility, but it is an important authority. CU Boulder—as of the beginning of December 2018 — still has not adopted WCAG 2.1 as an official part of its policy and standards, although that should change in the near future. We hope that the above stories humanize what otherwise dense and formal language obscures about accessibility. In addition, a deliberate emphasis on the experience of low vision users might offer an opportunity to better understand the myriad of ways being low vision impacts people trying to access content.