├── .DS_Store ├── .github └── FUNDING.yml ├── .gitignore ├── .htaccess ├── .idea ├── .gitignore ├── html.iml ├── modules.xml └── vcs.xml ├── README.md ├── fonts ├── raleway-v34-latin-500.woff2 ├── raleway-v34-latin-700.woff2 ├── ubuntu-mono-v17-latin-700.woff2 └── ubuntu-mono-v17-latin-regular.woff2 ├── index.html └── square-500.png /.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MoritzGlantz/accessibility-cheatsheet/2b8c5ddca73ada61a97b288872beeff440087602/.DS_Store -------------------------------------------------------------------------------- /.github/FUNDING.yml: -------------------------------------------------------------------------------- 1 | # These are supported funding model platforms 2 | 3 | github: MoritzGiessmann 4 | custom: ["https://www.paypal.me/moritzgiessmann"] 5 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | assets/ 2 | template/ 3 | -------------------------------------------------------------------------------- /.htaccess: -------------------------------------------------------------------------------- 1 | # Allow (i)frame embedding 2 | 3 | #Header set X-Frame-Options "allow-from *" 4 | Header unset X-Frame-Options 5 | -------------------------------------------------------------------------------- /.idea/.gitignore: -------------------------------------------------------------------------------- 1 | # Default ignored files 2 | /shelf/ 3 | /workspace.xml 4 | # Editor-based HTTP Client requests 5 | /httpRequests/ 6 | -------------------------------------------------------------------------------- /.idea/html.iml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /.idea/modules.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /.idea/vcs.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Accessibility-Cheatsheet 2 | Practical approaches to Universal Design for making your website/webapp accessible to everyone. 3 | 4 | Find the live version at https://moritzglantz.de/accessibility-cheatsheet/ 5 | 6 | If this helped you, consider a donation or even better: [Buy the poster](https://wowirsindistvorne.myspreadshop.de/accessibility+cheat+sheet+poster-A66d890cf3de4d46a1d11c267?productType=1304&sellable=krqpql57yji0LrO7OgV9-1304-202&appearance=1&size=29)! 7 | 8 | [![ko-fi](https://ko-fi.com/img/githubbutton_sm.svg)](https://ko-fi.com/J3J3JAWO1) 9 | -------------------------------------------------------------------------------- /fonts/raleway-v34-latin-500.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MoritzGlantz/accessibility-cheatsheet/2b8c5ddca73ada61a97b288872beeff440087602/fonts/raleway-v34-latin-500.woff2 -------------------------------------------------------------------------------- /fonts/raleway-v34-latin-700.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MoritzGlantz/accessibility-cheatsheet/2b8c5ddca73ada61a97b288872beeff440087602/fonts/raleway-v34-latin-700.woff2 -------------------------------------------------------------------------------- /fonts/ubuntu-mono-v17-latin-700.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MoritzGlantz/accessibility-cheatsheet/2b8c5ddca73ada61a97b288872beeff440087602/fonts/ubuntu-mono-v17-latin-700.woff2 -------------------------------------------------------------------------------- /fonts/ubuntu-mono-v17-latin-regular.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MoritzGlantz/accessibility-cheatsheet/2b8c5ddca73ada61a97b288872beeff440087602/fonts/ubuntu-mono-v17-latin-regular.woff2 -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | Accessibility Cheatsheet — Practical approaches to Universal Design 19 | 20 | 21 | 654 | 655 | 656 | 657 | 660 |
661 |
662 | v1.1.2 – 2025-03-28 663 |

Accessibility Cheatsheet

664 |

Practical approaches to Universal Design for making
your website/webapp accessible to everyone 665 | https://moritzglantz.de/accessibility-cheatsheet/ 666 |

667 | 668 | ✨ Order as a poster! ✨ 669 | 670 |
671 |
672 |
673 |

Design for accessibility

674 |
675 | 683 |
684 |

