Accessibility

Make Any List Keyboard-Friendly in Minutes

September 25, 2025

Keyboard navigation in lists requires handling arrow keys, home/end keys, type-ahead search, and focus management, but implementing this manually is complex and error-prone. The Angular CDK ListKeyManager provides a complete solution for keyboard-accessible lists, handling all navigation patterns automatically. This tutorial demonstrates how to use ListKeyManager to make any list keyboard-friendly, ensuring your Angular applications are accessible to all users without manual keyboard event handling.

Accessibility Angular Angular Components

Can You Even Use Jump Links in Angular? (Yes… Here’s How)

September 11, 2025

Jump links improve navigation in long-form content, but Angular's routing system breaks standard HTML anchor links. Implementing jump links in Angular requires handling router navigation, smooth scrolling, and ensuring links work across different route configurations. This tutorial demonstrates how to create router-friendly jump links that work seamlessly with Angular's routing system, providing smooth scrolling and proper navigation handling.

Accessibility Angular Angular CDK

Just Another Angular CDK Feature Nobody Talks About

July 17, 2025

Treating all focus events identically creates poor user experiences—keyboard users see aggressive error messages meant for mouse interactions, and programmatic focus triggers unwanted UI changes. The Angular CDK's Focus Monitor detects how users interact with elements, distinguishing between mouse clicks, keyboard navigation, touch, and programmatic focus. This tutorial demonstrates how to use Focus Monitor to create adaptive UIs that respond intelligently to different interaction patterns, improving accessibility and user experience.

Accessibility Angular Angular Components

Event Listening in Angular: The Updated Playbook for 2025

June 19, 2025

Event handling in Angular has evolved significantly, with modern patterns replacing deprecated decorators and improving type safety. This updated tutorial demonstrates the latest event listening techniques in Angular, covering template event bindings, host event bindings, Renderer2 for global events, and the output() function for component communication. You'll learn when to use each approach and how to avoid deprecated patterns like @HostListener and @Output decorators.

Accessibility Angular Angular Components

Angular Directive Composition API: Enhance Components with Host Directives (v19+)

March 27, 2025

Applying multiple directives to components creates verbose templates and makes it easy to forget required directives. Angular's Directive Composition API lets you embed directives directly into components, creating reusable component behaviors that can't be accidentally omitted. This tutorial demonstrates how to use host directives to add functionality like auto-focus, click-outside detection, and accessibility features directly into components, reducing template complexity and improving maintainability.

Accessibility Angular Angular Components

Angular Page Titles: 3 Ways to Set Dynamic Titles

March 13, 2025

Static page titles hurt SEO rankings, confuse users with multiple tabs open, and violate accessibility guidelines. Angular provides multiple ways to set dynamic page titles, from simple route-based titles to complex dynamic titles that change based on component data. This tutorial demonstrates three approaches: using the Title service in components, setting titles in route configuration, and handling dynamic titles with route resolvers. You'll learn how to ensure every page has a unique, descriptive title.

Accessibility Angular Angular Components

Angular Theming... A Stand Up Special No One Asked For

March 02, 2025

You ever try to theme an Angular component? Yeah… it sounds easy. Just tweak some colors, maybe adjust a layout, how hard could it be? Well, let me tell you, by the time you're done battling :host, :host-context(), and CSS variables, you'll start questioning everything.

Accessibility Angular Angular Components

Angular Signal Queries: Replace @ViewChild with viewChild() (v19+)

November 08, 2024

Angular's @ViewChild and @ViewChildren decorators are being replaced by signal-based query functions that offer better type safety, automatic reactivity, and cleaner code. The new viewChild() and viewChildren() functions eliminate the need for lifecycle hooks, provide reactive updates, and integrate seamlessly with Angular's signal system. This tutorial walks through converting existing decorator-based queries to the modern signal query API, showing real-world examples and migration patterns.

AI Code Editor AI Coding Assistant Accessibility

Cursor AI Took My Job… or Did It? Angular Dev Edition

October 18, 2024

AI-powered code editors are transforming how developers work, and Cursor is leading the charge. Built on VS Code, Cursor brings intelligent code suggestions, automated error detection, and powerful AI assistance directly into your Angular workflow. In this tutorial, I'll show you real examples of how I use Cursor in my Angular projects, from refactoring components to generating tests. You'll see why it's become essential to my development process.

Accessibility Angular Angular Components

Angular Currency Pipe: Complete Guide to Currency Formatting

October 11, 2024

Currency formatting mistakes break user trust and create confusion in international applications. Displaying prices incorrectly—wrong decimal places, missing currency symbols, or incorrect locale formatting—makes your app look unprofessional and can lead to user errors. Angular's Currency Pipe handles all these complexities automatically, supporting 150+ locales, proper decimal formatting, and accessibility requirements. This tutorial shows you how to format currency correctly for any locale and use case.

