Give #link a 2px solid navy outline instead of removing it.
Acceptance criteria
- 1.Give #link a 2px solid navy outline instead of removing it.
CSS Tutorial · CSS Accessibility
These 10 tasks go with the Accessible CSS chapter. 5 of them ask you to build something small from scratch; 5 give you code that is already broken and ask you to work out why. Set aside about 90 minutes for the whole set, though you can do them in any order.
Nothing here is marked by a person. When you press Submit, the editor checks your code against the points listed under each task and tells you straight away what passed and what didn't (you need a free account to submit). If you get stuck, there are hints, and a worked solution once you've had a go. The first 2 tasks are free; the rest are part of the practice plan.
If it's been a while since you read the chapter, here is how it starts: “Preserve focus, readable contrast, zoom behavior, target size, and semantic reading order while styling interfaces. It addresses focus visibility, contrast, zoom and text resizing, target size, source order, hidden content, and the boundary between CSS and semantic HTML.” .
1.Keep focus visibleexercise · easy · 10 min
Give #link a 2px solid navy outline instead of removing it.
Passes when: Give #link a 2px solid navy outline instead of removing it.
2.Offset the focus ringexercise · easy · 10 min · practice plan
Push #link's outline 3px away from the element.
Passes when: Push #link's outline 3px away from the element.
3.Give a large enough targetexercise · easy · 10 min · practice plan
Make #link at least 44px tall and show it as a block.
Passes when: Make #link at least 44px tall and show it as a block.
4.Do not rely on colour aloneexercise · easy · 10 min · practice plan
Keep #link underlined and make it bold, so it reads as a link without colour.
Passes when: Keep #link underlined and make it bold, so it reads as a link without colour.
5.Use a readable contrast pairexercise · medium · 10 min · practice plan
#1a1a1a text on #ffffff.
Passes when: #1a1a1a text on #ffffff.
6.Fix the removed focus ringbug fix · easy · 8 min
Removing the outline leaves keyboard users lost.
Passes when: Removing the outline leaves keyboard users lost.
7.Fix the offset that does nothingbug fix · easy · 8 min · practice plan
An offset needs an outline to push away.
Passes when: An offset needs an outline to push away.
8.Fix the tiny tap targetbug fix · easy · 8 min · practice plan
44px is the smallest comfortable touch target.
Passes when: 44px is the smallest comfortable touch target.
9.Fix the colour-only linkbug fix · easy · 8 min · practice plan
A link needs a cue beyond its colour.
Passes when: A link needs a cue beyond its colour.
10.Fix the low contrastbug fix · easy · 8 min · practice plan
Light grey on white is unreadable.
Passes when: Light grey on white is unreadable.
Between them these tasks cover Visible focus, Touch targets and Non-color cues.
Looking for a different chapter? See every practice set, or switch to the interview theory questions.