Designing a More Accessible Mobile Web

When web designer and former-librarian Amy Carney  finished her second round of the online coding bootcamp #100DaysofCode,  she set her sights on a new goal for continuing education: web accessibility. As the publications specialist for the Alaska Division of Libraries, Archives and Museums in Juneau, Alaska, Carney felt it was important to prioritize a culture of accessibility.

“Our mission is to educate people to preserve our history and make that publicly accessible by Alaskans and other people across the world.”

She said switching from coding to accessibility trainings was a “no-brainer,” and blogged about her time-bound journey toward earning a Web Accessibility Specialist Certification. 

Thus, Carney created 100 Days of A11y  as a self-imposed curriculum to challenge herself to learn about specific topics at the intersection of accessibility and web development. She studied accessibility on her own time, while still serving as a digital and print designer. In just over three months, Carney built up a following of people who read along and felt inspired to pursue their own certification.

“Web developers aren’t thinking of themselves as creating barriers,” Carney said. “But they need to be asking themselves what would it be like to be in other people’s shoes.” 

If anything, web developers keep the user experience at the forefront of their problem-solving. In an environment that emphasizes mobile-first design, it’s critical developers think about accessibility first so users aren’t left behind as the web continues to accelerate toward mobile use.

The mobile web has features that enable users to navigate the internet conveniently while on the go, but those features can become challenges for people with various types of developmental and physical disabilities. 

FUNCTION: Some mobile sites and apps are designed for use on small screens that are touch-enabled, but not everyone uses the touch features on a screen. People may still need to use voice commands, keyboards, and mice when navigating the mobile web.

FORM: Different screen sizes and layouts (portrait vs. landscape) are a problem for users when a site isn’t designed responsively.

VARIETY: People might be communicating by voice dictation or using larger font sizes even if they don’t have a disability.

Carney said developers don’t need to be formally certified in order to think about accessibility in their products, but encouraged developers to pursue learning about ways to make the web more inclusive. 

“Try to relate to what it would be like to be missing out on something because of a particular barrier that is set in place,” Carney said. “What would it be like if you couldn’t see the screen or had a hard time hearing the audio?”

The following list is a starting point for developers to include accessibility in their user experience framework and should be something they add to periodically as they gain new understandings of accessibility and web capabilities.

WHAT WOULD IT BE LIKE TO USE A MOUSE OR KEYBOARD? Not everyone uses the touch feature on a touch screen. Make sure keyboard shortcuts, buttons, and links are still functional when navigating manually.

WHAT DOES THE SITE LOOK LIKE ON A DIFFERENT SIZE SCREEN? Test the site on multiple devices to make sure individual elements are responsive and easy to navigate. Check for font size adjustments and zoom features.

HOW WOULD A USER TAB THROUGH THE PAGE? Try navigating the page with multiple types of screen readers. Are the headers and subheads helpful or confusing? Adjust the elements to make it easier for users to skim the content.

ARE THE IMAGES AND MULTIMEDIA RELEVANT TO THE REST OF THE PAGE? Use meaningful descriptions for alternative text. Describe why the image is important, what context it provides, and what a user should take away from the visual.

HOW DOES INCREASED SCROLLING AFFECT THE LAYOUT OF THE WEBSITE? Because mobile devices are small, users have to scroll more times on full-length web pages. Position the important content above the first scroll, and create a hierarchy of information for the content that follows.

Mobile developers should think about accessibility while creating new sites but also test and evaluate the site once it’s live. They should also be retesting for accessibility every time they make updates to the content and features of their products, in the same way they run tests for other aspects of the user experience.

“The culture of accessibility is not just following the letter of the law,” Carney said. “Content is still inaccessible because people are concentrating more on the technical standards and not the reasoning and the audience.”

The average social media user doesn’t think of themselves as a mobile developer, but most people create and publish mobile web content to their social profiles daily.

