Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

The easiest way to keep your web apps accessible: Just use text

blog.logrocket.com

Post reply on HN
Print view View original

171–180 of 271 posts

Re: The easiest way to keep your web apps accessible: Just use text

#171

Post by vinceguidry »

stackola wrote: post #169
vinceguidry wrote: post #37

Reading this article made me realize what it is that's broken about the concept of semantic markup and why websites even today are div soup. It's the same reason why divs won in the first place. You can't dictate the shape of a document to people and it be anything other than a kludge. Take the site I work on, Great Big Story[1]. We have sections and headers, but our content isn't defined by text, it's defined by gra…

Just thought I'd let you know, Great Big Story is running a development build of react. You save some of bundle size and performance by switching to a production build.

We're replatforming for a redesign and so that should fix that, but thanks for the heads up. Just about all maintenance on the current site is on the back burner atm except for GDPR stuff.

Re: The easiest way to keep your web apps accessible: Just use text

#172

Post by vinceguidry »

megous wrote: post #148
vinceguidry wrote: post #48

Earlier quoted context omitted.

Not the file input button, unless things have changed in the last year since I had to build one. Other buttons, sure, but not on file inputs.

You realize you don't need input field for file input in any of the modern browsers. Just capture the click event and create input field temporarily. let i = document.createElement('input'); i.type = 'file'; // other attributes if you like i.onselect = ev => { // ev.files contains selected files }; i.click(); i.remove(); No stupid styling hacks needed. At most you may need tabIndex on the or that represents the butto…

That would have saved me a ton of effort if I had known that before getting started. Thanks, I'll keep that technique in mind for next time.

Re: The easiest way to keep your web apps accessible: Just use text

#173

Post by RussianCow »

rayiner wrote: post #102
jahewson wrote: post #78

Earlier quoted context omitted.

The point being that the file input button doesn’t look like any other button on their website. But hey, why solve a problem when you can force the entire world to accommodate it? Why does there even have to be a button? I want an API not a button...

> The point being that the file input button doesn’t look like any other button on their website. But hey, why solve a problem when you can force the entire world to accommodate it? Why don't the buttons on your website look like HIG-compliant buttons on whatever platform the user is using? That's what web chrome looked like back in the aughts and it was fantastic. Apparently you can still do it: https://developer.mo…

This will never work because each browser has its own idea of how native controls should be rendered, even within the same platform. The link you posted even has examples of this. I'm all for the idea of using OS-native controls where possible, and for native apps you should absolutely do this, but I just don't think it's feasible on the web; I believe making your controls consistent across browsers is a better goal in most cases, as long as you don't sacrifice accessibility.

Re: The easiest way to keep your web apps accessible: Just use text

#174

Post by pjc50 »

jahewson wrote: post #83
vanderZwan wrote: post #64

Earlier quoted context omitted.

It's such an extremely simple litmus test: if it breaks the back button of the browser, it's the wrong design. The closest thing to an exception being cases where one needs to be logged in to see a page, or when links are consciously invalidated for some other reason. And even then the website/webapp should still just signal this to the user without a bazillion redirects.

Not necessarily: I do not want to click back 30 times to get out of your slideshow and back to my Google results. Thank you.

That's what "open in new tab" solves.

Re: The easiest way to keep your web apps accessible: Just use text

#175

Post by oneeyedpigeon »

tomjakubowski wrote: post #152
vanderZwan wrote: post #64

Earlier quoted context omitted.

It's such an extremely simple litmus test: if it breaks the back button of the browser, it's the wrong design. The closest thing to an exception being cases where one needs to be logged in to see a page, or when links are consciously invalidated for some other reason. And even then the website/webapp should still just signal this to the user without a bazillion redirects.

> if it breaks the back button of the browser Good luck getting a group of people to agree on what "non-broken" back button behavior is.

All those cases where pressing back repeatedly doesn't actually go back? They're broken. We may not be able to define 'broken' perfectly, nor catch every case, but we can definitely spot the worst!

Unless you mash the back button really quickly ...

Re: The easiest way to keep your web apps accessible: Just use text

#176

Post by jen729w »

tomp wrote: post #145
aidenn0 wrote: post #43

I'm still looking for "just use links". So many frontends I see use fancy onclicks to emulate links (including updating window.location). However they are either not links or are void links. This breaks all sorts of useful things (copy link location, open in new tab &c.).

This. LinkedIn is particularly terrible. I cannot believe such a huge, successful website can have so horrendous UX.

Been to eBay recently? Hoooooooly moly it’s a hot mess over there.

Re: The easiest way to keep your web apps accessible: Just use text

#177

Post by kgwxd »

anarchy8 wrote: post #144
kgwxd wrote: post #100

Earlier quoted context omitted.

They offer some kind of website hosting? I can't tell because the entire logrocket.com domain is blocked by "Peter Lowe’s Ad and tracking server list" which I have enabled through uBlock Origin. Not sure if I turned on that list or if it's on by default. Either way, the only other site I've ever get that full domain block warning on is Facebook. I'm guessing they're up to some equally nefarious tracking tactics.

Peter Lowe's list is notoriously overzealous and it's enabled by default. It breaks countless websites and I found other lists to be better.

After reading the comments about the article here, I'm not concerned about being overzealous. Seems like it's doing quite a nice job. I haven't needed or wanted to unblock anything it covers so far.

Re: The easiest way to keep your web apps accessible: Just use text

#178

Post by dvh »

phyzome wrote: post #167
gnicholas wrote: post #84

Ironically, this article was posted on Medium, whose apps are notoriously inaccessible. Despite being a reading-focused app, it does not let you change the text size or spacing in any way. And on iOS, it also ignores the user's systemwide dynamic text setting.

Not to mention the persistent sharing dickbars and make you read through a mail slot.

I use plugin for that, it walks through all elements on page (createTreeWalker) and detect actual style position (getComputedStyle) and if it is "fixed" or "sticky" it changes display to "none". So far it worked with every bar, even "use app" button. Then as a bonus I remove all fonts, change color to black on white background, and turn full screen mode on.

pastebin.com/6Q8WT9WJ

Re: The easiest way to keep your web apps accessible: Just use text

#179

Post by ddebernardy »

rayiner wrote: post #52
aidenn0 wrote: post #43

I'm still looking for "just use links". So many frontends I see use fancy onclicks to emulate links (including updating window.location). However they are either not links or are void links. This breaks all sorts of useful things (copy link location, open in new tab &c.).

So that's why that happens. Why on earth would you break one of the most foundational aspects of HTML that way?

By the same token, why reinvent things like scrolling, break the back button, or throw font sizes so small at your readers that they need to zoom to read? (To say nothing about top and bottom bars that follow you around on your 13" laptop screen.)

Humble suggestion: design fads.

My own question would be whether this gets taught anywhere. Because if it does, a few someones need to get fired.

Re: The easiest way to keep your web apps accessible: Just use text

#180

Post by panic »

myroon5 wrote: post #162
an_account_name wrote: post #158

Reminder that lack of accessibility causes legal risk: https://en.m.wikipedia.org/wiki/National_Federation_of_the_B... .

Trailing period gets stripped https://en.m.wikipedia.org/wiki/National_Federation_of_the_B... .

Would it make sense to add a redirect on Wikipedia for this?
Post reply on HN