Project Premise

For my midterm project in an HTML/CSS coding course, I developed a CSS showcase focused on website accessibility. This project explores how designers can create inclusive websites by considering the diverse needs of users. Specifically, I demonstrate two applications of media queries to ensure that a user's Operating System preferences are respected. The entire single-page showcase serves as an example of various accessibility techniques. Given the interactive nature of web accessibility, I incorporated JavaScript to enhance functionality.

General Accessibility Features

IThe two screenshots below showcase three of the four primary web accessibility modes: visual impairment, cognitive functions, and restricted mobility. The fourth, auditory functions, is not represented. While the light theme does not feature high contrast, its color and font choices are designed to improve readability.

Another key focus is content presentation. My aim is to keep descriptions concise while ensuring clarity—especially in the second screenshot. You'll notice that "Dyslexia" is highlighted within an unconventional font, specifically chosen to assist viewers with dyslexia in reading the content more easily.

For mobility accessibility, keyboard navigation plays a significant role. Tabbing serves as the primary keystroke, complemented by the enter key. Of course, these features benefit all users, not just those who rely on them for accessibility.

Theme & Animations

Themes, like light and dark mode, help make websites more accessible by catering to different visual needs and preferences. Light mode is great for readability in bright settings, while dark mode can reduce eye strain, especially in low-light environments. When websites let users choose or automatically match their system preferences, they create a more comfortable experience—especially for people who are sensitive to bright light or have specific visual impairments.

Animations, on the other hand, can make websites feel more dynamic and engaging, but they need to be used thoughtfully. Smooth, subtle movement can help guide users’ attention, indicate transitions, and provide helpful visual feedback. But too much motion—especially fast or unpredictable animations—can be distracting or even overwhelming for people with vestibular disorders or cognitive sensitivities. That’s why offering a “reduce motion” option keeps the experience inclusive for everyone.

By thoughtfully balancing theme options and animation settings, designers can create websites that are both visually engaging and highly accessible. Below, you'll see that dark mode is enabled and animations have been turned off—two adjustments that can make a big difference for users with certain cognitive needs. These settings help improve readability, reduce distractions, and create a more comfortable browsing experience, ensuring the site is usable for everyone.

High Contrast & Legibility

High contrast and legibility make a huge difference in web accessibility by ensuring text is easy to see and read for everyone—especially those with low vision. High contrast mode boosts visibility by creating strong distinctions between text and background colors, making content clearer and reducing eye strain. Legibility, on the other hand, is all about picking the right font, size, and spacing to make reading effortless.

In the example below, high contrast mode is turned on, so text and interface elements pop more visibly. Font and spacing tweaks also help improve legibility, allowing users to comfortably navigate the content without straining their eyes. The second screenshot also includes the keyboard navigation and "Dyslexia" option. Again, the showcase attempts to accommodate as many needs as possible.