Web Accessibility Poster

Text alternative

Here's a bunch of expandable lists that match the mind map branches :)

• Web accessibility; WCAG Level AA
  • Perceivable; I can consume all of the content when one of my senses is impaired (1)
    • Text alternatives; Write me what you're showing that I can't see or hear (1.1)
      Images, icons, charts and any other non-text content has alt text, an accessible name or another text alternative (1.1.1 A)
    • Media has alternatives (1.2)
      Any audio (without images or video) has a transcript and silent videos have audio or text alternatives (1.2.1 A)
      • Captions
        For pre-recorded videos (1.2.2 A)
        For live videos (1.2.4 A)
      • Videos
        Have audio descriptions or text alternatives (1.2.3 A)
        Have audio descriptions (1.2.5. A)
    • Adaptable; I can change the way content is presented, e.g. listening with a screen reader (1.3)
      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)
    • Distinguishable; I can make out what's written and shown (1.4)
      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)
  • Operable; I can interact with any navigation and functionality, inclusing when I'm using assistive tech (2)
    • Keyboard accessible (2.1)
      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)
    • Give me enough time (2.2)
      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)
    • Try not to cause seizures and physical reactions (2.3)
      Less than three flashes per second (2.3.1 A)
    • Navigable; I know where I am and can find what I'm after (2.4)
      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)
    • Ways of interacting; I can input with something other than a keyboard, e.g. voice control (2.5)
      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)
  • Content and functionality is understandable (3)
    • Readable (3.1)
      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)
    • Predictable; I can expect navigation and functionality to stay the same (3.2)
      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)
    • Input assistance; It's easy to avoid and correct mistakes (3.3)
      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)
  • Robust; Works with different devices, browsers and assistive tech (4)
    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 :)