CSS Tiny Tips: Collection of CSS Tips for Making Websites Easier to Read
It’s the little things that make websites easier for visitors. This talk is a collection of CSS tips that are included in builds and make websites easier to interact with. From adjusting underlines on links to making sure text doesn’t go outside the box boundaries, the little details matter, and they add up to an improved experience for everyone.
👤 Presented by:
Gen Herres at WordPress Accessibility Day 2024
ℹ️ Learn more:
https://2024.wpaccessibility.day/sess...
🔶 Support WP Accessibility Day:
Help make WordPress more accessible for everyone: https://wpaccessibility.day/donate/
Subscribe to the WPA11yDay YouTube channel:
/ @wpa11yday
🕒 Timestamps
Introduction & Overview
00:00 - Opening announcement
00:18 - Introduction by Simon Miner
01:28 - Gen Herres Introduction & Presentation Setup
02:10 - Presentation Overview & Topics
CSS Basics & Overrides
02:40 - CSS Basics and Prerequisites
03:28 - CSS Belongs in Stylesheets, Not Inline
04:45 - Avoid copying junk HTML
05:21 - CSS Variables are your friends
06:01 - CSS Color Spaces (HSL, RGB, Hex)
08:35 - CSS Nesting
09:37 - CSS :has() Selector
10:18 - Live Demo: Kaya Theme Changer
CSS Override Techniques
11:33 - CSS Overrides with Body/HTML
12:58 - CSS !important (Override of Last Resort)
14:40 - Overriding Inline Styles with Star Selector
15:51 - Targeting Classes vs HTML Tags
17:06 - Semantic HTML Makes CSS Easier
WordPress & Browser Defaults
18:25 - CSS Resets Are Essential
19:37 - Keeping Embeds/iframes in Containers
20:20 - Leave the Browser Alone (Focus, Scroll Speed, Cursor)
WordPress Helper Classes
22:50 - Screen Reader Text Class
24:12 - Align Wide and Align Full Classes
25:54 - Align Left, Right, and Center Classes
Making Text Easier to Read
26:50 - Font Setup: Use REMs, Not Pixels
27:24 - Line Height Guidelines
28:10 - When to Use Different Units
29:17 - Choosing Fonts with Clients (Using Pangrams)
30:08 - Sans Serif for Body Text
30:29 - Font Examples Resource
32:02 - Including Fallback Fonts
32:41 - Letter Spacing Tips
34:08 - List Item Spacing
Making Links Easier to See
34:39 - Word Wrap for Links
35:03 - Underline Positioning
35:44 - Checkboxes and Radio Buttons (24px minimum)
36:39 - Don't Forget Visited Link States
36:49 - Focus States (Use Two Colors)
37:18 - Dashed Border Focus Solution
Helper/Utility Classes
38:01 - White Text Class
38:21 - Text Size Classes
38:45 - Margin and Padding Classes
39:25 - Z-Index Classes
39:35 - Flexbox Classes
Q&A Session
40:50 - Questions Begin
41:24 - Preventing Duplicate CSS Classes
42:12 - Font Family Pairings for Blog Posts
43:12 - List Item Padding Tips
44:22 - Text Decoration Skip Link Discussion
45:32 - Large Text and Zooming Best Practices
46:46 - When to Use System Fonts
Wrap-up
47:23 - Presentation Conclusion & Resources
48:00 - Event Closing & Next Session Preview
49:03 - Sponsors appreciation
#csstips #wpad24