Key Accessibility Strategies for Websites

Design can only be termed good if it reaches all. Creating beautiful and innovative designs is a key goal for graphic designers. However, even the most visually appealing designs can be inaccessible to some users if they don’t consider various accessibility needs. Low contrast between text and gaudy backgrounds can make it difficult for people with visual impairments or colour blindness to read the content. Decorative fonts can be hard to read for everyone, especially for people with dyslexia or other reading disabilities. So, what do we do to make designs more disability inclusive? 🔍 Understand Diverse Needs: Begin with empathy. Get to know the unique needs and challenges faced by people with disabilities. This understanding will guide your design process to be more inclusive. 🖼️ Accessible Visuals: Use high-contrast colors and clear fonts to make text and images easily readable. 🗣️ Alt Text Matters: Provide descriptive alt text for all images to ensure that screen readers can convey the content to visually impaired users, making your designs more inclusive. 🎨 Responsive Design: Design with flexibility by creating layouts that adapt seamlessly across different devices and screen sizes, including those used by people with disabilities. ♿ Universal Symbols: Use universally recognized symbols and icons to communicate important information. 💬 Inclusive Language: Choose words that respect and acknowledge people with disabilities. Avoid ableist language and ensure your message is positive and empowering. 👩💻 User Testing with Disabled Communities:  Involve people with disabilities in your testing process. Their feedback is invaluable in creating designs that truly meet their needs. Embracing disability inclusion in our designs is the next step to making the world a better place. Let me know of more design inclusive strategies in the comments below! #inclusive #design #accessibility #uxdesign #a11y #disabilityinclusion #universaldesign #webaccessibility #empathyindesign #userexperience #designthinking

Your design might look clear and organized, but if that structure isn't in the code, assistive tech users miss out. Headings, lists, form groups, required fields, tables - they all need proper HTML to be meaningful. This carousel breaks down how to meet 1.3.1 and why it's important. Check it out 👉 #Accessibility #A11y #InclusiveDesign #WebDev #WCAG #SemanticHTML #DesignWithIntention If you prefer your content as text, read on: When design isn’t enough. Understanding WCAG 1.3.1. What is WCAG 1.3.1? Your design communicates meaning and relationships. But if it’s not in the code, assistive technology users can’t access that information. Why it matters. If you rely only on how things look, you leave out people who use screen readers, rely on braille displays, or can’t see layout or hear audio cues Common mistakes. These may look fine, but aren’t coded accessibly: Bold text as a heading Asterisks or red text for required fields Dashes for lists Tables made with spaces or tabs instead of HTML Do it right with semantic HTML. Use the correct HTML tags and attributes to convey meaning to assistive technologies. Reinforce style with structure. If color, sound, or placement communicates something, back it up with code. Code grouped form fields. Wrap form fields that go together in a fieldset and use a legend to describe the purpose of the set of fields. Code headings correctly. Use semantic heading tags in a logical order. Use h1 for the page title, h2 for section headings, h3 for subsection headings, and so on. Mark up lists correctly. Use ul or ol elements to code lists. Don't fake it with dashes or emojis. Mark up (and use) tables correctly. Use tables for tabular data, not for layout. Use a caption to describe what the table is about. Use th elements for table headers and define their scope. Use td elements for table cells. Label it or lose the meaning. Programmatically associate labels with form fields by using a for attribute on the label that refers to the ID of the input. Required field? Code it that way. Use the aria-required="true" attribute to mark required fields. No landmarks? No map. Provide page landmarks such as header, main, footer, aside, and nav to help users find their way. The big picture. WCAG 1.3.1 is one of the most common success criteria to have failures...and many of those are some of the easiest to fix! Learn more. Want more clear and actionable WCAG breakdowns? WCAG in Plain English is available now!

😇 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