Sometimes, a user’s followers might need technical assistance to read or understand what the shared post means. To some extent, this can be addressed by using a screen reader or another device, but accessible technology is limited by the content itself. In other words, a screen reader isn’t useful in reading a video that has no captions or transcript.

That means accessibility is everyone’s responsibility on social platforms, especially if they want community members to freely and fairly participate in social media sharing.

Common issues with social media accessibility include  lack of section headings, poor color contrast, inability to navigate using a keyboard only, lack of alternative text for images, video or audio without captions, and text size that is difficult to read.

But this isn’t entirely the fault of social media platforms. Most platforms, including Facebook, Instagram, and YouTube have features that allow users to upload alt text for images and transcripts for audio files.

Though people aren’t legally bound to make sure their individual social media content is accessible, there’s more opportunity for communities to share and process content when it’s available to everyone.

USE MEANINGFUL IMAGE DESCRIPTIONS. Simply stating “girl and a tree” isn’t enough context for alternative text. Try to describe the age, emotion, disposition, and purpose of people or subjects in a visual. Include imagery of their surroundings, the reasons for context, and general takeaways that a visual person would have from looking at the photo.

BE INTENTIONAL WITH EMOJI USE. Choose emojis that enhance the meaning or context of a description. Put them at the end of a sentence, so they don’t disrupt someone who has limited literacy skills or is using a screen reader.

INCLUDE TRANSCRIPTS FOR VIDEO AND AUDIO MEDIA. Make sure all the words are included, along with descriptions of music or ambiance. Some platforms allow users to caption a video as it plays or to post a full transcript below the multimedia player. Doing both helps people with various disabilities and learning styles.

USE TITLE CASE FOR HASHTAGS. When hashtags include phrases or multiple words, capitalizing the first letter of each word makes it easier to read. For example, #SyracuseUniversity is easier to read than #syracuseuniversity.

PLACE HASHTAGS AND USERNAMES AT THE END OF A CAPTION. Use a limited number of hashtags and ensure they are relevant to the content they’re describing. Put them at the end of a sentence, so they don’t disrupt someone who has limited literacy skills or is using a screen reader.

INCLUDE CONTENT WARNINGS FOR SENSITIVE MATERIAL. Graphic images, videos, or text can be alarming to people of all ages and can create a harmful user experience. If a user is navigating a page by skimming from subhead to subhead, they might miss a small content warning placed in a caption. Place warnings at the very beginning of a post to ensure it will be seen by all users and think critically before sharing graphic material online.

OPT FOR INCLUSIVE LANGUAGE. Avoid phrases like “falling on deaf ears,” “turning a blind eye,” and other idioms that put down people with disabilities. The Conscious Style Guide  offers comprehensive best practices on inclusivity.

THESE PRACTICES HELP BUILD A MORE INCLUSIVE WEB FOR EVERYONE. Even people who don’t rely on accessibility accommodations still benefit from using them. For example, people watch videos with captions even when they can hear the audio content. 

“Don’t assume these changes are for just one person,” Carney said. “Give the benefit of the doubt that there’s a bigger audience.”

Librarians can be a source of best practices for accessibility since their roles are already centered around providing access to information.

“Accessibility is a no-brainer for most librarians I’ve encountered because it’s about including people,” Carney said. “It’s making information available to everybody.”

But librarians don’t have to be developers or know how to code in order to provide meaningful support. They can remind people of best practices like including alt text or showing developers how screen readers are used. They can also connect with library visitors to ask about their needs and advocate for more attention to be given to accessibility efforts.

Prioritizing accessibility not only helps include people with disabilities navigate the web more easily, but it also gives them a seat at the table in contributing to the way future accessibility practices are developed.

“Technology has opened the door for them,” Carney said. “And when we end up closing it on them again, it cuts off opportunities for communication.”

Read the rest of the series about web accessibility:

Accessible Design for Classrooms

Getting Familiar with Accessibility Tools