Design

Help ensure that user interfaces are designed with accessibility in mind by testing color contrast, using proper heading styles, use of white space and font selections. 

On this Page:

  • Use sufficient color contrast and avoid relying solely on color to convey information.
  • Organize content with proper heading styles and logical structure.
  • Leverage white space and readable fonts for clarity and accessibility.
  • Test designs with automated tools or plugins, like Stark for Figma & InDesign, and involve diverse users in testing, making accessibility an iterative process.

Inclusive Design

Inclusive web design ensures that user interfaces are usable by as many people as possible, regardless of disability or environment. By incorporating inclusive practices, we not only comply with accessibility standards but also foster a better user experience for everyone.

External Content: 

Color Contrast

  • Ensure sufficient contrast between text and background colors.
  • Use tools like contrast checkers to verify compliance with WCAG standards.
  • Avoid relying solely on color to convey information (e.g., use symbols or labels).

Related accessibility article on Color.

Proper Heading Styles

  • Use semantic HTML tags like <h1> through <h6> in a logical order.
  • Avoid skipping heading levels to maintain structure.
  • Enable screen readers to navigate content more effectively.

White Space Utilization

  • Balance content with adequate white space to reduce visual clutter.
  • Group related elements together for better readability.
  • Avoid overcrowding to improve focus and comprehension.

Font Selection

  • Choose legible fonts, prioritizing sans-serif options for on-screen readability.
  • Ensure text size is adjustable and scalable.
  • Avoid overly decorative fonts, which may hinder accessibility.

Testing for Accessibility

  • Automated Tools:
    • Use accessibility evaluation tools or plugins for design software like Figma (e.g., Stark) or InDesign to help with accessibility testing.
    • Regularly test pages for compliance with WCAG 2.1 Level AA standards.
  • User Testing:
    • Include people with disabilities in design reviews. 
    • Gather feedback to identify areas for improvement.
  • Iterative Process:
    • Treat accessibility as an ongoing process, not a one-time task. Consider integrating accessibility checks into the workflow for design tools like Figma and InDesign to ensure consistency.
    • Continuously update and refine designs based on user feedback.

Conclusion:

Inclusive design is not just about compliance—it’s about empathy, innovation, and creating a digital environment where everyone feels valued. By embracing accessibility, we not only meet standards but also create user experiences that are welcoming, efficient, and impactful. 

Related Yale Resources

    • Training
    • Lunch & Learn

    Testing for Accessibility

    Published:

    Watch the process of one our accessibility engineers testing a website for accessibility using various tools and techniques.

    • Training
    • Lunch & Learn

    Inclusive Design

    Published:

    Learn what it means to consider inclusive design, what that practically looks like, when it is appropriate, and how it overlaps with universal design.

    • Training
    • Lunch & Learn

    Custom Accessible Form Widgets

    Published:

    Join Yale Web Technology’s Web Accessibility Engineer Nick Taylor and learn how to build accessible custom form widgets using HTML and ARIA.