Live data from Hacker News

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

blog.logrocket.com

261–270 of 271 posts

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

#261
post #219

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.

> It's such an extremely simple litmus test: if it breaks the back button of the browser, it's the wrong design. What if state should be destroyed when you press the back button? What if I open an image in a photo app, click a button to delete it, and go to a 'deletion successful' page. Should clicking the back button return me to a page containing the image? A page containing 'this image has been deleted'? The websi…

> Which actions defines a history-worthy state change? Should clicking around a menu generate 10 history events? What about toggling a checkbox? What about an action that changes most of the information on a page? Should that generate a history event? What if that action is bringing an in-app tab to the forefront? What if there is an obvious history event that should be generated, but there is no good reason for why a user would want to go back to that state?

These are great questions, but they kind of apply to a different level of the design than my litmus test.

Start with not making it more complicated than it is: browser history is browser state that we should be able to go back to. When this is not the case, it does not go into browser history (strictly speaking about using the JavaScript history API here).

Otherwise, we need to ask and answer questions like the one you posed. And at that point, "does this break the back button?" is a good first question to ask oneself to ensure we think things through and figure out what it is that we are really trying to achieve.

> What if state should be destroyed when you press the back button?

That says something about which state of the current page is going to be stored in the history, not which state of the previous previous pages has been stored.

> What if I open an image in a photo app, click a button to delete it, and go to a 'deletion successful' page.

This is a solved problem! The "deletion successful" message should not be its own page to begin with, that's what makes it look more complicated! A modal pop-up is the right answer here. (tangent: I'm sure we both agree that many problems are caused by trying to fix issues created by using the wrong initial solution)

If all of this happens within a photo app, the app is the page, which we never left; we clicked a button, not a link. App state history is not the same as browsing history, so if, and only if, we want to preserve snapshots of the photo app state, we use replaceState and/or pushState.

In the case where different pages are warranted, for example within a photo gallery on Facebook or Imgur, the pop-up still happens on the page linking to the uploaded-but-now-deleted photo, followed by a redirect to, say, the main gallery. The link to the uploaded photo should then become a 404 page, because it is now an invalid link.

In both cases, the "deletion successful" modal obviously does not need to be preserved in the browser history.

> It doesn't even matter how you answer all of the above questions - other people will have different answers for them, and have different expectations for how the back button should work, on the same app.

And some of those answers will be right, most will be wrong, and some will depend on the desired context. But presenting hypothetical exceptional cases does not prove there is no such thing as really obviously bad design. There are exceptions, but they are just that: exceptions. They don't invalidate the question as a good first guiding principle to start from.

If anything, doing provokes these questions: you came up with them in response to the implied question "what does it mean to break the back button?" That is a lot better than just slapping something together without thinking about it.

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

#262

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…

What do you mean by "semantic" markup? The markup in the file upload widget you describe is rather generic (label, button, p or span, presumably div) but almost completely meaningful (caption, button text, file name, widget/drag and drop target), not a div soup; I don't see how you could improve it.

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

#263
post #148

Earlier quoted context omitted.

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…

Please don't do this unless you also handle dragging files on it.

That's another issue easily solved by DnD API modern browsers implement. And should probably be done differently with regards to UX depending on whether the clicky part was a button, or a larger upload area.

Frankly, I don't find the original UX of dragging files onto an upload button all that intuitive. So instead I add drop functionality to a larger container in my apps. So if I have dialog that accepts files, users can drag files anywhere over the dialog and the dialog highlights that it accepts drops while dragging.

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

#264
post #148

Earlier quoted context omitted.

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…

>No stupid styling hacks needed. You’ve just replaced them with stupid DOM hacks.

Not a hack, just regular API.

You clearly never implemented any of the above stupidity with file input styling and overlays and passthrough of events, and different unchangeable widths of file inputs you had to account for in various versions of browsers, and bugs in specific browser versions, and discontinuity in the input field clickable surface so part of the button is not clickable for no reason whatsoever to the user, so that everything works as expected in E6+IE7+IE8+IE9+FF1+Sfari,... to think it's even comparable on the hackiness scale.

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

#265
post #231
post #140

Earlier quoted context omitted.

ctrl-shift-minus in your browser. Make the font as tiny as you like, if it bothers you.

Conversely, you could just ctrl-shift-plus and make the text as readable as you like, since it bothers you and stop justifying the rest of us having to jump through hoops.

Who should have to jump through hoops, the person who cannot read text that is too small, or the person who's sensibilities are offended by text that is too large?

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

#266
post #252

Earlier quoted context omitted.

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.

Notoriously overzealous? I try very hard to avoid false positives. Which sites does it break?

I've been using your list for as long as it's been on by default in uBlock Origin. Facebook is the only other site I've ever hit the block on. LogRocket is such an obvious thing to block, they are selling tracking tools to "replay what users do on your site".

