9 ms·

Selfish reasons for building accessible UIs

218 points by feross 1y ago

vivzkestrel 1y ago
[flagged]
- SirSavary 1y ago
  What does this have to with TFA? This is about accessibility, it has nothing to do with React (or any one web framework).
  - vivzkestrel 1y ago
    saw the word react in his article and therefore i mentioned it
- crab_galaxy 1y ago
  This is a very popular take, but it has absolutely nothing to do with the article.
  - xigoi 1y ago
    If this was a popular take, React wouldn’t be the most used framework.
- airtonix 1y ago
  [dead]
- DonHopkins 1y ago
  And the sky is blue, grass is green, roses are red, water is wet, and farts stink except for your own. Want to go outside, look at the sky, touch some grass, take a swim, fart some bubbles, and smell the roses?
- The_President 1y ago
  I like to think that it's all in the name. It's like asking a cardiologist or a pilot if they like the word Flutter.
energywut 1y ago
If only we didn't need to resort to selfish reasons for accessibility. Even looking past the idea that most, if not all, of us will benefit from a more accessible world, it makes me so sad when I hear people say "it's just not worth it". To me that's equivalent to saying, "we know our system has bugs, but we only want our blind users to experience them". It's just... such a downer of a way to look at the world.
- burningChrome 1y ago
  >> it makes me so sad when I hear people say "it's just not worth it". Companies are going to find out the hard way then. I work for a large corporation and we've had a consistent stream of companies and individuals contacting us about accessibility with several of our apps and sites. This means more time to fix or completely redo these because they built them with accessibility issues baked into them and now we're tasked with fixing them or else deal with the legal ramifications. Now that several states have included anything online or digital in the ADA, that means we now have a handful of law firms in CA and NY that are filing accessibility lawsuits. Just in 2024 there were over 4,000 lawsuits filed, the majority of them at the state level. The old adage that companies were taking a risk by not having their online apps and sites being accessible is a very real threat now. I feel like the trend is finally starting to turn and companies are taking accessibility a lot more seriously now.
  - typewithrhythm 1y ago
    This is a very artificial way to make the argument though; it's still not worth it from a revenue or user acquisition perspective, it's just a risk from a potentially fickle government body.
    - TeMPOraL 1y ago
      It's worse than not worth it, it's defeating some of the main ways they make money. Misunderstanding this point leads to endless surprise in this topic. No, companies don't just "don't care" for some unfathomable reason. They don't want it in the first place; they begrudgingly make concessions to accessibility due to cultural and regulatory pressure. The same things that let the disabled people participate, also help regular users escape the very traps and tricks businesses on-line use to make money. Now, supporting the former group may be a rounding error on the balance sheet, but enabling the latter to defeat monetization efforts, not so much.
cyberlimerence 1y ago
A web version of curb cut effect[1], if you will. We all benefit from digital (and physical) accessibility. [1] https://en.wikipedia.org/wiki/Curb_cut_effect https://en.wikipedia.org/wiki/Curb_cut_effect
- panstromek 1y ago
  The curb cut is not even that good, the new hotness are elevated crosswalks. Smooth paving also makes a big diffeerence. My wife is on a wheelchair and it's hard to overstate how much these little things improve her life. > We all benefit from digital (and physical) accessibility Interestingly though, in this space, wheelchair accessible sidewalks often conflict with tactile paving (for blind people). Those tactile bumps are often inside the curbs, so there's often no way for a wheelchair to avoid them.
  - Doxin 1y ago
    > the new hotness are elevated crosswalks. Those are great for making cars not blast through intersections too.
    - bobbylarrybobby 1y ago
      And making sure puddles don't form in the crosswalk
- TeMPOraL 1y ago
  > We all benefit from digital (and physical) accessibility. If only. The problem is that businesses on the web directly benefit from things being not accessible. Attention economy makes money on friction. Your typical website is a maze the user is supposed to get a little lost in, to maximize time they're exposed to product offering, and/or third-party ads, and/or tracking. Cutting curbs just tells them where to go and lets them do it with less effort, so they cut through the maze faster, and business loses money.
  - panstromek 1y ago
panstromek 1y ago
Those are some good reasons, and I can admit that they work on me. The testing one is big, I don't want add a bunch of artificial attributes just match an element in test, it's much more natural to just target elements semantically.
skgough 1y ago
Another selfish reason: web pages just work a lot better when you use the actual HTML elements, especially when you compose them together. React projects often mix several component libraries together to make a comprehensive UI. All of these libraries behave differently in subtle ways. When you compose them together, the differences compound: focus is not restored to the button that opened a dialog when it is dismissed, there are 4 different blues used on the page, the date input doesn't use your country's date format. When you use HTML primitives like inputs with associated labels, the new popover API, dialogs, details + summary elements, their behaviors are all made by the browser vendor and are designed to compose with each other. It really is a difference of night and day, and for free. We don't take advantage of the amazingly powerful tools we have been given.
- airtonix 1y ago
  [dead]
