Skip to content.
Adrian Roselli Consultant, Writer, Speaker

All Posts Tagged: accessibility

Block Links, Cards, Clickable Regions, Etc.

Whether you call them cards, block links, or some other thing, the construct of making an area of content clickable (tappable, Enter-key-able, voice-activatable, etc.) is not new. While hit area size is mostly a usability issue, marketers often want a larger click area around their calls to action (CTAs) to…

Posted:

Tags: accessibility, css, design, html, pattern, usability, UX

Link Targets and 3.2.5

TL;DR: Regardless of what accessibility conformance level you target, do not arbitrarily open links in a new window or tab. If you are required to do so anyway, inform users in text. Overview Throughout this post I am going to use the terms browser window and tab interchangeably. While they…

Posted:

Tags: accessibility, html, usability, UX, WCAG

Defining ‘Toast’ Messages

In current user interface terms a toast is a message that appears on the screen; it is often short, often appears only briefly, and often animates up from the bottom (like a piece of ghostly yet precisely-crafted toast), though other directions and a fade-in/-out is common. The Name When Google…

Posted:

Tags: accessibility, ARIA, pattern, usability, UX

My Priority of Methods for Labeling a Control

Here is the priority I follow when assigning an accessible name to a control: Native HTML techniques, aria-labelledby pointing at existing visible text, Visibly-hidden content that is still in the page, aria-label. Too often folks will grab ARIA first to provide an accessible name for a thing. Or they may…

Posted:

Tags: accessibility, ARIA, css, pattern, usability, UX

Fixed Table Headers

Related A Responsive Accessible Table Hey, It’s Still OK to Use Tables Keyboard and Overflow

Posted:

Tags: accessibility, css, html, mobile, pattern, tables

Responsive Type and Zoom

Typography that responds to viewport width (‘fluid’ or ‘responsive’ typography) can be useful when you want to ensure text does not get clipped or spill out of some design elements. Carousels, widget controls, or my Venn diagram are some examples. I say viewport width because I rarely see responsive type…

Posted:

Tags: accessibility, css, design, usability, UX

Web Development Advent Calendars for 2019

Web developers around the world have celebrated Saturnalia solstice Isaac Newton’s birthday Christmas with advent calendars covering web-related topics. As a result, you may recognize some of the ones listed below. Every year I miss a few on day one, so add a comment or tweet me if you have…

Posted:

Tags: accessibility, css, design, html, internet, standards, UX

aria-label Does Not Translate

It does, actually. Sometimes. One of the big risks of using ARIA to define text content is that it often gets overlooked in translation. Automated translation services often do not capture it. Those who pay for localization services all too often miss content in ARIA attributes when sending text strings…

Posted:

Tags: accessibility, ARIA, Chrome, Edge, i18n, L10n

a11yWeekTO Recap

This year the a11yTO team put together its third conference, adding a day for the built environment (#a11yIRL) and another day for gaming (#a11yTOGaming), bringing the entire conference to four days. The collection of three conferences has been branded #a11yWeekTO. Throughout the conference, attendees were incredibly positive about the venue,…

Posted:

Tags: accessibility

Accessible Drop Caps

Since the early days of the web, when images could be floated and text would wrap around them, designers have wanted to bring drop caps onto the web. Then we learned how terrible a pattern like <img alt=”M” align=”left”>atthew is for users, and CSS introduced :first-letter, letting us believe all…

Posted:

Tags: accessibility, ARIA, css, design, html, pattern, usability, UX, WCAG

Stop Giving Control Hints to Screen Readers

TL;DR: for standard HTML controls and standard ARIA patterns (widgets), you do not need to add instructions for screen readers on how to use them nor what they are. When a screen reader encounters an element on the page that invites interaction beyond reading, it typically provides users with instructions…

Posted:

Tags: accessibility, ARIA, browser, html, standards, WCAG

Smashing / Web We Want Video Pitch

At Smashing Conference in New York on Tuesday, October 15, Microsoft is hosting a lunch session as part of its The Web We Want initiative. Developers are pitching their wants. I was invited to pitch my request, but since I will not be at the conference I was asked for…

Posted:

Tags: accessibility, browser, slides, standards, WAI, WCAG