Featured Udacity named a 2016 CNBC Disruptor 50 company. Come learn with us!
Featured Udacity named a 2016 CNBC Disruptor 50 company. Come learn with us!
Approx. 6 weeks
Assumes 6hrs/wk (work at your own pace)
In this course you’ll get hands-on experience making web applications accessible. You’ll understand when and why users need accessibility. Then you’ll dive into the “how”: making a page work properly with screen readers, and managing input focus (e.g. the highlight you see when tabbing through a form.) You’ll understand what “semantics” and “semantic markup” mean for web pages and add ARIA markup to enable navigating the interface with a range of assistive devices. Finally, you’ll learn styling techniques that help users with partial vision navigate your pages easily and reliably.
Not every user approaches their applications with the same abilities. Whether it’s age, vision concerns, limited hearing, a broken arm, or other limitations, everybody deserves access to their apps. This course dives into the why and how of making web applications accessible. As a bonus, accessible sites also tend to be more usable for everybody!
Students should know HTML, CSS, and JavaScript.
See the Technology Requirements for using Udacity.
In this lesson you’ll learn why accessibility matters, and who it affects. You’ll also get a first look at the web accessibility guidelines (WAI – Web Accessibility Initiative), understand what “POUR” means for accessibility, and locate checklists to help make your own sites accessible.
In this lesson you’ll learn how to make a page usable for anyone navigating with the keyboard. This starts with an introduction to the concept of focus (the element on the page to which keyboard events will be targeted), how to make elements focusable and when, and the order in which focusable elements will be traversed when exploring the page with the keyboard. You’ll also learn how to manage focus in forms, in custom components, pop-ups, and off-screen content.
In this lesson you’ll build on keyboard navigation to make a page work for people who are unable to use a standard user interface, including users who can't see the screen. This requires ensuring assistive technology (such as screen readers) has sufficient information to present an alternative UI. You’ll use a screen reader to try out ordinary form elements and add markup to make them work even better. You’ll understand the accessibility tree the browser constructs from the DOM. Finally, you’ll learn how to built-in HTML features to ensure the accessibility tree accurately reflects the visual UI.
In this lesson, you’ll dive deeper into the screen-reader experience to add hyper-fast navigation. You’ll learn how to arrange headings and label links so screen reader users can fly through your pages! You’ll also learn how to call out “landmarks” into your page to speed up navigation even more. (As a bonus, this “semantic markup” also makes your markup more readable!)
In this lesson, you’ll move beyond the native elements of HTML into building custom controls and interactions. Of course you want these to be accessible, and that’s where ARIA comes in – Accessible Rich Internet Applications. You’ll learn how to add attributes to your custom interactions to make them as accessible as native elements. You’ll also learn how to manage these attributes from Javascript as the user interacts with your page.
In this lesson, you’ll learn the third pillar of Accessibility (after Focus and Semantics): Styling. Your page’s styles need to support highlighting the focus, indicating ARIA states, being zoomed in or out, and viewed by people with limited color or contrast vision. You’ll learn how to audit your page with the Chrome Accessibility Tools and correct any styling issues that pop up, as well as designing with accessibility in mind.
Rob Dodson is a developer advocate at Google where he focuses on Web Components and Accessibility. His mission is to fight for a better web and to help developers build great experiences. You can catch him every other week on his YouTube series "Polycasts" or on his blog at robdodson.me.
Alice is a software engineer at Google who works on accessibility in Chrome. She is particularly interested in creating developer tools to assist developers with testing and debugging accessibility, and in exploring opportunities for web standards to improve the state of accessibility on the web.
Michael is a self-taught full-stack web developer and open source advocate. Before joining Udacity, he spent over 10 years developing classified applications for some of the most demanding intelligence organizations in the world. He has an active Top Secret clearance and, unless you have one as well, that's all you're allowed to know. In his spare time he enjoys playing paintball, video games, and spending time with his 3 wonderful children.
View more courses in
Web Development