Day 73: Striving for WCAG Level AAA, Part 2

Carrying on from Part 1, today I spent time with the Operable Level AAA criteria. There are a few, I feel, that should be on a lower conformance level, as well as best practice for web designers.

Things I accomplished

  • Read Operable’s Level AAA success criteria on How to Meet WCAG 2 site.
  • Mapped success criteria to failures of those criteria.

What I learned today

There are 12 Level AAA criteria under Operable:

  • 2.1.3 Keyboard (no exception)
  • 2.2.3 No timing
  • 2.2.4 Interruptions
  • 2.2.5 Re-authenticating
  • 2.2.6 Timeouts (new in 2.1)
  • 2.3.2 Three flashes
  • 2.3.3 Animation from interactions (new in 2.1)
  • 2.4.8 Location
  • 2.4.9 Link purpose (link only)
  • 2.4.10 Section headings
  • 2.5.5 Target size (new in 2.1)
  • 2.5.6 Concurrent input mechanisms (new in 2.1)

Examples of Operable Level AAA failures

SC 2.1.3 Keyboard (no exception) Fail: Div element has been scripted to be clickable, but is not identified as a link to assistive technology. This makes custom page navigation more difficult for people who use screen readers or voice input.

SC 2.2.3 No timing Fail: Web app forces a time limit on the user. This can make use of the web app harder for people with cognitive or motor impairments.

SC 2.2.4 Interruptions Fail: User is not given an option to delay or request non-emergency updates. Interruptions can be disorienting for a person who uses a screen reader when their cursor focus is forced elsewhere.

SC 2.2.5 Re-authenticating Fail: Form data is not saved when the user is timed out of a session. This can be frustrating for people who have motor or cognitive impairments.

SC 2.2.6 Timeouts (new in 2.1) Fail: Users are not explicitly warned about data loss due to inactivity time limits.

SC 2.3.2 Three flashes Fail: A video on the page contains three or more flashes in a 1-second period. This can greatly affect people who are prone to seizures.

SC 2.3.3 Animation from interactions (new in 2.1) Fail: Decorative animation that occurs when a user interacts with an element does not have a “reduce motion” option for users to turn it off. Animation can cause nausea for people with vestibular disorders and distraction for people with attention disorders.

Side note: This concept introduced me to the Reduced Motion media query. Before today, I didn’t know that existed!

SC 2.4.8 Location Fail: Users page location within that website is not evident. Breadcrumbs, sitemap, nor highlighted navigation bar has not been provided. This affects people with attention disabilities (as well as everyone else).

My two-cents: This seems like it should be good practice and common courtesy to help everyone find their way around your site. I had no idea it was Level AAA and have considered using breadcrumbs as part of business as usual when I build more pages for large sites.

SC 2.4.9 Link purpose (link only) Fail: Generic and unclear text is provided within hyperlinks. This can be confusing for people who use screen readers and voice input, as well as those with cognitive disabilities.

SC 2.4.10 Section headings Fail: Text-heavy content and instructions are provided on a page without any additional headings to segment sections of text for clarity. This greatly affects people with visual and cognitive disabilities.

Confession: This is a bit of a pet peeve of mine, and I often feel this should be part of best practice for web designers. It especially irritates me when I see lists nested within lists, but not headings are provided to chunk and clarify content areas that are text-rich. Please make your page more navigable for everyone by including section headings.

SC 2.5.5 Target size (new in 2.1) Fail: Interactive buttons and customized links are less than 44×44 pixels. This can make it especially hard for people with motor disabilities to activate the button or link.

Added note: this is already making its way into mobile web app best practice, which is where I was first introduced to this concept. I’m happy to see it considered as an accessibility issue, too.

SC 2.5.6 Concurrent input (new in 2.1) mechanisms Fail: Interactive components on a page restrict input from other input devices other than touch. Therefore, this restricts who uses that page because people of all abilities use their input device (or devices) of choice.

Day 72: Striving for WCAG Level AAA, Part 1

Originally, I thought I was going to do Level AAA conformance in one sitting. Turns out there were 28 additional criteria! To better digest the techniques and failures associated with these criteria, I had to break that reading up into three study sessions, given I spend approximately 1.5 hours a day studying. Not to mention, I find myself falling down a documentation rabbit hole to learn more about points I’m extremely curious about.

Things I accomplished

  • Read Perceivable’s Level AAA success criteria on How to Meet WCAG 2 site.
  • Mapped success criteria to failures of those criteria.

What I learned today

There are 9 Level AAA criteria under Perceivable:

  • 1.2.6 Sign language (prerecorded)
  • 1.2.7 Extended audio (prerecorded)
  • 1.2.8 Media alternative (prerecorded)
  • 1.2.9 Audio-only (live)
  • 1.3.6 Identify purpose
  • 1.4.6 Contrast (enhanced)
  • 1.4.7 Low or no background audio
  • 1.4.8 Visual presentation
  • 1.4.9 Images of text (no exception)

