WCAG 2.2 — Dingus Edition 💨 (A + AA + Guestbook + Toot Intensity)

Steve’s Art Gallery (caricatures) 🎨

      ___
     /___\      SWEET
     |🍇 |      BERRY
     |___|      WINE
      | |     ─────────────
      | |     label: “Sweet Berry Wine”
     /___\    desc : “Fruity, chaotic, for your health.”
     (___)    button: [ Add to cart ] — not “Thing #12”

“Label & description so screen readers can cheers too.”

   ┌──────────────────────────────┐
   │   SIGN UP (no clowning)      │
   │   name:  [__________]        │  ← required, dingus
   │   email: [__________]        │  ← not “beans@beans”
   │   pass:  [__________] 👁     │  ← show password helps
   └──────────────────────────────┘
        \  (ಠ_ಠ)  /
         \  |||  /     ❗ ERROR PARADE:
          \ ||| /      • Name is required, ya turkey.
           \|||/       • Email looks busted like a soup can.
            \|/        • Password needs more spice (length).
             V
     fix the dang fields and press the good button

“Salty validator: helpful, a little roasty.”

  name  [______]  ← “gimme at least 2 letters, chief”
  email [______]  ← “needs @ and a dot, like nature intended”
  code  [__ __]   ← “paste welcomed; no riddles”
        ^ tooltips sit RIGHT HERE ^
  (clear labels + inline help = fewer tears)