- Flimm 1y ago
  I wish I could agree with you, but in my experience the built-in controls have many flaws and have remained stagnant for years or decades.
  - naavis 1y ago
    What kind of flaws did you have in mind?
    - Zarel 1y ago
      <input type="number"> is famously really flawed and not worth using even if what you want is semantically a number and not just numeric: https://stackoverflow.blog/2022/12/26/why-the-number-input-is-the-worst-input/ https://stackoverflow.blog/2022/12/26/why-the-number-input-i... Tables have a whole bunch of flaws, like not letting you turn an entire row or cell into a link. (Some things are semantically tabular data!) <button disabled> doesn't trigger various DOM events, forcing you to use <button aria-disabled="true"> if you need them. These are the ones that come to mind immediately. I wouldn't be surprised if there are others.
aitchnyu 1y ago
Shortcat in Mac and Tridactyl in Firefox uses accessibility annotations to pick up clickable elements and help navigate using only keyboard. In future, we could have local AI agents that could use the same and solve "why is my printer not available"? https://shortcat.app/ https://shortcat.app/ https://tridactyl.xyz/about/ https://tridactyl.xyz/about/
eviks 1y ago
> Now I can easily zero in on a table cell, or a column header Isn't inspecting the actual cell /header easier?
chrismorgan 1y ago
> When I’m trying to debug a web app, it’s hard to orient myself in the DevTools if the entire UI is “div soup” That’s tame. Try adding some Tailwind CSS. After monitoring Tailwind CSS since its early days, and believing I had some pretty serious philosophical disagreements with it, I recently took an opportunity to try it out in earnest, and it is so mindbogglingly obnoxious in dev tools that I think surely I must be missing something. How do people cope with this stuff!? If you’re not sure what I’m on about, go through some of the sites linked near the bottom of https://tailwindcss.com/ https://tailwindcss.com/. In the Inspector/Elements panel, the DOM tree is a bloated mess with a class attribute which amounts to inline styles or worse, commonly hundreds of characters long, discouraging you from using semantically-meaningful classes, and duplicating stuff enormously rather than using sane selectors; the mostly-better ones are those that have data-sentry-{element,component,source-file} attributes. The styles subpanel becomes utterly unnavigable. (I’m not saying everything in Tailwind is bad; I think I am likely to use a limited utility styles approach more than I did in the past, and there are a couple of other things that are provoking thought in me, and I think it would be more suitable in apps than in marketing-style websites. But the total embodiment of it is not for me.)
- troupo 1y ago
  > discouraging you from using semantically-meaningful classes, and duplicating stuff enormously rather than using sane selectors In any big site "semantically meaningful classes" are a similar mess, and the duplication is both enormous and spread out and suffers from accidental cascades.
- paradox460 1y ago
  I've felt this way for years, even wrote a blog post [1] about it nearly 2 years ago It doesn't seem to be getting better, sadly. You get posts like the op, where the author realizes there's something wrong with how they're doing things, but then misses that tailwind is a big part of it. Emperor has no clothes, so everyone else strips naked as well 1: https://pdx.su/blog/2023-07-26-tailwind-and-the-death-of-craftsmanship/ https://pdx.su/blog/2023-07-26-tailwind-and-the-death-of-cra...
  - 1y ago
rrgok 1y ago
While I mostly agree with the article... Isn't this phrase regarding the table as divs a little bit over-dramatic If I’m trying to debug this in the DevTools, I’m completely lost. Where are the rows? Where are the columns? I mean, if you can't decipher the rows and the columns from that divs...maybe this is job is not for you? I understand, there could be some divs soup that are really hard to decipher, but this it not the case. Poor example, please bring more complex example with test associated.
- OtherShrezzing 1y ago
  I think it’s fine to bring an illustrative toy example to an article. Everyone who works outside frontend will need to parse it a lot. Everyone who works in frontend will be able to project a more complex div soup they’ve experienced in their own projects.
  - rrgok 1y ago
    I mean, the article talks about UI, so the target audience for that post is frontend devs or closely related.
blabla1224 1y ago
The div soup is for apps and semantic html is for documents. Not knowing the difference creates this kind of frustration.
- oneeyedpigeon 1y ago
  The problem is, a LOT of people are treating documents as if they are apps.
- vaylian 1y ago
  It might be that there is no built-in functionality for some things in pure HTML. But most of the time, standard HTML tags provide all the functionality you need, even for web applications. And this benefits people with disabilities.