Examples of Perceivable Level AAA failures

SC 1.2.6 Sign language (prerecorded) Fail: Sign language is not provided along with a prerecorded video. This SC benefits deaf who rely on American Sign Language as their first language.

SC 1.2.7 Extended audio (prerecorded) Fail: Movie moves to quickly to accommodate synchronized audio description. Video needs to be extended for substantial audio description. This SC enables blind and visually impaired to better understand what the movie is conveying.

SC 1.2.8 Media alternative (prerecorded) Fail: Full text transcripts of equal experience for a prerecorded video are not provided  This SC benefits people who have a combination of visual and auditory impairments.

Confession: I often confuse captions and transcripts. They are not the same and do not provide the same access to everyone. Ultimately, captions are the bare minimum. Transcripts are more inclusive.

SC 1.2.9 Audio-only (live) Fail: No text alternative, like live captioning, was offered during a live audio performance. This would benefit people with auditory

SC 1.3.6 Identify purpose Fail: Landmarks are not identified across the page. This inhibits the adaptability of the page to meet the needs of those with cognitive disabilities. Related to SC 4.2.1.

SC 1.4.6 Contrast (enhanced) Fail: Contrast of foreground text/images over background does not meet the 7:1 ratio. This enhanced criterion makes it easier for people with low vision or colorblindness to perceive content. Related to SC 1.4.3.

SC 1.4.7 Low or no background audio Fail: An audio track that is embedded on the page that contains a speech with background music doesn’t offer the user the ability to turn off the background music. This criterion is meant to enhance the distinguishability of that speech for people who are hard of hearing.

SC 1.4.8 Visual presentation Fail: Paragraph text is justified. This presents reading challenges to those with reading, cognitive, or visual disabilities.

Confession: I strongly feel that SC 1.4.8 could easily be pushed into Level AA, so more people would strive for better visual presentation for all users, since it strikes me as just good practice and even common courtesy for everyone. I mean, who doesn’t benefit from left-aligned text, greater line spacing, shorter paragraph width, a choice or foreground/background colors, and elimination of horizontal scrolling of text??

SC 1.4.9 Images of text (no exception) Fail: Images of text (not including the brand logo) are present throughout the site. People who zoom or magnify their screen would benefit greatly from the elimination of all images with text. Related to SC 1.4.5.

Off topic but interesting

Today I learned that there are over 120 HTML elements from 4.01 on up to 5.2. Then there are all those attributes to go along with them. This huge inventory just confirms to me that more developers should spend more time with the “basics” of HTML. Some parts of Level AAA could be more achievable (i.e. SC 1.3.6) if people spent more time understanding the building blocks, along with CSS, rather than focusing on the “perfection” of JavaScript and other programming languages to get the front-end job done.

Day 71: How to Fail WCAG Level AA, Part 2

Continuing on from Part 1 with how to pass or fail WCAG Level AA…

Things I accomplished

  • Read Operable, Understandable, and Robust success criteria (Level AA) failure techniques on How to Meet WCAG 2 site.
  • Mapped success criteria to failures of those criteria that I’ve encountered or read about.

What I learned today

There are only 3 additional operable success criteria:

  • 2.4.5 Multiple ways
  • 2.4.6 Headings and labels
  • 2.4.7 Focus visible

There are only 5 additional understandable success criteria:

  • 3.1.2 Language of Parts
  • 3.2.3 Consistent navigation
  • 3.2.4 Consistent identification
  • 3.3.3 Error suggestion
  • 3.3.4 Error prevention (legal, financial, data)

There is only 1 additional robust success criterion, which was added in 2.1:

  • 4.1.3 Status messages (new to 2.1)

Examples that fail base conformance


SC 2.4.5 Multiple ways Fail: Not enough options to explore the website for people who have visual or cognitive disabilities. Provide alternative ways to navigate via search, sitemap, or table of contents.

SC 2.4.6 Headings and labels Fail: No section titles have been provided for a text/content-heavy page. This eases navigation for people with visual, motor, and cognitive impairments (and everyone else).

SC 2.4.7 Focus visible Fail: Focus outline was removed for input controls. This impacts keyboard-only users who need to see their navigation points throughout the page.


SC 3.1.2 Language of Parts Fail: Paragraph and span elements do not contain a lang attribute when a change of language is obviously present. This impacts understanding for anyone, but especially impacts screen reader users and browsers that need explicit identification of document and parts of text language. Related to SC 3.1.1.

SC 3.2.3 Consistent navigation Fail: Global navigation links are not consistent in presentation and order across the website. This can be confusing for anyone, but especially impacts people with cognitive impairments.

