Web Accessible

It is very important when you are designing a website to think about accessibility and usability. Web accessibility means that people with disabilities or assistive technology can use the web. Making your website accessible can be simple or complex, depending on many factors such as the type of content, the size and complexity of the site, and the development tools and environment. Since the web accessibility also benefits people without disabilities.

There are a few different web page accessibility checkers, but in order to check web pages that require a log-in, such as learning management systems usually do, you will need a browser based checker. Below are some tools that would be useful to have when you are developing your website to check for accessibility.

What do you need to make your web site accessible?

1. Headings and Structure
2. Alt text and long descriptions
3. Tables and forms

Below is the Infographic from WebAIM to highlights a few important principles of accessible design:

Browser Add-ons

Firefox Browser

1. WebAIM WAVE accessibility add-on for the Firefox browser.

   

   The WAVE Toolbar provides button options and a menu that will modify the current web page to reveal the underlying accessibility information. It provides an easy-to-use, yet powerful mechanism for evaluating the accessibility and usability of web content for people with disabilities. Just click the "Errors, Features, and Alerts" icon to see what accessibility errors you have on the page. If you hover over the error icon, more information on the error will appear. To return to the page without the error alerts, click the "Reset Page" icon on the toolbar. There's a lot more you can do with this toolbar too, but this is how you do an accessibility error check with it. For more information on the toolbar, see the WebAIM website.

2. Fire Vox. Fire Vox is a free text to speech talking browser extension for Firefox that can not only read web page text, but it can read the Firefox user interface as well including the main menus and sub-menus. This extension is helpful for those who have poor vision and for those who may be blind. The keyboard shortcuts are easy to learn and are customizable to suit the user's needs.
3. Favelets to check Accessibility.

Internet Explorer Browser

• The Paciello Group - Web Accessibility Toolbar.
• Favelets to check Accessibility.

Opera Browser

Despite its small market share, the Opera browser is in many ways the most advanced browser on the market, and the most accessibility friendly. Much of what other browsers use add-ons and plugins to accomplish, Opera can do natively.

1. Using Opera to check for accessibility.
2. The Paciello Group - Web Accessibility Toolbar.
3. Opera Accessibility Features.

Google Chrome  Browser

• 15 Google Chrome Extensions for people who build website.

Free Screen Readers

Windows:

• NVDA (NonVisual Desktop Access)
  "Free and open source screen reader for the Microsoft Windows operating system. Providing feedback via synthetic speech and Braille"
• Windows Accessibility on microsoft.com

Linux:

• Orca
  "Free, open source, flexible, and extensible screen reader that provides access to graphical desktop environments via user-customizable combinations of speech, braille, and magnification."
• Accessibility on Linux desktops (article)

Mac:

• VoiceOver
  "VoiceOver 3 includes groundbreaking new features such as gesture support, braille display mirroring, web spots, and spoken hints. It also offers frequently requested features including autospeaking web pages, "read all," web page summary, web table support, user-created labels, customizable verbosity, and more."
• Mac Accessibility Information on apple.com

Questions to think about when reviewing web accessibility:

1. Are ALT tags present and sufficiently equivalent to the graphic content?
2. Does the page use structural elements such as headings effectively?
3. Can all links, navigational elements, and controls be accessed using the keyboard?
4. Does link text provide a reasonable description of the link target?
5. Are form elements explicitly associated with labels?
6. Is information in PDF available either as tagged PDF or in other more accessible formats?
7. Does the site avoid conveying meaning with color alone?
8. Is there sufficient contrast between text and background?
9. Are data tables marked up as required?
10. Is multimedia content captioned (or if audio only, transcribed)?
11. Is flickering content avoided?
12. Is the page functional when scripts are disabled?
13. Is the page functional when style sheets are disabled?
14. Does the page pass HTML validation?

Other Resources for accessible website

