Designing for Accessibility

By Bethan Dutton

5 min read

Rule-of-thumb foundations every designer should follow

Accessibility is not one type of need. It covers vision, hearing, mobility, cognition, language, attention and temporary or situational limits. Good design respects every one of these.

Colour

  • Different colours carry meaning, so choose purposefully
  • Aim for strong contrast so text and interactive elements stay readable
  • Buttons, icons and alerts must stand out clearly
  • Never rely on colour alone to show state or meaning
  • Use tools to check and improve contrast when needed

Typography

  • Choose typefaces suited to the language and region you are designing for
  • Text should be readable at a range of sizes, with comfortable spacing
  • Avoid thin or decorative fonts that collapse at small sizes
  • Ensure your design scales smoothly when users increase or decrease text size

Buttons and Interactive Elements

  • Make interactive areas large enough for all users to tap easily
  • Labels should be short, clear and supported by icons when helpful
  • States should be obvious: rest, hover, active and focus
  • Interactive elements must be clearly distinguished from static content

Layout and Structure

  • Follow a natural, logical reading order
  • Group related elements together
  • Use spacing to reduce cognitive load
  • Keep layouts flexible so they work when text is scaled up or down

Tabbing and Navigation

  • Tabbing order should follow the visual flow of the page
  • All interactive elements must be reachable by keyboard
  • Focus states must be strong and visible
  • Screen readers should move through content in a clear, understood order

Images and Media

  • Provide alt text for meaningful images
  • Mark decorative images correctly so they are skipped
  • Avoid relying solely on visuals to convey essential information
  • Think about users with full blindness, low vision or those using screen readers

Forms

  • Every field needs a clear label that stays visible
  • Placeholders support, but never replace, the label
  • Error messages should be specific and explain the next step
  • Form layouts should be simple and predictable

Motion and Interaction

  • Keep animation calm and purposeful
  • Avoid flashes or abrupt transitions
  • Allow users to operate the product without relying on motion or fast reactions

Cognitive and Neurological Accessibility

  • Write in plain, direct English
  • Break content into short sections
  • Avoid overwhelming users with unnecessary options
  • Support users with different attention spans, memory levels or processing styles
  • Reduce ambiguity wherever possible

Scaling and Flexibility

  • Designs should hold together when zoomed in or zoomed out
  • Content must reflow without breaking
  • Nothing essential should disappear when scaled

People

  • Accessibility is not only about sight or hearing
  • It includes dyslexia, ADHD, autism, anxiety, mobility limits and temporary impairments
  • Design for real human variety, not a single perfect user

Development and Implementation

  • Accessibility must be part of the design system, not an afterthought
  • Components should bake in correct colour contrast, spacing and focus states
  • Developers must add alt tags, correct semantics and proper ARIA attributes
  • Finished work should be audited, not assumed to be accessible
  • Collaboration is essential. Designers and developers need the same understanding

Mindset

  • Accessibility is everyday design, not specialist work
  • It should be considered from start to finish
  • If many people cannot use it, it is not finished
  • Good accessibility improves the experience for everyone