Tips for Responsive Design and Web Accessibility

Happy Global Accessibility Awareness Day everyone! It's a great day to remind people, that, accessibility is the responsibility of the whole team, including designers! A couple of things designers can do: - Use sufficient color contrast (text + UI elements) and don’t rely on color alone to convey meaning. - Ensure readable typography: support text resizing, avoid hard-to-read styles, maintain hierarchy. - Make links and buttons clear and distinguishable (label, size, states). - Design accessible forms: clear labels, error help, no duplicate input, document states. - Support keyboard navigation: tab order, skip links, focus indicators, keyboard interaction. - Structure content with headings and landmarks: use proper H1–Hn, semantic order, regions. - Provide text alternatives for images, icons, audio, and video. - Avoid motion triggers: respect reduced motion settings, allow pause on auto-play. - Design with flexibility: support orientation change, allow text selection, avoid fixed-height elements. - Document accessibly and communicate: annotate designs, collaborate with devs, QA, and content teams. Need to learn more? I got a couple of resources on my blog: - A Designer’s Guide to Documenting Accessibility & User Interactions: https://lnkd.in/eUh8Jvvn - How to check and document design accessibility in your mockups: a conference on how to use Figma plugins and annotation kits to shift accessibility left https://lnkd.in/eu8YuWyF - Accessibility for designer: where do I start? Articles, resources, checklists, tools, plugins, and books to design accessible products https://lnkd.in/ejeC_QpH - Neurodiversity and UX: Essential Resources for Cognitive Accessibility, Guidelines to understand and design for Dyslexia, Dyscalculia, Autism and ADHD https://lnkd.in/efXaRwgF - Color accessibility: tools and resources to help you design inclusive products https://lnkd.in/dRrwFJ5 #Accessibility #ShiftLeft #GAAD

My design passed accessibility checks with 7:1 contrast, while a user measured 3.37:1 on Linkedin. Both of us were right at the end, do you know how? I recently had a very interesting discussion under one of my posts and it turned into a great reminder of how complex accessibility can be in the real world. For the post, I created a graphic and checked that the color contrast of every text element is safely above the 4.5:1 minimum recommended by WCAG. Then a follower commented that some of the text was hard to read on the phone and he shared a screenshot from a contrast checker showing 3.37:1 for one of the colors. That raised an interesting question: how can a design that passes accessibility checks suddenly fail a user? There are several things happening between the moment we design something and the moment someone sees it: 1️⃣ Platform compression When we upload images to social platforms, they are usually compressed automatically to reduce file size. Compression can slightly change colors and blur the edges between text and background. If the contrast was already close to the limit, this can lower the effective contrast. 2️⃣ Image resizing The graphic I designed was quite large, but platforms often resize images for different screens, especially on mobile. When the image becomes smaller: • text strokes become thinner • edges get softened by scaling • readability decreases 3️⃣ Thin fonts + antialiasing Even with sufficient contrast ratios, thin fonts can reduce perceived contrast. When text is scaled or compressed, the browser blends text pixels with the background (antialiasing). That means the visible color becomes a mixture of text and background. Contrast tools inside design software measure pure colors, while the final rendered image contains blended pixels. 4️⃣ Screens and real-world conditions People view content on: • phones in bright daylight • different screen technologies • different brightness levels • sometimes without glasses All of this affects how readable something feels. 5️⃣ Measuring the uploaded image Another important detail: the contrast was checked on a screenshot of the uploaded image, not on the original design. That means the tool measured pixels that were already affected by: • compression • scaling • antialiasing So the measured 3.37:1 might actually be correct for the rendered version of the image. Accessibility does not only happen during design, it also depends on how the design is exported, processed by platforms, and displayed on real devices. That’s why it's helpful to: ✔ aim for contrast higher than the minimum ✔ avoid very thin fonts in images ✔ check the exported file, not only the design tool ✔ test how it looks after uploading to the platform Have you ever experienced something similar where a design technically passed accessibility checks but still caused issues for users? #WebAccessibility #Accessibility #InclusiveDesign #UXDesign #UXAccessibility #WCAG #DesignForAll