I'm glad this conversation came up. I have your list enable in Firefox Mobile/uBlock Origin too. logrocket.com is in the rule list, but it doesn't stop me from going to the site, or Facebook. I went to "wheniwork.com", one of the "great companies" trusting LogRocket, and it does block their references to logrocket.com. I'm guessing the FF mobile API doesn't allow site-level blocking so sties like Facebook and LogRocket can still run their invasive scripts on their own domains and I won't know about it, unless I find out some other way and remember not to go there. I'm going to have to go NoScript on mobile.

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

#267
post #125

Earlier quoted context omitted.

Please accept my apologies. I fully understood your comment, your point, and your desire. I was attempting to encourage you (and anyone less experienced reading along at home) to push the world that exists in the direction of the world you want, rather than imply any ignorance on your part. It's far, far too easy for people to treat technology as artifacts handed down from the gods that can only be passively accepted…

> It's far, far too easy for people to treat technology as artifacts handed down from the gods that can only be passively accepted. Too true. I usually phrase the same sentiment as bemoaning how people treat tech as if it's some magical black box into which they cannot peer & tinker. Of course, I feel that same way about other things, such as automobile engines. I know it isn't a magical black box, but it may as well…

I know the feeling.

Yet, to my mind there's a marked difference between viewing something as a magic black box that cannot be understood and an artifact that isn't understood. The former is an permanent state of affairs. The latter may wind up being permanent, but it can be fixed with effort.

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

#268
post #219

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. What if state should be destroyed when you press the back button? What if I open an image in a photo app, click a button to delete it, and go to a 'deletion successful' page. Should clicking the back button return me to a page containing the image? A page containing 'this image has been deleted'? The websi…

> Which actions defines a history-worthy state change? Should clicking around a menu generate 10 history events? What about toggling a checkbox? What about an action that changes most of the information on a page? Should that generate a history event? What if that action is bringing an in-app tab to the forefront? What if there is an obvious history event that should be generated, but there is no good reason for why…

> Start with not making it more complicated than it is: browser history is browser state that we should be able to go back to. When this is not the case, it does not go into browser history (strictly speaking about using the JavaScript history API here).

What is the state that we can go back to?

Is it the part of the app that we were on, or is it the part of the app + the content? Content these days is dynamic - if its gone, can we really 'go back to' it?

> This is a solved problem! The "deletion successful" message should not be its own page to begin with, that's what makes it look more complicated! A modal pop-up is the right answer here. (tangent: I'm sure we both agree that many problems are caused by trying to fix issues created by using the wrong initial solution)

That's not what's important, though. If 'deletion successful' is not its own page, then imagine that I then navigated to some other part of the app after deleting the image. What should happen when I press the back button?

a) Go to the "Do you want to delete this image" screen.

b) Go to a "No image found" screen.

c) ???

Option a) is misleading, because the image has already been deleted. Option b) is abuse of the back button, because we have not returned to old state.

> In the case where different pages are warranted, for example within a photo gallery on Facebook or Imgur, the pop-up still happens on the page linking to the uploaded-but-now-deleted photo, followed by a redirect to, say, the main gallery. The link to the uploaded photo should then become a 404 page, because it is now an invalid link.

When I click the back button in my browser, I see a cached version of the webpage I previously visited. What you described is not the behaviour I expect, (and is another way of breaking the back button).

> And some of those answers will be right, most will be wrong, and some will depend on the desired context. But presenting hypothetical exceptional cases does not prove there is no such thing as really obviously bad design. There are exceptions, but they are just that: exceptions. They don't invalidate the question as a good first guiding principle to start from.

These aren't edge cases and exceptions. This is trying to shoehorn a leaky abstraction (the browser back button) into a paradigm where it is often inappropriate, surprising, or just plain unworkable (pretty much everything you do in rich webapps). Your operating system doesn't have a 'back' button for that very same reason.

If your app has a consistent (Internally, and with how the rest of the web works) definition of what going 'back' is, great. Implement it. If it doesn't, that's also fine. 'The back button doesn't work in your app' is not, in itself, a sufficient heuristic for a poor design.

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

#269

It really annoys me when a site that just needs to display some text loads a whole react-redux framework. When it comes to reading text I honestly prefer the old school academic websites (albeit with a max-width set). Keeping stuff simple even makes maintaining the site simple, I personally run https://www.discoverdev.io and have used zero JavaScript. Inspired by brutalist design principles :)

Omg it's glorious. I've gotten so used to pages taking ages to load that your site seemed lightning fast by comparison

You might enjoy my small list of lightweight websites here: https://sjmulder.nl/en/textonly.html

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

#270

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.

If you are using safari/chrome you can use reading mode.

For chrome there is a switche at settings > accessibility > show simpified view

Post reply on HN