Hackfest.ca - Largest cybersecurity, information security and hacking events and community in Canada! ______________________________ Polarcon.ca - Security Manager Summit…

Some background, perhaps? The idea for this post came about off the back of the recent arrival through my letter-box of chef Eric Sze’s new one “Taiwanese?”, owner of restaurants 866 and WenWen in NY and an excellent YouTube channel. It’s indeed a thing of beauty — the photos by Alex Lau, are stunningly executed,… Read More »

The Playout Automation and Channel-in-a-Box market is projected to grow significantly, reaching $9.16 billion by 2031, reflecting key trends shaping broadcasting.

I work on OnePassApps, so this is a measurement of our own product in the live app, not a review of someone else's code. Every OnePassApps Studio is a form: a file or a paste box, some options, a result. That makes the seven studio pages a natural place to check keyboard and assistive-technology access, because each one has to be usable without a mouse. No channel here had covered accessibility before, so I measured it in the live app and wrote down what I found, including the part that did not come out well. ## What I measured, and how Seven routes: `/studios/image`, `/studios/audio`, `/studios/files`, `/studios/text`, `/studios/data`, `/studios/icons` and `/studios/colour`. One build, one browser, one session, signed out. I read the accessibility properties straight out of the DOM, and I drove the pages with real Tab and ArrowRight key events rather than calling `focus()` from a script, so the focus order below is the order a keyboard user actually gets. I did not run a screen reader. Everything below is what the DOM exposes to one. ## The tool switcher is a real radio group On the Data Studio page the eleven tools - Viewer, Sort / filter, Columns, Duplicates, Merge, Split, To JSON, Formatter, Validator, To CSV and YAML - are a radiogroup. Each tool is a button with `role="radio"`, the group carries `role="radiogroup"`, and the selected tool carries `aria-checked="true"`. The keyboard behaviour is right. Tab moves focus into the group once, ArrowRight moves the selection, and the selection follows the focus: from Viewer, one ArrowRight moved to Sort / filter and a second to Columns, with `aria-checked` moving with it. The other ten tools sit at `tabindex="-1"`, so the group is one tab stop rather than eleven. Underneath the visible buttons sit native radio inputs with `aria-hidden="true"` and `tabindex="-1"`. Those are proxies for the browser's own form state, and they are correctly hidden from the accessibility tree. The same pattern holds on the other six pages: ten radios on Image Studio (seven tools plus the PNG, JPEG and WebP choices), four on Audio Studio, seven on File Studio, eight on Text Studio, eight on Icon Studio and four on Colour Studio. ## The tab order on a studio page Tabbing through the Data Studio from the top of the document: 1. Skip to content 2. Data Studio - the logo link 3. Viewer - the tool radio 4. the paste box, placeholder "Paste local data" 5. Input limits and privacy 6. Auto detect - the delimiter chooser, `role="combobox"` 7. Browse files 8. Get started 9. See plans 10. Dismiss free promotion notice Then focus left the page, and the next Tab started again at Skip to content. Every studio page carries that skip link, and each page also has a nav, a main and an aside landmark, one visible h1 naming the studio and the tool, and h3 headings over the steps - Source, Options and Result, with a couple of pages adding their own. ## Nothing you can reach is unnamed Across the seven pages I counted 120 buttons and 84 links. Every one of them has an accessible name: the count of unnamed buttons was 0 on every route, and the count of unnamed links was 0 too. The one visible control whose name comes from a fallback is the paste box, which is named by its placeholder, "Paste local data". Placeholders disappear the moment you type, so that one would be better as a real label. ## The file picker is reached through a button, and the button has a name The raw file inputs on the Data Studio page have no id, no associated label and no `aria-label`, and each renders one pixel by one pixel. They also sit at `tabindex="-1"`, so the keyboard never lands on them. What the keyboard lands on is a button labelled "Browse files" with `tabindex="0"`, which is the accessible route to the same control. Each route accepts its own types: the image picker lists JPEG, PNG and WebP, the audio picker takes audio formats plus mp4, mov, mkv and ts, and the icon picker takes only .svg and image/svg+xml. ## Results get announced I pasted a two-row CSV and pressed Parse CSV. Two polite live regions updated. One read "Loaded 2 rows and 2 columns." and the other "Parsed in 206 ms". The result stage itself showed "2 rows · 2 columns · no parsing issues" and "Delimiter found Comma", with the preview listing id as NUMBER and name as TEXT. ## One gap: no focus ring on the two controls you type into This is the measurement I did not expect, so I am writing it down carefully. Focusing the visible controls with real Tab keypresses on the Data Studio page, the buttons and the links computed to a solid 2px outline in rgba(242, 243, 244, 0.92). The paste box and the delimiter chooser computed to `outline-style: none`, with a fully transparent box-shadow. On the surfaces I measured, the focus indicator is there on the buttons and absent on the two controls you actually type into. One caveat before anyone reads that as a verdict: I read the computed style of the elements themselves, so a ring drawn on a pseudo-element would not have appeared in my numbers. Treat it as one measurement on one page. ## Also worth knowing The decorative images on a studio page carry an empty alt attribute, which marks them as decorative rather than describing them. The number of visible focusable elements per page ranges from 31 on the Audio Studio to 51 on the Text Studio. ## Limits, stated honestly One build, one browser, one day, signed out, one session on one machine. No screen reader was involved - this is what the DOM exposes, not what VoiceOver or NVDA actually says out loud. I measured the seven studios, not the two hosted apps. I walked the tab order in full on the Data Studio; on the other pages I counted focusable elements rather than stepping through them one at a time. The focus-ring gap was measured on the Data Studio only. I did not test touch, zoom, high-contrast modes, or any assistive technology against the live app. ## Try it yourself The Data Studio, if you want to check any of this with your own keyboard: https://app.onepassapps.com/studios/data?utm_source=devto&utm_medium=post&utm_campaign=keyboard-access&utm_content=studio-link And the app guides, which spell out what each app does and does not do: https://app.onepassapps.com/guides?utm_source=devto&utm_medium=post&utm_campaign=keyboard-access&utm_content=guides-link

YouTube video by WardCo

This channel is not an official Falcom channel. Uploading music via their free use policy.

In this sequel, Life to Afterlife expert Craig McMahon communicates with the dead using an Instrumental trans-communication known as Spirit Box.

ALT: Bugs Bunny's Surprised Face from Looney Tunes