Blog

In this article, I will explain the key differences between <ins>,<del> and <s> tags, when to use each of them and how to write semantic and accessible price tags for e-commerces. I will also give you some tips on how to make your price tags discoverable by AI agents.

A step-by-step guide to developing an expandable/collapsible component in a easy and quick way without the need to use JavaScript or WAI-ARIA, just using the HTML tag <details>. Natively, this tag will allow us to create an accessible disclosure element for sreen readers and keyboard. Finally, we are going to learn how to implement transitions with CSS.

How to make a Google Map keyboard operable and screen reader friendly: moving focus between the marker list and the map, restricting the map with boundaries and coordinates, and designing a UI that stays intuitive without JavaScript-only interactions.

Understanding the difference between links and buttons is crucial for web accessibility. Learn when to use <a> versus <button> in React and HTML to build accessible, semantic interfaces.

Creation from scratch of a quantity spinbutton pattern, explaining why a native HTML solution is preferred over the W3C ARIA APG approach. Covers keyboard shortcuts, screen reader behavior across NVDA, VoiceOver, and TalkBack, and the browser accessibility tree quirks that affect real implementations.

Rebuilt Cheng Lou's Pretext editorial-engine demo as a WCAG 2.2-compliant React app: keyboard-draggable orbs, screen reader support, prefers-reduced-motion, and a native HTML fallback at 150%+ zoom or under 500px.