😇 Bookmark This: A Free Accessibility Resource Just for Designers If you're a designer working on digital product, —this is one of the best starting points out there. WebAIM's Designers' Accessibility Resource offers a crystal-clear breakdown of inclusive design principles made specifically for designers. No overwhelming jargon. Just clear visuals and best practices that make your work better and more inclusive. 🔹 What’s Covered? ✳️ Text and typography ✳️ Color and contrast ✳️ Layout and structure ✳️ Images and graphics ✳️ Focus and visual indicators ✳️ Controls and touch targets ✳️ Icon accessibility ✳️ Animation and motion ✳️ Forms and error messages ✳️ Responsiveness and flexibility ✳️ Links and clickables ✳️ Readability and plain language This resource pairs perfectly with your design system and should be in every creative team’s toolbox, especially before handoff to dev. 💡 Accessibility is not a “dev task.” It starts with your Figma file, your color palette, your typography. That’s why this resource is so valuable. 🔗 Check it out: https://lnkd.in/gDSeep_B #Accessibility #WebDesign #UXDesign #InclusiveDesign #A11y #DigitalInclusion #DesignSystems #GracefulWebStudio #DesignWithGrace #WCAG #AccessibleDesign #WebAIM

Writing Better CSS! Here’s How Modern CSS enables us to write less code while enhancing our layouts' robustness and accessibility. Here’s a breakdown of these upgrades: CSS Variable Fallbacks: By adding a fallback value like var(--color-text, black), your text remains visible and styled even if the custom property fails to load or isn't defined yet. Fluid Widths Without Media Queries: Hardcoding width: 300px can lead to horizontal scrollbars on smaller screens. Using width: min(300px, 100%) allows the element to maintain a maximum width of 300px while shrinking fluidly on smaller screens. Accessible Pseudo-Elements: Icons or symbols added via CSS content are invisible to screen readers. Adding a "Alt text" after your content provides built-in alt text. Responsive Typography : The font-size: clamp() function allows your text to scale dynamically between a minimum and maximum size based on the viewport width, ensuring it's responsive and readable everywhere. Smarter Grid Packing: If you have awkward empty spaces in your CSS Grid, grid-auto-flow: dense; instructs the browser to look for smaller items and fill those gaps, keeping your layout perfectly packed. #css #webdevelopment #Front #CodingTips #cssvariables #WebAccessibility #cleancode #moderncss

One thing I wish someone had told me earlier in my UX career:  Accessibility isn’t a separate phase of design. It’s something you weave into your workflow from the beginning. It’s a foundational part of a high-quality UX process, the same way responsive design is (like, we don’t debate whether a website should work on mobile). Early in my career, I used to think accessibility meant checking color contrast at the end, and the rest was on the developers. That was so wrong LOL! Accessibility comes from specific design decisions, long before development. When the moment comes to make those decisions, will you already know what to do? ➤ Do disabled elements need a certain level of color contrast? ➤ Is there a minimum contrast ratio for button borders, logos, or UI controls (like toggle switches, checkboxes, pagination)? ➤ How should you design the display of error messages? ➤ How do you make color-coded data visualizations, like charts and graphs, accessible for people who can't see color or tell the difference between certain colors? ➤ If you’re still using links labeled “read more” or “details,” what should they say instead? ➤ How do you design progress trackers without relying on color to differentiate past, current, and future steps? ➤ How do you design focus states so keyboard users can always see where they are? These are all design decisions! Not developer magic, not legal checkboxes. And the thing that frustrated me for years was that I couldn’t find anyone teaching the practical *how* of this. It’s not in universities, design bootcamps, or UX certificate programs. I wanted someone to explain which decisions are non-negotiable for accessibility, and where you still have creative freedom to express the brand within its system. I looked everywhere for real UI examples, real components, real instructions… but that resource didn’t exist. So I built it. If you want an exact, practical, specific guide, this is it.  No theory, no generalizations, no “it depends.” 9 hours of concrete, step-by-step instructions for specific components, like progress trackers, error states, charts, interaction states, and more. I set the Cyber Week discount to the maximum Udemy allows, 90% off, to make this more reachable for people who want it. (On top of that, there’s a 30-day money-back guarantee, if it ends up not being the right fit for you.) 90% off code: CYBER-UP Good for the next 3 days. Feel free to share it. Watch the free preview and enroll here: https://lnkd.in/gAkwC5_M  I want you to feel confident making accessibility decisions the moment they’re in front of you. 🌎❤️ #Accessibility #UXDesign #UXAccessibility #InclusiveDesign #A11y