1. WebAIM WAVE web accessibility evaluation website. You can enter the URL of your website or upload a file or paste your HTML code to this website and it will evaluate whether your page is accessible or give you suggestions on what to fix.
2. WebAIM WAVE Dreamweaver Extension BETA. This tool gives you flexibility inside Adobe Dreamweaver to evaluate content being developed in Dreamweaver and get a full WAVE report with one click. The only requirement is you need to use a minimum of Adobe Dreamweaver CS3.
3. Accessify website. This website has a collection of accessibility tools and news update that would be useful.
4. Complete list from W3C of Web Accessibility Evaluation Tools.
5. Accessibilty information from Microsoft to test your website using Internet Explorer 8.
6. Accessibility Tutorials for Microsoft Products.
7. Firefox Accessibility Project. Access Firefox presents and showcases some of the many accessibility tools and features that are available for the free Firefox web browser.
8. PennState Accessibility and Usability. This website has a list of techniques of accessifying Web page for multiple HTML objects as well as additional Web page technologies.

Web Usability

Web Usability is working to make website more usable for everybody, including those with disabilities. It is important to think about web usability when developing your website. Think about your target audience or people who access your website:

• How do they read your page?
• How do they navigate your page?
• Is your content easy to read?
• Is it easy to find information on your page? etc.

If the answer to one of the questions above is negative, then you would easily lost your audience. With other competing website only a click away, poor usability drives away your audience, which could means losing revenue. Strong usability lets people easily accomplish their goals, including finding product information, requesting a quote, or making a purchase. A great website needs to have at least these three elements:

• Consistency and cohesiveness. All the pages on a Web site should be visually similar enough that even first-time visitors can tell that they're on the same site, has designs that use standard elements like most other Web sites.
• Navigable. Your visitors usually have a specific goal when visiting the Web site, so they would like quickly find information they need. Thus, it is important to create links that clear for your visitors on how to navigate the Web site.
• Understandable. The Web site content needs to make sense for your visitors by using simple and straighforward sentence, unless you have a special target audience who understands it. Limit your design elements, since too many choices may confuse your visitors and prevent them from getting what they need from your site. Simple is better.

For larger Web sites, it is crucial to improve a site's usability by doing usability testing, in which a developer sits down with potential or actual users of the site, asks them to accomplish a task, notes how they go about it and whether they are successful, and asks for their feedback. Usability testing often giving developers good information about things that they may have overlook.

Usability Test video: Campus Food Website (4:11)

Examples: PCC main website did usability testing when they first launch the new design. The developers received some feedback from faculty, staff, and students. PCC library website also did usability testing before they launch the new re-design because of its complex design of using database system.

Steps to conduct usability testing:

1. Prepare the questionnaire or tasks ahead of time.
2. Make sure everything is set properly, such as having internet connection, no computer issue, etc.
3. Begin the session by introducing yourself and explain the process, how you're going to set the stage.
4. Take notes of your observation. You can use the sample observation form, listed below in the "Resources for Web Usability."
5. Be neutral and don't be prejudice of the participants and their answers. You are only observing and not to help them.
6. Keep them comfortable during the session and stay on track with your tasks.
7. Participants can ask questions and you may answer if neccessary, don't give hints or answers directly to them. You may be tempted to rescue them, but the session will be useless if you do that.
8. It may be good to videotape the session so you can always go back and even show it to other development team members.
9. Have the participant complete a post session survey after the testing is complete. You can use the post session survey listed below in the "Resources for Web Usability."

Resources for web usability:

1. Steve Krug, who is an expert in usability wrote the following books:
   • Dont Make Me Think - A common sense approach to web usability.
   • Rocket Surgery Made Easy - The Do-It-Yourself guide to finding and fixing usability problems.
2. Dr. Peter J. Meyers, wrote this 25-point Website Usability Checklist.
3. A practical guide to Usability Testing - by Joseph Dumas and Janice (Ginny) Redish, Intellect, 1999. Best how-to book on user testing.
4. Sample observation form. Use this sample observation form to help take notes during usability testing session.
5. Post Session Survey. Have the participant from usability testing complete this survey after the testing is done. Post-test feedback and comments are an excellent way to understand user preferences.