How can we help?

Designing With Accessibility In Mind

André Völkel
André Völkel
  • Updated

To help you understand how to make the World Wide Web more accessible, the Web Content Accessibility Guidelines ( WCAG – Guidelines for accessible web content) were developed. These guidelines are based on four principles:

  • Perceivable: Information and user interface components must be presented to users in ways they can perceive.
  • Operable: User interface components and navigation must be operable using keyboard, mouse, and assistive technologies.
  • Understandable: Information and the operation of the user interface must be understandable without causing confusion.
  • Robust: Content must be robust enough to be interpreted reliably by a wide variety of user agents, including current and future assistive technologies.

Each of the four principles above can be measured through success criteria at different levels:

  • A: The basic level of accessibility
  • AA: A medium or good level of accessibility
  • AAA: The highest and most complex level of accessibility

Disclaimer: Please note that the content provided here is only a suggestion and does not constitute legal advice. Any liability in connection with the use of the information provided is excluded. No guarantee is given for the accuracy, completeness and up-to-dateness of the information. We advise you to seek legal advice if you have any uncertainties or questions.


Practical tips for accessible design

Ensuring accessible websites requires more than color contrast – although it plays an important role. That’s why we’ve covered color selection and readability in a separate article. 

  • Structure your content logically. Use heading hierarchies, paragraphs, and lists effectively.

  • Use clear and unique page titles. Avoid duplicate titles – this is especially important for screen reader users.

  • Use simple language. Avoid jargon, unnecessarily complex sentence structures, and long text blocks.

  • Use spacing wisely. White space helps with visual orientation.

  • Provide alternative text. All non-text content (images, icons, iFrames) should include brief, precise, and context-specific descriptions. Learn more in the Alt-Texts article.

  • Provide text alternatives for media. Videos should include subtitles or transcripts. Avoid audio-only content.

  • Ensure flexibility. Content should be readable and usable without zooming on all devices – even without a mouse.

  • Design accessible forms. Use labeled fields, consistent navigation, and clear error messages (text + symbol + color).

  • Give users control over media content. Content should be pauseable, controllable, and not auto-playing.

  • Avoid time pressure. If actions are time-dependent, provide alternatives or time extensions.

  • Ensure consistency. Navigation, layout, and interaction logic should be consistent across all pages.


What to avoid

  • Voice control as the only means of navigation

  • Blinking or automatically playing content

  • Using color as the sole indicator of information

  • Overloaded pages with no clear structure


Further resources

For more detailed questions about technical implementation or assistive tools, we recommend checking out our other articles on accessibility and our community – where many web designers exchange ideas on accessibility topics.

For additional questions, we recommend joining our community, where many web designers are also actively discussing accessibility.

Become a part of our Community!

Exchange ideas with other web designers about current developments, tips, and tricks and show your favorite sites. Get advice and talk to us about possible features you would like to see on Sitejet. You can join the Sitejetters community here.

Was this article helpful?

0 out of 0 found this helpful

Have more questions? Submit a request

Comments

0 comments

Article is closed for comments.