♿💻 Accessibility isn’t just “nice to have” — it’s what makes a website usable for everyone. When we design or build, every detail matters: 🔹Text: readability, contrast, resize without breaking layout 🔹Headings (H1–H6): logical hierarchy, one H1 per page 🔹Alt text: meaningful descriptions for images 🔹Hover & focus states: visible indicators, no “hidden focus” 🔹DOM order: ensure keyboard navigation follows a logical path 🔹ARIA labels: add context where HTML alone isn’t enough To guide us, WCAG uses 3 compliance levels: 🔹 A (Must have) – The basics. Without this, many people simply cannot use your product.
 Examples: keyboard navigation, alt text for images, sufficient text contrast. 🔹 AA (Should have) – The standard most organizations aim for. It balances inclusion with practicality.
 Examples: focus visibility, resizable text, clear headings, captions for live audio. 🔹 AAA (Nice to have) – The gold standard. Harder to achieve everywhere but amazing if you can.
 Examples: sign language interpretation, extended audio descriptions, very high contrast text. #Accessibility #A11y #WCAG #UXDesign #UI #InclusiveDesign #WebDevelopment #ProductDesign

Accessibility in development isn’t about adding extras, it’s about writing better code from the get-go. Simple habits that can help are: ✅ Use button elements for buttons → <button> works everywhere, while <div role="button"> needs extra work (and often breaks). A button being a better button if it's a button, wow can you imagine? ✅ Label form fields properly → <label for="email"> ensures everyone knows what they’re filling out, including screen readers and autofill. ✅ Make clickable areas big enough → Small touch targets frustrate everyone, especially on touch screens. ✅ Don’t remove focus styles → If you hide focus indicators, keyboard users get lost. Instead, make them your own: design them to fit your UI and brand design. Don't forget that they still need to pass 3:1 color contrast. ✅ Test with a keyboard → Speaking of focus indicators: Can you navigate your site without a mouse? Well, have you tried? This is where the custom focus indicator will either shine or embarrass you. Good code isn’t just functional, it’s usable. And that’s what sets great developers apart. Accessibility isn’t an add-on, it’s what makes you great at your job.

Let’s take a look at the most common accessibility issues and how to fix them. 1️⃣ Low-contrast button labels The buttons with low-contrast labels are harder to read, especially for users with visual impairments. ✅ How to fix: Ensure that the minimum contrast ratio for normal text size (less than 24px) is at least 4.5 : 1. If the text is large (≥ 24px or ≥ 18.66px bold), the contrast ratio should be at least 3 : 1. 2️⃣ Low-contrast icons When an icon has low contrast against the background, it becomes more difficult for users to recognize it. ✅ How to fix: Ensure that icons have a contrast ratio of at least 3 : 1 against the background. 3️⃣ Small target areas When interactive elements have small target areas (less than 24px) and there is not enough space between them, the user can accidentally click or tap the wrong element. ✅ How to fix: A target area should be at least 24×24px, with certain exceptions, such as sufficient spacing or inline text links. 4️⃣ Using placeholder text instead of labels If input fields don’t have visible labels, it will be more difficult for users to recognize the purposes of the fields. It is a bad practice to rely on placeholder text alone, as it’s often low contrast and disappears when users type. ✅ How to fix: Input fields should have labels or instructions so that users know what data is expected. 5️⃣ Missing error message When an input error occurs, it’s not enough to simply highlight the input field in red without showing an error message, because users won’t be able to understand what’s wrong. ✅ How to fix: When an input error is detected, an error message should appear and clearly describe what’s wrong. Check out the Accessibility Checklist here: https://lnkd.in/d_HACYBy #Accessibility #WCAG #AccessibilityChecklist  #WebAccessibility #InclusiveDesign #ProductDesign #UXDesign

If your website isn't usable by everyone, It's not finished. Accessibility isn’t just a checkbox. It’s good design. It’s inclusive thinking. And it benefits every user, not just the ones who need it most. The good news is that making your site more accessible doesn’t require a full rebuild. Small changes can make a big impact. Here are a few practical tips to start with: → Use proper heading structure → Add descriptive alt text → Check color contrast → Make everything keyboard-friendly → Label your forms clearly Accessibility is not about hitting a quota or meeting a legal requirement. It’s about creating a better experience for more people. And when your site is easier to use, your brand becomes easier to trust. --- Follow Michael Cleary 🏳️🌈 for more tips like this. ♻️ Share with someone working on accessibility.