4 ms·

Seemingly it's using a <canvas> to render everything just like Flutter on Web, which is known to have problems with accessibility and feel non-native.

mort96 2y ago
I mean it's not primarily a web app framework, it's a native GUI toolkit which has a web back-end.
- Longhanks 2y ago
  It isn't native on any other platform either.
  - mort96 2y ago
    I used "native" as opposed to "web" (think "native code"), not as in "uses Cocoa on macOS". I should've been more precise.
afavour 2y ago
I’m curious if anyone has a variant of this idea where an invisible DOM lives alongside the canvas for accessibility reasons. It should work but I imagine it would also take a lot of work.
- mwcampbell 2y ago
  This is how Flutter for web implements accessibility. It's been a while since I checked, but last time I tried using a Flutter app on the web with a screen reader, there were problems. I don't remember specifics.
  - serial_dev 2y ago
    Flutter on Web is still mainly not accessible when it comes to screen readers, despite what anyone wants to make you believe. I checked it last a couple of weeks ago on my Android phone, and the result was so poor, I didn't check with other platforms. You need to "opt in" to accessibility as a user, so in the beginning you have one button visible to screen readers, then your screen reader sees that single button, then you need to "double tap to activate" to make the rest of the document screen readable. Then, somehow they made a funky screen reader voice read stuff out loud, not my system's voice, with all the awkwardness and issues that come with it. On lists, it only recognized the items that were on screen, if you had to "scroll", you are out of luck. Now, I'm sure someone will come and tell me how I'm holding it wrong, but somehow, every website and even Flutter on mobile got the accessibility mainly right by default, on Flutter web the accessibility situation is very poor.
- zackbrown 2y ago
  Check out the approach that Pax is taking.[0] Pax renders vector graphics to canvas layers and composites + clips + occludes native elements (web DOM nodes, iOS SwiftUI Text elements, etc.) in the same space to make a cohesive scene. This solves accessibility and SEO, as well as dramatically reducing runtime size (~100KB WASM network footprint) because text rendering and atomic native UI elements don't need to be reinvented. To my knowledge we're the only ones taking this particular approach so far (I'm on the team behind Pax) but it works quite well. Yes it was a lot of work. [0] see pax.dev or check out a simple example: https://static.pax.dev/space-game/ https://static.pax.dev/space-game/ ; source code for space game in examples on github https://www.github.com/paxengine/pax https://www.github.com/paxengine/pax
- zdragnar 2y ago
  The canvas element allows children specifically for this purpose, iirc. Edit: unless you're doing something like flutter where your goal is to escape the DOM/JS paradigm in your code entirely, the fallback DOM nodes don't tend to be implemented too often. The biggest reason is that canvas is for things with interactive/consumptive patterns that don't work well without vision. Cute animations, 3d explorers and configurators, that sort of thing. For users who rely on screen readers, they are better served by a DOM and interactive patterns that are not strictly recreating the canvas. As an example, canvas based animations might have a fallback equivalent to an alt attribute on an image. A 3d explorer or configurator might be represented in DOM as a multi step form with verbose descriptions- no need to recreate drag and drop, camera controls, or anything else. So, if you're not automating it like flutter is (and even if you are) what you really need to do is effectively an entirely alternate UX for screen reading users... Trying to get your product team to budget that is difficult despite being a Good Thing to do.
- chris37879 2y ago
  That's actually how Flutter works now if you enable web accessibility, and it does take a lot of work, and come with a performance cost: https://medium.com/flutter/accessibility-in-flutter-on-the-web-51bfc558b7d3 https://medium.com/flutter/accessibility-in-flutter-on-the-w...
abroadwin 2y ago
Definitely doesn't feel native or accessible on web. Can't tab between radio buttons. On macOS CMD+A doesn't select all text field text (CTRL+A does).
brirec 2y ago
Can’t even copy or paste at all on an iPhone.

mort96 2y ago

I mean it's not primarily a web app framework, it's a native GUI toolkit which has a web back-end.

Longhanks 2y ago
It isn't native on any other platform either.
- mort96 2y ago
  I used "native" as opposed to "web" (think "native code"), not as in "uses Cocoa on macOS". I should've been more precise.

afavour 2y ago

I’m curious if anyone has a variant of this idea where an invisible DOM lives alongside the canvas for accessibility reasons. It should work but I imagine it would also take a lot of work.

mwcampbell 2y ago
This is how Flutter for web implements accessibility. It's been a while since I checked, but last time I tried using a Flutter app on the web with a screen reader, there were problems. I don't remember specifics.
- serial_dev 2y ago
  Flutter on Web is still mainly not accessible when it comes to screen readers, despite what anyone wants to make you believe. I checked it last a couple of weeks ago on my Android phone, and the result was so poor, I didn't check with other platforms. You need to "opt in" to accessibility as a user, so in the beginning you have one button visible to screen readers, then your screen reader sees that single button, then you need to "double tap to activate" to make the rest of the document screen readable. Then, somehow they made a funky screen reader voice read stuff out loud, not my system's voice, with all the awkwardness and issues that come with it. On lists, it only recognized the items that were on screen, if you had to "scroll", you are out of luck. Now, I'm sure someone will come and tell me how I'm holding it wrong, but somehow, every website and even Flutter on mobile got the accessibility mainly right by default, on Flutter web the accessibility situation is very poor.
zackbrown 2y ago
Check out the approach that Pax is taking.[0] Pax renders vector graphics to canvas layers and composites + clips + occludes native elements (web DOM nodes, iOS SwiftUI Text elements, etc.) in the same space to make a cohesive scene. This solves accessibility and SEO, as well as dramatically reducing runtime size (~100KB WASM network footprint) because text rendering and atomic native UI elements don't need to be reinvented. To my knowledge we're the only ones taking this particular approach so far (I'm on the team behind Pax) but it works quite well. Yes it was a lot of work. [0] see pax.dev or check out a simple example: https://static.pax.dev/space-game/ https://static.pax.dev/space-game/ ; source code for space game in examples on github https://www.github.com/paxengine/pax https://www.github.com/paxengine/pax
zdragnar 2y ago
The canvas element allows children specifically for this purpose, iirc. Edit: unless you're doing something like flutter where your goal is to escape the DOM/JS paradigm in your code entirely, the fallback DOM nodes don't tend to be implemented too often. The biggest reason is that canvas is for things with interactive/consumptive patterns that don't work well without vision. Cute animations, 3d explorers and configurators, that sort of thing. For users who rely on screen readers, they are better served by a DOM and interactive patterns that are not strictly recreating the canvas. As an example, canvas based animations might have a fallback equivalent to an alt attribute on an image. A 3d explorer or configurator might be represented in DOM as a multi step form with verbose descriptions- no need to recreate drag and drop, camera controls, or anything else. So, if you're not automating it like flutter is (and even if you are) what you really need to do is effectively an entirely alternate UX for screen reading users... Trying to get your product team to budget that is difficult despite being a Good Thing to do.
chris37879 2y ago
That's actually how Flutter works now if you enable web accessibility, and it does take a lot of work, and come with a performance cost: https://medium.com/flutter/accessibility-in-flutter-on-the-web-51bfc558b7d3 https://medium.com/flutter/accessibility-in-flutter-on-the-w...

abroadwin 2y ago

Definitely doesn't feel native or accessible on web. Can't tab between radio buttons. On macOS CMD+A doesn't select all text field text (CTRL+A does).

brirec 2y ago

Can’t even copy or paste at all on an iPhone.