Accessibility

Accessibility in Forms

Learn how to build forms usable by everyone, including screen reader users, through proper labels, grouping, and error messaging.

Accessibility in HTML

Learn how to write HTML that works for everyone, including users of screen readers and other assistive technology.

What is Progressive Enhancement?

Progressive enhancement is a design strategy that starts with a basic, functional HTML experience for every user and browser, then layers on CSS and JavaScript…

What Are CSS Media Queries and How Do They Work?

A media query is a CSS conditional block that applies a set of styles only when the browser environment matches specified conditions, most commonly viewport wi…

What Are CSS Pseudo-Elements and How Do They Differ From Pseudo-Classes?

A pseudo-element (like ::before or ::after) lets you style or insert a specific sub-part of an element that doesn’t exist as a real DOM node, while a pseudo-cl…

What Are React Portals and When Do You Use Them?

A React portal lets a component render its children into a DOM node that lives outside the parent component tree in the actual document, while the component st…

What Are ARIA Attributes and When Should You Use Them?

ARIA (Accessible Rich Internet Applications) attributes are HTML properties that expose role, state, and relationship information to assistive technologies lik…

Why Does Semantic HTML Matter?

Semantic HTML means using elements according to their intended meaning — <nav>, <button>, <article>, <header> — instead of generic <div>s and <span>s for every…

How Do You Build Keyboard-Accessible Web Interfaces?

Keyboard-accessible interfaces ensure every interactive element can be reached via Tab, activated via Enter or Space, and operated without a mouse at all, whic…

How Do You Implement Dark Mode in a Web App?

Dark mode is implemented by defining theme values as CSS custom properties, switching between a light and dark set of those values based on either the user’s O…

How Do You Implement Infinite Scroll?

Infinite scroll loads additional pages of content automatically as the user nears the bottom of the current list, typically detected with an IntersectionObserv…

What Are Skeleton Loading Screens and Why Use Them?

Skeleton loading screens show gray placeholder shapes that mirror the actual layout of the content about to load — boxes for images, lines for text — instead o…

How Do Lighthouse Audits Work and What Do They Measure?

Lighthouse is an automated auditing tool that loads a page in a controlled, throttled environment and scores it across Performance, Accessibility, Best Practic…