SC 3.2.4 Consistent identification Fail: Components with the same function are not consistently labelled across the website, which impairs recognition of similar tasks and functionality. Related to SC 1.1.1 and SC 4.1.2. This can affect people with visual or cognitive impairments.

SC 3.3.3 Error suggestion Fail: No description of required input error is provided client-side nor server-side. Related to SC 3.3.1 and SC 3.3.2. This can affect people with visual or cognitive impairments.

SC 3.3.4 Error prevention (legal, financial, data) Fail: During an online data transaction, the user is not given an opportunity to review, correct, or reverse the form data being submitted. Especially on multi-step forms that requires a few pages, this can affect people with cognitive disabilities.


SC 4.1.3 Status messages (new to 2.1) Fail: A role=”status” was not assigned to a search update that returned x-amount of results. Role needs to be assigned to the status update of how many results found. This can greatly impact visually impaired who use screen readers.

You can quickly find what you need

Last night (in bed, of course), I was thinking about how the WCAG Quick Reference could use some filtering options, like tags, in order to quicken my information discovery. Well, someone was already thinking of this! They have many filters, including WCAG version, tags, conformance levels, techniques, and technologies, set up to help people find what they’re looking for:

Filter tab open revealing options like version, tags, levels, and techniques.

I should have explored this option earlier in my week!

In conclusion

9 more success criteria across three principles is not too much more to ask of designers and developers. To reinforce that idea, I don’t find these nine criteria especially hard to implement.


Day 70: How to Fail WCAG Level AA, Part 1

The last three days I’ve reviewed failures for WCAG Level A within Perceivable, Operable, and Understandable and Robust. Now it’s time to step up our expectations and look out how we’re all fairing at the middle conformance level: Level AA.

Things I accomplished

  • Read through Perceivable success criteria (Level AA) techniques on How to Meet WCAG 2 site.
  • Mapped success criteria to failures.

What I learned today

Within the Perceivable principle, there are 11 additional success criteria to meet Level AA conformance within the latest WCAG recommendation (2.1).

5 SC within WCAG 2.0:

  • 1.2.4 Captions (live)
  • 1.2.5 Audio descriptions (pre-recorded)
  • 1.4.3 Contrast (minimum)
  • 1.4.4 Resize text
  • 1.4.5 Images of text

6 more SC added in WCAG 2.1:

  • 1.3.4 Orientation (new to 2.1)
  • 1.3.5 Identify input purposes (new to 2.1)
  • 1.4.10 Reflow (new to 2.1)
  • 1.4.11 Non-text contrast (new to 2.1)
  • 1.4.12 Text spacing (new to 2.1)
  • 1.4.13 Content on hover or focus (new to 2.1)

Examples that fail base conformance

SC 1.2.4 Captions (live):  In Level A, pre-recorded video with audio required captions. Level AA conformance fails when no open/closed or synchronized text stream is provided with captioning during live synchronized video with audio. This affects people with hearing impairments.

SC 1.2.5 Audio descriptions (pre-recorded): In Level A some sort of alternative (AD or text) needs to be provided for videos. Level AA conformance fails when there is no audio description track provided. This presents a challenge to users who may not be able to see the video.

SC 1.3.4 Orientation (new to 2.1): The user is prevented from using landscape view within a web app that does not essentially need to remain in portrait view. This affects people who magnify the screen and choose to view webpages in landscape.

SC 1.3.5 Identify input purposes (new to 2.1): No input data type or instructions for restricted data input are conveyed to the user. This affects people who use screen readers and some people with cognitive disabilities.

SC 1.4.3 Contrast (minimum): Background color and foreground text color have a contrast ratio of under 4:5:1 which makes it hard for people with visual impairments to perceive.

SC 1.4.4 Resize text: When text is resized within the browser at 200%, text is clipped. This makes reading your text difficult for people with visual impairments.

SC 1.4.5 Images of text: An image with text was used, even though it could have been presented in the same way with true text and use of CSS. This greatly affects people who magnify or zoom into their screen and the image pixelates.

SC 1.4.10 Reflow (new to 2.1): Media queries are absent. Content forces user to scroll horizontally and vertically. This presents a challenge to people who need to enlarge text or zoom into the screen.

SC 1.4.11 Non-text contrast (new to 2.1): Low contrast between text box and its background. No border is present. Like SC 1.4.3, this affects anyone with a visual impairment, including colorblindness.

SC 1.4.12 Text spacing (new to 2.1): Content boxes are restrictive in size and don’t allow for text spacing to be adjusted by the user without text being clipped. This greatly affects people with visual impairments, dyslexia, and cognitive disabilities.

