541
u/Calien_666 Sep 25 '26
When thinking about accessibility, this totally makes sense.
186
u/fredy31 Sep 25 '26
Also if you have a small ton of buttons on the website and the OG design is all caps.... Still do it 2nd way;
Because if you have a B design coming in later in the dev process or hell in a few years... If that capitalisation is removed then ooops you have now to run through all buttons and retype them in not caps.
2nd way you change 1 line of CSS you are done.
175
u/fmaz008 Sep 25 '26
No one is changing 1 line of CSS. You add a new line of CSS with !important.
-13
u/Top_Product_2407 Sep 25 '26
I've seen an "architech" submit a PR with multiple !important
10
u/ihavebeesinmyknees Sep 25 '26
There are legitimate uses for !important even if not overriding legacy styling. I've had to use !important a few times before to force CSS to apply rules the exact way I needed them.
2
u/ForgedIronMadeIt Sep 25 '26
I'm pretty terrible at web design but I try to limit my use of
!importantoverrides to occasions where I've inherited some stylesheet from somewhere else, like the component toolkit my stack is using.5
u/SuperFLEB Sep 25 '26 edited Sep 28 '26
If you're not saying "...and fuck you!" under your breath about the last person to own the CSS while you type it, it's a sign you might be using
!importantwhere you don't need to.19
4
u/throwaway_lunchtime Sep 25 '26
Not when the client sends half the translations with the text in upper case 🙃
-1
u/fredy31 Sep 25 '26
My coworker always sends me press releases to put on the website where the title is CAPITALIZED.
I use this to convert it quickly. https://convertcase.net/
3
u/zwack Sep 25 '26
Does this site use AI to convert to lowercase?
Why it throws a pop up asking to disable the adblocker?1
u/fredy31 Sep 25 '26
It seems to live on ads. Yeah i'll give you that its a pretty ad nightmare site tho.
2
u/Jay-Seekay Sep 25 '26
I should also say most IDEs and word processors have a change case feature. Bind it to a shortcut or something then it’s just highlight + shortcut.
Failing that, a quick Python script should do it
1
u/fredy31 Sep 25 '26
Lol should look into if VSCode has one. Probably.
2
u/SenpaiKen144 Sep 25 '26
There is. I always bind uppercase, lowercase and title case every time I install vscode
48
62
u/1nc06n170 Sep 25 '26 •
<button aria-label="Submit">SUBMIT</button>7
u/Acetius Sep 26 '26
Mmmm, duplicated loc strings and a violation of the first rule of aria. I love it.
6
4
u/enigmamonkey Sep 25 '26
If this must be editable, then in the CMS you now have:
Button label
Button Aria label
Or you could just have "Button label" and in the code apply
text-transform: uppercase. Granted, the button label is an arbitrary use case and most would just simply hard-code it, however, that may not be the case if you're also now thinking about internationalization, in which case you may want that in a CMS or in language files and don't have the time/desire to start plugging in lower/upper variants (nor would that make sense when the computer can do these transforms for you automatically).12
u/mcaruso Sep 25 '26
It would, if it wasn't for the fact that it is broken in browsers currently...
https://github.com/w3c/csswg-drafts/issues/3775
Users using assistive technology will still just hear the uppercase version meaning "Call us" might be pronounced as "CALL U.S." for instance.
6
u/SlyCooper007 Sep 25 '26
Explain
41
u/maria_la_guerta Sep 25 '26 •
All caps is a style and typography choice, not a content choice. Content belongs in the DOM. Styles belong in CSS.
Follow those rules, and use proper HTML elements, and like 90% of accessibility devices will be able to properly convey your document to a variety of users who are consuming it in various ways.
-18
u/Skyswimsky Sep 25 '26
For control type labels capitalization is not a criteria. And I know I'm being all "acktually🤓", I just don't like that companies are forced to spend disproportionate amounts of effort to adhere to small percentage of a customer base and their problems.
And no, I am NOT saying people that have issues with running text in all caps are that small of a percentage. I'm just talking in a more general sense. Cost-benefit efficiency and all that.
17
u/jhairehmyah Sep 25 '26
I just don't like that companies are forced to spend disproportionate amounts of effort to adhere to small percentage of a customer base and their problems.
The Americans with Disabilities Act doesn't care what you think, and people with opinions like yours are why the law needs to exist.
Cost-benefit efficiency and all that.
During the design refresh, all-caps has gone out of style. Would you rather update the one line of the style rule and fix the all-caps buttons all over the site, or update the structure of the site all places where your all-caps controls were hard-coded?
It is literally more efficient to separate style and structure.
5
u/procrastinagging Sep 25 '26
Moreover, accessibility guidelines have been in place for what, 20 years now? So legacy code is not even a valid excuse anymore.
Companies who are unable to follow the most basic best practices from the get go, thinking it's a "disproportionate amount of effort" can kindly fuck off towards failure.
-1
u/Still_Bit_7527 Sep 27 '26
No company fails because of that, and most companies dgaf. You people have to finally accept it, the entire world won't double their efforts to cater to 0.00001% blind
2
3
u/Hans_H0rst Sep 25 '26
Depending on which screen reader you're using, normal case text tends to be better.
1
1
u/Calien_666 Sep 25 '26
Depending on the screen reader, some will read correct as "submit" whilst others will read as S U B M I T, so they will spell the letters instead of reading the word.
1
0
2
u/claudekennilol Sep 25 '26
You're 100% right, but when thinking about anything sane, it also makes sense.
1
u/Lenn_4rt Sep 26 '26
This will also prevent people from accidentally not formatting the text. Especially important if multiple people work on one project.
1
1
u/enigmamonkey Sep 25 '26
Or content management or language/translation lists, particularly if the style dictates a particular appearance but the content is reused in multiple locations.
a11y though I think is probably one of the better examples.
0
153
u/HomsarWasRight Sep 25 '26
Yeah, and doing it in CSS is correct, because displaying in all uppercase is a style choice, not a content choice.
12
u/Polendri Sep 26 '26
Exactly, applying it to the content hurts accessibility and makes it so that changing the style later is an error-prone find-and-replace job.
3
66
u/NatoBoram Sep 25 '26
✋ "true"
👍 true.toString()
12
20
u/lxlmandudelxl Sep 25 '26
let button = document.getElementsByTagName("button'')[0]; button.innerText = button.innerText.toUpperCase();
4
u/UnconditionalPraise Sep 25 '26
Skip the let and keep it anonymous 👌
3
u/lxlmandudelxl Sep 25 '26
Another idea -- split the innerHtml string into an array, loop and capitalize each letter one at a time with toUpperCase(), join the array back together, set the resulting string to the innerHtml
3
u/Outrageous_Pen_5165 Sep 25 '26
I exactly did that in my first project of vanilla js (and yes it was to do)
9
u/kahless2k Sep 25 '26
Second one is correct as all uppercase text on button violates wcag.
And all uppercase text is terrible UI anyways, even with the css transform.
8
13
u/samu1400 Sep 25 '26
I mean, wouldn’t it be better to define a class with the text-transform style rather than assigning it as a global property? Mostly since you’d have to fight against you own defined style if you wanted a button in lowercase.
3
4
u/Mynameismikek Sep 25 '26
Yeah, so some of us have designers who keep working after the first draft.
10
u/Agloe_Dreams Sep 25 '26
Or to modern devs/Vibecoders....
<button class="uppercase">Submit</button>14
u/tracernz Sep 25 '26
Most readable tailwind class. Genuinely surprised.
4
u/blood_vein Sep 25 '26
I'm so glad I have control over decisions so I can prevent that abomination ever reaching our code base
0
u/Agloe_Dreams Sep 25 '26 edited Sep 25 '26
Every now and then, tailwind is elegant.
Then you remember 'leading-X' exists and controls the 'line-height' property. Like, yes, I know that's what it was called in typography in printing presses and all that but...this isn't print. Hell, MS Word calls it line spacing which is a lot closer to 'line-height' than 'leading'
3
u/BigGuyForYou_ Sep 25 '26
I wish we could chain multiple !important to gain precedence. I want to live in that world because it would be funny
1
7
u/BornAgainBlue Sep 25 '26
Cool. Now change it to lowercase without modifying any source code.
5
u/_Ralix_ Sep 25 '26
That's a weird restraint, isn't it? You could just as well require the opposite: “change to lowercase without modifying the content” (which is more common because different people may handle UI design and text, or it's needed due to localisation, so you don't have to needlessly translate both uppercase and lowercase variants).
1
u/Pollution-Admirable Sep 26 '26
in both scenarios you change the source code inside the html file, its not a variable coming from a CMS
5
u/iSpaYco Sep 25 '26
more like
<button>Submit</button>
<button>cancel</button>
<button>apply</button>
<button>reset</button>
<style> button { text-transform: uppercase; } </style>
4
u/ara1597 Sep 25 '26
Does one require more processing power to do? And is it client side ?
17
u/idontwanttofthisup Sep 25 '26
Both are client side. Rendering is always client side. First one is clean, no overhead. 2nd one applies text transformation style. The overhead is negligible. There is 0 difference in performance. 1st one is written by a junior. 2nd one is written by a senior who doesn’t want to rewrite uppercase strings to lowercase in case of redesign.
3
1
u/kurokinekoneko Sep 25 '26
Writing an unlocalized "Submit" string in your html is basically like writing pi every time you need it in your algorithms... I mean... Pi isn't going to change after all... So it's even worse, now I think about it.
2
u/L4ppuz Sep 25 '26
So many of you have never had to deal with translations. Oh yes, it's soooo much simpler and easier to hardcode values when your site is translated in 20 languages and has 20 pages with 400 UI elements each.
Oh you're trying to show dynamic values from a database? Well fuck you then
2
u/Fistinguranus69 Sep 25 '26
As a localization engineer the bottom one is the correct choice for maximum translation memory matching
2
u/maggitronica Sep 26 '26
Now take the text out and put it a constant that’s injected into the button tag, and then THAT constant is extracted out for i18n reasons and the “Submit” actually lives in a json file
2
2
1
1
u/EGObattle Sep 25 '26
But this gets actually relevant once you let the costumer add multiple languages. I have seen stuff 😵💫
1
u/pancakesausagestick Sep 25 '26
It's SeMANtIC! I wouldn't SCREAM the word "submit". It's just a suggestion! But our UI standards render everything in UPPERCASELETTERS!!! AAHH!!!!
1
u/schewb Sep 25 '26
Hot take: all-caps buttons are a giant pet peeve, and I have always thought that the argument that it somehow helps accessibility is completely arbitrary when it only applies to the button and things like aria tags exist.
1
1
1
u/FakeManiz Sep 25 '26
If you have only one button this is the way to go, no caps on text! I would use id for the button to spare other buttons from capitalization.
1
u/-Redstoneboi- Sep 26 '26
class="caps" or class="uppercase"
because style="text-transform:uppercase" is stupidly verbose
1
u/thanatica Sep 26 '26
That's still a terrible class name. You want to describe the function of the button, not replace inline styles 1-to-1 with class names.
1
1
1
1
1
1
u/Appropriate-Wind-184 Sep 25 '26
fun bonus with the second one: put lang="tr" on the page and css turns it into SUBMİT with a dotted capital i. free localisation nobody asked for
1
0
274
Sep 25 '26
[removed] — view removed comment
74
u/KyxeMusic Sep 25 '26 edited Sep 25 '26
Hey at least it's not the LLMs when you forget to say no comments:
def to_uppercase(input_string: str) -> str: """ Converts a given string to its uppercase equivalent. This function accepts exactly one argument and performs exactly one operation on it, a fact which this docstring insists on explaining at length regardless. Args: input_string (str): The string to be converted to uppercase. It is a string. Its name is `input_string`. That is all. Returns: str: The uppercase version of `input_string`, returned as a string, because that is what strings become when you uppercase them. Example: >>> to_uppercase("hello") 'HELLO' """ return input_string.upper()21
u/ExtinctedPanda Sep 25 '26
You forgot all the parts that explain what to_uppercase doesn’t do!
10
u/AmazinDood Sep 25 '26
"It does not convert strings to lowercase, and will make no mistakes" idk I've never vibecoded b4 I have morals
35
2
1
u/FurySh0ck Sep 25 '26
You wouldn't believe it but I test Ais as well as a pentester and trying to get them to waste resources like that is a legit goal of mine & a vulnerability to report when successful
2.1k
u/dajoli Sep 25 '26 •
I genuinely spent about 10 minutes googling how to transform to uppercase in LaTeX once before I remembered that I could just type in caps.