12 Steps Towards Better Web Accessibility

A review of my presentation on accessibility at the University of Virginia Library

Providing students, employees, and the general public with the necessary tools to learn and do their jobs is a moral and legal obligation to every organization. Technology that accommodates all users benefits everyone and makes for a better world.

The principle of universal design states that any document, tool, website, or application should be accessible to users regardless of the instrument (visual browser, screen reader, mobile device, slow internet connection, keyboard-only users, etc.).

Organizations benefit from integrating accessibility practices into their business processes and software development. For example, a digitizer at a library may use an OCR to scan newspapers and then a software developer can provide a searchable document then can be read by a screen reader or create a text transcript of the item. Blind users can then hear information that was once only visual. Users with low reading abilities, poor vision, and language barriers would also benefit from this implementation.

Making systems accessible not only ensures equal access to information but as the above example showed, also benefits users without disabilities by allowing them to customize their experiences.

Today, I have highlighted 12 steps towards Universal Design that can be implemented in your organization today. Enjoy!

Webpage Should Be Keyboard Navigable

The default keyboard navigation order must be logical and intuitive. This generally means that it follows the visual flow of the page – left to right, top to bottom (i.e., header first, then main navigation, then maybe page navigation, and finally the footer).

Create Accessible Forms

Instructions, cues, required form fields, field formatting requirements, etc. should be clearly identified. Many users can only use a keyboard to navigate the web. You must ensure that the forms on your website can be completed using only the keyboard. If either client-side or server-side validation detects errors on forms, then the focus should go to the error elements, alerting a screen reader that there are problems with submission, ensuring usable and accessible error recovery

Don’t Use Color Alone to Convey Information

Web pages should be designed so that all information conveyed with color is also available without color. To test this requirement, there are some browser plugins that remove color from web pages.

Validate Your WebPages

The topics listed here cover the majority of web accessibility issues. However, to ensure that your pages comply with ADA/Section 508 Standards, check them with a free web accessibility checker.
Compliance Sheriff

Avoid Using Frames

Frames are not inaccessible to modern screen readers, but they can be disorienting. If you use frames, give each frame a descriptive title attribute value. Keyboard shortcuts allow the
reader to jump quickly between frames, so brief and descriptive titles are a necessity

Make Scanned Content Accessible Using Full-text Search and OCR

Scanned items such as newspapers should have text transcripts available. OCR technology directly converts scanned paper documents that are laser-printed or typewritten files into editable text.

Caption all Videos

Captions are the text versions of the spoken word presented within multimedia. Although captioning is primarily intended for those who cannot hear audio content, it has also been found to help those who can hear the audio content. For example, non-native language speakers can benefit from captions. Captions should be synchronized with the audio in the multimedia.

Provide Text Transcripts

Transcripts allow anyone who cannot access content from web audio or video to read text instead. Transcripts do not have to be verbatim but should contain additional descriptions, explanations, or comments that may be beneficial, such as indications of laughter or an
explosion. Transcripts also allow the content of multimedia to be searchable.

Ensure Javascript is Accessible

Some event handlers are dependent upon the use of a mouse or keyboard. These are called device-dependent event handlers. Other event handlers are device independent and are triggered by
both the mouse and keyboard or by other means. To ensure accessibility, use a device independent event handler (one that works with both the mouse and the keyboard).

Documents Should be Accessible

PDFs and other office application documents should be accessible. Authors
of accessible PDF documents add descriptive alternate text to page elements that are typically presented not as text but only as visual elements, such as graphics, figures, form fields, and links. When screen readers encounter alternate text, they can interpret the element and read its alternate text description aloud.

Alternate Descriptions Should Be Provided for all Photos and Graphics

When you add images (photos, graphics, logos) to your web page, you must also provide “alternative language tag” (ALT) descriptions for each one. Alt tags for space or design images and images that do not provide content should be empty (alt=” “). Screen readers, Braille displays, and other assistive technologies will relay your alternative text to visitors who use such adaptive devices, providing them with a “comparable experience” to that of sighted visitors. Some browsers will display your ALT descriptions when users run their cursors over the image.

Presentation and Structure Need to Be Separate

Some users input their own custom CSS stylesheets to improve readability. To make this possible, the structure (HTML) of our web pages needs to be separate from our styles (CSS). Users should be able to select fonts, color, margins, and size.

Further Information on Accessibility

I encourage everyone, especially web developers to read and reference the following sources.

Guide to Web Accessibility
Mobile Web Best Practices

Comments are closed