Accessibility should be seen as necessary, mandatory, and crucial. Here are 8 tips for Global Accessibility Awareness Day (GAAD). Before I dive into these simple tips, let’s quickly learn about GAAD. The main purpose of GAAD is to get everyone talking, thinking, and learning about digital access and inclusion, and the 1 Billion+ people with disabilities. GAAD is celebrated annually on the third Thursday of May, so this year it's on May 15th (today!). A disabled person should be able to experience the internet, apps, social media, and all digital spaces like anyone else, but unfortunately, many websites and digital spaces are still inaccessible. So here are 8 easy tips for digital accessibility: 1. Color Contrast Accessible content generally has high contrast between the background and text colors, which makes it easier to read. For example, using a black background with white text will be accessible for most people. There are exceptions to this guidance as those with colorblindness and conditions like Irlen Syndrome may have other needs. 2. Closed Captions When hosting virtual meetings, always provide closed captions. Also, provide captions for content that you produce online. Please provide fully accurate captions instead of relying on automatically-generated ones. 3. Image Descriptions (IDs) Write IDs to help blind and low vision people learn what an image looks like. This is especially important when an image conveys information, such as an event flyer. You can add IDs within a post or in the comments. 4. Audio Description (AD) Audio description is helpful for those with vision disabilities. AD describes visual content in enough detail so that people don't miss out on information. Include AD in videos and verbally describe images in presentations. 5. Transcripts Transcripts are wonderful for business because they allow you to improve your SEO rankings since your audio or video content has been turned into words. Transcripts also help make content accessible for the D/deaf and hard of hearing, those with other disabilities, and more. 6. Label Buttons Unlabeled buttons on apps and websites create access issues. This is very important for screen reader users. Each user needs to be able to easily determine what a button does and also find the buttons. 7. Pascal Case Hashtags Capitalize each word within a hashtag to ensure a screen reader can understand it. Example: #DisabilityAwareness 8. Include Diverse Images Many times, disabled people don't see themselves represented in the world. This is especially true for disabled people of color. Use diverse images in media representation, advertisements, images on social media, and more. Did you know about Global Accessibility Awareness Day? Will you use these tips? cc: GAAD (Global Accessibility Awareness Day) Foundation PS: For more accessibility tips, check out my free accessibility ebook (linked at the top of my profile)! #Accessibility #GAAD