SC 1.4.13 Content on hover or focus (new to 2.1): Custom tooltip is not persistent nor dismissable. This greatly affects people who magnify their screen.

In conclusion

I had to cut the list of Level AA SC in half since there are 20 additional criteria, in total. I’m feeling a little more confident about my organizations efforts to achieve Level AA, and am happy to see that other people are paying attention to color contrast and reflow issues. Pertaining to the Perceivable principle, I don’t think it takes to much effort to step up a level to remove even more barriers for people of all abilities.

Day 69: How to Fail the Bare Minimum of Understandable and Robust

Today I’m concluding Level A conformance evaluation, looking at the Understandable and Robust principles of WCAG.

Things I accomplished

  • Read Understandable and Robust success criteria (Level A) failure techniques on How to Meet WCAG 2 site.
  • Mapped success criteria to failures of those criteria that I’ve encountered or read about.

What I learned today

There are 5 bare minimum (Level A) success criteria recommended by W3C in order for websites to be understandable (readable, predictable). These success criteria are, as follows:

  • 3.1.1 Language of Page
  • 3.2.1 On focus
  • 3.2.2 On input
  • 3.3.1 Error identification
  • 3.3.2 Labels or instructions

There are 2 bare minimum (Level A) success criteria recommended by W3C in order for websites to be robust (compatible for assistive tech and adaptive strategies). These success criteria are, as follows:

  • 4.1.1 Parsing
  • 4.1.2 Name, role, value

When these seven success criteria are met, it enables people of different abilities, no matter what aids they use, to understand and continue using your online content and services.

Examples that fail base conformance

SC 3.1.1 Fail:  A lang attribute is not present on the html element. The language of the web document needs to be explicitly defined for screen readers and browsers.

SC 3.2.1 Fail: Link opens a new tab. This should be avoided if not critical for the user because it can be disorienting to people of all abilities. I still see this a LOT for links, in particular, where no alternative of additional warning text is provided.

SC 3.2.2 Fail:  Form submitted ‘onchange’ rather than allowing the user to submit the form when they were actually done. This impairs people from completing forms accurately and at their own pace.

SC 3.3.1 Fail: No descriptive error text was provided for required fields to help user know why their form was unable to submit.

SC 3.3.2 Fail: No label was associated with an input control by using ‘for’ and ‘id’.

SC 4.1.1 Fail: I’ve recently run across a few of these failures! They usually come down to typos. For instance, if quotes or brackets aren’t closed, or no space is left between attributes, it can create an incomplete picture for assistive technologies and browsers.

SC 4.1.2 Fail: No role, name, or state were provided on a custom component control with a div or span.

In conclusion

Though this evaluation was shorter, I recognized several things I knew to cause accessibility problems, but I didn’t realize how bare minimum they were in this specification and how long they’ve been around (none are new in 2.1). I would be bold enough to say that all of these are easy failures to avoid and come at no real cost to the developer who knows what she’s doing. Now, if you’ll excuse me, I have a few bare minimum things to fix in my code this week…

Tomorrow I’ll start looking at the next level up, which is a common goal for many organizations, including my own. I’ll find out if we’re meeting that goal or not!

Day 65: Identifying A11y Issues for Switch Control Users

About a week ago I learned more about users with motoric disabilities, which is usually who I think of when it comes to switch device use. Today I wanted to focus more on what challenges switch device users may encounter when using websites. My study time ended up turning into review of some things I’d already learned, as well as discovering some new articles and videos about switch access.

I was not able to do any testing myself, since I don’t have any switch devices. On another day, when I’m feeling more adventurous, I’ll dedicate a study session to testing with a Bluetooth keyboard or Android device buttons to simulate the experience.

Things I accomplished

What I learned today

Apple’s Switch Control feature is built over the VoiceOver platform, so that’s how it knows to recognize things like buttons. Point mode allows access to otherwise inaccessible apps by scanning horizontally and vertically (x, y coordinates) to create clickable point. It also gives an alternative for quicker access to focuable elements on a web page, rather than waiting for a page to be parsed and scanned piece by piece.

After learning more about switches and switch control, I can better understand the many switch control settings on my iPhone.

I usually think of switches being used by people with motor disabilities, but there are other people who use it, too. Some people with intellectual or learning disabilities may use a switch because a mouse, keyboard, or game controller is just too complex to use.

Switch access includes devices that can receive input from almost any body part. Actions may include, but are not limited to:

  • sip-puff
  • push
  • pull
  • press
  • blink
  • squeeze
  • twitch

Windows 10 has eye control as a method of switch access. Apple doesn’t have this feature… yet.

Android mobile devices have switch access much like Apple’s feature.

In review of what I learned last week

