Preparing for New Web Accessibility Requirements

Getting started with web accessibility improvements can feel over­whelming. The ultimate goal should be a website that maximizes accessibility and considers inclusive access in all decisions. But even incremental improvements have real benefits.

A good approach is to look at the most high-impact changes you can make early in the process to improve accessi­bility for users, even if the entire site is not fully accessible. The following sections outline several changes that can have a significant impact without requiring the wholesale redesign of a website.

Structural elements

Structuring digital content clearly can improve accessibility, usability, and readability. While almost all HTML tags contribute to the structure of a page, heading tags are the key.

Heading tags range from level one, which represents the highest-level content, to level six, which represents the lowest level of content. In many content management systems, each level is assigned a different style, such as a different font, text size, or color, which tempts web designers to use these headings aesthetically rather than to reflect the relative structure of the content. But this practice can be confusing for users of assistive technologies.

This is because many assistive technologies enable users to approximate the experience of skimming a page by skipping from heading to heading to first understand an outline of the information before selecting the section relevant to their needs. Without clear and concise headings that allow users to understand the information contained in each section of the page, screen-reader users have limited options beyond having the entire page read to them, in order, from start to finish, which can significantly slow their navigation.

Readability

Creating easy-to-read content using plain language improves both accessibility and usability. A few useful guidelines:

• Organize content logically, using headings and lists as appropriate, and structuring information from more general to more specific.
• Use common words and avoid jargon, abbreviations, and other specialized or complicated language.
• Keep content concise.
• Use the active voice and present tense wherever possible.
• Evaluate all text for readability, including reading level, font selection, font size, color contrast with the background, and white space on the page.
• Know your audience and write with that audience in mind.

Alt text

To make photos, graphics, and other static visual content and images accessible to those using screen readers or other assistive technologies, most visual items need alternative text—often abbreviated as alt text—included as part of the HTML image tag. Alt text is a concise description of an image used to convey the nature and content of that image. When a screen reader encounters alt text, it reads the text aloud, enabling the user to understand the content of the image.

Alt text must convey the information that the visual item is providing to users. It should also be as brief as possible, which causes a clear tension. One useful technique is to cut out extraneous words. For example, it isn’t necessary to start alt text with “Picture of” or similar text.

Another approach: Focus on the purpose for which the item is being shared. For instance, the painting Self-Portrait with a Straw Hat by Vincent van Gogh might be presented as a depiction of Van Gogh’s appearance, to demonstrate his use of color, or to show other technical elements of his approach to painting. For each of these uses, the image could have different alt text that empha­sizes those specific elements, rather than attempting to describe all aspects of the piece equally.

Alt text is critical for other visual content that may otherwise be invisible to assistive technologies, such as icons and buttons. The social media icons included in many websites’ footers, for example, often lack meaningful alt text, which can make them inaccessible to many users.

It is important to make sure that alt text does not merely repeat other content that is accessible to assistive technology, such as the caption for an image or the surrounding text. Otherwise, a screen reader might read the same text multiple times consecutively, which is both inefficient and potentially confusing for users.

In limited cases where an image is purely decora­tive, such as a logo that repeats the title of the page, it is permissible to leave the alt text empty. This will render the image invisible to assistive technologies, and a screen reader will simply skip over the image when reading the content of a page.

Color use and contrast

Color provides a lot of information. It can develop brand associa­tions, convey information about the success or failure of specific actions, and draw attention to specific content, among many other uses. But when color is used without consideration of accessibility, it can create barriers to use for those with color vision deficiency (often referred to as color blindness) or low vision, and for those using certain types of assistive technologies.

Avoid using color as the sole means of conveying information. For example, interactive components of websites often display error messages in red. That information should also be conveyed in another way, such as text that explains the problem. Another common example is the practice of making links a different color from the rest of the text. Using color as the sole means to indicate that a specific piece of text is a clickable link can be inaccessible to users who have difficulty perceiving differences in color, particularly when the link is not also underlined. Data visual­izations and other graphics often also use color to convey information, but they should not rely solely on color. Text labels and patterns are often effective secondary approaches.

Another important aspect of color use is contrast between the colors. When there is insufficient contrast between two adjacent colors, such as between text and its background, it may be difficult or impossible for users to read the text. Many accessibility testing tools offer automated checks to confirm whether the contrast meets the standards set forth by WCAG.

Accessible links

How many times have you noticed a “click here” link on a website? Many web content creators use that phrase multiple times on the same page, since it is a call for the specific action they want users to take. However, these links are not optimized for accessibility. Many assistive technologies allow users to skip directly to the links on the page. Screen readers will read the text associated with each link to the user, but if all the links say “click here,” there is no way for the user to know which link to select. Also bad is when the URL itself is the link text, which will cause the screen reader to read each character in a potentially cumbersome URL.

The best practice is to use link text that clearly states where the link will take the user. For example, the link could be the entire phrase “visit our interlibrary loan page.” It is also important that each link’s text is unique (unless both links direct users to the same location and there is a compelling reason to use the link twice on the same page), so it is easy to differentiate between them.