Inclusive UX isn’t always about big builds. Sometimes, it’s a few small tweaks that quietly improve the experience for everyone. Over the years, I’ve learned that accessibility isn’t some separate track. It’s in the everyday decisions: → Persistent labels (not just placeholders) → Clear, left-aligned text → Generous touch targets → Skip links, semantic headings, zoom support → Supporting “reduce motion” settings These things don’t take much—but they go a long way. And honestly? Most of us have relied on these features at some point: • Captions when watching a video in public • Voice-to-text while multitasking • High contrast on a sunny screen It’s not just “accessibility.” It’s thoughtful UX. So I put together 20+ low-lift, high-impact ways to make your designs more inclusive—without slowing your team down. If your product team wants better UX for more people, this is a good place to start. What’s been your favorite UX tweak that brings more accessibility to your projects? (Comment “PDF” if you'd like me to send you this file.) #uxdesign #inclusiveux #accessibility #a11y #productdesign #uxstrategy #designcraft ⸻ 👋 Hi, I’m Dane—I love sharing design insights. ❤️ Found this helpful? 'Like’ it to support me. 🔄 Share to help others (& save for later). ➕ Follow me for more like this, posted daily.

Oh, my GAAD! It's finally here! For those not aware, today is Global Accessibility Awareness Day aka GAAD. Here are 10 easy ways you can take action to make progress in accessibility and disability inclusion. It's OK not to do it all. The key is progress over perfection. Make progress every day. It's possible you'll go backward. It happens. Dust off and try again. It took me a bit of time to make things a habit, such as alt text, describing myself, and saying "This is Meryl speaking." If you forget, fix it and give yourself a little grace. If you see someone forget, educate them and give them grace. Pick one or two things. Practice them more than once. When you feel like you have them down, pick the next one or two things. Progress over perfection. Add image descriptions to images and describe them in context. The key is to be descriptive yet concise. There is no one right way to do it. Just start doing it. "This is [your name]" when you speak on a group call. Someone may be listening rather than watching. Create a transcript for your most important or next podcast or audio clip. It's important to format the transcript by creating short paragraphs. It's hard to read a big block of text. Add accurate plain captions to your most important or next video. Refer to the caption cheat sheet for more on this. Offer at least two modern communication options. This applies everywhere. You can require people to fill out the contact field on a form as long as you give them choices (email, phone, text). Websites need to provide two modern contact options. A fax number and snail mail don't count, y'all. Capitalize the first letter of each word and abbreviations in hashtags and usernames. It helps to do this for URLs, too. But some URLs may be case-sensitive. Test the URL. Use a free tool to check color contrast on your content and images. A lot of websites use poor color choices for the background and the text. It adds friction to the reading experience. Avoid ALL CAPS in all content because it has no visual shape and feels like yelling. Sentence case is the most readable. Add a blank line between paragraphs to improve readability. Avoid abusing emojis 👎 like👎 this 👎nightmare. Screenreaders describe the emoji. And it can be hard to read a sentence with emojis showing up in between words. Take action today! Accessibility isn’t just a checkbox. It’s a commitment. Start with one step, make it a habit, and keep moving forward. Let’s build a world where everyone matters. Drop a comment with the action you’re taking today! Need guidance? I offer speaking and coaching to help organizations create accessible workplaces, products, and services. Let’s connect! P.S. Thanks to the American Red Cross for having me as today's keynote and prioritizing accessibility! 🔔 Tap the profile bell for more. ➡️ Follow #MerylMots to find content. #GAAD #Communication

Imagine this: you’re filling out a survey and come across a question instructing you to answer 1 for Yes and 0 for No. As if that wasn't bad enough, the instructions are at the top of the page, and when you scroll to answer some of the questions, you’ve lost sight of what 1 and 0 means. Why is this an accessibility fail? Memory Burden: Not everyone can remember instructions after scrolling, especially those with cognitive disabilities or short-term memory challenges. Screen Readers: For people using assistive technologies, the separation between the instructions and the input field creates confusion. By the time they navigate to the input, the context might be lost. Universal Design: It’s frustrating and time-consuming to repeatedly scroll up and down to confirm what the numbers mean. You can improve this type of survey by: 1. Placing clear labels next to each input (e.g., "1 = Yes, 0 = No"). 2. Better yet, use intuitive design and replace numbers with a combo box or radio buttons labeled "Yes" and "No." 3. Group the questions by topic. 4. Use headers and field groups to break them up for screen reader users. 5. Only display five or six at a time so people don't get overwhelmed and bail out. 6. Ensure instructions remain visible or are repeated near the question for easy reference. Accessibility isn’t just a "nice to have." It’s critical to ensure everyone can participate. Don’t let bad design create barriers and invalidate your survey results. Alt: A screen shot of a survey containing numerous questions with an instructing you to answer 1 for Yes and 0 for No. The instruction is written at the top and it gets lost when you scroll down to answer other questions. #AccessibilityFailFriday #AccessibilityMatters #InclusiveDesign #UXBestPractices #DigitalAccessibility

One billion people experience disabilities.  As merchants, we talk about serving customers yet design systems that restrict many from even shopping.  This not only hampers sales but fails basic ethical standards. Common obstacles that lock out users:   - Tiny/low contrast text that visual disabilities cannot decipher - Pages without alt text descriptions excluding the visually impaired  - Keyboard limitations hampering those without touch capability The solutions exist through inclusive e-commerce design.  Optimizing for accessibility is proven to increase conversion rates while expanding market reach. Standards like WCAG outline the building blocks:  - Add explanatory alt text for images - Structure logical page layouts   - Ensure color contrast  - Allow keyboard navigation This should be table stakes, not a "nice-to-have."  Equity in commerce will become the next competitive frontier.

I have a quick accessibility tip! It's really easy to test out keyboard accessibility with a keyboard! I've heard some people think it's a specialized skill, but it's pretty easy to start. Start with your cursor in the address bar and press the Tab key. If you’re on the browser version of LinkedIn you can try it here! Depending on your browser you might need to tab a couple of times before you get down to the actual page. What happens when you get on the page? You should be able to see where you are with a focus indicator. A focus indicator is an outline that goes around the element that has focus (the spot where you are on the page). The focus should go to each interactive element on the page. That means things like links, buttons, and navigation elements should get focus, but things like paragraphs and headings shouldn't. You’ll need to use the arrows instead of the Tab key to get to each option in things like groups of radio buttons. It's important to check things like cookie consent banners and chatbots that sit on top of the page. Can you get to them with a keyboard? Can you open and close them? They might be at the end of the focus order. That could be okay if they're not really covering other content, but frustrating if they are. You might need to go backward in the focus order (using Shift + Tab) to close them so you can interact with the page. If you have navigation dropdowns you should check to make sure you can get to all the stuff in them. And you should also check to make sure the Enter key lets you do things like open links and activate buttons. You can do this on any website, and it's a great thing to do on the website(s) you work on. Sometimes designers think this doesn't have anything to do with them, but it does! You can use your understanding of focus order (the order things get focus on the page) when you're creating something new. It will make things easier for devs and the people who will use what you design. Lots of people use a keyboard instead of a mouse - some because they need to (like they’re blind or have a repetitive stress injury) and some because they want to (power users or people with fancy gaming keyboards who want to use them all the time). Making sure your site works well with a keyboard will help more people be able to use it, which is what you want! Here are some resources to learn more about keyboard accessibility: - Keyboard Accessibility from WebAIM - https://lnkd.in/e4PPCVbv - Keyboard Compatibility from W3C - https://lnkd.in/ePEUBdXB - Keyboard accessible from Mozilla - https://lnkd.in/eTtb9d6g