Restating from my article mentioned at the beginning, designers and developers need to review WCAG’s operable principle for switch control accessibility. It can’t be emphasized enough that if your website is following those guidelines and success criteria, your website will be accessible to switch users and many other users.

What front-end developers can do for switch control users:

  • make the website keyboard accessible so all elements are reachable
  • place key elements above the fold to relieve tedious scrolling
  • allow alternative to advanced gestures, like hover over and drag-and-drop
  • use larger text for readability from a further distance of user between screen
  • avoid time limits or allow user to increase time limit
  • tolerates user error
  • provide alternative navigation methods to skip over lists of links, repetitive sections, and lengthy text
  • offer autocomplete, autofill, or autosave
  • manage off-screen items appropriately (display:none, visibility:hidden when out of view)
  • provide clear focus outlines



Day 63: Practice with JAWS

Back to playing with assistive technology. I wanted to mess around with speech input software, but I started the process and realized that will be a weekend project, due to the learning curve. So I settled on working in JAWS today to continue learning assistive technologies and what experience they provide.

Note: JAWS is really robust and considered top-notch in the screen reader industry. By no means, am I an expert at using JAWS. However, I need more practice with it, since I lean more heavily on NVDA for screen reader testing.

Things I accomplished

What I learned today

JAWS stands for “Job Access With Speech”.

The cursor on the screen blinks REALLY fast when JAWS has been activated.

Some of JAWS basic keyboard commands are very similar to NVDA’s (or vice versa). That was extremely helpful when experimenting with it. That made me happy when thinking about one of my blind friends that recently made the switch from JAWS to NVDA. It likely made her transition a whole lot easier! (now I’ll have to ask her about it)

I used Insert + F3 a lot to move more quickly through a page’s regions and interactive areas. I liked how many options I had on their built-in navigation feature. However, I did accidentally discover a browser difference with Virtual HTML Feature when I switched over to my Firefox window to add notes to this post (colors are funny because my system was in High Contrast Mode at that time).

Firefox with Insert + F3:

JAWS Find dialog window.

IE with Insert + F3:

Virtual HTML Features dialog.

The built in PDF reader in IE didn’t seem to register any regions with the Deque cheatsheet, like NVDA with Firefox did. So I couldn’t quickly navigate between tables within the browser.

I really like how I could sort links by visited, unvisited, tab order or alphabetically! Plus, I could either go to link or activate the link as soon as I found it in this list.

JAWS Links List dialog.

JAWS had a few more customization choices than NVDA:

JAWS Settings Center dialog.

My bad: I inadvertently found a few photos on a site I manage that needs some alternative text because they are not decorative.


Day 62: Identifying A11y Issues for Voice Input Users

Speech input software is an assistive technology and strategy that people use when they have difficulty using a keyboard or mouse. This may include people with motor, visual, or cognitive disabilities. In the 21st century, it’s an excellent alternative for people in all walks of life.

Things I accomplished



What I learned today

Windows 10 has built-in speech recognition?? It sounds like a combination of Cortana and Speech Recognition could be a cheap alternative to Dragon, but I’d need to experiment a bit with both to compare.

Apple has a Dictation feature. So, somewhat like Windows, a combination of Siri and Dictation could be used. I’ve avoided setting up dictation just because of the privacy flag that pops up when it asks permission to connect to an Apple server and learn from your voice over the Internet. Maybe I’m just paranoid and they all actually work that way?

Dragon offers some ARIA support, but it appears to be limited, and should be tested if relying on aria-label, specific roles, etc.

Love this catchphrase from the Web accessibility perspectives video:

“Web accessibility: essential for some, useful for all.”

Challenges that people who use speech recognition software face on the web:

  • carousels that move without a pause button
  • invisible focus indicators
  • mismatched visual order and tab order
  • mismatched linked image with text and alternative text
  • duplicate link text (e.g. Read More) that leads to different places
  • form controls without labels
  • hover only menus (MouseGrid can struggle accessing these)
  • small click targets
  • clickable items that don’t look clickable
  • too many links

Designers and developers should focus on WCAG’s Operable principle. In particular, Navigable guideline’s success criteria would apply here. If many of those success criteria are met with other users in mind, it will definitely be beneficial to speech recognition users, too.

In the past, I haven’t personally been interested in software, like Dragon, yet looking from an accessibility point of view, I’m ready to start testing with speech input technology to better understand how it works and affects people who rely on it when interacting with the web.

Day 61: Identifying A11y Issues for Users Who Magnify Their Screen

Things I accomplished



What I learned today

Windows has a built-in magnifier, as does Apple, but it often isn’t always strong enough or robust to help everyone with low vision. Alternative magnification software includes:

For mobile, I knew Apple phones and tablets had zoom built in, but Android devices have magnification built-in, too.

Apple Watch has a zoom feature (YouTube)!

