wpbbibrandboost.bsky.social
@wpbbibrandboost.bsky.social
#Accessibility and #A11Y Specialist. I develop accessible solutions for WordPress. Lead Dev @ wp.bbi.co.uk
Stop putting "Image of..." in your image alt text. Screen readers automatically announce "Graphic" or "Image" when they hit an <img> tag. Jump straight to the context: alt="Black laptop on desk showing code". For decorative images, just use an empty alt=""
Saying "Click the big green button on the right to submit" breaks down for blind, colorblind, or mobile users. Better: "Select the 'Submit' button." Make your instructions independent of color, size, or layout.
Headings (<h1> to <h6>) are a structural map, not a font-size picker. Screen reader users skim pages by jumping headings. Skipping from <h1> to <h3> breaks that map. Keep headings sequential. If you need an <h2> to look smaller, style it with CSS, not an <h4>. 🗺️
Background music or autoplay videos that start on load can completely drown out the voice of a screen reader, making it impossible to navigate. The Rule: Let users choose to press play. Give them control.
Don't trust your eyes for color contrast. Sighted devs aren't the baseline. Light gray text on white might look sleek on your 4K monitor, but in direct sunlight or for low-vision users, it's unreadable. Aim for WCAG AA compliance (at least a 4.5:1 ratio). Check it first! 🎨
Not every image needs alt text. Decorative background shapes or spacer graphics clutter screen reader queues. The Fix: Use alt="" (empty) rather than omitting it entirely. It tells the screen reader to skip it smoothly.
If you use outline: none; in your CSS without a replacement, you break your site for keyboard users. Sighted keyboard navigators rely on that focus ring to see where they are. Don't hide it because "it looks ugly." Style a custom one using :focus-visible instead. ⌨️
Imagine tabbing through 50 header links on every single page load. Skip links let keyboard users bypass repetitive navigation and jump straight to the main content. How: An anchor link pointing to <main id="content">.
aria-label doesn’t magic away bad HTML. Tossing it onto a generic <div> or <span> to make it clickable doesn't give it native keyboard focus or fire on "Enter". Just use a semantic <button>. You get native keyboard and screen reader support out of the box. #Accessibility
Sighted users can visually tell what language a page is in, but screen readers can’t. Without a declared language, they might read English text using a Spanish pronunciation engine. The Fix: Always set <html lang="en">.
For a long time as a developer, my main goal was making things look beautiful and load fast. But I've realised a beautiful website that isn't usable for everyone is, ultimately, a broken website. I’m dedicating this space to digital accessibility (a11y) and building with empathy. 💻♿