Skip to content

Web Accessibility for Designers

    Creator: WebAIM

    Date Updated: April 16, 2024

    Overview

    Aimed at designers, the article emphasizes that accessibility considerations should be integrated into the visual design process from the outset. The resource presents an infographic highlighting key principles of accessible design, covering aspects such as heading structure, reading order, contrast, text versus images, font size, link design, keyboard focus indicators, skip links, widget usability, multimedia usage, colour usage, and form controls.

    The information in this page is summarized from the WebAIM Web Accessibility for Designers article.

    Quick Facts

    WebAim outlines key components to ensure that your website is accessible. Here are some highlights from the article:

    1. Plan Heading Structure Early: Emphasizes the importance of planning a logical heading structure for content and design alignment.
    2. Logical Reading Order: This section highlights the need for screen reader users to experience content in a reading order that aligns with visual presentation.
    3. Provide Good Contrast: Use the colour contrast checker tool to ensure sufficient contrast, particularly for orange, yellow, and light gray.
    4. Use Adequate Font Size: Use a readable font size to accommodate all users effectively.

    To read more, visit the WebAIM Web Accessibility for Designers article.

    References

    WebAIM. (2017, April 21). Designing for Screen Reader Compatibility. https://webaim.org/techniques/screenreader/

    WebAIM. (2020a, May 1). Semantic Structure: Regions, Headings, and Lists. https://webaim.org/techniques/semanticstructure/

    WebAIM. (2020b, September 22). Accessible images. https://webaim.org/techniques/images/text_graphic

    WebAIM. (2021, September 22). Skip Navigation Links. https://webaim.org/techniques/skipnav/

    WebAIM. (2024a). Contrast Checker. https://webaim.org/resources/contrastchecker/

    WebAIM. (2024b). Links and Hypertext: Introduction to Links and Hypertext. https://webaim.org/techniques/hypertext/

    WebAIM. (2024c). Web Accessibility for Designers. https://webaim.org/resources/designers/