Trying to learn all things accessibility, I’m constantly having to rediscover keyboard shortcuts:

  • Windows Magnifier: Windows + +
  • Apple Zoom: Option + Cmd + 8


Never assume that two low vision people are alike. Everyone with low vision has their underlying reasons of why they struggle with that disability. The point is to add flexibility for their particular experience with low vision and the strategies they use to access content and services on the web.

Challenges people who enable magnification may encounter on the web:

  • text as images become blurry and pixelated when magnified
  • unclearly marked sections/landmarks can make navigation slow when a user only see a small portion of the screen and they’re trying to differentiate navigation from main content from a footer
  • headings that look too much like paragraph text
  • unclear link text
  • scrolling, flashing, or moving objects (carousels, I’m glaring at you again)
  • drawn out content that doesn’t provide a quick intro or conclusion at the beginning
  • horizontal scrolling
  • page content referred to by it’s position (e.g. “to the right”)
  • meaning is conveyed by color alone
  • forms with fields and labels that are not close together or positioned on one line together

WebAIM’s advice:

“The general rule when designing for low vision is to make everything configurable. If the text is real text, users can enlarge it, change its color, and change the background color. If the layout is in percentages, the screen can be widened or narrowed to meet the user’s needs. Configurability is the key.”

WCAG supports people with low vision through it’s perceivable principle. 15 reasons to consider designing to include low vision users who magnify their screen:

  • 1.1.1 Non-text content (A)
  • 1.3.1 Info and relationships (A)
  • 1.3.3 Sensory characteristics (A)
  • 1.3.4 Orientation (AA)
  • 1.4.1 Use of color (A)
  • 1.4.3 Contrast (minimal) (AA)
  • 1.4.4 Resize text (AA)
  • 1.4.5 Images of text (AA)
  • 1.4.6 Contrast (enhanced) (AAA)
  • 1.4.8 Visual presentation (AAA)
  • 1.4.9 Images of text (no exception) (AAA)
  • 1.4.10 Reflow (AA)
  • 1.4.11 Non-text contrast (AA)
  • 1.4.12 Text spacing (AA)
  • 1.4.13 Content on hover or focus (AA)

Day 60: Identifying A11y Issues for Touch Screen Users

Touch screen accessibility is something I haven’t spent much time thinking on. Maybe not ever, come to think of it. I know that touch screens usually require gestures for interaction (i.e. swiping or tapping), but I hadn’t thought about how that might affect others. I even know about alternative ways to interact with touch screens, like with switch devices, but I’m not all that familiar with the challenges it can bring.

So, today was a significant learning day to figure out how people could potentially be excluded from phone or tablet design or the apps that live on those devices.

Things I accomplished



What I learned today

The first thing that comes to mind when I hear touch screen accessibility are the disadvantages of touch screens for specific disabilities. However, touch screens are actually quite beneficial for other disabilities that make it hard to use a mouse or keyboard.

Things to consider for touch screen accessibility for web design:

  • Sufficiently large touch target sizes, which benefits users with motoric and visual impairments, as well as everyone else [WCAG SC 2.5.5]
  • Simplified layout, generous white space, and intuitive design, which can benefits everyone
  • Allowing different screen orientations (portrait or landscape) to give the user a choice [WCAG SC 1.3.4]
  • Extra considerations for when the screen reader is turned on, since some gestures will change once activated
  • Alternatives for complex gestures must offered [WCAG SC 2.5.1]
  • Custom gesture events must have an alternative method for activation (e.g. clicking a button) [WCAG SC 2.5.6]
  • Motion-activated events (e.g. shaking the device) must have an alternative method for activation (e.g. clicking a button) [WCAG SC 2.5.4]

In short, don’t take away the choice from users and don’t make assumptions of how they use their device. Offer them lots of choices (alternatives for interaction) so they can continue to do what they do.

This list reminds me that not all touch screen device owners use the touch screen. Other interaction methods include voice commands, Bluetooth keyboard, and switch devices. Not all who use the touch screen will touch the device the same way I can. Additionally, not all touch screens receive the same type of touch when it comes to how the screen responds to touch (i.e. hand versus gloved hand or stylus).

Day 59: Identifying A11y Issues for High Contrast Mode Users

Ok, ok… so High Contrast Mode (HCM) isn’t explicitly listed in the WAS Body of Knowledge under the current section I’m in, but it’s an area of testing that is significant to me. I’m interested in seeing how my content looks when it undergoes transformation created by the system. And I wanted to take time to think about what other’s using it may experience and strategies they may have to use when something can’t be seen after that transformation.

Additionally, it’s such a cheap and easy way to test that I like to encourage other designers and developers to use it as well. It is not insignificant to the people who use your sites and might be using HCM or inverted colors.