- bapak 1y ago
  You missed the point entirely. You should still use appropriate tags like a, button, label, input and not div, div, div, div. Even apps have links
  - blabla1224 1y ago
    Input controls are always used by the apps (99.9%) and the post and div soup is not about that.
    - xigoi 1y ago
      Buttons are often replaced by divs for no apparent reason. Look at Facebook for example.
- TeMPOraL 1y ago
  Nah, div soups are for when you really insist your app UI must look like you want, instead of being ergonomic or useful to end users.
smilekzs 1y ago
> The active class is clearly redundant here. If you want to style based on the .active selector, you could just as easily style with [aria-selected="true"] instead. I vaguely remember (from 10+ years ago) that class selectors are much more performant than property selectors?
- robin_reala 1y ago
  Given the morass of JS slathered on every site these days, selector performance is the least of your worries.
- nolanl 1y ago
  Author here. I actually did some research on CSS selector performance: https://nolanlawson.com/2023/01/17/my-talk-on-css-runtime-performance/ https://nolanlawson.com/2023/01/17/my-talk-on-css-runtime-pe... The TL;DW is: yes, class selectors are slightly more performant than attribute selectors, mostly because only the attribute _names_ are indexed, not the values. But 99% of the time, it's not a big enough deal to justify the premature optimization. I'd recommend measuring your selector performance first: https://developer.chrome.com/docs/devtools/performance/selector-stats https://developer.chrome.com/docs/devtools/performance/selec...
robin_reala 1y ago
Reminder that for a surprisingly large number of sites, you’re legally required to be accessible starting in 11 days time in the EU under the European Accessibility Act.[1] Any e-commerce system has to meet WCAG 2.1 level AA, where e-commerce is defined as an online system designed to conclude a contract for a product or service between a business and a consumer. The only real get-out clause is if you’re a microenterprise: “an enterprise which employs fewer than 10 persons and which has an annual turnover not exceeding EUR 2 million or an annual balance sheet total not exceeding EUR 2 million”. [1] https://eur-lex.europa.eu/eli/dir/2019/882/oj/eng https://eur-lex.europa.eu/eli/dir/2019/882/oj/eng (Edit: fixed URL from Y-bar)
- Y-bar 1y ago
  Your URL seems to have expired. In any case it is "Document 32019L0882" which does go into effect on June 28: > Directive (EU) 2019/882 of the European Parliament and of the Council of 17 April 2019 on the accessibility requirements for products and services (Text with EEA relevance) https://eur-lex.europa.eu/eli/dir/2019/882/oj/eng https://eur-lex.europa.eu/eli/dir/2019/882/oj/eng (I think this one is permanent)
  - robin_reala 1y ago
    Thanks, not sure what I copied from my browser but that’s the correct one, yep.
- amarcheschi 1y ago
  I studied wcag in a course in uni this semester, it is truly mind blowing how experts were gathered to make a list of "list of all things you need to know about accessible webpages" and yet so many websites don't care about it. I mean, it takes just some scrolling to understand that they're very useful tips. And having something accessible might make it for a better experience for regular people too Partially unrelated, but at a venue I work at there's the console managing stage lights that has the button to save and the button to delete the saved presets next to each other. That's one of the worst things that I could imagine for an interface
matsemann 1y ago
Working on a huge government form application (lots of pages, sub sections, modals, validations etc), we of course had strict rules about making it accessible. But that made it so much easier to work/debug/test it. It being keyboard accessible made it a breeze to quickly test stuff or get to the needed state. Had muscle memory of like tab, tab, type a letter, tab, enter. The things I did most often I had bookmarklets for.
aaron695 1y ago
[dead]
moffkalast 1y ago
> combobox It's 2025, browsers are adding GPU access for JS, we can run native code with wasm, yet HTML still has no actual combobox support. WHATWG are not just clowns they are not even the whole circus, they are a worldwide consortium of circuses with Barnum at the helm.
- Devasta 1y ago
  It's honestly embarrassing that we are twenty years since the browsers took control of HTML from the W3C and they still have nothing approaching even one tenth the capability of XForms. The fact that legions of developers are working on browsers, and at the same time everyone scrambles to abstract away from the browser offerings towards JSX, Tailwind and TS is maddening.
ChrisMarshallNY 1y ago
I write apps (iOS native) and backend stuff, for a demographic that has a statistically high number of disabled folks, so I put a lot of accessibility into my coding. The one thing that I’ve found to be important, in native iOS coding, is to start early. Retrofitting accessibility sucks.
- CoastalCoder 1y ago
  Out of curiosity, what demographic is that?
  - ChrisMarshallNY 1y ago
    Recovering drug addicts.