“Tooltip gremlin that actually helps.”

            ____  NAVZILLA  ____
           /####################\     RRR!
          /#  STICKY HEADER   ##\            [Focused Button]
         /########################\     ────────╳────────────  ← completely obscured
        (########  😾  ###########)   DON'T DO THIS.
         \########################/
           \####################/        ✅ DO THIS INSTEAD:
                                        push content down or scroll-into-view
                                        so focus target stays visible (2.4.11)

“Navzilla: don’t let sticky junk hide focus.”

   [ Sticky Header ]┐
                     │  ← pushes down on focus
   ==================┘
   ▶  [  BUTTON  ]  ◀     ✨ forcefield (scrollMarginTop, offsets, CSS vars)
   ==================
   focus stays visible, kaiju goes home

“Focus ring forcefield (be a hero).”

Caricature of Steve Brule: giant square glasses, wild frizz hair, tiny tie, watercolor blotches. — “Glasses so big you can see the future.”

Cubist caricature Steve Brule: blocky jaw, neon blocks for glasses, goofy grin. — “Abstract Brule, neon dreams.”

“Profile Brule, artsy fartsy.”

Gold star that says WOW in comic lettering — “GeoCities-approved ✨ stink certified.”

A Level A — bare minimum (put pants on, champ)

2.1.1 Keyboard — no mouse Olympics, jabroni

Everything must be operable with a keyboard alone: all controls, dialogs, menus, and media. If your UI needs a mouse wiggle or secret hover magic, you’re cookin’ up exclusion stew. Provide visible focus, sane tab order, and shortcuts that don’t punch screen reader users in the beans.
2.1.2 No Keyboard Trap — don’t lock me in the porta-potty

Users must be able to move focus into AND out of components using only the keyboard. Modals, carousels, custom dropdowns—trap-free zones. Provide an obvious escape (Esc or a close button) and send focus back where it came from like a polite little boomerang.
2.1.4 One-Key Shortcuts — stop detonating actions with random letters

Single-character shortcuts can collide with assistive tech. Let users turn ‘em off, change ‘em, or require a modifier (like Alt/Opt). Nobody wants to fat-finger “S” and ship a burrito to Guam.
2.2.1 Timing Adjustable — timers ain’t a footrace

If there’s a time limit, provide a way to turn it off, extend it (at least 10x), or pause it. Give warnings before booting people and preserve any entered data. People read at different speeds; don’t make comprehension a game show buzzer.
2.2.2 Pause / Stop / Hide — tame the blinkies

Moving, blinking, auto-updating content needs user controls. Provide a Pause and don’t restart it like a haunted GIF. Carousels: give play/pause, previous/next, and ensure the motion doesn’t hijack focus like a rowdy raccoon.
2.3.1 Three Flashes or Below — this ain’t a rave

Avoid content flashing more than 3 times per second in the same region. When in doubt, just don’t flash stuff. Be kind to brains; save the strobes for your basement disco.
2.4.1–2.4.4 Basic Navigation — no mystery meat, label your dang stuff

Provide skip links to bypass repetitive blocks; use clear, descriptive page titles; keep a logical focus order that follows the visual layout; and ensure link purpose is clear from its text or nearby context. “Click here” is about as helpful as a screen door on a submarine.
2.5.1 Pointer Gestures — spare me the ninja finger ballet

Multi-pointer, path-based, or precision gestures must have a simple alternative (tap/click). Don’t force twisty two-finger salsa when a single button would do. Big thumbs deserve love, too.
2.5.2 Pointer Cancellation — fire on release, save my bacon

Trigger actions on up, not down, so folks can bail out if they mis-tap. Add an easy undo or confirmation for spicy actions (delete/buy/launch-rocket) so accidents don’t turn into burrito disasters.
2.5.3 Label in Name — say the words you show

The accessible name should include the visible text of the control. If the button says “Buy Beans,” a screen reader should not announce “Button 42.” Keep speech and sight in harmony like a barbershop quartet of toots.
2.5.4 Motion Actuation — no shake-to-do-stuff baloney

If actions can be triggered by device motion (shake, tilt), users must be able to do the same thing with a regular control, and they must be able to disable the motion trigger. Phones get jostled; don’t make ‘em accidental feature cannons.
3.2.6 Consistent Help — stop hiding the help like a fart in church

If pages in a process provide help options (contact, chat, FAQs), keep them in a consistent location and format across those pages. Users shouldn’t have to play Whac-A-Mole just to ask a dang question.
3.3.7 Redundant Entry — don’t make me retype my life story

Reuse previously entered data within the same session or provide autofill. If you already know my address, don’t make me type it five times like a penitent bean sinner.

Level A = “don’t totally suck.”

AA Level AA — be decent, ya turd

2.4.5 Multiple Ways — give me options, not a maze

Provide at least two ways to locate a page (search, site map, breadcrumby nav). Don’t strand users inside a labyrinth of dropdowns like Theseus without his thread (or his beans).
2.4.6 Headings & Labels — say what the dang thing is

Use clear, descriptive headings and labels that match the purpose of the content or control. “Payment” beats “Stuff Area.” Avoid cute cryptic nonsense unless you’re labeling a jar of mystery pickles.
2.4.7 Focus Visible — show me the ring, onion boy

The component with keyboard focus must be visually obvious at all times. Use a strong outline/underline/background change with good color contrast. Don’t hide it behind sticky bars or low-contrast whispers.
2.4.11 Focus Not Obscured (Min) — no sticky-header photobombs

When something receives focus, at least some of it must stay visible in the viewport. If you’ve got fixed headers/footers/sidecars, make your page scroll just enough to reveal the target instead of smothering it.
2.5.6 Concurrent Inputs — mouse + keys can be friends

Let users switch between input methods without breaking the interface. Touch shouldn’t disable keyboard; voice shouldn’t kill the mouse. All our little input buddies can share the sandbox (no poopin’ in it).
2.5.7 Dragging Movements — give me a button, surgeon

If a task requires dragging (sliders, sortables, maps), also provide a non-drag option like “Move Up/Down” buttons or numeric inputs. Dragging is hard with tremors, trackpads, or meatball thumbs.
2.5.8 Target Size (Min) — no ant-butt buttons

Make interactive targets large enough and/or spaced enough to avoid accidental hits (think at least ~24px CSS square or generous spacing). Exceptions exist, but the spirit is: don’t make people pixel-hunt like a raccoon looking for beans in the dark.
3.3.8 Accessible Auth (Min) — let my brain rest

Logins must not require cognitive memory stunts like recalling obscured passwords without copy/paste or solving “find the garlic bread” puzzles. Support password managers, show-password toggles, and copyable codes. Save the riddles for Dungeons & Dragons night.

Level AA = “be decent, ya turd.”

Guestbook ✍️ — leave a note, ya dingus

Entries live on the shared bean server (no login needed). Newest notes bubble to the top.

Name (required)

Favorite WCAG bit (optional)

Message (keep it helpful, ya turkey)

Rating (how tasty was this site?)

Add a celebratory toot when I post

Loading bean scribbles...

Sources & further reading 📚

W3C — Web Content Accessibility Guidelines (WCAG) 2.2
WAI — What’s New in WCAG 2.2
Explainery pals: WebAIM; TPGi; Deque; Stark

Hit counter: 000001

Made with 💖, beans, and better focus outlines. Sign the book, wash your hands.