Design & Development - rehanusmani.in

How to Build an Accessible Modal Dialog (with the Native dialog Element)

Rehan Usmani October 16, 2026

Modals are one of the most commonly broken components on the web. A tested pattern using the native dialog element, what each line does, and how to test it with a keyboard and screen reader.

Accessibility Design & Development

How to Write Alt Text: A Practical Decision Guide with Real Examples

Rehan Usmani October 13, 2026

Good alt text isn't a description of pixels. It's the information the image gives a sighted reader. A simple decision process, examples for every image type, and the mistakes to avoid.

Accessibility Design & Development

Colour Contrast for Accessibility: The Complete Guide (WCAG 1.4.3, 1.4.6 and 1.4.11)

Rehan Usmani October 13, 2026

Low contrast is the most common accessibility failure on the web. The ratios that matter, what counts as large text and UI components, common traps and how to fix them without losing your brand.

Accessibility Design & Development

Accessible Forms: Labels, Errors and Validation That Work for Everyone (WCAG 2.2)

Rehan Usmani October 13, 2026

Forms are where accessibility failures cost real money. Labels, instructions, grouping, error handling and validation timing, with copy-ready HTML and a testing checklist.

Accessibility Design & Development

The First Rule of ARIA: 10 Common ARIA Mistakes and How to Fix Them

Rehan Usmani October 13, 2026

ARIA is powerful, and misused ARIA is one of the most common causes of screen reader failures. The five rules of ARIA use, ten real-world mistakes, and how to fix each one.

Accessibility Design & Development

Keyboard Accessibility and Focus Management: A Developer’s Guide (WCAG 2.2)

Rehan Usmani October 13, 2026

If it can't be done with a keyboard, many people can't do it at all. Native elements, logical focus order, visible focus, WCAG 2.2's Focus Not Obscured, and how to manage focus when content changes.

A laptop showing a web page where a focused "Skip to Main Content" link at the top leads straight to the main content area, with the Tab and Enter keys highlighted on the keyboard below

Accessibility Design & Development

Skip Links: A Complete Guide for Developers and Designers (WCAG 2.2)

Rehan Usmani October 4, 2026

What skip links are, who needs them, what WCAG 2.4.1 actually requires, and a tested HTML and CSS pattern you can copy, with a one-minute test and a pre-ship checklist.

Glowing blue and orange sound waves flowing diagonally into translucent web form panels with text fields, dropdowns and toggles

Accessibility Design & Development

Audio-First Design Heuristics

Rehan Usmani October 3, 2026

Most interfaces are designed for the eye and patched for the ear. Four non-visual heuristics and an auditory wireframing method for designing interfaces that hold together as sound, sequence, and speech.