Accessibility Angular Angular Components

Angular ngTemplateOutlet: Eliminate Repetitive Code in Templates

September 27, 2024

Code duplication in Angular templates creates maintenance nightmares, bloated bundles, and inconsistent UIs. When you need to update similar markup across multiple components, missing even one instance breaks the user experience. Angular's ng-template and ngTemplateOutlet solve this by letting you define reusable template fragments that can be stamped out anywhere in your app. This tutorial shows you how to eliminate repetitive code, create flexible components, and maintain consistency across your application.

Accessibility Angular Angular Components

Angular Form Accessibility: Make Forms Accessible for Everyone

September 20, 2024

Inaccessible forms exclude millions of users and violate accessibility standards, yet many Angular developers overlook basic accessibility practices. Screen reader users, keyboard-only users, and people with motor impairments need properly labeled fields, clear error messages, and keyboard navigation support. This tutorial demonstrates how to make Angular forms accessible by adding proper labels, ARIA attributes, keyboard support, and visual indicators. You'll learn techniques that improve usability for everyone while ensuring compliance with WCAG guidelines.

Accessibility Angular Angular Components

Angular Content Toggle: Show/Hide Content with Buttons

September 06, 2024

Building toggle buttons in Angular doesn't have to be complicated. Whether you need to show/hide content with CSS classes or conditionally render elements, this tutorial covers multiple approaches. You'll learn how to create reusable toggle buttons that control content visibility, handle state management with signals, and implement smooth transitions. By the end, you'll have several patterns you can use in any Angular project.

Accessibility Angular Angular Components

Angular computed(): Create Derived Signals from Other Signals (v19+)

August 01, 2024

Derived state is common in Angular applications—calculating totals from item prices, formatting dates from timestamps, or combining multiple signals into a single computed value. Angular's computed() function creates reactive, memoized signals that automatically update when their dependencies change, eliminating the need for manual subscriptions and improving performance. This tutorial demonstrates how to use computed() to create derived signals that stay in sync with their sources.

Accessibility Angular Angular Components

Angular @let Template Variables: Create Variables in Templates (v17+)

July 19, 2024

Angular's @let syntax allows you to create variables directly in templates, eliminating the need for component properties for simple calculations and transformations. Template variables improve readability, reduce component complexity, and enable inline computations without cluttering your TypeScript code. This tutorial demonstrates how to use @let for string manipulation, computed values, conditional logic, and accessibility improvements, showing real-world examples that simplify your templates.

Accessibility Angular Angular CDK

Angular CDK Accordion: Build Expandable Sections Easily

June 21, 2024

Accordion components organize content into collapsible sections, but building them from scratch requires managing state, keyboard navigation, ARIA attributes, and accessibility features. The Angular CDK Accordion module provides all of this out of the box, making it easy to create accessible, keyboard-friendly accordions. This tutorial shows you how to use the CDK Accordion module to build expandable content sections with proper ARIA support and keyboard navigation.

Accessibility Angular Angular Animations

Angular Router Transitions: Animate Route Changes (Deprecated Module)

June 14, 2024

Adding smooth transitions between routes makes Angular applications feel polished and professional. While this tutorial demonstrates route animations using Angular's deprecated animations module, modern Angular (v19+) offers better alternatives using CSS animations and DOM events. This guide shows you how route transitions work with the legacy module, but for production apps, consider using pure CSS animations or Angular's new enter/leave animation API instead.

Accessibility Angular Angular Components

Angular Router Link Accessibility: Make Navigation Accessible

June 08, 2024

Inaccessible navigation links exclude screen reader users and violate WCAG guidelines, yet many Angular developers overlook basic accessibility features in router links. Angular's RouterLink directive provides built-in accessibility features including ARIA attributes, active state management, and keyboard navigation support. This tutorial demonstrates how to make breadcrumb navigation accessible using RouterLink's built-in features, ensuring all users can navigate your application effectively.

Accessibility Angular Angular Animations

Angular Animations: Disable/Enable Animations (Deprecated Module)

May 19, 2024

Unwanted animations on component initialization create jarring user experiences and performance issues. Sometimes animations should only run on user interactions or data changes, not when components first render. Angular provides mechanisms to disable animations globally, per component, or conditionally based on application state. This tutorial shows you how to control when animations run, disable them for accessibility preferences, and prevent initialization animations. Note: This uses Angular's deprecated animations module.

Accessibility Angular Angular Animations

Angular Animations: Create Reusable Animation Functions (Deprecated Module)

May 11, 2024

Duplicating animations across components creates maintenance nightmares and inconsistent user experiences. As Angular applications grow, you need to extract reusable animation functions that can be shared across components. This tutorial shows you how to create reusable animation functions, organize them in shared files, and apply them consistently throughout your application. Note: This uses Angular's deprecated animations module—modern alternatives are available.

