Web accessibility is an afterthought or a technical thing for many designers. At least I saw it that way before I embarked on my accessibility journey. But It’s during the design process when crucial decisions are made – and these go a long way! So to give designers some practical tips, I invited web accessibility expert Mina Nabinger to join me in a fun, live stream on YouTube. She will audit – and roast – this very website, so you can learn from my failures 😉.
We discuss
What you should pay attention to as a designer, covering things like:
- Why accessibility matters and is not just a checklist,
- The legal landscape, especially in the EU,
- the most critical issues for visual designers,
- How much accessibility is needed vs. nice to have, and
- Balancing accessibility with aesthetics,
- While auditing and roasting my own website 😅.
Listen to the talk as podcast
Next to the video on YouTube, you can also listen to this episode audio only. You can find it on Apple Podcasts and Spotify, or simply listen to it here:
Talking Points
04:09 – Mina’s Background in Accessibility
06:47 – Why Accessibility Matters
08:22 – Relevance of Accessibility for Visual Designers
10:52 – Top Accessibility Issues in Visual Design
13:34 – Accessibility as a Continuous Process, Not a Checklist
15:05 – Critical Issues in Visual Design Accessibility
21:42 – Legal Landscape of Accessibility in the EU
26:08 – Icon Buttons Without Labels
29:24 – Challenges with Moving Images and GIFs
32:11 – Links in Paragraphs and Touch Targets
37:50 – Outdated Icons: Do They Still Work?
40:25 – Writing Accessible Call–to–Action Buttons
43:26 – How Much Accessibility is Needed vs. Nice to Have?
47:05 – Balancing Accessibility with Aesthetics
50:48 – Screen Resolution and Text Size for Accessibility
56:00 – Final tips for visual designers
Top 5 Accessibility Tips for Designers
During our conversation, Mina gave these crucial tips for visual designers:
- Ensure sufficient contrast: Use tools to check that text and UI elements meet accessibility contrast standards. This improves readability for everyone, including use cases in bright sunlight.
- Make touch targets large enough: Don’t go below 24 × 24 px, but 44 × 44 pixels is much better, especially for mobile design.
- Make links distinct: With clear underlines or other indicators. Don’t rely on color alone.
- Clearly communicate states: Especially the focus state should be notably visible. Use this to be creative and make it brand compliant.
- Design for flexibility and scalability: Don’t make your text or layout dependent on an exact size. Test it at various zoom levels and screen sizes.
Accessibility Audit of Pimp my Type
What a privilege to get feedback from Mina on my website. She checked it with great detail and here’s my to-do list:
Homepage
- Hero Image: Add alt text that describes the photo and remove link on the image
- Section headings: Color contrast is 1.8:1 instead of 3:1
- Font Friday Card: Too many duplicated links, ALT text should be functional here, not descriptive.
- Newsletter Form: Connect label and input
Font Friday Articles
- Hero Image: Shorter ALT text that describes it more as a whole, leading with a description, what type of image this is, like: ”Mockup of the sans-serif typeface structured into …“. Maybe add a caption that goes more into detail.
- Name of Font: is an image of text, should be avoided. Since it can’t be changed, it should at least scale when zooming.
- Check Icons: Context gets lost in screen readers. Include the icons into the text with an ALT label, not as background images.
- Link underline: Has insufficient contrast (2.39:1), needs to be at least 3:1
Other areas:
- Patreon Box on the Offerings page: Text color contrast is not sufficient.
- Social media icons in the footer: Labels are missing, so the context is not clear.
I’ll do my best to fix these issues in the upcoming weeks. I’ll add an update here, once I’m done.
About Mina Nabinger
Mina Nabinger, also known as @mina_malism on Instagram, is an educated graphic designer, web designer, Accessibility consultant. Since 2021 she runs her own business, offering accessibility trainings and audits to help businesses and design teams build delightful products that everyone can use.
Links
- List of colour-safe link colours (when not using an underline)
- Browsing with assistive technologies (YouTube Playlist)
- W3C Stories of Web users (describing barriers)
- Microsoft Inclusive Design Toolkit
- Mina’s Website
How did you find most interesting in our conversation? What challenges are you facing right now when it comes to accessibility? Tell me in the comments!
How can we balance accessibility with aesthetic requirements, so the website still looks beautiful for high end clients?
We answered your question here in the video. The gist of it was not to see aesthetics and accessibility as something that belongs together, functionality is beautiful.
Another question. How should we be setting our screen resolution on our computers, so that text appears at suitable sizes for accessibility requirements, and how do we best ensure that the text size we are seeing is also good for others?
We answered this question here in the video. Mina suggested starting with common screen resolutions, like 1280 pixels wide, and ensuring that text scales properly at various zoom levels and screen sizes.