Introduction

Learning Outcomes

Welcome to Web Accessibility for Developers. We are glad that you are here and are taking the time to learn some very important, marketable developer skills!

By the time you complete the instruction here, you should be able to:

• Test web interactivity with a screen reader to ensure accessibility
• Identify the differences between static and dynamic WAI-ARIA
• Describe both graceful degradation and progressive enhancement development methods
• State when and when not to use WAI-ARIA
• Explain the limitations of WAI-ARIA
• Apply WAI-ARIA landmarks and live regions to web content
• Create accessible progress bars, suggestion boxes, and tooltips with WAI-ARIA
• Build accessible sliders, accordions, tab panels, and carousels with WAI-ARIA
• Implement effective design patterns for accessible menu bars, tree menus, and sortable lists with WAI-ARIA

Suggested Prerequisites

The materials here are intended for web developers.
To get the most out of the instruction, you should have the following prerequisite knowledge:

• JavaScript: You should have a functional understanding of the JavaScript scripting language and be familiar with using jQuery and jQuery plugins. Though you can follow along with basic knowledge of JavaScript and jQuery, it will be easier to understand if you are comfortable writing (or, at least, copying and pasting) JavaScript code and making adjustments.
• HTML: You should have at least a functional understanding of HTML 5. Though most of the HTML will be provided, you’ll need to understand how it is used to produce the widgets you’ll be working on.
• Git Version Control: We strongly recommend a GitHub account (and a basic understanding of how it is used) in order to participate in the activities. Details will be provided in Unit 2 if you need to set up an account, and basic Git commands will be covered.

Suggested Technology

You will need the following applications to complete the activities that follow:

• ChromeVox Screen Reader: Required for testing assignment submissions prior to submitting.
• FireFox Developer Edition: Optional, but includes the FireBug Developer Tools, which are more helpful for debugging than the default developer tools included with various browsers.
• Git: (Optional) Though you can edit activity files and send them to a web server, you’ll be better off installing Git or a Git Client and working from your own local development environment.
• Plain Text Editor: Required for editing HTML and JavaScript, which is much easier with a good, colour-coded text editor, such as Visual Studio Code, Sublime Text, or Atom.

Suggested Reading

You might also look ahead to the next version by reviewing WAI-ARIA 1.2, currently available as an editor’s draft.

These readings are more references than they are readings. At a minimum, scan through these documents to understand what they contain and refer back to them when you encounter scenarios where WAI-ARIA could or should be used.

Beyond What You’ll Learn Here

For those who would like to go beyond what they’ve learned in the materials here, The Chang School has created a series of resources on web accessibility for different audiences:

• Digital Accessibility as a Business Practice (web ebook version)
• Professional Web Accessibility Auditing Made Easy (web ebook version)
• Introduction to Web Accessibility (web ebook version)
• Understanding Document Accessibility (web ebook version)

Disclaimer

The information presented here is for instructional purposes only and should not be construed as legal advice on any particular issue, including compliance with relevant laws. We specifically disclaim any liability for any loss or damage any participant may suffer as a result of the information contained. Furthermore, successful completion of activities does not result in formal accreditation or recognition within or for any given field or purpose.