@zoltandulac@mastodon.social
@zoltandulac@mastodon.social avatar

zoltandulac

@zoltandulac@mastodon.social

Passionate, experienced web developer, accessibility specialist & calligrapher. Lead singer of Conflicting Plaid and ZX-81. He/him. Opinions expressed here represent me alone & not my employer.

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

aardrian, to accessibility
@aardrian@toot.cafe avatar

“Level-Setting Heading Levels”
https://adrianroselli.com/2024/05/level-setting-heading-levels.html

TL;DR: Avoid setting heading levels greater than six (6). This applies whether using aria-level or the proposed headingstart HTML attribute. Use HTML <h#> elements whenever possible.

zoltandulac,
@zoltandulac@mastodon.social avatar

@aardrian

The best line: "If you need more than two billion one-hundred forty-seven million four-hundred eighty-three thousand six-hundred forty-seven heading levels, you may need to hire a copywriter."

😃

dgar, to random
@dgar@aus.social avatar

I had a one-night stand with a mime.

We did unspeakable things.

zoltandulac,
@zoltandulac@mastodon.social avatar

@dgar Not surprising ... you and the mime have a lot in common. Some would say your jokes are best left unheard. 😄

zoltandulac,
@zoltandulac@mastodon.social avatar

@dgar Just kidding, friend. Love these jokes. I need a little stress relief right now ... thanks for that. 🙂

shom, to accessibility
@shom@fosstodon.org avatar

#Accessibility friends, I need some guidance.

I tried adding video alt-text on my website [1], but apparently HTML5 <video> doesn't support the alt attribute. @mozilla docs [2] suggests adding text-tracks, so I added a VTT file for closed captioning, that feels hacky.

Is this really the best option or are there better ways? My video doesn't have a voice track, it's better described with alt-text.

[1] https://shom.dev/posts/20240204_filmposter-with-gum-hugo-photo-post-bliss/
[2] https://developer.mozilla.org/en-US/docs/Learn/Accessibility/Multimedia#video_text_tracks

#a11y #html5

zoltandulac,
@zoltandulac@mastodon.social avatar

@kc @shom @mozilla

This is the best way. Audio Descriptions makes your video WCAG AA compliant. Adding transcripts make it AAA compliant.

(Captions are WCAG A)

zoltandulac,
@zoltandulac@mastodon.social avatar

@aardrian @kc @shom @mozilla TIL that Safari actually supports this to a certain degree. I have done the two video approach (one with and one without AD) but have also used AblePlayer to have a VTT file with the audio descriptions with the computer reading them (I set it up to pause when reading the descriptions so there was no overlap with the audio in the video itself).

zoltandulac,
@zoltandulac@mastodon.social avatar

@aardrian @kc @shom @mozilla

Have you ever tried any other video player to implement VTT audio descriptions successfully? AblePlayer requires jQuery, so looking for alternatives.

aardrian, to accessibility
@aardrian@toot.cafe avatar

Please stop adding aria-label to <span> and <div>. They won’t love you back no matter what you name them.

zoltandulac,
@zoltandulac@mastodon.social avatar

@eric @aardrian "Roles That Shall Not Be Named" is an excellent name for a 1980s Metal album ...

(picture below mostly generated by AI)

thisismissem, to accessibility
@thisismissem@hachyderm.io avatar

If I post a screenshot of some code, and I've not a link for it, what should the alt text be? I'd imagine code in alt text would be super annoying?

zoltandulac,
@zoltandulac@mastodon.social avatar

@thisismissem I would ask "Why did I post this?"

If the answer is "I want to show how complex it is to do X" or the code is instrumental to what you are posting about, then I would have a screenshot and link to the code. I would make the alt "Screenshot of code linked below". Most screen reader users navigate back and forth through code to understand it, and they can't do that with alt-text easily.

stefan, (edited ) to mastodon
@stefan@stefanbohacek.online avatar

Thinking about opening a feature request.

EDIT: Here it is https://github.com/mastodon/mastodon/issues/27731

zoltandulac,
@zoltandulac@mastodon.social avatar

@stefan I really hope this is implemented. Posted a comment to that effect.

zoltandulac, to 8bit
@zoltandulac@mastodon.social avatar

Game Over. A new creation by my wife Lizzie (killerkitsch13 on Instagram)

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

Because no one but me needed it, I've created a tool that lets me do Xmodem transfers in the browser: https://xmodem.isthe.link - source https://github.com/remy/web-xmodem

zoltandulac,
@zoltandulac@mastodon.social avatar

@rem That is pretty awesome. Curious: why not Zmodem or Ymodem?

zoltandulac,
@zoltandulac@mastodon.social avatar

@rem This is the first time I have heard of this console and now I want one.

simon, to accessibility

/ awareness in a nutshell

zoltandulac,
@zoltandulac@mastodon.social avatar

@simon Wow ... so cringe. Are you located in Canada or elsewhere? I am not a customer of theirs, but doesn't seem like I want to be one.

