transitive verb [ ‘rōl əp ] roled-up, roleing-up, roles-up Definition of role-up To use an ARIA role on an HTML element to change its semantics and/or force it to accept an accessible name (via aria-label, aria-labelledby, or even aria-describedby). To add ARIA roles everywhere without understanding, often via framework or…
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…
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 visible text. Overview Throughout this post I am going to use the terms browser window and tab interchangeably. While…
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…
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…
Related Under-Engineered Responsive Tables A Responsive Accessible Table Hey, It’s Still OK to Use Tables Keyboard and Overflow
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…
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…
As of my 25 July 2025 update at the end of this post, aria-label auto-translation support is less spotty than when I first wrote this post, but still unreliable. It does, actually. Sometimes. One of the big risks of using ARIA to define text content is that it often gets…
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,…
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…
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…