@cwilcox808@c.im
@cwilcox808@c.im avatar

cwilcox808

@cwilcox808@c.im

Digital accessibility developer in higher ed

This profile is from a federated server and may be incomplete. Browse more on the original instance.

joelanman, to random
@joelanman@hachyderm.io avatar

Ha ha pretty proud of this one

Framed
🎥 🟩 ⬛ ⬛ ⬛ ⬛ ⬛
https://framed.wtf

cwilcox808,
@cwilcox808@c.im avatar

@joelanman
Honestly, I'm not sure I would've gotten this one on the first image if I hadn't seen your message. This movie is one that I've thought was the answer on multiple previous occasions.

sarajw, to random
@sarajw@front-end.social avatar

If there's a sort-of-selection widget, that's a grid of options - and upon activating one it acts like a button and opens a new modal flow - what is that? What is it called? Is it an existing thing?

Currently you have to tab through all the buttons in this grid to get through it and out the other side. So I think it needs roving tabindex.

I also think it should probably be navigable in two dimensions with arrow keys, like you'd expect in a calendar date picker.

cwilcox808,
@cwilcox808@c.im avatar

@sarajw
It sounds like you're describing an ARIA grid which would involve a roving tabindex.

jwildeboer, (edited ) to random
@jwildeboer@social.wildeboer.net avatar

WRT monetisation on the fediverse: You can do this without any changes to the protocol. Since a long time. You could start a little agency to provide this as a service. Here's how to for videos: Set up a peertube server. Upload videos with access limited to instance users. Use OAuth to authenticate/sync users of that peertube instance with your payment/membership service like Patreon/KoFi etc. Done.

cwilcox808,
@cwilcox808@c.im avatar

@jwildeboer
Would a user have to create a new identity on that server or could they become an instance user using an existing fediverse identity?

cwilcox808,
@cwilcox808@c.im avatar

@jwildeboer
I'm trying to see what's "fedi" about it. The content can't be federated so if one's identity also isn't from the fediverse, I don't see what the appeal is over any number of other web server options.

cwilcox808,
@cwilcox808@c.im avatar

@jwildeboer
I missed the context, I just saw that post boosted.

I thought I was missing some detail but apparently I didn't; standalone instances of whatever are fine but if there's no federation, I wouldn't say it's "on the fediverse."

sarajw, to accessibility
@sarajw@front-end.social avatar

re selects vs radio button groups:

Just got linked to this at work:
https://www.youtube.com/watch?v=vwgihljM2e4
https://codepen.io/argyleink/pen/NWJBmPX

And I'm like, jaw-drop, have I just been coding roving tabindex into a custom select for nothing? Should I just have turned them all into radios instead?

Is this as nice to use and accessible as it sounds, or are there pitfalls/traps here?

cwilcox808,
@cwilcox808@c.im avatar

@sarajw @aardrian
The video has a number of creative interactions that don't look like native ones; building on radio buttons provides semantics and keyboard interaction that can make sense (though the bento one without view transitions is confusing since the selected radio doesn't appear to change).

I didn't see anything that turned radios into something that looks like a <select>. A problem with doing so is expected keyboard interactions (Home & End keys, type 1st letter) wouldn't work.

cwilcox808,
@cwilcox808@c.im avatar

@sarajw @aardrian
As an example, I forked Adrian's multi-select demo and replaced the checkboxes with radio buttons.

https://codepen.io/ccwilcox/pen/PogXOKP

Leaving the radios visible could help visually convey that the control won't work the same as a <select>.

Since both <select> and radio groups are for selecting a single option, there's little reason to do this. One reason would be if some options have long names, which won't wrap in selects in most browsers.

stephaniewalter, to random
@stephaniewalter@front-end.social avatar

Please tell I'm not the only one who would name all the cute waiter robots and give a set of accessories including hats and mustaches if I was working in that restaurant?

video/mp4

cwilcox808,
@cwilcox808@c.im avatar

@ElectronLibre @stephaniewalter
Oh no, are even the robot workers at Chotskie's going to have to worry about if they're wearing enough pieces of flair?

