Hello everyone! When using Compose (via multiplat...

# compose-web

[Alex]

Hello everyone!

When using Compose (via multiplatform) and delivering to web using wasm (and maybe JS?), functionality is enabled via HTML Canvas. Is there ways to output it differently when using compose across platforms?

I ask because canvas usually has accessibility concerns. Having said that, I was able to use keyboard navigation to go between different buttons and execute them, so there’s that.

How would one ensure accessibility is adhered to on the web platform?

[S.]

Not really possible. The only way to get the full suite of browser accessibility & features is to use Compose HTML but this is not compatible to sharing the UI with other targets. You can only share business logic but would have to write a separate UI for the web.

[Alex]

Ahh interesting. I’d assume there’s no plans to make this possible in the future?

[S.]

It's realistically not possible due to the canvas. here's a more detailed breakdown https://bitspittle.dev/blog/2024/c4w

[Greg Steckman]

A comment on this YouTrack issue says it is a work in progress.

[S.]

oh that's great. One of the big concerns however, for these topics, other solutions like flutter already exist for quite some time but are still not anywhere near conventional web apps

[Max]

@S. Could you specify what “anywhere near conventional web apps” means exactly? I would be interested what you’re missing

[S.]

with conventional web apps I meant websites using a DOM tree with css rather than the single canvas. And I'm missing things like accessibility, SEO, browser features/behaviour and a big issue personally was the support for languages like chinese.
most attempts to address these issues come with other drawbacks like magnificent increase in file size (CJK fonts) or significant performance degradation (flutters accessibility api). Whereas using conventional html dom all of these concerns don't exist and work out of the box.
And most importantly (provided you don't mess with it yourself) the behaviour is consistent across different websites. anchor elements all work the same, open in new tabs with ctrl click or mouse wheel button click. I can scroll by holding down the mouse wheel button. I can search a site with ctrl + f. select text. zoom on mobile etc etc..
It might seem like little details but it makes canvas sites feel clunky and not native. and implementing all of this yourself takes a lot of effort

[Max]

@S. I understand and agree, hope compose web will offer more of this functionality out of the box. However, how i see it, compose-web is NOT meant to be used for websites (where seo, a11y etc are crucial). I see it more for applications that users “use” not “view” (like websites). For example a task management app like trello, or miro. Or a real estate portfolio management. Everything that’s behind a login basically. Because in this scenario it’s more important to be able to have your app working on Android iOS Desktop and Web with one code base when you start a business.
The actual WEBSITE in front of that web application should of course be native HTML since here you want seo and so on.

[S.]

100% but except for SEO I'm not talking about landing pages. ESPECIALLY for apps where you want to be productive I want these browser features I listed

[Greg Steckman]

I think application behavior is a subjective topic and I've seen the same discussions around having a Compose mobile application run on iOS and it's not exactly 100% like other iOS applications. But on the flip side the Compose application is probably more similar across platforms than if you wrote a native Android app and a native iOS app, and maybe some people want their app to be consistent across platforms, not like other things on the platform. Another example is where people are deploying applications based on web frameworks but on the desktop. I use Windows, and these applications behave entirely different than a native Windows application like MS Word. That doesn't make one objectively better or worse than the other.

[Greg Steckman]

You can take some actions to make a Compose app more like native browser applications, e.g. allowing text to be selected and clickable text links. Here's how to do some of this.