WebAIM: Web Accessibility for Designers

Web Accessibility for Designers

Article Contents

  • Infographic
  • Text Version
  • Embed Code
  • The focus of web accessibility is often on web development – the things that happen in HTML, CSS, or JavaScript. Optimal accessibility should start much earlier, as part of the visual design process. This infographic highlights many important principles of accessible design.


    Text Version

    Plan Heading Structure Early

    Ensure all content and design fits into a logical heading structure.

    Ensure Logical Reading Order

    The reading order for screen reader users should align with the visual order.

    Provide Good Contrast

    Be especially careful with shades of orange, yellow, and light gray. Check your contrast levels with our color contrast checker.

    Use True Text Instead of Images of Text

    True text enlarges better, loads faster, and is easier to translate and customize.

    Use Adequate Font Size

    Small text is difficult for all users to see. Ensure text is optimally readable.

    Remember Line Length

    Don’t make lines too long or too short.

    Make Sure Links are Recognizable

    Distinguish links from body text using more than just color (e.g., underline).

    Design Keyboard Focus Indicators

    When navigating with the keyboard, the focused item must be visually distinctive.

    Design a "Skip to Main Content" Link

    A keyboard accessible link for users to skip navigation should be at the [...]

    Read article at webaim.org

    Article Taxonomies

    Categories: ,
    Fatal error: Uncaught Error: Object of class WP_Error could not be converted to string in /home/webable/www/www/wp-content/themes/webable/content-mcm.php:65 Stack trace: #0 /home/webable/www/www/wp-includes/template.php(812): require() #1 /home/webable/www/www/wp-includes/template.php(745): load_template('/home/webable/w...', false, Array) #2 /home/webable/www/www/wp-includes/general-template.php(206): locate_template(Array, true, false, Array) #3 /home/webable/www/www/wp-content/themes/webable/single-mcm_article.php(15): get_template_part('content-mcm') #4 /home/webable/www/www/wp-includes/template-loader.php(106): include('/home/webable/w...') #5 /home/webable/www/www/wp-blog-header.php(19): require_once('/home/webable/w...') #6 /home/webable/www/www/index.php(17): require('/home/webable/w...') #7 {main} thrown in /home/webable/www/www/wp-content/themes/webable/content-mcm.php on line 65