Accessibility Angular Angular Animations

Angular Animations: Add Flexibility with Animation Params (Deprecated Module)

May 04, 2024

Static animations limit component reusability, forcing you to create separate animations for slight variations. Angular's animation params allow you to pass dynamic values to animations, creating flexible, configurable effects that adapt to different use cases. This tutorial demonstrates how to use animation params to create reusable animations that change direction, duration, or style based on component state. Note: This uses Angular's deprecated animations module—for modern approaches, see the linked tutorials.

Accessibility Angular Angular Components

Angular Host Attribute Token: Replace Static Inputs with inject() (v18+)

April 13, 2024

Static string inputs that never change create unnecessary overhead in Angular components, triggering change detection and adding complexity. Angular's HostAttributeToken provides a more efficient way to handle static values by reading them directly from HTML attributes, eliminating the need for inputs and improving performance. This tutorial demonstrates how to replace static signal inputs with HostAttributeToken and the inject() function, showing when and why to use this optimization.

Accessibility Angular Angular Animations

Angular Animations: Animate to Unknown Height (Deprecated Module)

March 29, 2024

Animating to an unknown height is impossible with pure CSS—you can't transition to auto or 100%, and max-height workarounds require arbitrary values that break in edge cases. Angular's animation framework solves this by calculating the actual height at runtime and animating to that value, creating smooth expand/collapse effects for accordions, dropdowns, and dynamic content. This tutorial demonstrates how to animate elements to their natural height, regardless of content size. Note: This uses Angular's deprecated animations module.

Accessibility Angular Angular Animations

Angular Animations: Animate Multiple Items in Parallel (Deprecated Module)

March 15, 2024

Angular animations run sequentially by default, which works for simple transitions but breaks complex animations where multiple properties need to change simultaneously. Parallel animations are essential for coordinated effects like simultaneous fade and slide transitions, or when animating multiple elements together. This tutorial shows you how to run multiple animations in parallel using Angular's animation API, creating more sophisticated and professional effects. Note: This uses Angular's deprecated animations module.

Accessibility Angular Angular Animations

Angular Animations: Start and Done Events (Deprecated Module)

March 08, 2024

Coordinating animations with component logic requires knowing when animations start and finish, but CSS animations don't provide lifecycle events. Angular's deprecated animations module includes start and done events that let you trigger side effects, update state, or chain animations based on animation lifecycle. This tutorial demonstrates how to use animation start and done events to coordinate complex animation sequences. Note: This uses Angular's deprecated animations module—modern alternatives are available.

Accessibility Angular Angular Animations

Angular Animations: Query and Stagger Multiple Items (Deprecated Module)

March 01, 2024

Animating multiple items simultaneously requires querying child elements and coordinating their animations, which is complex with pure CSS. Angular's query() function lets you find and animate multiple elements at once, while stagger() creates cascading delays that produce professional list animations. This tutorial demonstrates how to use query() and stagger() together to create polished list animations where items animate in sequence. Note: This uses Angular's deprecated animations module.

Accessibility Angular Angular Animations

Angular Animations: Keyframe Animations (Deprecated Module)

February 23, 2024

Complex multi-step animations require precise control over intermediate states, something CSS keyframes can handle but Angular's keyframes() function makes easier to coordinate with component state and lifecycle. Angular's keyframes function integrates seamlessly with the animation framework, allowing you to create sophisticated sequences that respond to component data and user interactions. This tutorial demonstrates how to use keyframes() to create complex animation sequences. Note: This uses Angular's deprecated animations module.

Accessibility Angular Angular Animations

Angular CDK Overlay: Add Accessibility with ARIA and Focus Management (v19+)

February 02, 2024

Inaccessible modals and pop-ups exclude keyboard users, screen reader users, and violate WCAG guidelines, yet many Angular developers overlook basic accessibility features. The Angular CDK Overlay provides powerful positioning and animation features, but accessibility requires additional work: ARIA roles, focus management, keyboard navigation, and proper focus trapping. This tutorial demonstrates how to make CDK Overlay-based modals fully accessible, ensuring all users can interact with your overlays effectively.

Accessibility Angular Angular CDK

Angular CDK Overlay Scroll Strategies: Reposition, Block, Close, or Noop (v19+)

January 19, 2024

Choosing the right scroll strategy for Angular CDK Overlays is crucial. Should your popup reposition as users scroll, block scrolling entirely, close automatically, or do nothing? Each strategy serves different use cases, and picking the wrong one creates frustrating user experiences. In this guide, you'll learn all four built-in scroll strategies (Reposition, Block, Close, and Noop), when to use each one, and how to handle custom scrolling containers with the cdkScrollable directive. This article builds on CDK Overlay basics and positioning concepts. All examples work with Angular v19+.

