Using the History API to Update URLs and Handle Back and Forward

CORS for Browser Requests: Why Cross-Origin Fetches Fail and What Servers Must Allow

A practical guide to the browser’s cross-origin request rules. Learn how origins are defined, why a request can reach a server but still fail in JavaScript, when preflight happens, and which response headers a server needs to send.

Fetching JSON with fetch: HTTP Status Checks and Network Failures

A successful fetch call does not necessarily mean a successful HTTP response. Learn how to check response.ok, distinguish request failures from invalid JSON, and test each case in a browser.

Event Propagation in the Browser: Bubbling, Capturing, preventDefault, and stopPropagation

A practical guide to the path a browser event takes through the DOM, with console examples that distinguish propagation from default browser behavior.

Event Delegation: Handling Clicks on Elements Added Later

A click listener attached directly to a button cannot handle a different button created later. Learn how to listen on a stable parent, identify the intended target, and keep dynamic interfaces manageable.

Read article · 3 min↗

DOMContentLoaded Versus load: When Can Browser Scripts Safely Access the Page?

DOMContentLoaded and load mark different milestones in a browser page’s startup. Learn which event to use for DOM setup, when to wait for images and other resources, and how script placement and document.readyState affect reliable initialization.

Selecting and Updating DOM Elements with querySelector, textContent, and classList

Learn how to find an element with querySelector, change its text with textContent, and represent interface state with classList. A small browser-console example shows how the three APIs work together.

How to Test a Web Page with a Keyboard and Screen Reader

A practical workflow for checking focus order, visible focus, labels, structure, and dynamic updates. Use a small sample page to compare what a keyboard user can do with what a screen reader user can understand.

Accessible Names for Icon-Only Controls: Labels, Tooltips, and Common Mistakes

An icon can suggest what a control does, but it may not tell every user its purpose. Learn how to name icon-only buttons, when tooltips help, and how to check the result with a keyboard and accessibility inspector.

Language Attributes and Pronunciation in Multilingual Web Pages

A page can be visually readable yet sound wrong when a screen reader encounters text in another language. Learn how to set a document’s language, mark changes within a page, and test pronunciation without confusing language with text direction.

Accessible Data Tables: Captions, Headers, and Cell Relationships

A practical guide to making data tables easier to understand and navigate. Learn when to use a caption, how to associate header cells with data cells, and what to check when a table becomes more complex.

Announcing Dynamic Updates with ARIA Live Regions

A page can change without moving keyboard focus or reloading. Learn when ARIA live regions help, how to announce updates without overwhelming people, and how to test the result in a simple browser example.

Respecting Reduced-Motion Preferences in Interface Animations

Motion can help explain an interface, but it can also distract or cause discomfort. Learn how to use CSS and browser APIs to respect reduced-motion preferences without hiding content or losing important feedback.

Captions, Transcripts, and Audio Descriptions: Choosing Support for Web Media

Captions, transcripts, and audio descriptions serve different purposes. Learn how to choose the right combination for videos, podcasts, and other web media, then check that people can find and use it.

Text Resizing and Responsive Reflow: Keeping Pages Usable at High Zoom

A page can look responsive at a narrow viewport yet break when someone enlarges its text. Learn how to build flexible layouts, protect component content, and test zoom and text resizing in a reproducible browser setup.

Designing Status Messages That Do Not Rely on Color Alone

A green banner or red border may look clear, but color should not carry a status message by itself. Learn how to pair color with readable text, useful placement, and appropriate screen-reader announcements.

Color Contrast Basics for Text, Icons, and Interface Controls

Learn what to compare when checking contrast in a web interface, how text and control requirements differ, and how to test real component states rather than isolated color swatches.

Skip Links: Helping Keyboard Users Bypass Repeated Navigation

A skip link lets keyboard users move past a repeated header or navigation menu and reach the main content. Learn where to place one, how to make it visible on focus, and how to check that it works.

Buttons Versus Links: Choosing the Right Control for Each Action

Use a link when someone is going somewhere and a button when they are doing something. Learn how that distinction affects keyboard behavior, forms, client-side routing, disabled states, and accessible testing.

Managing Focus When Opening and Closing a Modal Dialog

A modal dialog should bring keyboard focus into the dialog, keep the rest of the page unavailable while it is open, and return focus to a sensible place when it closes. Learn a practical approach using the native HTML dialog element and a small amount of JavaScript.

Keyboard Navigation Basics: Tab Order, Visible Focus, and Common Traps

Keyboard navigation is easier to build when you start with the document’s natural order, keep focus visible, and test what happens when an interface changes. Learn a repeatable way to check links, forms, menus, and dialogs without making assumptions about how people navigate.

Accessible Form Validation: Link Errors to Fields Without Losing User Input

A practical approach to form validation that makes errors discoverable, connects each message to its field, and lets people correct mistakes without starting over.

Form Labels and Instructions: Making Every Input Understandable

A form is easier to use when each input has a clear name, nearby instructions, and useful feedback. Learn how to label fields, explain formats, group related choices, and connect errors to the inputs they describe.

Decorative Images: When and How to Hide Them from Assistive Technology

An image does not need a spoken description simply because it appears on a page. Learn how to decide whether an image is decorative, give decorative HTML images empty alternative text, and check that meaningful content remains available to everyone.

Read article · 3 min↗

Writing Useful Alternative Text for Informative Images

Alternative text helps people understand an image when they cannot see it. Learn how to identify an image’s purpose, write concise descriptions that fit the surrounding content, and check your choices in a web interface.

Headings and Landmarks: Creating a Navigable Page Outline

A clear page outline helps people scan content, move between sections, and find the main task. Learn how to combine descriptive headings with HTML landmarks, then check the result using keyboard navigation and accessibility tools.

Semantic HTML for Accessible Page Structure: Choosing the Right Elements

Semantic HTML gives a page a structure that browsers and assistive technologies can interpret. Learn how to choose landmarks, headings, lists, links, buttons, and form controls by the job they do, then check whether the resulting page makes sense without its visual styling.