On the second day, I particularly liked the lecture by Karen Hawkins called Accessible Design Considerations for Styles, Components, Patterns, and Pages. I liked the design and the way the content was presented, but she also covered all the essentials when designing in the digital world. Accessible design is not just a technical item that we „add“ at the end – it should be the foundation of the design process, ensuring that digital products are accessible to everyone, including people with vision, mobility or cognitive challenges. Below, I’ll share key things I learned from the talk and how I can use them in design.
Karen compared design systems to Lego bricks – they contain reusable components, clear standards, and guides. I especially liked the systems approach – instead of adding accessibility as an afterthought, it’s built into the foundation of the design. However, to be accessible, each layer of the design system must include specific accessibility requirements:
- Styles: Colors, typography and grid must be designed with clear contrast and proper hierarchy.
- Components: Interactions should support a variety of input methods – keyboard, voice commands, touch gestures.
- Patterns: Reading order, navigation, and feedback should be logically laid out.
- Page templates: Users should be provided with additional navigation options, such as skip links and orientation elements.
- Pages: Content should be simple, clear, and understandable.
One of the first steps in design is choosing colors and typography, but we often forget how crucial they are for accessibility. She said that the minimum contrast for text should be 4.5:1, and for key elements like button 3:1. If we want AAA standard, the contrast should be 7:1. Also, the typography must be large enough, with good spacing between letters and lines. Also very important is avoiding color as the only visual signal – instead, we can use icons, underlining or bold font for emphasized information. Designers often use color to indicate an error (e.g., red text for a form error), but Karen pointed out that not everyone can see red text. The solution is to add icons, text descriptions or animations. Also, she mentioned the components, this part was new to me and because of that very interesting. Components are the building blocks of digital products, so it is important that they support different input methods. For example keyboard interactions – every element must be accessible without a mouse, with clearly defined focus indicators. She also mentioned support for screen readers such as buttons, links and forms. They must have clear descriptions, not just visual labels. The last thing she mentioned about it is the size of the target areas. Clickable elements must be at least 24×24 px (and ideally 44×44 px). Karen also shared an example of a button and its states – normal, hover, focus, inactive – to show how consistency is key.
She talked about how navigation and forms are often problematic points in design, and if we don’t structure them properly, users easily get lost or need too many steps to complete a task. As a solution, we can introduce skip links that allow users to skip repeating elements (like long menus). A clear content hierarchy is also important because screen reader users need a logical reading order, without jumping around. And we must not forget about feedback. When a user fills out a form or clicks on a filter, they need to get a clear answer as to what happened (text message, animation, change colors). Finally, Karen highlighted how the structure of the page and language are key to accessibility. What she mentioned was that headings need to clearly show the structure of the content and that using simple language helps people with cognitive disabilities. For example, instead of complicated instructions, it is better to is to use short, clear sentences.
What have I learned?
Small changes, like better contrast or larger buttons, can make a big difference. I can see how I could apply these principles to my work – whether through better readability of content, clearer navigation elements, or a combination of physical and digital design. I’m very glad I attended this lecture.
*ChatGPT was used for summarizing and translation from Croatian
