A Page Taking Too Long to Load

When you go on a site and you are waiting to see the page and nothing happens. As you sit there and wait for it to appear, you might see some sort of indicator that the page is loading. When someone is using assistive technologies, they are waiting without seeing the wait indicator. We are in the 21st century and there is an expectation that when we visit a page, we will be able to view it right away. There are several reasons for pages taking a long time to load due to image size or errors.

There is an option in HTML to alert screen reader users the way that sighted users are notified with an indicator.

The moment the element finishes loading, the screen reader should be alerted. If the element was already in the original source code when the page loaded, the screen reader will announce the error immediately after announcing the page title. You always want to orient the user as to where they are and what they are doing. Any alert or indicator is good for them to experience.

Poor Content Layout

Poor content layout is often times due to out-of-place hierarchy. In Chapter 2, we discussed the importance of hierarchy when it comes to layout and accessibility. Proper hierarchy allows your users to scan the page in a logical way. In Figure 3-2, we see a page of imagery with large text. The focus is on the larger text and the real message is with the smaller text. Figure 3-2 reads “Poor Content Layout” as the larger text and “Pay attention to hierarchy” as the smaller text.

We want to provide users with an opportunity to explore our content but in the way in which is guided by the design. Set up what is next for users in a way that aligns with their expectations.

Pop-ups

Beloved pop-ups! I have designed many pop-up (otherwise known as modals) during my time as a designer. A lot of businesses feel they are good for the collection of emails and the numbers don’t lie! People engage with them. Out of everyone I asked, no one likes pop-ups and yet we still use them.

The annoyance with pop-ups is that they interrupt whatever we were about to do. When asked about the biggest pain point people experience, “not being able to close the pop-up” was a high on their list.

There are options to improve this experience overall. One way is to ensure that you are providing the right affordances to allow the user to close the pop-up once it appears. Another way is to use proper color contrast so users can distinguish between the background and the foreground.

When it comes to code, there are several options as well. One of them is to manage focus for the user. To restrict focus to just the modal dialog, you will need to use JavaScript to put focus on the dialog container (i.e., the <article> element) and then force focus back onto the dialog if the focus leaves.

Too Much Text

Too much text can be annoying because you may feel overwhelmed. For instance, when people with dyslexia² view too much text, they may not be able to distinguish between the letters. One way to alleviate too much text is referring back to hierarchy and page layout.

Ensuring that you use a proper layout that is understandable can help people move through the content. Breaking the content into different pages and not putting everything on one page is another solution.

In the end, you want the individuals using your product to complete their goals so that you, as a business, can continue to grow.

Uncertainty Related to Buttons and Links

When it comes to buttons or links, sometimes they are understandable and sometimes they are not, and when they are not, it can be frustrating. It can also mean that a task is impossible for some to complete if they are using assistive technology and things are not clear. Figure 3-3 shows what a button is vs. a link. Not only is this important to sighted users to distinguish, it is also critical for assistive technologies to know the difference so that the individual can know what to do next.

When there is a call to action and the individual needs to make a choice, you want to make that as clear as possible for them.

Autoplay

Autoplay can also be called making things impossible.

Saved the best for last: Autoplay is when videos play on their own without the individual having any control over the start and stop. Figure 3-4 shows some tweets of how people feel about Netflix’s autoplay.

Not only is autoplay an issue when it comes to videos, it also happens with music. This is an issue for so many reasons including the fact that videos and flashes can trigger seizures in individuals as well as cause panic and anxiety when sound is suddenly blared loudly. Not only is autoplay annoying, it can be dangerous.

In the world of balancing business needs and user goals, it is important to remember that happy individuals will engage more with your businesses, and when they are not happy they will let you know it. As creators, we have a responsibility to the business and the individual. When we make things less annoying, we actually make them more accessible and ultimately we want individuals to have delightful experiences.

WCAG 2.1 criteria 1.4.2 Audio Control⁴ states: “Success Criterion 1.4.2 Audio Control (Level A): If any audio on a Web page plays automatically for more than 3 seconds, either a mechanism is available to pause or stop the audio, or a mechanism is available to control audio volume independently from the overall system volume level.”

Case Study: Manipulative (Dark) Patterns

Manipulative patterns, also known as dark patterns, are designed to manipulate us into getting users to do something that they might not have intended to do or stay on with a subscription when they really want to unsubscribe. Figure 3-5 shows unsubscribe options a user may have with an option to “unsubscribe to all”; notice how the option is not underlined so there is no indicator you could tap or click.

WTF—what is the focus? We don’t really know what we should choose. This example is meant to deceive the user and keep them subscribed to email and newsletters.

