summary: 'Practice applying accessibility preferences in your web designs.' time: '1 hour' deliverables: '1 HTML file, 1 CSS file, images'

Perfers accessibility

Overview

• Fork this repository.
• Add the “prefers” media queries & adjust the design:'
  • prefers-reduced-motion
  • prefers-color-scheme
• DO NOT change the HTML file.
• Run it through Markbot and make sure it passes all the checks.

Testing the “prefers” features

On MacOS, you can enable “reduced motion” in System Preferences:

System Preferences > Accessibility > Display > Display

To switch between light & dark interface mode on MacOS, use System Preferences:

System Preferences > General > Appearance

Goal

Visually match the images in the “screenshots” folder and create the interaction shown in the linked video.

• Final screenshots in the “screenshots” folder.

Hand in

Drop this folder into your Markbot application. Make sure to fix all the errors. And submit for grades using Markbot.