Bikeshedding about the best approach to making it accessible aside I think we all agree there was no out of the box button with the exact functionality and styling the project needed. Many ways to build such a thing but all of which require someone actually making the software that way as part of the project scope. Difficult? Not really. Priority to implement from day 1 in this project? Well that's what started the conversation I suppose.
> I think we all agree there was no out of the box button with the exact functionality and styling the project needed
We don't agree on that. Styling a real button to look the same way this does would require basically the same amount of work as styling a div. The only difference for most people is that you would need to search for a style clear for buttons, which will be the first result in DuckDuckGo: https://css-tricks.com/overriding-default-button-styles/
And it's a little bit debatable if you even want that style clear, because you should be using some of the stuff that buttons give you for free like graphical changes when the button is pressed, visual indication of focus, etc... That's all stuff that the final developer didn't even know they were missing from the final project.
So it's not even really a question about "does the button look exactly like what I want." Many times, 'exactly what the dev wants' is explicitly the wrong choice to make. Most developers don't know every graphical effect and interaction that a button should have, and they shouldn't have to. The point of native components is to make this stuff easier; you don't have to think about every interaction and use case that every non-typical user might require.
----
In Firefox, I opened the dev tools, changed the div to a button, and added one line of CSS:
border: none;
And the button looks exactly the same as the div, except now it's visually focusable and accessible. Same is true in Chrome. And those are likely the only two rendering engines that the original developer cares about, it's not like IE11 is worth supporting for a WASM IDE.
No bikeshedding needed here, I didn't even need to look up a button reset style.
I'm REALLY not looking for a debate on what technical changes are needed to make this accessible but I tried changing it to a button in the page (with border: none;) and immediately I notice it's larger and the underline hover effect is broken. It's also floating verically by a pixel. I'm sure there are other effects I haven't noticed immediately. This is exactly what I'm talking about on how it's not just free, there is work to making it work exactly the way the developer wanted it for the project.
Maybe you think a button shouldn't look like that. Maybe you think a button should prioritize <list of things> before style. Maybe you just like to do something your own way. That's great, go ahead on your own project or hire this person for it. None of that has anything to do with why this person built this tool the way they wanted or makes it any easier for them to do so while adding better accessibility.
Are you setting it as an actual style under the `.button` class or are you attaching it to the element?
I don't see any of the effects you're talking about. Size is the same, no pixel offset. If you change the div (not the selected SVG, but the div itself) into a button and then add `border: none` to the .button class, there should be no visual changes at all. I'm checking both the Firefox and Chrome dev tools, it's a 24 px high button with 8 pixels of padding.
If there's some other visual change that goes along with that, I can't find it.
----
> None of that has anything to do with why this person built this tool the way they wanted or makes it any easier for them to do so while adding better accessibility.
There's another side to this though which is that it is genuinely helpful to tell people that there are very simple changes they could make to increase accessibility on a platform that we have a vested interest in making accessible.
It's not helpful to be a jerk about it, but I'm not going to act like there's no right way to build something like this. I understand why someone might cut some corners on a quick project, or why they might not know everything there is to know about accessibility. I don't fault any developer over that. But there is a correct engineering answer to the question of how a button should be designed, and it actually does genuinely impact real people in the real world.
Part of what we're doing here is trying to as much as possible without being jerks get across the idea that accessibility matters. We're trying to get across the point that it's not OK to have the web mostly not work for blind people and to say, "there aren't enough of them to care about."
And especially in an area where fixing the problem is genuinely way less work than even having this conversation, and where fixing it would have zero downsides for the finished project, it is genuinely disheartening to see people putting forward the idea that literally any extra work at all means that accessibility has to be optional.
How far are you going to take that? Is it unreasonable for me to ask people to spend an extra minute captioning the photos they upload to Twitter? There are categories of things where it reasonable to ask people to put in a tiny bit of extra work so that the web doesn't completely fail in its mission to be a universally accessible platform. We ask developers (even Open Source developers) to put in far more work over way more trivial, meaningless things than this.
So yes, maybe it would have required an extra minute or two of work to style this as a button. And if the developer didn't know how to do that, fine, I'm not here to shame people for not knowing things, I have no ill will towards the developer for making that mistake. But I am here to shame people who say that one extra minute of work is too much for accessibility advocates to expect, and that asking developers to even think about accessibility is inherently unreasonable. We want developers to care about accessibility, we aren't neutral on that. We want developers to have a code of ethics and values that prioritizes equal access for everyone. That's part of the value ethos of the web as a platform.
We spend so much time as advocates trying to dance around that issue and trying to make it easier for people to be 'accidentally' accessible when they build on the web, and to add tools and features that make accessibility the easier, natural engineering path. All of that is good, and we should keep doing that, and the accessible path here is the easier path, but on the other hand at some point we also have to be willing to say, "no, we expect you to genuinely care about blind people at least a little bit."
Since somehow we're still talking about how to do it I'd simply do "all: unset" if I don't care about IE and want to fully control the style. In that way the defaults go out the window and I can build up to the style I want.
If you don't do this approach you're going to want to keep in mind differences in default whitespace handling and alignment/sizing model defaults which are going to be different in a button vs a typical <div> container.
.
Nothing wrong with going into a technical comment or discussion in hopes of sharing knowledge but that's not what was being talked about here. Look how long you and I have been talking about a single button in the UI. Look how many other comments there are about this. Now go back to the original comment "It breaks my heart that when this project was started in 2017, some 20 years after web accessibility advocacy had started in earnest, the developer was still uninformed enough about accessibility that they would create a custom button component with no ARIA support.". Ignoring that it's talking about a COMPLETELY different approach to making the button accessible the assumption is the developer is uninformed about accessibility. My argument is knowledgeable or not it's a lot of work for a passion project and not something reasonable to expect be done in one. If you want to make a PR to add user accessibility so they can understand that's great but I think you'll find it was a lot more work than figuring out how to make this one button be marked for a screen reader. You may also (likely) find they knew many of the things that would be needed to make it accessible but went with what was quick and easy for the passion project, especially considering the thing is still marked beta.
Taking that to the other part of your content no it's not alright for you to decide what's acceptable code quality for someone else to be able to share their free project. It'd be nice if it was accessible to the blind, it'd also be nice to have Chinese and Indian translations. None of these is something reasonable to expect from a project like this simply because it was shared for free. A government project definitely. A commercial project very much so. Some person's passion project? No, you don't get to decide when it's usable by enough people for them to share it with others. And you shouldn't expect open source developers to do anything for you, always be happy they picked something up they didn't want/need themselves. Otherwise do the work or pay them to, don't just demand they follow your standards. This is very different than making a helpful PR or comment about how to do it which is on the "totally acceptable" side of the fence.
I'm not here to shame anybody but if I was it'd be people that see an free and open source project and the first thing they think is to comment to shame the author about it.
I'm not sure what to say about your image other than that you are not setting styles the same way I am, because that doesn't happen when I make those changes. I'm not sure what the difference is, maybe there's something special about the platform you're on that doesn't show up on my desktop computer. In either case, adjust the bottom margin by -1 pixel and move on with your life.
> the assumption is the developer is uninformed about accessibility.
The assumption that the developer is uninformed about accessibility is the kind assumption, not the mean one. The alternative implication, that they knew about accessibility but chose to use inaccessible markup instead, is a much worse reading of the situation.
The kind reading of this comment is that 20 years after we started having this conversation, we still have failed to educate developers on how to use a button. That is something that's valid to be sad about, it reflects nothing on the developer in question. It's a failure of web education.
> None of these is something reasonable to expect from a project like this simply because it was shared for free.
There's a fundamental difference here between us then. I'm not shaming the developer, I'm not mad that they didn't know in advance how to be accessible. I'm not mad that they released a project early without thinking about accessibility. But I am completely unapologetic about the idea that most developers on the web should be thinking about accessibility, and that it is reasonable to mention accessibility on public projects submitted into public spaces.
The web as a platform and a community cares about accessibility. So if you come onto the web and start making stuff, we will look at the accessibility and we will comment on it. We do that because, from the perspective of accessibility advocates, there are three options:
1. The technology gets restricted in some way so that you're forced to be accessible (maybe click handlers can't be attached to divs or something).
2. The law steps in and requires that anything beyond a hobby project be accessible, and we just kind of accept that blind people are excluded from the hobby web (not really acceptable to us).
3. We educate people and promote a value system that encourages developers to care about accessibility when possible.
We prefer the third option.
I want to encourage people to think that very basic accessibility accommodations are the standard normal thing that developers should think about. In my mind, this is the kinder option, because the alternative is stricter laws and more restrictive technology and frameworks that make it harder to do creative things.
Of course people can release whatever they want whenever they want. Of course, people can show off public projects that are unfinished or that have problems. Of course nobody can require anyone to release anything for free. But similarly, of course people in the public can point out that those projects aren't fitting into the web ethos. The only way we are going to make progress on accessibility in the web is by encouraging a culture of people who care about accessibility.
The tech changes can only go so far. We can make HTML more semantic, but we can't auto-caption images. At some point, people have to be convinced that this is worth caring about. Open Source does not mean we need to throw away any values about what good software should look like. We can be grateful that the author made a cool IDE while still openly acknowledging that it doesn't in its current state conform to shared web values.
> The kind reading of this comment is that 20 years after we started having this conversation, we still have failed to educate developers on how to use a button. That is something that's valid to be sad about, it reflects nothing on the developer in question. It's a failure of web education.
Thank you. I'm embarrassed at how melodramatic that part of my original comment was, but I'm glad someone gets it.
> In either case, adjust the bottom margin by -1 pixel and move on with your life.
Like I said there are other things broken about this, probably other side effects I didn't notice from this single button instance, and a LOT more to a UI than a single button to fix. My point isn't it can't be done at all my point is your "just add this one line" is a strawman detracting from the fact it is additional effort to add accessibility support to an overall project and this effort is a real world reason projects like this one don't have accessible UI, not because the dev is a screw up.
> The assumption that the developer is uninformed about accessibility is the kind assumption, not the mean one. The alternative implication, that they knew about accessibility but chose to use inaccessible markup instead, is a much worse reading of the situation.
My argument is it's NOT unkind to only build what you need in a project you decide to share freely. It's kind to share anything at all, regardless how incomplete it is. It may not even function at all for anyone, it comes with no guarantees other than you have the right to modify it as you please.
> There's a fundamental difference here between us then... I am completely unapologetic about the idea that most developers on the web should be thinking about accessibility, and that it is reasonable to mention accessibility on public projects submitted into public spaces.
I'd agree with the first part but with a slight twist on the reasoning. I think it's fine to mention on something like this as long as it's without trying to blame, shame, or demand something of the developer.
.
To review the original comment (since I think we've detracted quite far from it now):
> The "Create New Project" dialog has serious accessibility problems when used with a screen reader. The buttons are clickable divs, not actual HTML buttons or even marked up with proper ARIA. I haven't yet ventured any further into the app.
>
> Given that the app is a WebAssembly development environment, my first guess was that it was built in WebAssembly itself, with a custom UI framework. But in fact, it's plain React, using its own home-grown components for basic things like buttons.
The first paragraph is spot on with what you're talking about and I think perfectly acceptable and even helpful to those that might not know about ARIA or how to approach the problem. Albeit the second paragraph ideally could have used some helpful examples on how to make it so rather than lamenting the developer did it the way they did I think it's alright, I never really commented on it.
> It breaks my heart that when this project was started in 2017, some 20 years after web accessibility advocacy had started in earnest, the developer was still uninformed enough about accessibility that they would create a custom button component with no ARIA support. I suppose we could also blame the web platform for making it hard enough to customize the look of a standard button that the developer would reach for the div tag. What do we do about this?
Is when the question is posed that I responded about. This is what goes from "educating and promoting" to "shaming for not being as moral as I'd like", literally looking to place moral blame on free and open code being shared for not being good enough for the author and asking what we do about this. When I responded:
> Why assume ignorance/difficulty when the reality is not everyone is going to focus on adding/maintaining accessibility when they haven't even built out their beta MIT licensed side project? It'd certainly be nice if everything just automagically worked about accessible UI but we're not there yet (getting anything to automagically work in UI is a pain still).
>
> As far as what we can do about it I suppose outside of somehow translating thoughts into perfect UI automatically we can try to add coverage to these projects as we can prioritize it. After all that's why they are being built in the open with an open license, so others can help add functionality.
None of my comment was saying we shouldn't promote accessibility or mention accessibility issues. It did call out that the initial question ignored the most tangible problem - implementing accessibility is NOT done for free (regardless how much you want to convince me it's just one line it's still not free anyways) and that's why it didn't make it on the top of the todo list for an incomplete open source project.
.
> and that it is reasonable to mention accessibility on public projects submitted into public spaces.
Reasonable to mention absolutely, and probably helpful to all. As mentioned that's not all this thread has been about though.
> I want to encourage people to think that very basic accessibility accommodations are the standard normal thing that developers should think about. In my mind, this is the kinder option, because the alternative is stricter laws and more restrictive technology and frameworks that make it harder to do creative things.
I definitely agree on the encouragement side of things, even for projects like this. I'm even in support of stricter accessibility laws for commercial and government software. I'm just not in support, kind methods or not, of either blaming, shaming, or restricting people from sharing free and open code or making demands they do certain things when they write it on their own accord. If you see something about an free open source project you don't think was done the best way it's great to try to talk about how it could be done better, it's even greater if you can help make it the way you think it should be. If you think the developer was in the wrong or you need to talk about blame or they should be shamed for it then yeah, I think that's our fundamental disagreement. I see it as something they haven't been able to focus on not something that makes them a bad developer because they didn't do their free work well enough for my moral standard. Just like I said, I don't expect developers to have a multi-lingual UI either but it'd be great if someone wanted to come by a project and help make it happen so more people can use it.
.
Anyways I think unless you have a particular question or say I was particularly far off on understanding something here I've said about as much as I can say about it and don't intend to drag it out more for minor details. I do appreciate your time and thoughts on this, sincerely, and will definitely read any message you respond with even if I don't respond. Cheers and happy new year
> How do you know what styling the project needed?
I don't know what the project needed but I'll assume the author of the dialog knew and didn't purposefully pick a harder way to do it that intentionally spited others rather picked the easiest way to meet the styling goals.
> What styling requires a button to stop being a button?
None, did anyone ever claim you can't style a button to be whatever you want with more effort?