MYP Design Accessibility in Digital Products Notes

Accessibility Is Design for the Full Range of Real Bodies

1. Accessibility means the product works for disabled people, covering sight, hearing, movement, and differences in reading and thinking.
2. This is not a rare edge case, since roughly 1 in 6 people worldwide live with a significant disability.
3. Temporary and situational limits count too: a broken wrist, a cracked screen, bright sunshine, a noisy bus, one hand holding a bag.
4. Accessible choices tend to help everybody, and captions get switched on far more often by people in quiet train carriages than by deaf viewers.
5. Designing it in from the wireframe stage is nearly free, while adding it after the build means rebuilding screens you thought were finished.

Alt Text Describes the Job, Not the Picture

1. Alt text is a short written description attached to an image, read aloud in place of the image by assistive software.
2. Write what the image is doing on that page, so "Bar chart, book loans peak in September" beats "bar chart".
3. Keep it under about 125 characters and move anything longer into the text around the image.
4. Purely decorative images get empty alt text so the software skips past them instead of announcing clutter.
5. Do not open with "image of", because the software has already said it is an image.

Keyboard Navigation and Focus Order

1. Plenty of people never touch a mouse: some use only a keyboard, others use a switch, a head pointer or voice control that behaves like one.
2. Every action in your product must be reachable with Tab, Shift and Tab, Enter, Space and the arrow keys.
3. Focus is the invisible cursor showing which element the keyboard is currently on, and it needs a clearly visible ring or outline.
4. Focus order should follow the visible order down the screen, so nobody tabs from the header to the footer and back up to the middle.
5. A keyboard trap is the classic failure: a pop-up you can tab into but never out of, which leaves the user stuck with no way back.

Screen Readers Read Structure, So Give Them Some

1. A screen reader speaks the screen aloud, and the common ones are VoiceOver on Apple devices, TalkBack on Android and NVDA on Windows.
2. Experienced users jump between headings and links rather than listening to a page from the top, which is far faster.
3. Real headings in order, build the map they jump around, while text that is merely big and bold builds nothing.
4. Every form field needs a label properly joined to it, so the reader says "Email address, edit box" instead of just "edit box".
5. Link text has to make sense on its own, because a list of eleven links all reading "click here" tells a listener nothing.

Captions, Transcripts, Target Size and Motion

1. Captions show the words of a video in time with it, and they cover important sounds such as a doorbell as well as speech.
2. A transcript is the whole thing written out, which suits people who would rather read in two minutes than watch for eight.
3. Automatic captions are a first draft only, since they mangle names, subject vocabulary and anything said quickly.
4. Target size matters to anyone with unsteady hands, and about 44 by 44 px is the usual minimum for something you tap.
5. Leave a gap between targets too, because two 44 px buttons pressed right against each other still produce wrong taps.
6. Movement makes some people dizzy or sick, so skip auto playing video and sliding backgrounds, and honour the reduce motion setting on the device.

WCAG Turns Good Intentions Into Testable Rules

1. The WCAG is built on four ideas: content must be perceivable, operable, understandable and robust.
2. Level A is the minimum, covering the things without which some people simply cannot use the product at all.
3. Level AA is the level schools, public services and most organisations aim for, and it holds the 4.5 to 1 contrast minimum for body text.
4. Level AAA is the strictest, asking for things like 7 to 1 contrast, and is rarely applied to a whole product.
5. Aim at AA for your project and list which points you met and which you missed, because that list is checkable evidence for criterion D.

Test It Yourself: Put the Mouse in a Drawer

1. Unplug the mouse, keep your hands off the trackpad, and try to finish your product's main task with the keyboard alone.
2. Check three things: can you always see where you are, can you reach every control, and can you escape every pop-up.
3. Then switch on the screen reader already built into your phone or laptop and listen to one screen with your eyes shut.
4. Zoom the browser to 200% and look for text that overlaps, buttons that vanish off the side, or menus that stop opening.
5. Both tests take ten minutes each and expose problems that no amount of staring at the design will ever reveal.