Not a designer? You can make your website more accessible
summary
Concrete rules and examples: set root type with rem units (browser default 16px), limit lines to about 50–60 characters, use looser line-height (1.8 instead of 1.5) as tested on a real blog built with CSS Grid, keep visible labels not placeholders, mark up forms and navigation with semantic elements like figure and figcaption, meet WCAG contrast ratios, make interactive targets at least 44‑pixel tap targets, avoid hover‑only menus, and favor progressive enhancement so heavy fonts and scripts don’t break core functionality.
AI-written summary · about
chapters (23)
- 0:00Intro
- 0:45Is anyone a designer
- 1:18Who am I
- 1:36Accessibility
- 2:09Situational impairments
- 2:51Typography
- 4:39Maximum width
- 5:29White space
- 5:47Line height
- 8:08Contrast ratios
- 8:53Semantic HTML
- 9:06Shell
- 9:52Semantic elements
- 10:57Inputs
- 11:57Logical order
- 13:03Take away
- 13:21hyperlinks
- 16:50hover
- 18:03web performance
- 18:49website bloat
- 19:32website performance
- 20:06progressive enhancement
- 20:42zooming and scrolling