siblingpastry, to accessibility
@siblingpastry@mastodon.world avatar

Writing up some best-practice patterns for form controls, and I've assembled this list of native HTML controls that should never be used (because they're not universally supported, and/or their native UI has accessibility problems):

<input type="color">
<input type="date">
<input type="datetime">
<input type="datetime-local">
<input type="number">
<input type="time">
<input type="week">

Any debate on those? Anything I've missed?

cwilcox808,
@cwilcox808@c.im avatar

@siblingpastry @yatil
It's fine if the "spinner" controls of a number input are an affordance only for pointer users, everyone can still enter digits into them.

My recollection is all the accessibility issues listed in the GDS article have since been addressed. All the Voice Control tests listed on a11ysupport are older than the GDS article so they might have also been corrected.

css, to SEO
@css@front-end.social avatar

/ question:

Suppose I have a home page and its content is nothing but different blocks (image + text) that link to internal pages. Does that count as a navigation and I have to use the <nav> element or It counts as the main content and a simple <ul> listing is enough?

cwilcox808,
@cwilcox808@c.im avatar

@css @urlyman
<ul> is helpful because it defines the links as a set and screen readers can say how many there are in the set.

Except when a <nav> contains a set of in-page links, they're usually a pattern that's repeated on many pages. Since you do have the same set of links repeated on each of the generator pages (<nav class="more">), I would also put them in a <nav> on the home page. It provides some consistency, even though the <nav> is a descendent of <main> there, instead of a sibling.

cwilcox808,
@cwilcox808@c.im avatar

@css
BTW, only the link is interactive but the :hover on the <li> makes it seem like one can click the image. I would use a Block Link technique to make it so you can click the image to activate the link.

Instead of li.current::after to add the "You are here" banner, I'd add aria-current="page" to the link and use li:has(a[aria-current="page"])::after as the selector. A screen reader user might miss the pseudo-element text but not the ARIA on the link.

@urlyman

cwilcox808,
@cwilcox808@c.im avatar

@css
Hm, it's different in Safari vs. Chrome & Firefox. It seems like a bug but I don't know whether it's technically against spec or not.

In Safari, even though the DevTools shows the <a> element filling the grid area, only the link text is a click target. It might be a layer issue, the whole area is clickable if the image doesn't load or if z-index: 1 is added to the link.

stephaniewalter, to random
@stephaniewalter@front-end.social avatar

Yeah folks, I want to show students examples of a poorly implemented focus order, aka, it goes all over the place and it's a mess. Of course, right now I can't find any any more (which is a good news, at least).
Anyone has a good "bad" example?

cwilcox808,
@cwilcox808@c.im avatar

@stephaniewalter
Is this one bad enough for you?
https://www.newtonma.gov

As a bonus, all the links in the main navigation are in the focus order, some of the sub-menus are huge, and there's no skip link.

yatil, to random
@yatil@yatil.social avatar

I love waiting for stuff that is already loaded.

Safari on the left super responsive, zero delay. Safari Technology Preview on the right, it takes like half a second until the text is in place.

Of course, the transitions also don’t support reduced motion settings, so they are a great additional way to make your users feel sick. There are no website settings to turn them off.

(CW: Video and video in the linked post are potentially vestibular triggers.) https://front-end.social/@bramus/112252063739648992

Video is split screen, klicking on content on the left reveals it without delay. On the right, an animation is triggered that takes about half a second. You just need to wait until the animation is settled to interact with it. And it is a full-page animation, so easily a vestibular trigger.

cwilcox808,
@cwilcox808@c.im avatar

@marcus @yatil
When View Transitions between page requests are possible, I imagine it would be relatively straightforward for browsers to completely ignore view transition CSS rules when "reduce motion" is enabled. The browser could either act as if it doesn't support View Transitions at all or a transition could still occur but with the user agent defaults (I forget how quick it is by default but there's no motion, it's a fade).

cwilcox808,
@cwilcox808@c.im avatar