krzat 1y ago
For people familiar with snapshot testing: instead of snapshotting pixels, try snapshotting the semantic tree. Basically, you generate a textual representation of your UI, and then compare it against pre-recorded reference.
- DonHopkins 1y ago
  That's like the UBIKAM in LLOOOOMM: https://youtu.be/Sn057QrCUm8?t=470 https://youtu.be/Sn057QrCUm8?t=470 Ubikam is a semantic camera that records two channels: a markup presentation channel, and a semantic "YAML Jazz" channel that describes the semantic content and characters' state of mind.
goodpoint 1y ago
why are people here so obsessed with justifying selfishness?
- robertlagrant 1y ago
  I don't think anyone is obsessed with doing that.
  - majewsky 1y ago
    The clearest examples are the ones downvoted into oblivion, so you probably don't see them.
DonHopkins 1y ago
[flagged]
twoquestions 1y ago
I've fallen in love with using Vimium when browsing, and the real thing elements are much easier to use than JS substitutes. https://chromewebstore.google.com/detail/vimium/dbepggeogbaibhgnhhndojpepiihcmeb https://chromewebstore.google.com/detail/vimium/dbepggeogbai...
twodave 1y ago
These are ok points. Though I don't think it's necessary to use tables to be accessible, for example. It's perfectly fine to use whatever you want, so long as you include the proper semantics/ARIA tags to help the screen reader know what's going on. I think understated by the author is how many a11y considerations are visual, real-time and/or physical in nature. Accessible UIs aren't just for communicating the structure of a page to a screen reader. Sometimes your user is deaf, or just colorblind, or lacks fine motor control/experiences physical fatigue using computers. Sometimes they're not blind, but they need larger letters and contrasting colors to quickly and accurately use your application. Sometimes you're displaying something new, and you need to let all of these users know about it clearly. Also probably understated is that many component libraries (Prime, Material... all of them) have a11y bugs that nobody finds because most don't care. If you want your name on some open-source commits [0], this is a really easy way to get your feet wet. Source: have done multiple WCAG audits [0] seriously: https://github.com/primefaces/primeng/pull/15161/commits/ea416b85af79b60be46d6aabf90f674722a4a017 https://github.com/primefaces/primeng/pull/15161/commits/ea4...
2OEH8eoCRo0 1y ago
Reason 1: Add extra requirements that small shops need to deal with which only really matter at megacorp scale anyway. Have fun competition!
layer8 1y ago
It's already sad that we have to frame good keyboard operability as accessibility.
snarfy 1y ago
Selfish reason for not building accessible UIs: it's extra work that doesn't justify the cost compared to the market share. We would all be better off spending that investment on improving the dozen or so screen readers instead of billions of web sites. We aren't far from an LLM powered screen reader making aria tags moot.
- bevr1337 1y ago
  It takes the same amount of work to use an <aside> or <button> as a <div>. I have never accepted the argument that accessibility is more work. It is the same amount of work but done correctly. Aria attributes are only necessary when extending HTML semantics.
  - zamadatix 1y ago
    In the best (and thankfully pretty common) cases the work to do the accessible answer can be the same, or even less, than the work to do it otherwise. That certainly doesn't extend to all cases though and that's where it can snag. E.g. making complex charts or visualizations accessible to those using screen readers often involves creating a second version of the information only suited for that modality. A ton of other things are a bit in-between, such as prefers-reduced-motion being somewhere between "pretty easy" to "complex" depending on how you implement it in your site but, either case, adding some amount of effort.
    - bevr1337 1y ago
      Complex cases are indeed complex! Data viz is an interesting example since visuals are often misleading and time sinks regardless of ability. It's less effort to provide an HTML table or CSV export than gluing D3 and React together (or whatever stack your team uses). I try my hardest to push back on canvas viz so we're not reinventing every wheel. SVG is easy to extend and make interactive
- sirwitti 1y ago
  Just as we aren't far from actually usable and safe self driving cars since 10+ years. This is not a valid argument.
nonethewiser 1y ago
>I personally find these arguments persuasive. But experience has also taught me that “eat your vegetables” is one of the least effective arguments in the world. Scolding people might get them to agree with you in public, or even in principle, but it’s unlikely to change their behavior once no one’s watching. I interpret this to mean the author may not actually find this argument persuasive.
johneth 1y ago
Another selfish reason: at some point we'll all have diminished eyesight; make things accessible for future you.
BrandoElFollito 1y ago
> Enter doesn’t submit a form Enter submitting a form is a nightmare. I have so many times selected something in a filtered dropdown, wanted to confirm by pressing Enter and poof! my form is gone.
BrandoElFollito 1y ago
> Like a good hot sauce on your Brussels sprouts, eating your vegetables doesn’t always have to be a chore. Like in web dev, correctly cooking stuff is something you learn. If all you know about Brussels sprouts is from the school cafeteria, you live in a sea of <div>

