• Subscribe
  • Designing for Accessibility: Tips and Best Practices

    Abhra Ch.
    38 replies
    Creating designs that are accessible to everyone is crucial for an inclusive user experience. Share your favorite tools, tips, or personal experiences that have helped you in designing with accessibility in mind!

    Replies

    CY Zhou
    Designing for accessibility is crucial to ensure that everyone can use your product effectively. Abhra Ch.'s tips are incredibly valuable and should be a cornerstone of any design strategy.
    Share
    CY Zhou
    Great insights, Abhra! Ensuring accessibility in design not only broadens your audience but also creates an inclusive experience for all users.
    Share
    Ashik Hameed
    Great topic, @abhra_ch - Designing for accessibility is so important. Here are a few tips and tools that have helped me: 1. Use Alt Text: Always add descriptive alt text to images for screen readers. 2. Color Contrast: Ensure sufficient color contrast for text and background using tools like Contrast Checker. 3. Keyboard Navigation: Design interfaces that can be easily navigated using a keyboard. 4. ARIA Landmarks: Use ARIA (Accessible Rich Internet Applications) landmarks to improve navigation for screen readers. 5. Accessible Fonts: Choose readable fonts and ensure text is scalable. 6. Accessibility Testing Tools: Tools like Axe, WAVE, and Lighthouse help identify accessibility issues. 7. User Testing: Include users with disabilities in your testing process for real-world feedback. Implementing these practices has significantly improved the inclusivity of our designs.
    Share
    Abhra Ch.
    @ashikhameed That's fantastic! These tips are all really crucial for making designs accessible to all users. Great job prioritizing inclusivity in your work!
    Kostya Bolshukhin
    Use https://colourcontrast.cc/ โ€” simple tool to check if colors have good contrast Use UI colors https://uicolors.app/create to pick quality select of shades for your color palette Check how elements & components are built in popular libs or templates like https://tailwindui.com/ If users recognise element right away it's a good think for accessibility
    Share
    Abhra Ch.
    @kostyabolsh Thanks for the tips! Gonna try them all out. Additionally, I also think consistency in layout and interaction across platforms will further enhance user recognition and accessibility. What are your thoughts on it?
    Share
    Hossein Yazdi
    Here are some useful tools & resources you can check out; https://webcurate.co/c/accessibi...
    Share
    Abhra Ch.
    @hosseinyazdi Wow. Thanks a ton man โค๏ธ
    Share
    Hossein Yazdi
    @abhra_ch You're welcome! ๐Ÿ˜Š
    M Sulaiman
    One key tip for designing with accessibility in mind is to use high-contrast color schemes. This helps users with visual impairments distinguish between different elements on your site. Additionally, always provide alternative text for images and ensure that your site is navigable via keyboard. Tools like Axe and WAVE can be invaluable for checking your site's accessibility. PS: We're launching SEOPro on Product Hunt on July 30th! Itโ€™s designed to optimize your Shopify storeโ€™s SEO and boost your traffic. Your support would mean a lot!
    Share
    Abhra Ch.
    @b2bsulaiman Would keep that designing tip in mind for all my projects. Also, best of luck with your launch!! You can count me in! I look forward to checking it out and spreading the word!
    Richa Chordia
    Creating accessible designs is essential for an inclusive user experience. Here are some tools (figma plugins) that have helped me: 1) A11y 2) Able 3) Stark Apart from designing, user feedback and iterative testing is really important to ensure user experience is as accessible as we designed.
    Gurkaran Singh
    Designing for accessibility is like adding extra sprinkles to your design sundaeโ€”makes it more enjoyable for everyone! Remember, a well-designed user experience is like a good joke: if you have to explain it, it might need some work! ๐ŸŒŸ
    Share
    Abhra Ch.
    @thestarkster ๐Ÿ˜‚๐Ÿ˜‚ That's one way to put it.
    Yvik Ye
    Check out Xspiral, you will find everything you need.๐Ÿ˜ If you are designer, you will love it. This is made by our tool. showcasing an music player and playing "Hey Jude" one of the favourite song in 60s. twitter.com/i/status/1811300552682229801
    Share
    Abhra Ch.
    @xspiral ๐Ÿ˜‚ Sounds pretty innovative. Gonna give that a shot definitely.
    Share
    Luke Wright
    I ensure interactive elements have clear focus states, tested with FocusVisible.
    Share
    Abhra Ch.
    @luke_wright1 Will keep that one in mind as well. Thanks Luke. ๐Ÿ‘
    Mitchell Marshall
    I use high contrast themes and provide dark mode options, tested with Color Oracle.
    Share
    James Chappel
    I provide multiple ways to access content, like text descriptions for audio files, and use Wave for checks.
    Share
    Jonah Muye
    Inclusive Design Wins! "Designing for Accessibility" is so important! This article sounds like a valuable resource for creating user experiences that cater to everyone, regardless of ability. Inclusive design benefits not only users with disabilities but also people using technology in different contexts (low light, noisy environments).
    Share
    Lazar J
    I make our PDFs and documents accessible using Adobe Acrobatโ€™s built-in checker
    Share
    Abhra Ch.
    @lazar_j1 Interesting tip. Thanks Lazar. ๐Ÿ‘
    Lazar J
    I failed to create a sense of urgency. Once we implemented limited-time offers, engagement increased.
    Kevin Not-A-Robot
    Although not mandatory, you should include an accessibility statement on your website or product. It helps to reinforce your commitment to accessibility and keeps you accountable for holding to that commitment! Here's W3's overview of why you should have a statement... https://www.w3.org/WAI/planning/...
    Kevin Not-A-Robot
    One additional thing is when designing button states or anything that changes, try not to limit state changes to just colors. There are many color-blind users out there. When thinking of state changes, make distinct changes to shapes or the size of things to represent that change.
    Kehui Guo
    Want to share one of my favorite readings about accessibility: Guidelines for Accessible and Usable Web Sites: Observing Users Who Work With Screen Readers, by Mary Frances Theofanos and Janice (Ginny) Redish. Accessibility is so important in product designs and I always make sure to test it before launch and use Figma plugins such as Stark and A11y to check my designs.
    Share
    Abhra Ch.
    @kehui_guo That sounds like an interesting read. Would love t check it out and get some good insights about this. ๐Ÿ˜Š
    Joseph Walker
    Absolutely! Some key things for accessible design: 1) Use sufficient color contrast ratios, 2) Provide text alternatives for images, 3) Make sure the site is fully keyboard navigable, 4) Use semantic HTML for better screen reader compatibility. The WAVE accessibility evaluation tool is super helpful for catching common issues. And always test with real users whenever possible!
    Share
    Abhra Ch.
    @josephwalkeri Great tips. Tried my best to use all of these in my new tool. ๐Ÿคž Your support and feedback would really mean a lot. Get Notified about the launch here (https://www.producthunt.com/prod...)
    Thomas Jackson
    Absolutely! Some key tips: 1) Use high contrast colors for text 2) Provide alt text for images 3) Structure content with clear headings 4) Make sure the site is fully keyboard navigable. The WAVE web accessibility evaluation tool is super helpful for catching common issues. And consulting with users who have disabilities during the design process is invaluable for truly inclusive design.
    Share
    Abhra Ch.
    @thomasjackson These are some really great ideas.