One last thing I’d like to mention before sharing what I did and learned… I actually like using HCM on Windows. It has improved greatly over the past few years (I didn’t enjoy it when I first tried it). Oddly enough, a Dark Mode feature has been popping up more and more across applications and systems, so that has provided me with an alternative, too. I don’t use HCM on a regular basis, but I’ve used it for relief before in a bright office with bright windows and three bright monitors glaring around me. I experience light sensitivity, so it provides me with a solution to continue working at my computer without contributing to headaches.

Things I accomplished today

What I learned today

Something I always have to look up when I want to test with HCM is the keyboard shortcut to activate it: Left Shift + Left Alt + Print Screen. The same key combination will exit HCM.

Not all of my Windows custom colors come back to life after using High Contrast Mode. Weird.

Invert colors, which is completely different experience to me, on macOS can be activated by Control + Option + Command + 8.

HCM offers some personal customization of colors. I played with it some and settled on the High Contrast #1 preset that offered black background and yellow text. Then I tweaked hyperlink colors to stand out more in my browser (Firefox).

HCM benefits people with visual and cognitive disabilities, as well as people with environmental impairments. Some examples:

  • low vision
  • Irlen syndrome
  • bright environments like outdoors
  • low-light environments

Not surprisingly, WCAG comes into play here: SC 1.4.8 Visual Presentation. Yes, that’s inside the Perceivable principle!

The last point brought home the issue that we can never assume how someone else’s system is set up. Default HCM offers white text on black background. But that doesn’t work for everyone, dependent upon their visual needs and preferences. The best we can do is follow some core principles to enable people to perceive our content:

  • Give focusable items some sort of visual indicator like a border or highlight (we’re doing it for our keyboard users anyway, right?)
  • Don’t use background images to deliver important content
  • Be considerate of foreground and background colors and how they can change drastically, dependent on the user’s system settings
  • Don’t rely on color alone to convey important information
  • Take advantage of the flexibility of SVGs, currentColor, and buttonText
  • Use high contrast icons, even without considering HCM
  • Add or remove backgrounds that affect HCM users
  • Use semantic markup to improve user experience
  • Always manually test with HCM yourself at the beginning of design and end of development

Firefox partially support HCM code, and Chrome doesn’t support it at all. Microsoft supports it though with:

@media (-ms-high-contrast: active) {}

For the most part, I was pleasantly surprised that I had no trouble seeing all components on my screen throughout the Windows system, as well as elements on familiar web pages that I frequent. There were a few exceptions, but at least I knew when things were present, even if I couldn’t see him. Not great for someone new to those sites, though.

Working in a CKEditor today, I discovered they had a neat trick for people using HCM. The editor icons were no longer icons; they were plain text. Kind of neat! Read further ahead to see more of my experience.

More on CKEditor

As I mentioned under “What I learned today”, my HCM encounter with plain text transformation from icons in a CKEditor was a surprise:

CKEditor toolbar with all tool buttons using plain text as labels.

I had to turn off HCM just to remember what I was used to looking at:

CKEditor toolbar with buttons using icons as labels.

Naturally that got my very curious. So, I visited the CKEditor website and dug into their documentation. Indeed, they have they’re own support for HCM. Some one put some thought into it! The same transformation did not happen as I wrote this post in WordPress with their TinyMCE editor.

Day 58: Identifying A11y Issues for Keyboard Users

Through studying WCAG (Guideline 2.1) and other web accessibility documentation and articles, I know that keyboard navigability and interoperability is important for a wide variety of users. Some important ideas to focus on when creating websites and keeping keyboard accessibility in mind:

  • Actionable elements (links, buttons, controls, etc.) must receive focusable via keyboard (WCAG SC 2.1.1);
  • All focusable elements need a visible border or highlight as a focus indicator (WCAG SC 2.4.7);
  • Logical (expected) tabbing order is set up appropriately (WCAG SC 2.4.3);
  • No keyboard traps, like poorly developed modals, have been created (WCAG SC 2.1.2).

The best way to test for keyboard accessibility? Test with a keyboard! It’s one of the easiest and cheapest ways to find out if you’re blocking someone from accessing your content. Critical (yet basic) keys to use:

  • Tab
  • Enter
  • Spacebar
  • Arrow keys
  • Esc

If any of those keys fail you when it comes to expected behavior for controls and navigation, it’s time to start digging into the code and figuring out what’s preventing that expected and conventional behavior.

That being said, I’ve started looking at section two of the WAS Body of Knowledge to fill in any gaps I have about identifying accessibility issues, starting with interoperability and compatibility issues. I’ve had a lot of practice checking for keyboard accessibility due to its simplicity, but I leave no stone unturned when it comes to studying for this exam and making sure I’m not missing more gaps in my web accessibility knowledge.

