About This Course

In this course, you’ll learn a number of inclusive design techniques including how to use a screen reader, design beautiful focus states, create flexible and accessible typography, build viewport-aware layouts, and make accessible drop caps.

Course Outline

• Lesson 1: Introduction

  Learn what topics are covered in this course and take a quick look at the demo project you’ll be working on. You’ll also discover how the principles of responsive web design are connected to the foundations of web accessibility and why designers and developers need to make the web more functional for everyone.

• Lesson 2: Introduction to Screen Readers Using VoiceOver

  Explore the basics of using VoiceOver, the popular screen reader for macOS, so that you can more comfortably use it to test your web pages. You’ll take a look at the essential keyboard shortcuts needed to navigate through a page, as well as more advanced features such as the VoiceOver rotor.

• Lesson 3: Designing Beautiful Focus States

  Discover how you can be visually creative while also pursuing keyboard accessibility in this walk-through on how to style the focus states of your page. You’ll dive into the specifics of using CSS to emphasize the interactive elements of your page such as links, images, and forms.

• Lesson 4: Flexible and Accessible Typesetting

  Learn how to use typography to make web pages that are more readable and accessible for all. You’ll use proportional font sizes, specifically the `rem` unit, to make your fonts and layouts more user-friendly.

• Lesson 5: Responsively Designing with Viewport Units

  Master the technique of using viewport units to help you create content that scales gracefully across different devices and screen sizes. You’ll learn the basics of CSS proportional units `vw` and `vh`, as well as the `calc()` function and the advanced technique of css locks — a method used to add useful constraints to page layouts.

• Lesson 6: Creating Beautiful and Accessible Drop Caps

  Learn a robust approach to creating compelling and accessible drop caps on the web. Specifically, you’ll look at how to create bullet-proof HTML and CSS with strong cross-browser and screen reader support.

• Lesson 7: Wrapping Up

  Review the concepts covered in this course including how to use a screen reader, design beautiful focus states, create flexible and accessible typography, build viewport-aware layouts, and make accessible drop caps. In addition, you’ll receive a list of resources and next steps to help you level up your practice of responsive and inclusive design.

Prerequisites

• Mac or Windows desktop or laptop
• A web browser that supports VoiceOver for macOS is required to follow along with chapters 2 and 6
• A working knowledge of HTML and CSS
• A willingness to follow along inside a CodePen project
• A passion for learning about web accessibility and inclusive design