zoltandulac, to lostmedia
@zoltandulac@mastodon.social avatar

The very unknown and hard to find Japanese film "Kairei" starring Johnny Cash is available on the Internet Archive, but hardly anyone knows anything about it because there are no known commercial editions with Japanese subtitles. So I subtitled it myself with Whisper AI, and it did an incredible job. An interesting movie! Now I am trying to figure out what to do with it. Any ideas welcome.

A screenshot from the movie Kairei, with three Japanese men wearing English clothes from the 1800s speaking to an older white man, played by Johnny Cash. The subtitle reads "I wrote this."
A screenshot from the film Kairei. There are three Japanese men in 1880s British clothing, two sitting on a bench and one standing. The subtitle reads "No matter what happens, we're Japanese.We have to be careful not to be a shame to the Japanese.” .

zoltandulac,
@zoltandulac@mastodon.social avatar

@Holger I want to post it, but where is the question? YouTube? Internet Archive? Somewhere else? I want it to be as freely available as possible while avoiding any possible copyright problems.

zoltandulac,
@zoltandulac@mastodon.social avatar

@ixi @Holger Thanks for this. I have it as an .srt already, but putting it on opensubtitles sounds like the way to go. Will probably take a few days to make the timing of the captions more accurate, but I think I will go that route. 🙂

zoltandulac, to random
@zoltandulac@mastodon.social avatar

Hi @aardrian ! I was looking at your blockquote post and can't see the example. I either get a white screen or a visual SSL error. Either way, an console error like this is reported "Failed to load resource: An SSL error has occurred and a secure connection to the server cannot be made."

zoltandulac,
@zoltandulac@mastodon.social avatar

@aardrian Maybe it's a CDN issue? Here is a screenshot:

zoltandulac,
@zoltandulac@mastodon.social avatar

@aardrian And then, when i click on the link, I get an error reading "codepen.io
Checking if the site connection is secure. codepen.io needs to review the security of your connection before proceeding." with a captcha. Screenshot is below.

So ... I guess I can fix it on my end ... but it's too bad the example doesn't gracefully degrade. Wasn't obvious what was wrong here.

zoltandulac,
@zoltandulac@mastodon.social avatar

@aardrian Oh no ... sorry for any misunderstanding ... I didn't think this was your issue. And yeah ... I get that putting the code into the article itself wouldn't be great either. I would think that if codepen embedding script (which I assume comes from codepen) fails for whatever reason an error would appear. The SSL error previously isn't so bad I gues, but sometimes that SSL error doesn't appear and it's a strange white screen. Interestingly, the code appears in this scenario. So odd.

zoltandulac,
@zoltandulac@mastodon.social avatar

@aardrian In any event -- sorry for the noise. Just odd.

zoltandulac,
@zoltandulac@mastodon.social avatar

@aardrian I know what you mean. The code walkthroughs I have on my project (Enable) is something I built myself, but it works on a different principle (it basically looks at the DOM of the page and highlights code at different stages of the walkthrough). One of these days I should simplify it and just have that script as an NPM module.

Here's an example, if you want to kick the tires. Any feedback is welcome.

https://www.useragentman.com/enable/form-error-checking.php#developer-walkthrough-1

anatudor, to accessibility

Forget CSS, people don't even know HTML.

Here's why I'm saying this: I've looked through demos made for last week's : https://codepen.io/challenges/2023/june/2 in order to get a better idea of how people want such a control to look and work.

And here are some numbers: 😭

zoltandulac,
@zoltandulac@mastodon.social avatar

@anatudor You could just remove one of them out of the keyboard tabbing order using tabindex="-1" and then remove it from the accessibility tree by using aria-hidden="true".

But I'd just use <output aria-live="off"> to display the value. If you left out aria-live="off", screen readers would announce the value twice, which is annoying.

If the slider was a form, and you used an <input type="range"> and a <input type="number">, the value would be submitted twice.

My 2¢.

zoltandulac,
@zoltandulac@mastodon.social avatar

@anatudor I think I see what you mean. I would just have the two inputs wrapped up in a <fieldset>. The labels can state they are min and max values. Sort of like this example, but instead of having labels of "Amount A" and "Amount B", they should be "Minimum Value" and "Maximum Value" (an error in this example that I will change soon).

The fieldset tells the screen reader they are two inputs in the same group.

https://www.useragentman.com/enable/slider.php#an-html5-slider-with-min-and-max-values--heading

yatil, to accessibility
@yatil@yatil.social avatar

I wished there was a better way to construct accessible names in aria/html. Just concatenating references works, but is clumsy. I want something like:

aria-label="(:parent(.name)) by (:parent(.autor)), Duration: (:parent(.duration)) minutes; Difficulty: (:parent(.difficulty))"

zoltandulac,
@zoltandulac@mastodon.social avatar

@yatil This would solve a lot of problems. If you had one component that repeats (e.g. product tiles on a listing page), using aria-labelledby id's is a little inconvenient, since you need unique ids in each tile.

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