Skip to main content
Course image for Designing Accessible and Responsive Websites

Designing Accessible and Responsive Websites

Gym Short

Designing Accessible and Responsive Websites will teach you a series of front-end techniques to help you improve the accessibility and overall user experience of your websites.

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

This Course is For

  • Anyone interested in building more accessible websites
  • Web designers with coding chops
  • Front-end developers

Meet the Instructor

Ethan Marcotte’s instructor headshot for Aquent Gymnasium.

Ethan Marcotte

Ethan Marcotte is an independent web designer, writer, and speaker based in Boston. He’s the fellow who started that whole “responsive design” thing.

As a partner at Autogram, Ethan helps clients plan, create, and maintain effective design systems.

Ethan has helped tackle major design challenges for companies including People Magazine, The Sundance Film Festival, and The Boston Globe.

Enroll

👋 Learn why Inclusive Design Efforts Fail (And What to Do About It) on LinkedIn Live Tuesday, February 20 at 2 PM EST.