Egghead Instructor Marcy Sutton

Marcy Sutton

Senior Front-End Engineer and international public speaker at Deque Systems working on accessibility tools with axe-core. O'Reilly Web Platform Award Winner, occasional Angular team member, bike aficionado.



Unlock all of Marcy's PRO Lessons
click for instant access!

Browse Marcy Sutton's lessons.

showing 15 lessons...

Accessible Icon Buttons

Accessible Button Events

Building Forms with Accessibility in Mind

P

Headings and semantic structure for accessible web pages

P

Focus management using CSS, HTML, and JavaScript

P

What is the Accessibility Tree?

P

Intro to ARIA

P

How Visible vs. Hidden Elements Affect Keyboard/Screen Reader Users

P

Using the Voiceover screen reader to test for accessibility

P

Testing for Accessibility with the NVDA Screen Reader on Windows

P

Creating visual skip links in HTML and CSS

P

Accessible modal dialogs

P

Using the tabindex attribute for keyboard accessibility

P

Basic accessibility testing

P

Accessibility testing with axe-cli

P
html5 tutorial about Accessible Icon Buttons

Accessible Icon Buttons

3:42 html5

Icon buttons are very common in web applications, yet they often have accessibility problems. Learn how to make your icon buttons accessible to keyboard and screen reader users with HTML, CSS, SVG and ARIA.

js tutorial about Accessible Button Events

Accessible Button Events

6:57 js

Often buttons need to be handled by JavaScript, and if done improperly it can lead to accessibility issues. In this lesson you will improve a major news organization's global header with some basic HTML and JavaScript.

html5 tutorial about Building Forms with Accessibility in Mind

Building Forms with Accessibility in Mind

7:02 html5 PRO

Are you building a website or web application that takes user input? Then it's important for you to watch this demo. Learn how to create more accessible forms using basic HTML form labels, fieldsets and legends. You'll even learn a bit about what makes Safari's developer tools pretty awesome.

html5 tutorial about Headings and semantic structure for accessible web pages

Headings and semantic structure for accessible web pages

7:01 html5 PRO

Webpages are more than simply how they look. By coding with headings, landmarks and semantic HTML, you can expose a rich document outline to users of assistive technologies, as well as search engines.

css tutorial about Focus management using CSS, HTML, and JavaScript

Focus management using CSS, HTML, and JavaScript

8:34 css PRO

Something important to consider when coding a web application is managing the user's focus. For keyboard and screen reader users, we must ensure their focus is not dropped as content is deleted or shown in new contexts. Skip links also provide a way for users to get past a lot of content. In this lesson, you'll learn HTML, CSS and JavaScript techniques for focus management that can be applied to many situations.

html5 tutorial about What is the Accessibility Tree?

What is the Accessibility Tree?

4:29 html5 PRO

Coding for accessibility? You should get familiar with the accessibility tree, a structure produced by platform Accessibility APIs running parallel to the DOM, which exposes accessibility information to assistive technologies such as screen readers. There are multiple tools for visualizing this tree; in this lesson we'll look at Chrome and Microsoft Edge. For more on Accessibility APIs, refer to this amazing article by Leonie Watson. For a how-to on setting up the Chrome Accessibility Inspector, visit bit.ly/chrome-a11y.

html5 tutorial about Intro to ARIA

Intro to ARIA

8:09 html5 PRO

What is this thing called ARIA? In this lesson, you'll learn about about WAI-ARIA, a.k.a. Accessible Rich Internet Applications, the W3C spec for specifying accessibility information in HTML and SVG. I cover the basics of applying ARIA roles, states and properties, helpful information for creators of user-interface widgets and component libraries. But it's important to note that you might not need ARIA at all! Before using it, it's important to educate yourself on what ARIA does and doesn't do for you.

html5 tutorial about How Visible vs. Hidden Elements Affect Keyboard/Screen Reader Users

How Visible vs. Hidden Elements Affect Keyboard/Screen Reader Users

