Semantic Markup with HTML and ARIA

Contents

1. Introduction & Overview

2. Build Page Structure Through Headings and Semantic Landmark Elements

   1. Analyze Heading Structure
   2. Implement Semantic Headings for Page Listing Detail
   3. Inject a Page Heading with a React Portal
   4. Implement Semantic HTML5 Landmark Elements
   5. Challenge: Implement Semantic Landmarks in Page Listing Detail
   6. Check Page Listing Detail Accessibility with Voice Over
   7. Explore More Semantic Landmark Element Options
   8. A Note About the Header Landmark Solution

3. Add Accessibility Information through ARIA

   1. What Is ARIA and When to Use It
   2. Add Implicit ARIA Roles to the Date Picker
   3. Add ARIA States, Roles, and Properties to the Date Picker
   4. Test Date Picker Accessibility with a Screen Reader

4. Craft Accessible Names to Expose the Purpose of Elements on a Page

   1. What is an Accessible Name?
   2. Analyzing Accessible Names in the Search Form
   3. Challenge: Implement Proper Accessible Names for Next and Previous Month Buttons

5. Programmatic Accessibility Information with ARIA

   1. Structure Markup for Programmatic Accessibility
   2. Selective Announcements in Screen Readers

6. Accessibility Object Model (AOM)

   1. Understand AOM Properties and Attribute Reflection
   2. Implement aria-current as an AOM Property
   3. Implement aria-current in the MegaNav as an HTML Attribute
   4. Check aria-current with a Screen Reader and AOM as a Promising Technology