Where links open

Some designers opt to have links open in a new tab or window when clicked. For both good accessibility and good usability, links should open in the same tab for several reasons:

• For users who are blind or have low vision, new windows may make navigation more difficult, particularly when going back to the previous page.
• For users with mobility disabilities, it may be more difficult to navigate between windows and tabs.
• For users with cognitive disabilities, it may be more confusing and disorienting.

While opening content in new tabs or windows should be limited, WCAG guidance does acknowledge that it may be better to default to a new tab or window in specific, limited situations where the functionality of the content in ques­tion requires it, such as situations where linking from secure content to outside content would otherwise log a user out of the platform, or situa­tions where failure to do so will “significantly disrupt a multistep workflow.” In all other situations, the default should be to open links in the same window and tab, while allowing users to decide for themselves if they wish to override this default.

Proper use of tables

HTML tables should not be used as a means of spacing content on the site for aesthetic purposes. Assistive technologies will not navigate information in tables the way they might be expected based on the visual layout of the content.

Tables can be used for information that is tabular in nature, such as data, but they must be properly labeled. Each row and column should have a clear header that is tagged as such in HTML. This allows those using screen readers to have these headers read aloud so that the users have context about the relationship between the columns and rows and the data.

Providing customization where possible

Allowing for flexible use and the ability to customize site properties and features is almost always a quick way to improve accessibility. Whenever this flexibility can be added to a website, it will help more people access the content and make the process more usable for everyone. A perfect example is implementing a dark mode option, which offers a dark background with light text rather than a white or light background with dark text. This improves accessibility for some users with disabilities, but not all.

A best practice for dark mode and many other design choices is to allow users to easily select which mode they prefer. Flexibility is key.

What about accessibility overlays?

In the last several years, new auto­mated tools, commonly referred to as overlays or widgets, have emerged. These tools claim to solve accessibility issues without the need to edit the under­lying code for accessibility.

Many of these tools provide accessibility options through a pop-up on the screen showing options that users can select from. As these tools have emerged, they have frequently been used as a stopgap solution while websites undergo remediation.

Now, accessibility overlays are increasingly being marketed as a permanent solution to both legal compliance and actual accessibility. This may not be the case. When WebAIM, a web accessibility-focused nonprofit affiliated with University of Utah in Salt Lake City, surveyed web accessibility practitioners about the effectiveness of overlays, it found that “a strong majority (67%) of respondents rate these tools as not at all or not very effective. Respon­dents with disabilities were even less favorable, with 72% rating them not at all or not very effective, and only 2.4% rating them as very effective.”

It is possible that a day will come when this technology has advanced to the point that it can solve accessibility concerns without human inter­vention. But for now, accessibility overlays are best used as a temporary piece of a larger web accessibility strategy.

Prioritizing workflows

Whether starting a new project or evaluating an existing website, accessibility should be built into all aspects of the workflow. This can be a difficult proposition, but there are ways to incorporate accessibility considerations step by step. These steps can maximize your initial impact and help get the process started:

• Revisions that address feedback about specific barriers users have reported are a good place to start.
• Testing your content with a combination of automated accessibility testing tools and actual assistive technologies will identify major barriers.
• While user data may not provide a perfect picture of what your users need, it is a good way to make some initial decisions about priority. Start with your most popular content and move on from there.
• Focus on information that is more likely to be used by users of assistive technologies, such as pages with accessibility information. Feedback forms should also be a priority so you can collect information about accessibility problems.
• Make sure that accessibility is a priority going forward. Training everyone who edits new digital content on accessibility best practices will prevent new problems from emerging.

User testing

Ideally, efforts to learn from users should go beyond passively collecting feedback. One great way to gather this information is by conducting user experience tests. Even at libraries that have user experience testing programs, individuals with disabilities are frequently underrepresented in the testing populations.

When recruiting participants for these tests, it is important to intentionally build a testing community that is representative of your wider community. To most effectively reach individuals with disabilities, some libraries have found it is useful to partner with other groups, such as disability services offices or student groups for academic libraries, to conduct outreach. For public libraries, outreach might instead focus on local groups run by and for individuals with disabilities.

The testing process should be designed to be both accessible and inclusive. Supporting remote user experience testing can be an effective step. By allowing users to participate from their own workspace, it is possible to learn how users naturally use the site. Include inter­view questions that collect information about the exact technologies the user is using. This should include assistive technologies and also information on the type of device being used, the operating system it runs on, and any peripherals being used.

It is also important to design tests that will be accessible, which can involve many different aspects of the design. For example, jargon can create issues for all users but may be particularly exclusionary for those with learning disabilities. More generally, building flexibility into both the testing environment and the test protocol is key to successfully running inclusive user testing programs, as many researchers have noted. These steps will help to ensure that your user experience testing gathers authentic and meaningful data from a representative group of your users.