218 points by feross 1y ago

vivzkestrel 1y ago

[flagged]

SirSavary 1y ago
What does this have to with TFA? This is about accessibility, it has nothing to do with React (or any one web framework).
- vivzkestrel 1y ago
  saw the word react in his article and therefore i mentioned it
crab_galaxy 1y ago
This is a very popular take, but it has absolutely nothing to do with the article.
- xigoi 1y ago
  If this was a popular take, React wouldn’t be the most used framework.
airtonix 1y ago
[dead]
DonHopkins 1y ago
And the sky is blue, grass is green, roses are red, water is wet, and farts stink except for your own. Want to go outside, look at the sky, touch some grass, take a swim, fart some bubbles, and smell the roses?
The_President 1y ago
I like to think that it's all in the name. It's like asking a cardiologist or a pilot if they like the word Flutter.

energywut 1y ago

If only we didn't need to resort to selfish reasons for accessibility. Even looking past the idea that most, if not all, of us will benefit from a more accessible world, it makes me so sad when I hear people say "it's just not worth it". To me that's equivalent to saying, "we know our system has bugs, but we only want our blind users to experience them". It's just... such a downer of a way to look at the world.

burningChrome 1y ago
>> it makes me so sad when I hear people say "it's just not worth it". Companies are going to find out the hard way then. I work for a large corporation and we've had a consistent stream of companies and individuals contacting us about accessibility with several of our apps and sites. This means more time to fix or completely redo these because they built them with accessibility issues baked into them and now we're tasked with fixing them or else deal with the legal ramifications. Now that several states have included anything online or digital in the ADA, that means we now have a handful of law firms in CA and NY that are filing accessibility lawsuits. Just in 2024 there were over 4,000 lawsuits filed, the majority of them at the state level. The old adage that companies were taking a risk by not having their online apps and sites being accessible is a very real threat now. I feel like the trend is finally starting to turn and companies are taking accessibility a lot more seriously now.
- typewithrhythm 1y ago
  This is a very artificial way to make the argument though; it's still not worth it from a revenue or user acquisition perspective, it's just a risk from a potentially fickle government body.
  - TeMPOraL 1y ago
    It's worse than not worth it, it's defeating some of the main ways they make money. Misunderstanding this point leads to endless surprise in this topic. No, companies don't just "don't care" for some unfathomable reason. They don't want it in the first place; they begrudgingly make concessions to accessibility due to cultural and regulatory pressure. The same things that let the disabled people participate, also help regular users escape the very traps and tricks businesses on-line use to make money. Now, supporting the former group may be a rounding error on the balance sheet, but enabling the latter to defeat monetization efforts, not so much.

cyberlimerence 1y ago

A web version of curb cut effect[1], if you will. We all benefit from digital (and physical) accessibility. [1] https://en.wikipedia.org/wiki/Curb_cut_effect https://en.wikipedia.org/wiki/Curb_cut_effect

panstromek 1y ago
The curb cut is not even that good, the new hotness are elevated crosswalks. Smooth paving also makes a big diffeerence. My wife is on a wheelchair and it's hard to overstate how much these little things improve her life. > We all benefit from digital (and physical) accessibility Interestingly though, in this space, wheelchair accessible sidewalks often conflict with tactile paving (for blind people). Those tactile bumps are often inside the curbs, so there's often no way for a wheelchair to avoid them.
- Doxin 1y ago
  > the new hotness are elevated crosswalks. Those are great for making cars not blast through intersections too.
  - bobbylarrybobby 1y ago
    And making sure puddles don't form in the crosswalk
TeMPOraL 1y ago
> We all benefit from digital (and physical) accessibility. If only. The problem is that businesses on the web directly benefit from things being not accessible. Attention economy makes money on friction. Your typical website is a maze the user is supposed to get a little lost in, to maximize time they're exposed to product offering, and/or third-party ads, and/or tracking. Cutting curbs just tells them where to go and lets them do it with less effort, so they cut through the maze faster, and business loses money.
- panstromek 1y ago

panstromek 1y ago

Those are some good reasons, and I can admit that they work on me. The testing one is big, I don't want add a bunch of artificial attributes just match an element in test, it's much more natural to just target elements semantically.

skgough 1y ago

Another selfish reason: web pages just work a lot better when you use the actual HTML elements, especially when you compose them together. React projects often mix several component libraries together to make a comprehensive UI. All of these libraries behave differently in subtle ways. When you compose them together, the differences compound: focus is not restored to the button that opened a dialog when it is dismissed, there are 4 different blues used on the page, the date input doesn't use your country's date format. When you use HTML primitives like inputs with associated labels, the new popover API, dialogs, details + summary elements, their behaviors are all made by the browser vendor and are designed to compose with each other. It really is a difference of night and day, and for free. We don't take advantage of the amazingly powerful tools we have been given.

