Blog Archive

The advantages of using the web framework Astro to manage my web dev blog.

We can query the currently active fallback position and apply different styles with CSS only.

An in-depth look at the new capabilities of the native disclosure element.

Extend the reach of your buttons to support keyboard and screen reader users.

A step by step guide, using the Popover API and CSS Anchor Positioning.

A first look at the new API that represents an alternative to ARIA live regions.

It's more reliable than Date and offers formatting options and time zone support.

A selection of bookmarklets, browser extensions and other accessibility testing tools.

Harness the power of native buttons, dialogs, form controls, and disclosure widgets.

Use the ::placeholder CSS pseudo-element to improve your website's accessibility.

Leveraging the power of modern web features, you can quickly create awesome navigation menus.

The idb library makes it easy to store data on your device and retrieve it for offline use.

Learn how to animate dialogs and popovers, correctly nest them, and close dialogs on backdrop click.

Learn how to use native scoping and create code that is easier to read and debug.

Create an accessible, universal focus indicator that works in light and dark mode.

Mark headings, alternative texts, links and buttons in your prototypes.

Inform the user of important events without interrupting their current task.

The tool detects major accessibility violations. But it does not replace manual testing.

A quick overview of the new success criteria and some practical examples for specific use cases.

Certifications provide a uniform standard and increase the credibility of experts.

The RxJS library offers powerful operators that will make your dev life a lot easier.

Building accessible menus, tooltips, and date pickers has never been this easy.

An inline SVG image can be easily customized with CSS and is highly flexible.

An easy and elegant way to improve accessibility and the user experience.

Markup any list of key-value pairs to make your code more readable and convey semantic information to screen readers.

Provide a consistent, accessible design and speed up the development process.

Create responsive, reusable components that adapt to the available space of their container.

Nested grid containers can align their rows and columns using the subgrid feature.

Using Angular, ARIA attributes and some powerful CSS, we create an accessible, responsive web carousel.

One year ago I started my blog about web development and accessibility. A retrospective and a look ahead.

The artificial intelligence impresses with thoughtful and well composed answers. But it's not perfect.

Semantic HTML is easy to read and maintain, keyboard operable by default, and works well with CSS.

Using the button element together with the switch role creates an accessible experience.

ARIA roles and attributes can make your website more accessible, if you know what you're doing.

Find out how forced colors mode works for websites and how to improve the user experience.

Structure your styles and avoid pesky conflicts with specificity or order of appearance.

The dialog element is easy to use and accessible by default, apart from some minor issues.

The basics of accessible images and common mistakes you should avoid.

Learn how to apply custom styling to the native HTML file input element.

Approach the topic step by step and be open to new perspectives.

How to interweave Highchart's event handling with Angular's component based architecture.

How to apply custom styling to native form controls and create accessible web forms with a consistent look across all platforms.

Use the speak-as CSS property to tell screen readers how to read numbers and abbreviations.

Use the time, picture and dl elements for machine-readable dates, faster loading images and better accessibility.

What does it feel like to be blind? Turn everything black and experience the web as a blind user would.

Fancy design or accessibility? The :focus-visible pseudo-class enables you to support keyboard-only users and satisfy clients.

How to efficiently use a screen reader and which keyboard shortcuts and gestures will make your life easier.

Improve the accessibility of your website or app with high color contrast, semantic markup and captions.