Web Accessibility Poster
FYI convention with mind maps is to start with the branch at 12 o'clock and read clockwise, though it doesn't really matter.
Download poster
View full-sized A0 poster in new tab
A0 is the size of 16 A4 sheets :)
Text alternative
Here's a bunch of expandable lists that match the mind map branches :)
- Images, icons, charts and any other non-text content has alt text, an accessible name or another text alternative (1.1.1 A)
- For pre-recorded videos (1.2.2 A)For live videos (1.2.4 A)
- Have audio descriptions or text alternatives (1.2.3 A)Have audio descriptions (1.2.5. A)
Any audio (without images or video) has a transcript and silent videos have audio or text alternatives (1.2.1 A)- Visually obvious information, structure and relationships, e.g. headings and lists, are conveyed in the code or text (1.3.1 A)Sensible reading order in the DOM (1.3.2 A)Instuctions don't rely on shape, colour, size, location, orientation or sound (1.3.3 A)Orientation isn't fixed (1.3.4 AA new)Common fields have autocomplete (1.3.5 AA new)
- When it conveys meaning, colour has a partner: text, pattern or contrast (3:1 to what the colour is differentiating from, e.g. surrounding text) (1.4.1 A)I can pause or mute audio that's longer than 3 seconds (1.4.2 A)I can see the text against the background. Small text contrast > 4.5:1, Large text (18pt or bold 14pt) contrast > 3:1 (1.4.3 AA)I can increase the text to 200% on a 1280px x 1024px screen using text-only and/or page zoom and still read and use everything fine (1.4.4 AA)Text is real text, not images of text, unless it's a logo (1.4.5 AA)Zoomed in to 400% on a 1280px x 1024px screen, (same as a 320px x 256px screen), I can read and use everything and there's maximum 1 scroll bar (1.4.10 AA)I can see interactive elements, their different states and any important graphics. Contrast > 3:1 (1.4.11 AA)I can see and use everything when I change the text spacing to these multiples of the font size: line height 1.5, letter 0.12, paragraph 2, word 0.16 (1.4.12 AA)Content on hover and focus: When I mouse over, it should stay;It won't disppear before I say; But I can make it go away (1.4.13 AA)
- I can do everything using the keyboard (2.1.1 A)I can always move focus by pressing tab or other standard keys and don't get trapped anywhere (2.1.2 A)Single key shortcuts can be turned off, remapped or only active when something's focused (2.1.4 A)
- For time limits less than 20 hours, I can turn it off, adjust it to least 10x the default length or extend it with a simple action just before time runs out at least 10 times (2.2.1 A)For content that automatically moves for more than 5 seconds or updates, I can pause, stop or hide it or set the frequency of updates (2.2.2 A)
- Less than three flashes per second (2.3.1 A)
- I can skip blocks repeated across pages, like menus (2.4.1 A)Pages have titles (2.4.2 A)The keyboard focus order makes sense (2.4.3 A)I know what a link does by the text alone, or by the context in the paragraph, list or cell (2.4.4 A)There are multiple ways to get to each page (2.4.5 AA)Headings and labels are relevant (2.4.6 AA)A focus indicator is visible for everything interactive (2.4.7 AA)Focused elements are not completely hidden behind other content (2.4.11 AA new)
- Controls that need more than one finger or that depend on me taking a specific path have an alternative that needs neither (2.5.1 A)Actions can be prevented by moving my finger or cursor away before releasing or can be undone afterwards (2.5.2 A)Visually hidden accessible names start with the visual label (2.5.3 A)There's an alternative if I'm supposed to move my device or gesture at it. I can turn off motion if I want to (2.5.4 A)I can click or tap instead of dragging (2.5.7 AA new)Clickable things are bigger than 24px x 24px, or if they're centered in a 24px x 24px circle, no circles intersect, or they're inline in text (2.5.8 AA new)
- The language is set in the HTML (3.2.1 A)The language of every foreign phrase is set in the HTML (3.2.2 AA)
- Focusing on something doesn't redirect the focus, change page or significantly change page content (3.2.1 A)Changing a value doesn't redirect the focus, change page or significantly change page content (3.2.2 A)Navigation is in the same relative order on every page (3.2.3 AA)Controls repeated on multiple pages have the same labels, names and icons (3.2.4 AA)Contact and self-help options are in the same relative order on every page (3.2.6 A new)
- I'm told where an error is and what the problem is in writing (3.3.1 A)There are visible labels or instructions for inputs (3.3.2 A)I get suggestions on how to fix the error, if you know the exact problem (3.3.3 AA)If an action involves money, changing or deleting a good chunk of answers or data, or is a legal commitment, then either it's reversible ot there's a review, edit and confirm step (3.3.4 AA)Repeated fields autofill or I can choose from a previous response (3.3.7 A new)Fields in the log in process either autofill or can be copy and pasted into, or there is an alternative, like social media log in. Captchas can be basic object recognition at AA level, but they're still not great. (3.3.8 AA new)
- Everything interactive has a name, role, and, where applicable, state and value (4.1.2 A)Any written update messages are also brought to the attention of assistive tech, without stealing my focus (4.1.3 AA new)
About the poster
Though there's really no such thing as being 'fully accessible' because there's so many different ways people use technology, there are a set of guidelines that are a minimum starting point.
The thing is, those web content accessibility guidelines aren't exactly... accessible. At least they didn't feel it when I was learning; they're quite technical and a ginormous wall of text. Here's the 'quick' reference version.
I'd love for more people and companies to take an interest in learning these basic guidelines, but I know they can seem intimidating and overwhelming; even I struggled to trudge through them initially and I'm actually interested the topic.
So this poster is for anyone new to accessibility that wants to see what it's about a little in plain language, or those who would like an actual quick reference to all the guidelines.
I'm not associated with the W3C at all (the people who write the guidelines), and the poster has a lot of my own wording. So don't quote me if you're doing a technical audit - reference the full guidelines that have some more nuance :).
Have an issue?
If you have any problems, or if there's something that would make the map easier to access, email me and let me know :)