12:24 html5 PRO

There are many techniques for hiding content in user interfaces, and not all are created equal! Learn how different hiding techniques in HTML, CSS and ARIA impact keyboard and screen reader users in addition to visual display. As a bonus, we'll also take a look using a screen reader on a mobile device.

otherjs tutorial about Using the Voiceover screen reader to test for accessibility

Using the Voiceover screen reader to test for accessibility

9:39 otherjs PRO

Did you know every Mac comes with a fantastic screen reader built-in? Learn the basics for operating Voiceover with Safari, including common key commands, the web rotor, and the help menu. We'll also set up keyboard tabbing in Safari and OSX's System Preferences, two requirements for accessibility testing that occasionally trip up users. In a future lesson, we'll compare Voiceover to Windows screen readers, since they work quite differently.

Resources

otherjs tutorial about Testing for Accessibility with the NVDA Screen Reader on Windows

Testing for Accessibility with the NVDA Screen Reader on Windows

5:04 otherjs PRO

NVDA is a popular open source screen reader on Windows that works well with Firefox. It's similar to JAWS, another popular Windows screen reader that works best with IE. But NVDA has no licensing fee plus an open bug tracker, making it great for users as well as developer testing.

In this lesson, you'll learn how to browse a webpage using NVDA's keyboard shortcuts, including headings navigation, skip links, and the Elements List. You'll also learn a bit about Forms Mode and how it impacts screen reader navigation. For more tips, check out the resources below.

Resources

Installing NVDA

If you're on a Windows machine, you can install NVDA directly. If you're on a Mac or Linux, you could install a Windows virtual machine:

css tutorial about Creating visual skip links in HTML and CSS

Creating visual skip links in HTML and CSS

5:51 css PRO

Skip links are an extremely helpful navigation pattern for keyboard and screen reader users, since they let you skip past sections of content. Learn how to create skip links in HTML and CSS that show on focus, and you'll benefit all users!

html5 tutorial about Accessible modal dialogs

Accessible modal dialogs

11:41 html5 PRO

Learn how to create a modal dialog with accessible keyboard and screen reader mechanics using the native HTML5 dialog element and experimental inert attribute (with polyfills) and JavaScript focus management. We'll explore how to make a DIV or non-modal dialog into a modal one to contrast the differences. Finally, we'll expose accessibility information for NVDA, Voiceover, JAWS and other screen readers.

For more details on creating accessible dialog content, check out this great article by Marco Zehe, Advanced ARIA Tip #2: Accessible Modal Dialogs: https://www.marcozehe.de/2015/02/05/advanced-aria-tip-2-accessible-modal-dialogs/

Used in this lesson:

html5 tutorial about Using the tabindex attribute for keyboard accessibility

Using the tabindex attribute for keyboard accessibility

5:09 html5 PRO

You can make any element keyboard interactive with the HTML tabindex attribute. But you might need a little extra JavaScript and ARIA to support keyboards and screen readers. For more on using tabindex in practice, check out my focus management lesson.

otherjs tutorial about Basic accessibility testing

Basic accessibility testing

5:44 otherjs PRO

Learn the basics of web accessibility testing using the keyboard, Web Developer Toolbar, aXe Firefox extension, and Lea Verou's Contrast Ratio tool. We'll look at how to get an overview of a webpage's accessibility, with special attention paid to solving color contrast issues.

For more on accessibility auditing, check out this article: https://marcysutton.com/how-i-audit-a-website-for-accessibility/

otherjs tutorial about Accessibility testing with axe-cli

Accessibility testing with axe-cli

3:49 otherjs PRO

Testing for accessibility is easy with automated tools like axe-cli. This command-line tool utilizes the open source axe-core JavaScript library to run an audit on any webpage you give it, returning a set of JSON results you can use in your continuous integration environment or regular development workflow.

HEY, QUICK QUESTION!
Joel's Head
Why are we asking?