How to create an accessbile website

Often web developers or designers tend to create complex looking websites, which are purely focused on the design. However this might come with some issues for certain people. Therefore this guide, will show what needs to be taken care of when creating websites.

Keyinformation on how to create accessible websites

  • Disable animations or autoplay functions for videos etc.
    • avoid any kind of possible distractions
    • pause and play buttons
  • Highlight or remind important content for the user
  • Accessible color scheme
    • avoid complex gradients
  • Clearly defined User Interface
  • Minimalistic approach
    • clear pattern structure
    • reduce notifications on the website itself
    • consistent and predictable navigation
    • clear and specific descriptions
  • Typograpghy for Websites:
    • Sans Serif Typeface fonts (such as Helvetica or Roboto)
  • Alternative viewing modes
    • On / Off switches for certain interactions and animations
    • Color modes
  • User testing
    • gather feedback after testing and implement it
  • Keep your components consistent by using a Content Management System
    • keep the placement of the components consistent
    • component based frameworks like Angular might help
  • Simple interactions should not change the the design of the website
  • Optimize line spacing and paragraph structure
  • Include alternative text for images / captions

Examples

Example that might cause issues

Website example taken from https://www.bruegel2018.at/en/. Be aware loading the example will result in a lot of traffic and may take some time!

Additional Disclaimer

This guide should be used primarily as a recommendation for creating accessible websites for visitors who may have ADHD. When creating a website using this guide, it should not completely stifle your creativity. As mentioned above, alternative modes in which certain can be a great first step towards improving accessibility. The examples shown are not necessarily wrong or bad. The point of showing them is to highlight what could be harmful to some people as they browse the web. There is no intention to denigrate anyone’s work, because creativity has endless possibilities.