airtonix 1y ago
[dead]
Flimm 1y ago
I wish I could agree with you, but in my experience the built-in controls have many flaws and have remained stagnant for years or decades.
- naavis 1y ago
  What kind of flaws did you have in mind?
  - Zarel 1y ago
    <input type="number"> is famously really flawed and not worth using even if what you want is semantically a number and not just numeric: https://stackoverflow.blog/2022/12/26/why-the-number-input-is-the-worst-input/ https://stackoverflow.blog/2022/12/26/why-the-number-input-i... Tables have a whole bunch of flaws, like not letting you turn an entire row or cell into a link. (Some things are semantically tabular data!) <button disabled> doesn't trigger various DOM events, forcing you to use <button aria-disabled="true"> if you need them. These are the ones that come to mind immediately. I wouldn't be surprised if there are others.

aitchnyu 1y ago

Shortcat in Mac and Tridactyl in Firefox uses accessibility annotations to pick up clickable elements and help navigate using only keyboard. In future, we could have local AI agents that could use the same and solve "why is my printer not available"? https://shortcat.app/ https://shortcat.app/ https://tridactyl.xyz/about/ https://tridactyl.xyz/about/

eviks 1y ago

> Now I can easily zero in on a table cell, or a column header Isn't inspecting the actual cell /header easier?

chrismorgan 1y ago

> When I’m trying to debug a web app, it’s hard to orient myself in the DevTools if the entire UI is “div soup” That’s tame. Try adding some Tailwind CSS. After monitoring Tailwind CSS since its early days, and believing I had some pretty serious philosophical disagreements with it, I recently took an opportunity to try it out in earnest, and it is so mindbogglingly obnoxious in dev tools that I think surely I must be missing something. How do people cope with this stuff!? If you’re not sure what I’m on about, go through some of the sites linked near the bottom of https://tailwindcss.com/ https://tailwindcss.com/. In the Inspector/Elements panel, the DOM tree is a bloated mess with a class attribute which amounts to inline styles or worse, commonly hundreds of characters long, discouraging you from using semantically-meaningful classes, and duplicating stuff enormously rather than using sane selectors; the mostly-better ones are those that have data-sentry-{element,component,source-file} attributes. The styles subpanel becomes utterly unnavigable. (I’m not saying everything in Tailwind is bad; I think I am likely to use a limited utility styles approach more than I did in the past, and there are a couple of other things that are provoking thought in me, and I think it would be more suitable in apps than in marketing-style websites. But the total embodiment of it is not for me.)

troupo 1y ago
> discouraging you from using semantically-meaningful classes, and duplicating stuff enormously rather than using sane selectors In any big site "semantically meaningful classes" are a similar mess, and the duplication is both enormous and spread out and suffers from accidental cascades.
paradox460 1y ago
I've felt this way for years, even wrote a blog post [1] about it nearly 2 years ago It doesn't seem to be getting better, sadly. You get posts like the op, where the author realizes there's something wrong with how they're doing things, but then misses that tailwind is a big part of it. Emperor has no clothes, so everyone else strips naked as well 1: https://pdx.su/blog/2023-07-26-tailwind-and-the-death-of-craftsmanship/ https://pdx.su/blog/2023-07-26-tailwind-and-the-death-of-cra...
- 1y ago

rrgok 1y ago

While I mostly agree with the article... Isn't this phrase regarding the table as divs a little bit over-dramatic If I’m trying to debug this in the DevTools, I’m completely lost. Where are the rows? Where are the columns? I mean, if you can't decipher the rows and the columns from that divs...maybe this is job is not for you? I understand, there could be some divs soup that are really hard to decipher, but this it not the case. Poor example, please bring more complex example with test associated.

OtherShrezzing 1y ago
I think it’s fine to bring an illustrative toy example to an article. Everyone who works outside frontend will need to parse it a lot. Everyone who works in frontend will be able to project a more complex div soup they’ve experienced in their own projects.
- rrgok 1y ago
  I mean, the article talks about UI, so the target audience for that post is frontend devs or closely related.

blabla1224 1y ago

The div soup is for apps and semantic html is for documents. Not knowing the difference creates this kind of frustration.

oneeyedpigeon 1y ago
The problem is, a LOT of people are treating documents as if they are apps.
vaylian 1y ago
It might be that there is no built-in functionality for some things in pure HTML. But most of the time, standard HTML tags provide all the functionality you need, even for web applications. And this benefits people with disabilities.
bapak 1y ago
You missed the point entirely. You should still use appropriate tags like a, button, label, input and not div, div, div, div. Even apps have links
- blabla1224 1y ago
  Input controls are always used by the apps (99.9%) and the post and div soup is not about that.
  - xigoi 1y ago
    Buttons are often replaced by divs for no apparent reason. Look at Facebook for example.
