Readily Achievable Web Accessibility Solutions

At some point in our lives, we will all benefit from greater web accessibility. What is web accessibility? It is the inclusive practice of removing barriers that prevent interaction with, or access to websites, by people with disabilities. Whether you experience a temporary disability such as a broken arm, you find yourself in environments that require greater contrast (consider the challenge of reading small text from a small smartphone outside on a sunny day), or you experience a reduction in fine motor skills or hearing and vision loss with age, web accessibility benefits everyone. Improving online accessibility also significantly improves search engine optimization (SEO) and ease of use.

Achieving Greater Web Accessibility: A Journey, Not a Destination

A frequent reaction from people beginning the path to greater web accessibility is an expectation that all aspects of web accessibility need to be tackled all at once. There is undoubtedly a learning curve involved. Developing a strategic roadmap plays a crucial part in an organization's ability to achieving greater accessibility, which include defining specific roles and responsibilities, realistic target dates, and concrete goals and objectives. Organizations are often uncertain exactly what to tackle first when integrating greater web accessibility. Addressing the “low hanging fruit” of web accessibility early on is one highly effective approach, since these easily achievable fixes are typically not as time-intensive, they significantly improve the overall web experience for people with disabilities, and allow organizations and their employees to experience immediate benefits.

Seven Easy Fixes For a More Accessible Website Experience

Websites vary significantly in their level of complexity, size, and features. The 7 areas being addressed in this newsletter and accompanying video will serve as an effective starting point to improving web accessibility. Each one of the 7 areas include links to additional resources and information for implementing the changes. These 7 areas, among many others, are referenced in Web Content Accessibility Guidelines (WCAG 2.0), an internationally recognized set of web accessibility standards.

Video Demonstration: Web Accessibility in Action

Watch a close-captioned real-time demonstration of how a screen reader accesses accessible and inaccessible web pages.

1. Color Contrast

Simply put, color contrast is defined as the difference between 2 colors, typically the foreground and background colors in this case. Improving color contrast between text and background colors benefits everyone, and it is especially important for people with color blindness and visual impairments that require higher contrast. The Web Content Accessibility Guidelines (WCAG 2.0), an internationally recognized set of guidelines, requires a contrast ratio of 4.5:1 for normal-size text and 3:1 for large text. For additional information on this topic, visit: Contrast Ratio.

Several free tools also exist that allow a person to quickly determine the level of contrast between text and background colors. One such tool is the Colour Contrast Analyzer by the Paciello Group.

2. Alternative Text (Alt Text)

Applying alternative text to images, including the logo and any images that convey meaningful information and functionality, allows people who are blind and rely on screen readers to better understand and navigate through the contents of a page. Images that convey meaningful information or function require the (alt=) attribute. For example, an image of a magnifying glass representing a search field could be coded as (alt=search). The text should be functional and provide an equivalent user experience, while being brief and descriptive. The alt text should typically not exceed more than 120 characters. Images that are decorative in nature and provide no other function or value other than aesthetics should be hidden from screen readers by using the (alt=””) tag.

Several tools exist that allow you to quickly determine if alt tags have been applied to images, and what existing alt tags are labeled as. One such tool is the WAVE web accessibility evaluation tool by WebAIM: WAVE Evaluation Tool.

For additional information related to WCAG’s success criteria of images of text, visit: Images of Text.

3. Effectively Labeled Links

Several assistive technology applications such as screen readers have the ability to generate a list of links on a web page in a separate window or dialog box, which allows people who are blind to quickly and easily explore all available links on a page. Meaningful link text is also beneficial for people who choose to tab from link to link. The importance of effectively labeled links can easily be overlooked. For example, “Read More” and “Click Here” are commonly used link text used on many websites, and they make perfect sense when visually in the context of their surrounding text and images. However, when a person who is blind accesses these same links using a screen reader, they are contextually meaningless since the links provide no indication of what they refer to. Providing further context such as “Read More About Accessibility,” for example, provides immediate context, and also improves search engine optimization (SEO). For additional information, visit: Links and Hypertext.

4. Effective Use of Headings

Web pages often have sections of information separated by large, bold text that act as headings visually. Headings are also frequently used for stylizing the page, which would be better done using CSS. People who are blind are therefore not provided with the same hierarchical structure of the page that the visual layout represents. Effectively marked up headings are one of the critical methods by which a person who is blind navigates a web page. Text that is formatted by increasing its size and making it bold should never be considered a true heading. Headings in HTML (<H1>, <H2>, <H3>, etc.) should be used to describe structure, not to stylize a particular caption for a block of text. This common error often results in misdirection for users who rely on assistive technology to access a site. For additional information, visit: Headings.

5. Keyboard Access

Keyboard access is essential, since it allows people who rely exclusively on the keyboard rather than a mouse to effectively access the Internet. This includes people who are blind, and people who have loss of motor skills. When a website is keyboard accessible, it also benefits people who rely on on-screen keyboards or who control the computer through speech, since this input method mirrors the functionality of keyboard access. One method to test for keyboard access is to simply use the “Tab” key to navigate through the links and elements on the page such as form fields, buttons and media player controls. The Tab order should follow the logical reading order of the page (left to right, top to bottom). It is also important to consider incorporating keyboard equivalents for all mouse functionality. For example, if you are able to access individual links from a drop-down menu using a mouse, that same functionality should also exist when using the keyboard. Navigating through the page using the “Tab” key should also not create any keyboard traps (elements that cannot be ‘tabbed’ out of after receiving the focus of attention). For additional information on achieving keyboard accessibility, visit: Keyboard Accessibility.

6. Visual Focus

Closely tied to keyboard access is visual focus, which allows you to visually determine the component or section of the page that has the focus of attention. This is essential for people using the keyboard to navigate the page. It is also important for people with short-term memory limitations, or limitations in executive processes, since they have the added benefit of being able to visually recognize where the focus is located on a web page. For information on achieving visual focus, visit: Providing Visible Focus for Keyboard Users.

7. Page Titled

Page titles are particularly important for orientation, since they allow a person to know the specific page that has the focus of attention as they navigate within, and between, multiple web pages within a browser. Effectively labeled page titles are important to users who are blind, since the first piece of information that screen readers access and announce on a web page is the page title. People with cognitive disabilities, which include short-term memory and reading disabilities, also benefit. For additional information on creating accessible page titles, visit: Page Titles.

A Good Place to Start

The 7 areas covered in this newsletter are a good place to start. There are many online resources available that provide additional information on web accessibility. W3C’s Web Accessibility Initiative (WAI) has recently published a set of resources that specifically targets web designers, writers, and developers called Tips for Getting Started with Web Accessibility. AccessGA also provides an extensive list of resources and information related to web accessibility, including archived newsletters, webinars, and online publications. Visit us at: www.accessga.org.

Webinar: Georgia Tech's Free ICT Accessibility MOOC

May 25, 2016: 11:00am – 12:00pm (EST)
Overview: AMAC Accessibility Solutions & Research Center at Georgia Tech has dedicated their expertise and resources to develop a MOOC that focuses specifically on Information and Communication Technology (ICT) Accessibility. In collaboration with G3iCT and Georgia Tech, the course is now available on the edX platform. In this introductory course, you will learn how to measure your organization's ICT accessibility needs and assess the importance of maintaining an inclusive workplace for both employees and customers with disabilities. This 6-week course consists of modules detailing some of the primary ICT accessibility obstacles facing organizations today.
Registration Link: Georgia Tech's Free ICT Accessibility MOOC.

Related to: 

• Accessibility