@marcus @yatil
Maybe the same could be done with current SPA View Transitions, I don't know if there could ever be losses to functionality or understanding if the authored transition is absent. I don't think they can be as complex as regular CSS animations.

Avoiding the need for authors to use prefers-reduced-motion would help.

codepo8, to random
@codepo8@toot.cafe avatar

Did you know that HTML has a translate attribute? You can prevent browsers from automatically translating labels and other text elements by setting it to "no".
https://www.w3.org/International/questions/qa-translate-flag

cwilcox808,
@cwilcox808@c.im avatar

@lewiscowles1986
I thought the examples were clear enough.
A physical button on a printer is always going to have the text "Continue" so writing about the button should not translate it so one can recognize the button by its appearance, even if one doesn't know what the text means.
If you're writing about HTML, the label element is always going to be written as <label>, not <etichetta>, <etikett>, or another translation of "label."
@codepo8

simevidas, to random
@simevidas@mastodon.social avatar

Chrome Developer blog uses a “Material Symbols Outlined” web font to make text appear as symbols.

For example, the text “check_box_outline_blank” renders as a checkbox icon.

I don’t know why they implemented it like this, but it’s not good because screen readers read the text. In the case shown in the screenshot, the icon is decorative. The text “check box outline blank” should not be read. It prevents the user from understanding the sentence.