TeMPOraL 1y ago
Nah, div soups are for when you really insist your app UI must look like you want, instead of being ergonomic or useful to end users.

smilekzs 1y ago

> The active class is clearly redundant here. If you want to style based on the .active selector, you could just as easily style with [aria-selected="true"] instead. I vaguely remember (from 10+ years ago) that class selectors are much more performant than property selectors?

robin_reala 1y ago
Given the morass of JS slathered on every site these days, selector performance is the least of your worries.
nolanl 1y ago
Author here. I actually did some research on CSS selector performance: https://nolanlawson.com/2023/01/17/my-talk-on-css-runtime-performance/ https://nolanlawson.com/2023/01/17/my-talk-on-css-runtime-pe... The TL;DW is: yes, class selectors are slightly more performant than attribute selectors, mostly because only the attribute _names_ are indexed, not the values. But 99% of the time, it's not a big enough deal to justify the premature optimization. I'd recommend measuring your selector performance first: https://developer.chrome.com/docs/devtools/performance/selector-stats https://developer.chrome.com/docs/devtools/performance/selec...

robin_reala 1y ago

Reminder that for a surprisingly large number of sites, you’re legally required to be accessible starting in 11 days time in the EU under the European Accessibility Act.[1] Any e-commerce system has to meet WCAG 2.1 level AA, where e-commerce is defined as an online system designed to conclude a contract for a product or service between a business and a consumer. The only real get-out clause is if you’re a microenterprise: “an enterprise which employs fewer than 10 persons and which has an annual turnover not exceeding EUR 2 million or an annual balance sheet total not exceeding EUR 2 million”. [1] https://eur-lex.europa.eu/eli/dir/2019/882/oj/eng https://eur-lex.europa.eu/eli/dir/2019/882/oj/eng (Edit: fixed URL from Y-bar)

Y-bar 1y ago
Your URL seems to have expired. In any case it is "Document 32019L0882" which does go into effect on June 28: > Directive (EU) 2019/882 of the European Parliament and of the Council of 17 April 2019 on the accessibility requirements for products and services (Text with EEA relevance) https://eur-lex.europa.eu/eli/dir/2019/882/oj/eng https://eur-lex.europa.eu/eli/dir/2019/882/oj/eng (I think this one is permanent)
- robin_reala 1y ago
  Thanks, not sure what I copied from my browser but that’s the correct one, yep.
amarcheschi 1y ago
I studied wcag in a course in uni this semester, it is truly mind blowing how experts were gathered to make a list of "list of all things you need to know about accessible webpages" and yet so many websites don't care about it. I mean, it takes just some scrolling to understand that they're very useful tips. And having something accessible might make it for a better experience for regular people too Partially unrelated, but at a venue I work at there's the console managing stage lights that has the button to save and the button to delete the saved presets next to each other. That's one of the worst things that I could imagine for an interface

matsemann 1y ago

Working on a huge government form application (lots of pages, sub sections, modals, validations etc), we of course had strict rules about making it accessible. But that made it so much easier to work/debug/test it. It being keyboard accessible made it a breeze to quickly test stuff or get to the needed state. Had muscle memory of like tab, tab, type a letter, tab, enter. The things I did most often I had bookmarklets for.

aaron695 1y ago

[dead]

moffkalast 1y ago

> combobox It's 2025, browsers are adding GPU access for JS, we can run native code with wasm, yet HTML still has no actual combobox support. WHATWG are not just clowns they are not even the whole circus, they are a worldwide consortium of circuses with Barnum at the helm.

Devasta 1y ago
It's honestly embarrassing that we are twenty years since the browsers took control of HTML from the W3C and they still have nothing approaching even one tenth the capability of XForms. The fact that legions of developers are working on browsers, and at the same time everyone scrambles to abstract away from the browser offerings towards JSX, Tailwind and TS is maddening.

ChrisMarshallNY 1y ago

I write apps (iOS native) and backend stuff, for a demographic that has a statistically high number of disabled folks, so I put a lot of accessibility into my coding. The one thing that I’ve found to be important, in native iOS coding, is to start early. Retrofitting accessibility sucks.

CoastalCoder 1y ago
Out of curiosity, what demographic is that?
- ChrisMarshallNY 1y ago
  Recovering drug addicts.

krzat 1y ago

For people familiar with snapshot testing: instead of snapshotting pixels, try snapshotting the semantic tree. Basically, you generate a textual representation of your UI, and then compare it against pre-recorded reference.