Case Study: From ABC Science

There is nothing better than a first-person account of a scenario. This case study from ABC science tells Dr. Scott Hollier’s experience with manipulative (dark) patterns. Dr. Hollier is legally blind. The case study expresses the importance of how designs can be made for ease of use or can cause friction.

Scott Hollier logged into an online portal recently and was immediately faced with a familiar yet irritating Internet question: “How many of these pictures include buses?”

CAPTCHA security tests, or the “Completely Automated Public Turing Test to Tell Computers and Humans Apart,” are not always accessible to people with disabilities—sometimes putting them, ridiculously, in the “robot” category (Figure 3-6).

“I had two choices,” said Dr. Hollier, a digital access specialist who is legally blind.

“I could either not do what I needed to do for my work or I could ask my 11-year-old son to come figure it out for me.”

These moments of friction or “encoded inhospitality,” as accessibility advocate Chancey Fleet has put it, block nonvisual access to everyday digital interactions.

She also calls them “dark patterns”—a term popularized by British user-experience consultant Harry Brignull, which describes online techniques that manipulate users. A completely fake online countdown, for example.

Ms. Fleet said that while most conversations about dark patterns focus on design choices that nudge, deceive, and distract, the concept should extend to “inhospitable design features arising from inattention, neglect, and false assumptions about the capabilities and desires of disabled people.”

For people who are blind or vision impaired, such roadblocks can “come and go without documentation, explanation or apology,” she wrote in an email.

“Dark Patterns” Everywhere

Like asking your son to help you get past CAPTCHA, the onus is often on people who have a disability to use workarounds when they encounter “dark patterns” online.

If not, accounts are not set up, purchases are not made and full participation in the online economy and conversation is elided.

Think of navigating a football ticket purchase with a screen reader that converts text to audio or braille only to have the web page time out because you took longer than the allotted 8 minutes.

Dr. Hollier has taken on CAPTCHA in particular, writing advice for the World Wide Web Consortium that offers alternative methods for web site designers that are less exclusionary.

“The oldest CAPTCHA is the one with the squiggly letters, which are almost impossible to read under the best of circumstances,” Dr. Hollier said.

“And understandably, people who are blind can’t do those ones either. And the audio CAPTCHAs are terrible as well.”

Web accessibility consultant Mark Muscat said webform instructions can also be problematic—interactive calendars can be needlessly difficult to navigate, for example, when picking a date for a flight or a move.

It’s also just bad for business. “If people can’t use a website within...30 seconds, they’re going to go look somewhere else,” he said.

While many online services have accessibility features, they’re not always implemented by default—another dark pattern, in Ms. Fleet’s view.

Figure 3-7 shows a screenshot of the Accessibility window on Twitter.

Take Twitter, which offers the ability to add image descriptions so that they will be included by screen readers. But the option is buried in its settings and not turned on by default.

“This dark pattern profoundly limits the ability of blind people to perceive and engage with memes, infographics, and photos that express identity, affect, and aesthetic experience,” Ms. Fleet said.

Slowly, solutions do emerge. Google, for example, has introduced ReCAPTCHA, which attempts to determine human vs. bot based on the user’s recent online interactions rather than making them click on pictures.

Who Makes the Rules?

Dr. Hollier looks at accessibility from two perspectives: Can people with disabilities access assistive technologies such as screen readers on the devices of their choice, and is online content accessible?

“What’s been exciting in recent years is that whether we’re talking Windows or iPhone, iPad or Android, or a Mac, accessibility features are largely built in,” he said.

Ensuring content is accessible across desktops, laptops, tablets, and mobile devices, however, remains a challenge.

The Web Content Accessibility Guidelines 2.1 (WCAG 2.1) is an international standard, with recommendations that Dr Hollier said would address many of the digital “dark patterns.”

He suggested moving Australian web sites and apps to WCAG 2.1 should be a priority.

Another challenge raised by Dr. Hollier is that Australia’s Disability Discrimination Act, which was first passed in 1992, is not explicit enough about technological accessibility.

Issues of equal access to online information and services were raised in a landmark case brought by Bruce Maguire against the Sydney Organising Committee for the Olympic Games in 2000.

The committee was found to have unlawfully discriminated against Mr. Maguire, who is blind, for failing to provide a web site which was accessible, among other issues.

Dr. Ben Gauntlett, Australia’s Disability Discrimination Commissioner, acknowledged the law was drafted at a time when most computer technologies were not prevalent.

“There is a critical need for us to assess whether the Disability Discrimination Act is fit for purpose in relation to new technology,” he said.

“All service providers in Australia need to realize that there are a lot of people from a diverse range of backgrounds who use their services.”