103 tips for digital accessibility

The 103 tips have a general structure. I start with general knowledge of digital accessibility, then move to tips for design and content creation, and finally to development. However, some of the tips are not entirely specific to one role and are relevant to everyone.

These tips are a subjective compilation of accessibility, web design, and user experience criteria. Not all the 103 points are WCAG-relevant. You can find out what actually applies to WCAG here: WCAG criteria.

General tips on accessibility

1. Accessibility is mandatory: Be ready! (More on the laws).
2. See how people use assistive technologies to strengthen your “why” and increase your motivation. Watch Apple’s video on accessibility. Watch the video series on assistive technologies in action.
3. Gain hands-on experience with screen readers, voice control, and tab navigation. (Watch our screen reader demonstration with a blind person).
4. Train your team – accessibility is something you can’t finish. (More about accessibility in teams).
5. Get the accessibility plan. (Accessibility free plan) (English available on request)
6. Know the most important KPI for digital accessibility: fewer bugs in production.
7. Make sure everyone knows: fewer bugs, lower costs.
8. Understand the opportunity: Becoming accessible (by 2023/2024) strengthens your brand image.
9. Make inclusion a core value. (Learn more about why inclusion is the only future).
10. Establish an accessibility team within the company.
11. Create more empathy for people with disabilities. (See the importance of awareness campaigns).
12. Settings in your operating system make overlay tools unnecessary. (Learn more about your operating system settings).
13. Overlay tools do not replace accessible programming.
14. Don’t waste your money on certifications.
15. Never forget: HTML is inherently accessible.

Accessible design tips

1. Make accessibility one of your top three priorities when making design decisions.
2. Get inspired by other accessible designs. (If you’d like to register for free, there’s a great case study on accessible design by the company Wise on Medium. )
3. Maintain a text-to-background contrast of at least 4.5:1.
4. Keep the contrast between buttons/controls and the background at least 3:1.
5. Use these tools to test contrasts: WebAIM’s contrast check and APCA’s contrast check.
6. Give your logo the right contrast (no requirement, but it looks nice anyway!).
7. Do not make body text smaller than 16 pixels – 18 pixels is better.
8. Do not make buttons and other interactive elements smaller than 24 by 24 pixels – 44 by 44 is better.
9. Avoid sliders.
10. Avoid modals.
11. Make your layouts responsive.
12. Maintain consistency in your layout. (Examples: Always place the navigation, chatbot, or help section in the same location.)
13. Design buttons with a clearly recognizable focus state.
14. Don’t just use color to display important information. (Your design should also work in black and white.)
15. In particular, clarify error messages with icons and text, and not just with color.
16. Offer an additional search function as an alternative to navigation.
17. Label your icons. (Not everyone knows that three lines represent a menu.)
18. Avoid flashing elements.
19. Choose a font where the letters are easily distinguishable.
20. Avoid centering long texts.
21. Avoid completely white backgrounds.
22. Avoid using all-black text (#000000) on a white background.
23. Avoid sticky navigation.
24. Avoid strong blue tones.
25. Break down complex forms into smaller steps. (More about forms).
26. In a form, select only the optional fields. (Learn more about why you should only highlight optional fields.)
27. Use links as links and buttons as buttons. (More about links and buttons).
28. A dark mode is nice, but not necessary – your laptop can do it automatically. (More on accessibility in operating systems).
29. Do not use red-green color to visualize important information (10% of men are red-green colourblind).
30. Document your design decisions regarding digital accessibility. (Example: Different element states or different color combinations.)

Tips for creating accessible content

1. Give links meaningful labels (e.g., “To the contact form” instead of “Click here” ). More on link text.
2. Give images alternative text.
3. Write alternative text correctly. (See our article about alt text).
4. Label your icons.
5. Never write long texts using only capital letters.
6. Avoid alt text for purely decorative elements (lines/shapes/images and illustrations without meaning).
7. Tag foreign words in the correct language. (More about the HTML lang attribute)
8. Give each subpage of your website a meaningful title.
9. Avoid using GIFs (yes, I know, sorry!).
10. Stick to the correct heading structure (H1, H2, H3, H4, and so on).
11. Be consistent in your word choice. (Don’t use “account area” once and “your area” another time .)
12. Do not write text on your images – assistive technologies cannot read this text.
13. Do not describe elements solely by their appearance (example: the yellow button).
14. Do not describe elements solely by visually perceptible properties (example: the button in the bottom left).
15. Create a sitemap as an alternative to navigation.
16. Use the HTML element “Blockquote” for quotations.
17. Write captions for videos.
18. Create audio descriptions for videos (if needed).
19. Make captions available for live broadcasts.
20. Avoid tables. If you must use them, give them the correct HTML structure.
21. Give your icons alt text if they trigger an action.
22. Make your PDFs accessible. (Learn more about creating accessible PDFs).
23. Avoid emojis.
24. Avoid placing links directly within paragraphs. This disrupts the reading flow for screen readers. Place links after the paragraph.
25. Use <strong> to make text bold.
26. Use <em> to italicize text.
27. Create an accessibility statement. (More about accessibility statements).

Accessible development tips

1. Use HTML landmarks. (More on proper HTML structure).
2. Make animations pauseable if they are longer than 5 seconds (this also includes automatic sliders).
3. Make sure that text is not obscured by other elements when zooming in.
4. Include skip links. (WCAG criterion 2.4.1: Skippable sections).
5. If you have multiple navigation devices, name them. (More on ARIA labels for navigation devices)
6. Don’t let notifications disappear automatically.
7. Do not automatically log users out after a set period.
8. Give users enough time to make their decisions.
9. Ensure your website/app is fully keyboard accessible. (WCAG criterion 2.1.1: Keyboard).
10. Test your page with a screen reader.
11. Allow users to undo critical entries.
12. Label each form field.
13. Use the HTML autocomplete attribute for form fields (WCAG criterion 1.3.5: Determining the purpose of the input).
14. Set the correct language for your website. (More about the correct language in HTML).
15. If I can do something by moving my finger (example: pulling something), there needs to be an alternative for people who can’t do that (example: a button to click).
16. Link your form fields to their labels using code. (More on accessible forms.)
17. If you use captchas, give users several alternatives.
18. Use the correct ARIA elements for your self-built components. (More about ARIA labels)
19. Save user input (e.g., in form fields) so they don’t have to re-enter it later.
20. Provide meaningful error messages for forms.
21. Avoid making me remember my login details. (Enable autofill or send a login email.)
22. Test your digital product with people with different disabilities.
23. Do not use HTML tables for your layout.
24. In an error message, also describe how to fix the error.
25. Make sure that screen readers process your elements in a logical order.
26. Use ARIA Live Region to communicate changes. (Learn more about Live Region).
27. Use bookmarklets to test HTML. (How to use Bookmarklets).
28. Use libraries for development. (Example library from Kolibri).

The most important thing!

1. See the WCAG criteria for more explanations. (See WCAG criteria overview).
2. Join one of our workshops! (View our workshops) (View our workshops).
3. Tell everyone how valuable digital accessibility is and why they should all participate!