{"id":261774,"date":"2017-11-21T07:05:18","date_gmt":"2017-11-21T14:05:18","guid":{"rendered":"http:\/\/css-tricks.com\/?p=261774"},"modified":"2017-11-21T07:05:18","modified_gmt":"2017-11-21T14:05:18","slug":"advocating-for-accessible-ui-design","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/advocating-for-accessible-ui-design\/","title":{"rendered":"Advocating for Accessible UI Design"},"content":{"rendered":"
Accessibility is a hot topic these days, and the older we web-makers get, the hotter it’s going to become! That might be a snarky outlook, but what I’m trying to say is that it’s about time we start designing the web for everyone because the web was meant to be<\/a> for everyone, and less and less are we able to predict where, when, and how our work will be consumed.<\/p>\n <\/p>\n As developers, we often encounter accessibility post-design, when we do things like implementating the correct Given our roles as developers<\/em>, this makes sense. Accessibility flaws, however, often originate in the UI design itself, and depending on our work environment, we developers don’t necessarily have the authority or bandwidth to advocate for accessibility in the designs we are handed.<\/p>\n The design has finally been approved by the client, and now you have a weekend to build the thing, plus another two days to work with QA to perfect it. As you take a look at the design for the first time, you notice that, on small devices, the dainty serif typeface overlaid on a background image would be difficult for low-sighted visitors to read.<\/p>\n You, the accessibility-minded developer, could proceed in a few ways:<\/p>\n I was in a situation like this recently and, judge me if you will, I chose number one. <\/p>\n If I’d had the time and the guts, number 2 would’ve gotten me the furthest, but given the nature of my role as a first-time contractor at this high-speed agency I was hoping to develop a working relationship with, I felt I’d be overstepping my bounds and wasn’t ready to take the risk of being too vocal out of the gate. I chose not to do number 3 for similar reasons, mainly for fear of causing more work and stress for the already extremely busy designer. <\/p>\n Now that I have the benefit of hindsight, however, might I add a fourth item to the list?<\/p>\n Where to find such a list? Well, you are in luck! Read on! <\/p>\n What follows is a list of plain language, no-jargon, “Accessibility Tips for UI Design” you, developer, can share with everyone at work: UI designers, content providers, project managers, and clients alike. The more we can spread awareness about accessibility and think critically about the mockups we are handed to implement, the more accessible the web will be! <\/p>\n I have chosen the examples below from various trendy<\/a> website<\/a> feeds<\/a>, and I used the fantastic Funkify Chrome Extension<\/a> to simulate the viewing experience of site visitors with varying abilities and disabilities.<\/p>\n First up:<\/p>\n With great power comes great responsibility. The modern web affords us the power to bounce-in, fly-in, or drop-in any content we please, but besides the wow factor, how are these animations contributing to a reader’s experience on your site? How are the animations triggered? Can they be mistakenly triggered, causing a confusing jolt in the flow of your site visitor’s experience?<\/p>\n Take this example of a car repair company’s website. I’ve applied the “Elderly Ellen” filter from Funkify<\/a> to simulate slightly blurred vision and shaky hands:<\/p>\nAccessibility is not just up to developers<\/h3>\n
role<\/code> and
aria<\/code> attributes<\/a>, ensuring navigation is keyboard friendly, and responsibly hiding elements<\/a>. In general, our accessibility efforts go towards thinking about how to make specific components and features accessible, such as an SVG icon system<\/a> or helpful tool-tips<\/a>. <\/p>\n
For example, let’s say you are tasked with turning a Sketch file into a one-page WordPress site. <\/h4>\n
\n
\n
Non-technical Accessibility Tips for UI Design<\/h3>\n
Easy on the animations.<\/h4>\n