DonHopkins 1y ago
That's like the UBIKAM in LLOOOOMM: https://youtu.be/Sn057QrCUm8?t=470 https://youtu.be/Sn057QrCUm8?t=470 Ubikam is a semantic camera that records two channels: a markup presentation channel, and a semantic "YAML Jazz" channel that describes the semantic content and characters' state of mind.

goodpoint 1y ago

why are people here so obsessed with justifying selfishness?

robertlagrant 1y ago
I don't think anyone is obsessed with doing that.
- majewsky 1y ago
  The clearest examples are the ones downvoted into oblivion, so you probably don't see them.

DonHopkins 1y ago

[flagged]

twoquestions 1y ago

I've fallen in love with using Vimium when browsing, and the real thing elements are much easier to use than JS substitutes. https://chromewebstore.google.com/detail/vimium/dbepggeogbaibhgnhhndojpepiihcmeb https://chromewebstore.google.com/detail/vimium/dbepggeogbai...

twodave 1y ago

These are ok points. Though I don't think it's necessary to use tables to be accessible, for example. It's perfectly fine to use whatever you want, so long as you include the proper semantics/ARIA tags to help the screen reader know what's going on. I think understated by the author is how many a11y considerations are visual, real-time and/or physical in nature. Accessible UIs aren't just for communicating the structure of a page to a screen reader. Sometimes your user is deaf, or just colorblind, or lacks fine motor control/experiences physical fatigue using computers. Sometimes they're not blind, but they need larger letters and contrasting colors to quickly and accurately use your application. Sometimes you're displaying something new, and you need to let all of these users know about it clearly. Also probably understated is that many component libraries (Prime, Material... all of them) have a11y bugs that nobody finds because most don't care. If you want your name on some open-source commits [0], this is a really easy way to get your feet wet. Source: have done multiple WCAG audits [0] seriously: https://github.com/primefaces/primeng/pull/15161/commits/ea416b85af79b60be46d6aabf90f674722a4a017 https://github.com/primefaces/primeng/pull/15161/commits/ea4...

2OEH8eoCRo0 1y ago

Reason 1: Add extra requirements that small shops need to deal with which only really matter at megacorp scale anyway. Have fun competition!

layer8 1y ago

It's already sad that we have to frame good keyboard operability as accessibility.

snarfy 1y ago

Selfish reason for not building accessible UIs: it's extra work that doesn't justify the cost compared to the market share. We would all be better off spending that investment on improving the dozen or so screen readers instead of billions of web sites. We aren't far from an LLM powered screen reader making aria tags moot.

bevr1337 1y ago
It takes the same amount of work to use an <aside> or <button> as a <div>. I have never accepted the argument that accessibility is more work. It is the same amount of work but done correctly. Aria attributes are only necessary when extending HTML semantics.
- zamadatix 1y ago
  In the best (and thankfully pretty common) cases the work to do the accessible answer can be the same, or even less, than the work to do it otherwise. That certainly doesn't extend to all cases though and that's where it can snag. E.g. making complex charts or visualizations accessible to those using screen readers often involves creating a second version of the information only suited for that modality. A ton of other things are a bit in-between, such as prefers-reduced-motion being somewhere between "pretty easy" to "complex" depending on how you implement it in your site but, either case, adding some amount of effort.
  - bevr1337 1y ago
    Complex cases are indeed complex! Data viz is an interesting example since visuals are often misleading and time sinks regardless of ability. It's less effort to provide an HTML table or CSV export than gluing D3 and React together (or whatever stack your team uses). I try my hardest to push back on canvas viz so we're not reinventing every wheel. SVG is easy to extend and make interactive
sirwitti 1y ago
Just as we aren't far from actually usable and safe self driving cars since 10+ years. This is not a valid argument.

nonethewiser 1y ago

>I personally find these arguments persuasive. But experience has also taught me that “eat your vegetables” is one of the least effective arguments in the world. Scolding people might get them to agree with you in public, or even in principle, but it’s unlikely to change their behavior once no one’s watching. I interpret this to mean the author may not actually find this argument persuasive.

johneth 1y ago

Another selfish reason: at some point we'll all have diminished eyesight; make things accessible for future you.

BrandoElFollito 1y ago

> Enter doesn’t submit a form Enter submitting a form is a nightmare. I have so many times selected something in a filtered dropdown, wanted to confirm by pressing Enter and poof! my form is gone.

BrandoElFollito 1y ago

> Like a good hot sauce on your Brussels sprouts, eating your vegetables doesn’t always have to be a chore. Like in web dev, correctly cooking stuff is something you learn. If all you know about Brussels sprouts is from the school cafeteria, you live in a sea of <div>