Module 3 · Components and prototypes Lesson 8 of 15
Accessibility basics that are non-negotiable
Contrast, tap targets and readable text sizes are not extras. If a user cannot read it or hit it, the design does not work, however it looks in the mockup.
The concept
Accessibility is not a special edition of your design for some other user; it is what makes the interface work when the lighting is bad, the screen is small, or the person is using a keyboard. Five things cover most of it, and all five are checkable before you hand anything to a developer.
One: contrast of at least 4.5 to 1 for body text. Two: a visible focus ring on everything clickable, never outline: none. Three: hit areas of at least 44 by 44 pixels, because thumbs are not cursors. Four: a label on every input, and an error message that says what to do. Five: never colour alone — pair it with text or an icon.
<label for="phone">Mobile number</label>
<input id="phone" name="phone" type="tel" inputmode="numeric"
autocomplete="tel" aria-describedby="phone-help">
<p id="phone-help">10 digits, no spaces.</p>
<p role="alert">Enter a 10-digit number.</p>
<!-- 4.5:1 contrast . visible :focus ring . 44x44px targets .
a label on every input . never colour alone -->Common mistakes
The mistake is a beautiful grey-on-grey design that a low-vision user cannot read, and a placeholder used instead of a label, which vanishes the moment somebody starts typing. Both are easy to fix at design time and expensive to fix after launch.
Worked example
Body text in #999 on white fails contrast guidelines; the same text at #595959 passes. A 32px tap target is a miss on a phone — 44px is the accepted minimum.
Your practice task
Check one of your screens for contrast on every text element and for a 44px tap target on every button.
Do this before moving on. Reading a solution teaches the shape of it; typing it teaches you.
Key takeaway
Accessibility is not a special edition of your design for some other user; it is what makes the interface work when the lighting is bad, the screen is small, or the person is using a keyboard.
Keep your place in this course
A free account saves which lessons you have finished and unlocks the certificate. The lesson itself stays free to read.
Create free account or sign inCourse complete
You finished every lesson.
Your certificate is ready, and the projects you built are the proof to attach to an application.
Almost there
15 lessons left of 15
Finish every lesson to unlock the certificate. Each one ends in a practice task — do them and the final project brief writes itself.