I Thought I Knew Everything About Accessibility Design but I Was Wrong.
A deep dive into my recent work in accessible website design
By Angeline Neo
5 min read
I thought I already knew what accessible design meant, but this project showed me how much more there was to learn.
As a graphic designer at the University of Florida (UF), one of my projects was designing an award nomination website for UF employees. The old website had too much information, making it hard for users to understand the criteria and standards for nominating someone. UF is required to meet WCAG 2.1 AA / Section 508 standards, so alongside the design work, I also had to remediate the existing site to meet those requirements.
Two screenshots of the initial Superior Accomplishment Award website: Landing page (left) About the Award page (right).
Initial design
My initial idea was to make it more visually engaging by including animations and graphic elements. For example, I wanted to use a scrolling effect to break up the Awards Division instead of the long static list shown below:
Original Division layout on the website (right); Stacking card sticky scroll layout initial concept that got rejected (left)
An animation of scrolling card effect to list out the divisions
How I was wrong about accessibility
My prior knowledge of accessible design was mostly strong color contrast, legible typography, and alt text on images. But talking it through with the web developer, I learned that scrolling effects like this can actually reader and keyboard users. That was the first moment I realized “engaging” and “accessible” aren’t the same thing. A website can be simple, intuitive, and appealing, but complex animations can just as easily break accessibility rules. After studying the guidelines more closely, I developed another version, this time putting accessibility at the forefront.
An article by the W3C Web Accessibility Initiative about animation guidelines
Result
After a few rounds of iteration and feedback from stakeholders, we landed on this design, which was much easier to digest. The link leads to a Word doc with the full list of division-level information. This cuts down the text on the page while still giving users a clear way to access the full details if they want it. One small but important change: the division-level link text. Instead of a generic “View here,” I changed it to “See Division List.”
A scrolling video of the "About the Award" page showing the new "Award Divisions" layout
Accessibility test
After redesigning the entire website, I worked with the developer to check and remediate it for full accessibility. We also ran a screen reader test using NVDA and SiteImprove to make sure the content read through smoothly.
A screenshot of Siteimprove.ai showing the resolved issues after running through the accessibility checker
A screenshot of Siteimprove.ai of the overview score of the website.
Color blindness test
A video of Siteimprove.ai color blindness test of the "About the Award" page
Closing thought
I still have a lot to learn about accessible designs, especially about all the back-end stuff of a website. But if this project taught me anything, it’s not only thinking about the user experience, visual design aspects, but also questioning myself during my design process “is this accessible to xyz users?” "Am I meeting the WCAG guideline? "What am I missing here to meet xyz users' needs?"
Two screenshots of the redesigned Superior Accomplishment Award website: Landing page (left) About the Award page (right).