Use semantic HTML

685 |

Semantic HTML helps screenreader users to 686 | understand the contents structure and gives it meaning. Ask yourself "What is it?" when writing HTML. Use a 687 | logical headline order and structuring elements as header, footer, 688 | ul, p 689 | …

690 |
691 |
692 |
693 | 709 |
710 |

Provide text for non-text content

711 |

Every content not represented by text is invisible for screen readers. Provide concise 712 | descriptions in alt attributes for all content images and charts. CAPTCHAs 713 | also need to be accessible.

714 |
715 |
716 |
717 | 725 |
726 |

Add labels to form elements

727 |

Form input elements need linked <label>s for screenreaders 728 | access 729 | . Example: <label for="search">Search</label><input id="search"> 730 |
The placeholder attribute is not an alternative. 731 |

732 |
733 |
734 |
735 | 739 |
740 |

Show where your :focus is

741 |

Navigating by keyboard needs the currently focused element to be visibly highlighted. 742 | Interactive elements should get focused in a useful order and be focusable 743 | by 744 | default. E.g. take a <button> instead of a <span> 745 |

746 |
747 |
748 |
749 | 756 |
757 |

Use contrasting colors

758 |

759 | 760 | Text with good and bad contrast to it’s background-color. Always choose high contrast 762 | 763 |

764 |
765 |
766 |
767 | 777 |
778 |

Understandable without color

779 |

780 | Form error in black and whiteColors 781 | should not be necessary to understand the content and its current state. 782 | For 783 | example don’t highlight errors just with red text. Add a subsidiary icon. 784 |

785 |
786 |
787 |
788 | 795 |
796 |

Write descriptive links

797 |

798 | 799 | Linktexts: Wrong: Click here. Right: Assignment instructions 801 | 802 |

803 |
804 |
805 |
806 | 810 |
811 |

Caption video and audio

812 |

Provide text alternatives for audio and video content. Captions should be 813 | made available with pre-recorded and live video/audio content. Voice recognition software can 814 | help create captions for some type of videos.

815 |
816 |
817 |
818 | 828 |
829 |

Keep pinch and zoom alive

830 |

Pinching to zoom is very common and helps aging and low vision users. Use this <meta name="viewport" 831 | statement: user-scalable="yes". Avoid user-scalable= "no" 832 | and maximum-scale: 1 at any cost.

833 |
834 |
835 |
836 | 843 |
844 |

Use WAI-ARIA only if necessary

845 |

Dynamic sites such as single page applications tend to get complicated when it comes to 846 | accessibility. Semantic HTML should always be considered before using WAI-ARIA.

848 |
849 |
850 |
851 | 852 |
853 |

Test for accessibility

854 |
855 | 863 |
864 |

Zoom to 400%

865 |

Use your browser or document viewer zoom. Does all text remain visible?

866 |
867 |
868 |
869 | 874 |
875 |

Check keyboard navigation

876 |

Navigate just using 877 | ←↑↓→ TAB, 879 | SHIFT+TAB, ESC, SPACE and ENTER keys.

880 |
881 |
882 |
883 | 896 |
897 |

Turn your monitor off and use a screen-reader

898 |

E.g. Apple Voiceover or NVDA 899 | on Windows

900 |
901 |
902 |
903 | 906 |
907 |

Run Lighthouse accessibility audit

908 |

It’s in the “Audits” section inside of the Chrome DevTools.

909 |
910 |
911 |
912 | 923 |
924 |

Deactivate CSS

925 |

Check if the document structure still makes sense.

926 |
927 |
928 |
929 | 930 |
931 | 979 |
980 | 981 | 982 | 995 | 998 | 999 | 1000 | 1001 | 1002 | -------------------------------------------------------------------------------- /square-500.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MoritzGlantz/accessibility-cheatsheet/2b8c5ddca73ada61a97b288872beeff440087602/square-500.png --------------------------------------------------------------------------------