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.
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.
- 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