Accessibility Angular Angular CDK

Angular CDK Focus Trap: Make Modals Keyboard Accessible

December 15, 2023

Focus trapping is essential for accessible modals, dialogs, and dropdowns. Without it, keyboard users can tab into content behind overlays, creating a confusing and inaccessible experience. The Angular CDK's cdkTrapFocus directive makes implementing focus traps simple, automatically managing keyboard navigation within a container and returning focus when closed. In this tutorial, you'll learn how to use the focus trap directive, enable auto-focus on open, and ensure your modals meet WCAG accessibility standards. All examples work with Angular v19+ and standalone components.

Accessibility HTML SEO

Using The New HTML Search Element: Enhancing Semantics for Search Functionality 🔎

December 08, 2023

The HTML <search> element provides proper semantic meaning for search functionality, improving accessibility, SEO, and browser understanding. Before its introduction, developers had no native way to mark search regions, forcing workarounds with generic containers or ARIA landmarks. This tutorial demonstrates how to use the <search> element in common scenarios like site-wide search bars and filtered content lists, ensuring your search functionality is properly identified by assistive technologies and search engines.

Accessibility Angular Angular Components

Angular Event Listening: 4 Ways to Handle Events (Legacy Patterns)

September 08, 2023

Event handling in Angular requires choosing the right approach for each scenario: template event bindings for simple interactions, Renderer2 for global events, host event bindings for component-level events, and output() for component communication. This tutorial demonstrates four common event listening patterns in Angular, showing when to use each approach and how to avoid common pitfalls. You'll learn how to handle clicks, input changes, focus events, and global document events effectively.

Accessibility CSS HTML

Crafting Dynamic Text Paths with HTML, SVG, and CSS: A Guide to Responsive and Accessible Graphics

August 27, 2023

Irregular text paths typically require images, creating maintenance issues, accessibility problems, and SEO limitations. Inline SVG with CSS provides a better solution, enabling dynamic, responsive, and accessible text-on-path effects directly in HTML. This tutorial demonstrates how to create curved and shaped text using SVG and CSS, ensuring designs remain editable, scalable, and accessible.

Accessibility CSS HTML

Oh Wow That’s Neat – 17: Open Source Ampersands

May 14, 2014

Paul Irish created and maintains a site devoted to Ampersands. The site is a collection of open source web fonts that only contain the ampersand character. He created it based off an [article from 2008](http://simplebits.com/notebook/2008/08/14/ampersands-2/) regarding the usage of ampersands and the fact that certain variants of the character in some fonts are more interesting than others. The article also points out that the ampersand character is often used only for display purposes and not in content so there is no reason not to use more interesting versions.

Accessibility CSS HTML

SVGs are So Fresh to Defs

April 14, 2014

No, this is not a hip hop song about SVGs, sorry to those of you who were expecting that. This is another post about good ol' SVG graphics. So most of us know that there is a lot that you can do with SVGs and it can all be done in many different ways. The SVG `defs` element can be used to make SVG code simpler, cleaner, and better.

Accessibility CSS JavaScript

Modern Web Typography: Kerning

February 24, 2014

Kerning is a very important aspect when it comes to setting type. Unfortunately, until more recent times, it has been left out when it comes to the web.

Accessibility Cursor AI Forms

Quick Tip - 07: Autofocus Fields With HTML5 Form Attributes

February 21, 2014

Have you ever wanted to automatically place the cursor in a field when the page is rendered? I know I have.

Accessibility CSS HTML

Make it Count with CSS Counters

February 09, 2014

Often I've found myself in a spot where I've needed to style an ordered list in a way that I just couldn't do with CSS. So I either had to live with it as it was or get tricky with JavaScript or something to create a custom list with the necessary markup. Then I stumbled across CSS Counters and that all changed.

Accessibility CSS HTML

Quick Tip - 05: Small Caps Using font-variant

February 07, 2014

Ever needed to use small caps in a website? They can add a really nice typographic touch in certain circumstances, but I've never really taken advantage of them with CSS.

Accessibility Animation CSS

Oh Wow That's Neat - 05: Perspective Page View Navigation

February 05, 2014

Navigation can be a hard thing to master. Handling it intuitively and in a usable fashion is even more challenging with the wide variety of devices and screen resolutions available. Most sites tend to just shove all of their menu items under some three bar icon and expand the menu when clicked. Seems to work pretty well, but what If your were to think of navigation in a whole new way?

Accessibility CSS HTML

The Difference Between CSS box-shadow and filter: drop-shadow();

January 27, 2014

Normally when I need to add a drop shadow to an element I will use CSS box-shadow. There's another way that I can handle this though. I can use CSS filters. They allow me to do many different things like apply gray-scale, apply sepia, blur, adjust brightness, adjust contrast, adjust hue, invert colors, saturate colors, and alter opacity.