A website that is designed to be accessible considers the diversity of visitors as well as the web enabled devices in use. This includes visitors who may be using a variety of web browsers, text only browsers, devices using braille writers, speech readers as well as smartphones, iPads and other devices.
The key building block for all websites is Know Your Audience. For instance, if you know your viewing audience will include a high percentage of people who are blind, or people using slow Internet connections, or children, or government agencies - then design and build with their needs in mind.
The next step is to build a semantically correct website by using HTML and CSS to separate presentation from structure.
Following is a selection of issues to be considered when creating a website with the intent of promoting a high degree of accessibility and usability.
The W3C is the benchmark to authenticity in the Internet world. A site that has been built using well formed HTML and CSS and validates using the w3.org validation tool, will be accessible to almost everyone, regardless of the device, browser or assistive technology they are using to access the Internet.
All websites developed by MasseyNet.com, Inc. are built to validate at their stated doc type.
Good design dictates consistency and offers ease of navigation. For instance, placing a navigational bar in the form of text links at the same place on every page makes a site more easily navigated and accessible. When using images as a navigational aid, always offer a text list of the links.
Usability testing is valuable and there are many resources in this area. The resource that has been most valuable to me is attending the UIE conferences. You might enjoy a UIE article 5-Second Tests: Measuring Your Site's Content Pages.
A link should convey destination information. A link such as Click Here does not convey relevant information about the link and its destination but a link such as MasseyNet.com, Inc.'s website does.
Are you a sighted person using the web? Have your ever noticed that when visiting a website your eyes automatically skim over or skip the navigational links and jump to the beginning of the text content of the page?
Imagine being a person who is blind or anyone using speech technology. You have to listen to all the links being read, and maybe even an advertisement, until the speech technology finally gets to the actual content of the page.
In the past, we would provide the a "skip" link on the page for speech technology users so that they too can jump to the content of the page. Better yet, using semantic HTML/CSS you can build a page that displays the navigation links at the top or side of the page, with the navigation links after the content in the HTML for screen reader users.
Website Accessibility Design Practices, a summary from the World Wide Web Consortium website, offers insight into good design, the basis of an accessible website. See Validate on this page for related information.
All images, image maps and animations need alternative text.
For those who are not viewing images, either because they are using a text browser, speech reader, or even hand held devices; always offer a text alternative within an image tag. The alt and title tag are used for short functional descriptions and the longdes attribute for more detailed descriptions.
Image maps require a client side map to insure accessibility.
Separate structure from presentation. Tables should not be used for presentation or as a design tool. Use CSS to style your site and use tables for tabular data, such as data found in spreadsheets. When using tables for tabular data, be sure to include a description of the table, and its purpose, using the summary attribute.
Just say no to frames.
Offer a transcript, or captioning, of an audio or video file, in the form of closed captioning, a text file, or a description of the event.
These non-standard methods of design can cause unpredictable results for Braille translation, screen readers and older browsers. Their features are often inaccessible to assistive technology users or are not supported by many browsers. Provide alternative content.
Java applets, when properly coded, are accessible when the noscript code is included in the applet.
Blinking and moving text is either read incorrectly or not at all by screen readers, can adversely affect people with cognitive disabilities and is often distracting to viewers in general.
The Web Accessibility Initiative Guidelines and Techniques is the international benchmark for accessible website design and development. For beginners, I would suggest starting with their Quick Tips to Make Accessible Web Sites.
Does your website pass the test of accessibility? Take the test.
-written by Nancy Massey
Updated: January 2014