Why bold text ≠ heading
Over the past two weeks, I covered heading hierarchy basics and how to handle conflicts between visual design and semantic structure. Today, I want to talk about text that looks like a heading but isn’t actually marked up as one. You see text on a page that looks like a heading. It’s bold, it’s bigger, […]
Making headings work with your visual design
Last week, I covered the basics of heading hierarchy: using an H1 tag for your page title, H2 tags for major sections, and H3 tags for subsections. Basically, don’t skip levels going down. But then you try to apply this to a real website. The sidebar has content that visually looks more important than some […]
The basics of heading hierarchy
I realized recently that I’ve not written much about headings in this newsletter. That’s surprising considering how fundamental they are to accessibility. So I’m making up for it with a three-part series on heading structure, hierarchy, and common mistakes. Screen reader users rely on proper heading structure to build a mental outline of the page. […]
Breadcrumb navigation for screen readers
Breadcrumbs indicate your location within a site’s hierarchy (e.g., Home > Products > Shoes > Running Shoes). Sighted users see the trail at a glance. Screen reader users need explicit markup to understand that this is navigation, what it represents, and which page they’re currently on. Without proper structure, breadcrumbs become a confusing list of […]
Progress bars: what to announce and when
Progress bars are a balancing act. Announce too little, and screen reader users have no idea if anything is happening. Announce too much, and they get overwhelmed with constant percentage updates. Getting it right means understanding what to communicate and when. Two types of progress bars Determinate progress bars show measurable progress from start to […]
Loading states that work for everyone
You click a button, and a loading spinner appears on screen. If you can see the spinner, you know to wait. But if you’re using a screen reader, you hear nothing. Did the button work? Should you click again? Without auditory feedback, users end up submitting forms twice or triggering actions multiple times because they […]
Use fieldset to add context to your forms
When filling out a form with related fields, sighted users can visually group things. The shipping address section looks distinct from the billing section. Credit card fields are clearly separate from contact information. Screen reader users don’t get that visual layout. They hear fields announced one at a time with no context about how they […]
Should your link open in a new tab?
Here’s a common scenario… A user clicks a link. A new tab opens. They try to hit the back button, and nothing happens. For sighted users, this is mildly annoying. For screen reader users who can’t visually see they’re in a new tab, it’s genuinely disorienting. They don’t understand why navigation broke. The accessibility advice […]