How good is Browser Support for the ARIA Notify API?
More and more platforms and browsers support the new API. I did some tests with different screen readers.
Alexander Lehner – Oida, is des org!
Web Development Blog with focus on Accessibility.
Latest posts
Enhance Dialogs with the closedby Attribute
Easily add light dismiss behavior or prevent accidental closing via the Escape key.
Best Practices for CSS Scope in Angular Applications
Learn how to write efficient donut scopes and easily override 3rd party components.
Using the Temporal API in Angular without including a Polyfill
Add type definitions for Temporal without blowing up the bundle size of your app.
My First Steps as an Astronaut
The advantages of using the web framework Astro to manage my web dev blog.
Flexible Menu Animation with Anchored Container Queries
We can query the currently active fallback position and apply different styles with CSS only.
Let's Play Accordion with the HTML details element
An in-depth look at the new capabilities of the native disclosure element.
How to Create an Accessible Table with Clickable Rows
Extend the reach of your buttons to support keyboard and screen reader users.
Let's build an Accessible Menu with Modern Web Features
A step by step guide, using the Popover API and CSS Anchor Positioning.
Make Screen Readers talk with the ARIA Notify API
A first look at the new API that represents an alternative to ARIA live regions.
Date and Time Management with the Temporal API
It's more reliable than Date and offers formatting options and time zone support.
My Favorite Tools for Web Accessibility Testing
A selection of bookmarklets, browser extensions and other accessibility testing tools.
Accessibility Engineering — Let the Web Platform do the Work
Harness the power of native buttons, dialogs, form controls, and disclosure widgets.
Placeholder Text needs Good Color Contrast
Use the ::placeholder CSS pseudo-element to improve your website's accessibility.
How to build Accessible Navigation Menus with the Popover API
Leveraging the power of modern web features, you can quickly create awesome navigation menus.
Easy Offline Storage with idb and the IndexedDB API
The idb library makes it easy to store data on your device and retrieve it for offline use.
Native Dialogs and the Popover API — What you need to know
Learn how to animate dialogs and popovers, correctly nest them, and close dialogs on backdrop click.
Will the CSS Scope Feature replace Angular's View Encapsulation?
Learn how to use native scoping and create code that is easier to read and debug.
Support different color themes with a two-color focus indicator
Create an accessible, universal focus indicator that works in light and dark mode.
Enhance your Designs with Accessibility Annotations
Mark headings, alternative texts, links and buttons in your prototypes.
Accessible Alerts made easy by the Popover API
Inform the user of important events without interrupting their current task.
The PDF Accessibility Checker: Strengths and Weaknesses
The tool detects major accessibility violations. But it does not replace manual testing.
How To Meet WCAG 2.2 — Some Practical Examples
A quick overview of the new success criteria and some practical examples for specific use cases.
Why I think that accessibility certifications are useful
Certifications provide a uniform standard and increase the credibility of experts.
Manage concurrent and interdependent requests with RxJS
The RxJS library offers powerful operators that will make your dev life a lot easier.
Make your content pop with the Popover API and CSS Anchor Positioning
Building accessible menus, tooltips, and date pickers has never been this easy.
Unleash the Power of Inline SVG Images
An inline SVG image can be easily customized with CSS and is highly flexible.
Use the inert attribute to prevent unintended user interaction
An easy and elegant way to improve accessibility and the user experience.
How the Description List Element improves Accessibility and the Developer Experience
Markup any list of key-value pairs to make your code more readable and convey semantic information to screen readers.
Checklist for Accessible UI Component Libraries
Provide a consistent, accessible design and speed up the development process.
Responsive Component Design with CSS Container Queries
Create responsive, reusable components that adapt to the available space of their container.
Design Perfectly Aligned Layouts with CSS Subgrid
Nested grid containers can align their rows and columns using the subgrid feature.
Create an Accessible News Carousel as an Angular Standalone Component
Using Angular, ARIA attributes and some powerful CSS, we create an accessible, responsive web carousel.
Looking Back at 2022 — My First Year of Blogging
One year ago I started my blog about web development and accessibility. A retrospective and a look ahead.
A Conversation with ChatGPT about Web Accessibility and Widespread Myths
The artificial intelligence impresses with thoughtful and well composed answers. But it's not perfect.
3 Ways how Web Developers also benefit from Accessibility
Semantic HTML is easy to read and maintain, keyboard operable by default, and works well with CSS.
Building Accessible Toggle Buttons in React
Using the button element together with the switch role creates an accessible experience.
Common ARIA mistakes and how to avoid them
ARIA roles and attributes can make your website more accessible, if you know what you're doing.
CSS tweaks for better visibility in Forced Colors Mode
Find out how forced colors mode works for websites and how to improve the user experience.
Using CSS Cascade Layers in Angular
Structure your styles and avoid pesky conflicts with specificity or order of appearance.
Why you should use the Native Dialog Element
The dialog element is easy to use and accessible by default, apart from some minor issues.
A Picture Says More Than a 1000 Words – Unless You're Blind!
The basics of accessible images and common mistakes you should avoid.
Creating a fancy, accessible File Input in 3 Steps
Learn how to apply custom styling to the native HTML file input element.
How to develop a keen sense for Digital Accessibility
Approach the topic step by step and be open to new perspectives.
Accessible and interactive charts with Angular and Highcharts
How to interweave Highchart's event handling with Angular's component based architecture.
Create Accessible Web Forms with Custom Styling
How to apply custom styling to native form controls and create accessible web forms with a consistent look across all platforms.
Spell it out! Determine how Screen Readers should read text
Use the speak-as CSS property to tell screen readers how to read numbers and abbreviations.
3 Underrated HTML elements that are actually awesome
Use the time, picture and dl elements for machine-readable dates, faster loading images and better accessibility.
Lights Off! Experience how Blind Users navigate the Web
What does it feel like to be blind? Turn everything black and experience the web as a blind user would.
Provide highly visible Keyboard Focus with :focus-visible
Fancy design or accessibility? The :focus-visible pseudo-class enables you to support keyboard-only users and satisfy clients.