Usability & other web stuff, tech, martial arts. Creative & data @UFC. Mastodon: https://xitter.cf/t.co/Ae1Rphc5bu
New York, NY
Joined June 2008
- Tweets412
- Following369
- Followers9.9K
- Likes2.4K
Pinned Tweet
Wrote an article about my experience designing reorderable lists and some considerations for making them as usable as possible.
darins.page/articles/designi…
Haven't really been on here lately, but probably not coming back, at least not in Twitter's current form.
If you want to keep up with me, find me at my personal website or on the Elephant network (both linked in my bio).
Noticed a usability detail on a Japanese beer can: a small cavity in the lid under the pull tab that lets you more easily grip and open it.
My big fingers def found it helpful.
I’d be curious to hear if ppl who normally have trouble opening this type of can find it helpful.
ALT The top of a closed beer can. The edge of the pull tab has a small recessed area below it to allow for better gripping.
ALT The tops of two closed beer cans. The left can has a small cavity below the tip of the pull tab. The right can does not.
Great newsletter for everything web design and development. You should subscribe.
This week’s also includes a blog post of mine.
You’re unable to view this Post because this account owner limits who can view their Posts. Learn more
The `aria-description` prop is going to have full browser support soon, so I did a little dive into it & its current level of support:
darins.page/articles/aria-de…
Started an article series where I'll attempt to build a drag-and-drop interface that makes sense for screen reader users. Let's see if I can do it.
Here's part 1, where I look at communicating that an element is draggable:
darins.page/articles/screen-…
In April I noticed a Safari bug where dynamic lists (<ul>, role=list) weren't given list roles in the a11y tree, causing VoiceOver to read them as generic text nodes.
If used for a todo list or shopping cart, VO users would get a clunky (at best) or broken (at worst) experience.
After reporting it the WebKit team jumped on it fast, patching it in Safari 15.4 in just over a month.
Orig. bug: bugs.webkit.org/show_bug.cgi…
I'm critical of WebKit/Safari at times, but it was good to see them prioritize an accessibility issue & push a fix quickly. Credit to them.
Spent an hour debugging table <caption> elements that were displaying at different font sizes on iOS.
The culprit: CSS’s “-webkit-text-size-adjust” property, which was enlarging the font size for some and not others.
Setting the value from “auto” to “none” solved the issue.
Company cares so much about accessibility that it wants to sue those who want it to care about accessibility.
AudioEye’s attorneys sent me a Cease & Desist letter (and a follow-up).
I have posted it along with my response:
adrianroselli.com/2022/04/my…
TL;DR: I deleted three tweets, considering I am a self-employed independent consultant, not a multi-million dollar start-up.
An idea I’m working on in response to some user feedback: an “overflow” area of a reorderable list where added items that don’t fit are stored adjacent to the rankings rather than prohibiting the user from adding them.
Users would get frustrated when they search/filter a long list of options to find an item but couldnt add it without first removing a ranked item.
Here they can add as many options to the list as they want, then refine their rankings when ready w/o the need to go back and forth.
[video desc: a list of options on the left and a list of rankings on the right. Item #5 in rankings is empty. A mouse clicks the add button on three options. The first gets added in the empty rankings slot, then the other two are added below the rankings.]
Working on some advanced reorderable list components. Things get complex when moving items between lists. Here, I'm using animation to show the visual transition as items are removed from one list and added to the other.
Of all the features coming to Safari in iOS15, one I haven’t seen mentioned is the HTML drag-and-drop API will finally be functional on iPhones! That brings its support to all major browsers and devices.
Here’s a demo: codepen.io/dsenneff/pen/990d…
[video alt: An iPhone screen recording showing two elements being dragged and dropped over one another]