(https://developer.chrome.com/blog/new-in-devtools-124#lighthouse)

cwilcox808,
@cwilcox808@c.im avatar

@simevidas
It's a clever trick, the icons are custom ligatures for the strings of letters they replace. For decorative ones like this example, they should add aria-hidden="true" to the element.

For icons that should have a name, the text might be enough; search, home, menu, close are all usually appropriate. When the text isn't right, the element should have both aria-label, to give it a name, and role="img" so it has a role.

https://fonts.google.com/icons

simevidas, to random
@simevidas@mastodon.social avatar

Re about:config, it would be useful if Firefox recorded which configs the user changed. Imagine if you could view a chronological, tabular list of all configs that you changed. Name, default value, changed value, date.

This can’t be that hard to implement. If feel I could do it in 100 lines of JavaScript.

https://utcc.utoronto.ca/~cks/space/blog/web/FirefoxMediaAutoplaySettingsIV

cwilcox808,
@cwilcox808@c.im avatar

@simevidas
about:config already has a "Show only modified preferences" checkbox and it knows what the default is.

You'd have to come up with a place to record when it was modified, that information doesn't seem that useful to me.

aardrian, to accessibility
@aardrian@toot.cafe avatar

Hey Safari/macOS users…

When I have a PDF embedded in a page via iframe (eg: https://adrianroselli.com/2024/03/csunatc-wcagmire.html) and the mouse cursor moves into the bottom center of the container, I get four clickable controls (zoom out, zoom in, ink bottle with mouse pad, circled down arrow).

How do I get to those using only my keyboard?

They don’t seem to want to appear without a mouse cursor near them.

cwilcox808,
@cwilcox808@c.im avatar

@bill @aardrian @Tamasg

You shouldn't have to use a screen reader to access functionality without a cursor.

I haven't figured it out. I thought with Full Keyboard Access (FKA) enabled I'd be able to activate the contextual menu to get functionality there, it has Zoom In, Zoom Out, Open in Preview which is the 3rd icon, but not Download. However, I haven't figured out how to get focus there to open its contextual menu.

A reason to do as you have and provide a link to the file.

cwilcox808,
@cwilcox808@c.im avatar

@bill @aardrian @Tamasg
Mouse Keys works; using the number pad to steer the cursor, I can steer it to the display PDF button, activate it, then steer it to the bottom of the frame above the various buttons.

Also, with Mouse Keys having put the cursor over the frame, FKA could open the contextual menu but it's the frame menu, not the PDF, but that does mean Save Frame As was a choice to download the PDF.

cwilcox808,
@cwilcox808@c.im avatar

@bill @aardrian @Tamasg
So, technically possible, not a good experience.

Trying Firefox, I had trouble getting FKA to navigate into the viewport (!) but turning it off, I could use regular keyboard navigation to get to the iframe, display the PDF, and Firefox's PDF viewer has a keyboard-navigable toolbar.

Chris, to accessibility
@Chris@mastodon.social avatar

Here's an question:

In a question-and-answer format interview article, should the questions be headings?

I think not because the questions don't necessarily represent sections.

Here's some examples:

  • NYT (inline <strong>)
  • WaPo (<b> in a paragraph with big Q and A)
  • Vox (<h4> for interviewer and subject names)

I think Vox is doing some interesting (but questionable) stuff with their headings (beyond the text).

Anybody have thoughts?

Washington Post:
Vox: H4 for interviewer and subject names

cwilcox808,
@cwilcox808@c.im avatar

@calua @Chris
It's on Vox's site so I don't think the "eyebrow" text, "The Vox conversation," adds value as even part of a heading. I would put it in its own non-heading element after the h1 in the DOM and visually before it.

I think the NYT and Washington Post examples could benefit from having the questions be headings; one could skim them & navigate to the ones you'd like to read the answers to.

Vox making every occurrence of the interviewer and interviewee names headings is not useful.

coral, to UX
@coral@code4lib.social avatar

Hmmm, a friend just got a UX cert from Nielsen Norman Group, and I feel a little bad that they worked so hard for something so many of us in the and crossover community will now see as a bit of a liability.

cwilcox808,
@cwilcox808@c.im avatar

@coral
It's not fair. Neither Jakob Nielsen nor Don Norman work at the business that bears their names. Whatever you think of their more recent opinions or opinions from other domains, it didn't make their earlier, pioneering UX work suddenly wrong or unhelpful.

I don't have an opinion about the value of that UX cert but if I did, it would be based on the material and how the courses are conducted.

https://www.nngroup.com/people/

https://www.nngroup.com/about/#founders

Edent, to android
@Edent@mastodon.social avatar

I can't stand the trend for icons to be constrained in little white circles. And all the designs are so flat and boring. They become indistinguishable.

I can highly recommend this app - Iconeration.
https://codeberg.org/kaanelloed/Iconeration

It allows you to load any graphic as an icon. So all the apps on my phone now have larger, more colourful, and non-geometric icons.

cwilcox808,
@cwilcox808@c.im avatar

@jonhicks @Edent
When is an app icon ever reduced to only a silhouette?

I agree that the white circle backgrounds aren't attractive but they do visually convey the touch target area and ensure there's sufficient color contrast around the icons.

Not everyone has those concerns and being able to alter them is good but they seem like good defaults.

joelanman, (edited ) to random
@joelanman@hachyderm.io avatar

Internal doors should just have magnet catches not the metal semi circle catch.

If a door needs to be locked then it can also have a lock, but the default should just be magnet or a soft bumper.

Turning the handle is wasted effort/less accessible and can fail leaving people trapped inside

cwilcox808,
@cwilcox808@c.im avatar

@joelanman
I think a magnet could be blown/sucked open by a sudden change in air pressure, something that could be happen in a fire, removing the door as a protective barrier.

They could also be opened by many pets, maybe a Roomba if it's weak enough.

In the U.S., there are standards for keeping the amount of force required low and simpler gestures.

However, I've had problems with pets opening lever-style handles but not round doorknobs.

https://www.access-board.gov/ada/guides/chapter-4-entrances-doors-and-gates/

  • All
  • Subscribed
  • Moderated
  • Favorites
  • •
  • provamag3
  • kavyap
  • DreamBathrooms
  • everett
  • magazineikmin
  • InstantRegret
  • ngwrru68w68
  • Youngstown
  • mdbf
  • slotface
  • vwfavf
  • tacticalgear
  • thenastyranch
  • rosin
  • megavids
  • osvaldo12
  • ethstaker
  • GTA5RPClips
  • khanakhh
  • Durango
  • tester
  • normalnudes
  • cisconetworking
  • modclub
  • cubers
  • anitta
  • Leos
  • JUstTest
  • All magazines
    •