Things I accomplished

What I learned today

Today I didn’t learn much more on top of what I knew already, since I’ve had a lot of practice checking for keyboard accessibility due to its simplicity. However, I leave no stone unturned when it comes to studying for this exam and making sure I’m not missing more gaps in my web accessibility knowledge. Plus, I’m always eager to take the opportunity to advocate for keyboard testing as a reminder to designers and developers that not everyone uses a mouse and even well-written code can produce a different experience than initially expected.

One thing I did learn:

  • “A common problem for drop-downs used for navigation is that as soon as you arrow down, it automatically selects the first item in the list and goes to a new page.” (Keyboard Access and Visual Focus by W3C) I’ll have to watch out for this one I audit other sites, since I have not created a drop down with that type of behavior yet, myself.

Day 56: Practice with Narrator

Back to exploring more assistive tech, specifically screen readers. Today I experimented for the first time with Narrator, the built-in screen reader for Windows. I was a bit apprehensive at first since it has not been on my priority list to learn, knowing that only a mere 0.3% of desktop screen reader users actually use Narrator, according to WebAIM’s latest Screen Reader Use Survey. However, it’s free and built-in for Windows users (and it’s mentioned in the WAS Body of Knowledge study material), so I’m giving it a chance.

Things I accomplished

What I learned today

  • Turn on Narrator with shortcut keys: Windows (logo) key + Ctrl + Enter.
  • Narrator was finicky with Firefox, my preferred browser, but Edge is recommended as the best web browser when using this screen reader.
  • Narrator has a Developer View (Caps Lock + Shift + F12), which masks the screen, highlighting only the objects and text exposed to Narrator.
  • By default, Narrator presents an outline around the parts of the webpage that it is reading aloud. I found this handy to keep up with where it was at.
  • It has touch gestures. I suppose that makes sense when not all Windows computers are only desktop computers.
  • Accessible documents are important. (I knew this already) I was able to easily navigate between tables on the Deque PDF cheatsheet with the T key because they made it with accessibility in mind.

There is still so much to learn! Jumping between screen reader programs leaves my head spinning with all the shortcut keys I’d need to know. I’ll come back to this screen reader at some point because one hour of use is not enough to get fully comfortable with it. I also need to expand upon my cheatsheet to include more commands/tasks. Currently, it’s just a quick guide to the most frequent tasks I’ve needed.

An Aside: Fun A11y Resource


Day 55: Users with Auditory Disabilities

Auditory disabilities range from different levels of hearing difficulties to deafness, and may even include deaf-blindness. Being inclusive of this group seems fairly straightforward and easy (albeit captioning may require some budgeting).

Things I accomplished

What I learned today

Users that are deaf from birth may have sign language as their first language. Text information on websites can be their second or third language. Icons, illustrations, and images can help enhance clarity of information provided on a website.

In order to include people with auditory disabilities, web designers and developers need to review the WCAG perceivable principle. Effective strategies of accommodation for the hearing impaired include:

  • Providing transcripts and captions alongside any content that has audio;
  • Creating media players that can display captions and offer options to adjust text size and color of those captions;
  • Providing options to stop, pause, and adjust volume of audio content within the customized media player;
  • Posting high-quality foreground audio that is clearly distinguishable from background noise; and
  • Writing text in simple, clear language.

Offering sign language video as an alternative can be a nice-to-have (WCAG SC 1.2.6, Level AAA), but it isn’t always the right solution for every person with a hearing impairment. Though deaf culture is a thing, designers should never assume that every deaf person knows sign language. Additionally, it can be hard to clearly see sign language provided via web video.

It is controversial to use the word disabled in conjunction with a deaf person. Many within that community don’t consider themselves disabled due to the fact that they are thinking and capable people.


Day 54: Users with Motoric Disabilities

More on people with various disabilities. Today’s exploration led me to learn more about people with different motor disabilities. This group may include people with cerebral palsy, multiple sclerosis, quadriplegia, and arthritis.

Things I accomplished

What I learned today

When considering people with motor disabilities, web designers and developers should hold fast to WCAG’s operable principle. Specific important concepts includes creating a usable interface that:

  • is keyboard navigable (this also benefits voice activated software)
  • tolerates user error
  • provides alternative navigation methods to skip over lists of links, repetitive sections, and lengthy text
  • sets important stuff above the fold
  • offers autocomplete, autofill, or autosave
  • enables extended time limits
  • manages off-screen items appropriately (display:none, visibility:hidden when out of view)
  • provides clear focus outlines
  • provides large target (clickable) areas (buttons, links, controls)

There are one-handed keyboards for people with the use of only one hand. Other assistive technologies that can be used by those with more severe paralysis include head wands, mouth sticks, voice recognition software, switch access, and eye-tracking.