
The easiest way to keep your web apps accessible: Just use text - efunction
https://blog.logrocket.com/the-easiest-way-to-keep-your-web-apps-accessible-c2b57506cc2a
======
aidenn0
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.).

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

~~~
rpeden
Breaking it is completely unnecessary too, even with single page apps.

It's not all that hard to build a React or Angular apps that use proper links
along with the browser history API. Designed properly, the apps should be able
to load their state and render correctly even when deep-linked to somewhere
other than the app's top level.

This isn't a new concern - I remember paying attention to this back in the old
days of SPAs using GWT back in 2009/2010.

Unfortunately, many web apps choose to ignore this. On the bright side, lots
of them get it right, too.

~~~
vanderZwan
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.

~~~
jahewson
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.

~~~
ergothus
But the problem there is that they used a carousel in the first place. Were it
content that justified clicking 30 times into it, it would also justify
backing out of it 30 times.

~~~
beat
The problem is that it might take a half-dozen clicks to realize it's not
worth reading the other 24, then you need to click back a half-dozen times
(worse if there are page reloads during that).

~~~
dylan604
Or, use another built-in feature of the browser's back button. Click-and-hold
the back button so that you can see a contextual menu with the steps you can
go back to quickly. If I click back more than twice, the third is a click-and-
hold.

------
gnicholas
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.

~~~
krn
Why does Medium need an app in the first place? Is a web browser not a good
enough app for reading content on the internet?

~~~
majani
Apps often are a solution for business problems rather than users. In mediums
case, the app solves the ad blocking and retention problem.

~~~
krn
As far as I am aware of, Medium is not supported by ads, and its popularity
depends on the web.

------
deepakkarki
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](https://www.discoverdev.io) and have used _zero_
JavaScript. Inspired by brutalist design principles :)

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

~~~
sjmulder
You might enjoy my small list of lightweight websites here:
[https://sjmulder.nl/en/textonly.html](https://sjmulder.nl/en/textonly.html)

------
joncp
My biggest pet peeve is when sites use js to try to "help" me scroll. What.
The. Hell. is wrong with developers who think their users' browsers can't
scroll? Am I the only one?

~~~
ergothus
Often the blame will lie with someone else - the designer or the PM. Some
webdevs are to blame, but many of us would prefer to work on tasks OTHER than
arguing with the browser over how it should do it's job.

~~~
rhacker
The most common source of blame for scrolljackers are wordpress template
writers. There was a huge surge in developing them a few years ago that happen
to coincide with popularity in scroll-jackers actually being considered good.
Mostly because of the Windows crowd not actually having a great scrolling
experience like Mac. Now windows scrolling is 95% on par with the mac, but
alas, the scrolljacking stays with us until people migrate off wordpress or
people are interested in developing for wordpress again.

------
vinceguidry
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 graphics and videos, with
little metadata sections on the video player page that I suppose could be
semantic if we had the right descriptive tags. I use semantic markup when it
seems to make sense, but we have so many weird little needs to introduce
elements just for styling purposes.

Take a recent example, I need four elements to make a styled file input form.
Two labels, one to look like a button and can be clicked, taking advantage of
the browser behavior of treating clicks on the label to be clicks on the form.
The other label is the actual label, could be just a span if I wanted, it
doesn't have the htmlFor attribute set. The actual form input button is hidden
using CSS tricks because the actual button can't be styled. Finally there's
the filename display, which is set to the filename of whatever was uploaded or
the existing one if present. This uses Javascript callbacks to get set.

None of these elements are semantic, legacy cruft keeps the markup from being
simple and readable. I suppose you could demand our video presentation site to
be a motherfucking website[2], but I fail to see how that will actually
improve much of anything and would just hurt our brand. I'm getting a little
tired of coder hatred for web fashion. It keeps us all employed.

But I think we're at least 10 years out from being able to actually use
semantic markup. Web standards and browser vendors still have some maturing to
do.

[1] [https://www.greatbigstory.com](https://www.greatbigstory.com)

[2] [https://motherfuckingwebsite.com/](https://motherfuckingwebsite.com/)

~~~
iris-digital
> input button is hidden using CSS tricks because the actual button can't be
> styled.

Buttons can be styled.

~~~
vinceguidry
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.

~~~
megous
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 <a> or
<div> that represents the button for selecting files.

You can leave <input type=file> around if you want to submit data via <form>
and not via XHR.

~~~
aaaaaaaaaab
>No stupid styling hacks needed.

You’ve just replaced them with stupid DOM hacks.

~~~
megous
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.

------
perlgeek
> You use ALT text by adding the alt attribute with a value of the text
> equivalent of your image, like so:

> <img src=“[https://example.com/image.png”](https://example.com/image.png”)
> alt=“developer in an office working feverishly to hit a deadline on a
> software project” />

Is this actually a good idea?

This sounds like a typical "hero" or "teaser" image, to capture the reader's
attention or interest. I don't think the alt tag does that in a comparable
way, for a screen reader for example. So I'd just leave it blank.

It's really frustrating: all articles on accessibility mention the alt
attribute, and that you should use them. But few give guidelines on how to
write a good alt attribute that is actually well thought out.

When I write a website that explains things, and uses images, I (nearly) never
use only images, but usually images + text. If I put an alt description in the
images, I basically duplicate the text, and I guess that will confuse screen
reader users more than a blank alt text.

Am I totally off base here?

~~~
vorpalhex
> Am I totally off base here?

[https://www.w3.org/TR/WCAG20-TECHS/H37.html](https://www.w3.org/TR/WCAG20-TECHS/H37.html)

~~~
perlgeek
From that link:

> An image on a Web site depicts the floor plan of a building. The image is an
> image map with each room an interactive map area. The alt text is "The
> building's floor plan. Select a room for more information about the purpose
> or content of the room." The instruction to "select a room" indicates that
> the image is interactive.

And how does it help any blind person to know that there is a building plan,
but none of the contents of the building plan are described?

Or am I misunderstanding the purpose of the ALT text?

~~~
izacus
It's in the last sentence you pasted: > The instruction to "select a room"
indicates that the image is interactive.

That assumption is that the rooms are selectable, so "tabbing" with a screen
reader will select each and speak their Alt text.

------
camnora
The founder of the Tachyons css framework has some very similar ideas on his
blog. Well worth the dive -
[http://mrmrs.cc/writing/](http://mrmrs.cc/writing/)

------
another-cuppa
Posted on Medium with a massive pointless image at the top and page loaded
asynchronously using JS.

~~~
caymanjim
For some reason, font sizes have shot through the roof in the past few years.
Medium is one of the biggest offenders. You get maybe 2-3 paragraphs per page
now, when entire articles would fit on a single screen page with normal-sized
fonts.

~~~
beat
I'm in favor of this. My eyes aren't particularly bad, but I have to use
reading glasses in order to read most computer text, and some can get really
difficult. Larger fonts are better even for my bad-like-most-other-people-my-
age eyes. The tiny text I would have found fine 20 years ago is painful now.

~~~
craftyguy
There's an easy fix for folks like yourself: most (all?) modern browsers
support setting a minimum font size. Jack that up way into the double digits,
and stop justifying ridiculously large font sizes for everyone.

~~~
jmulho
How about you set maximum font size in your browser? That would be a much
better plan. See what I mean?

~~~
craftyguy
> That would be a much better plan. See what I mean?

No, because there are cases where having large fonts makes sense (e.g. <h1>
for article titles, etc) while preserving the ability to display smaller fonts
than that (e.g. for article content).

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

~~~
petee
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.

~~~
jmulho
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?

------
cjslep
Why would I use LogRocket for my all-text no-js web "app"?

~~~
jasonkostempski
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.

~~~
anarchy8
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.

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

~~~
jasonkostempski
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.

------
S-E-P
I find the classic 90s webpage still warms the cockles of my heart

------
claydavisss
in the 90s, unix developers built web frontends and they were built in this
way - simple, with text. they had no skills in graphic design so they kept it
simple.

after 2000, graphic designers took over this work and evolved into "frontend"
developers. although there were periodic wins like google maps that would have
never been produced by the 90s greybeards...most of it has been an endless
stream of garbage. but the goatee crowd should not bear all the the blame,
some must also fall on the adtech people who insist I need 15 mb of tracking
garbage to read a news story.

~~~
dredmorbius
Every so often I come across a simple, elegant site. Since I bitch about the
others, some kudos:

Matt Gemmell, from aa few years back:

[https://mattgemmell.com/staying-creative/](https://mattgemmell.com/staying-
creative/)

Matthew Graybosch

[https://www.matthewgraybosch.com/starbreaker/](https://www.matthewgraybosch.com/starbreaker/)

Mark Pilgrim's Dive Into HTML5 is a classic.

[http://diveinto.html5doctor.com](http://diveinto.html5doctor.com)

Outline is a lifesaver: [https://outline.com](https://outline.com)

(Especially for browsers/platforms w/o Reader Mode.)

I've also got an entry in the motherlovin' website contest.

------
timwaagh
What about people who don't read very well? I remember just browsing the
screenshots on games domain back when I was a kid and could not read English
yet.

------
superkuh
The easiest way to keep your apps accessible is not making them web apps.
Instead of relying on an entirely redundant abstraction layer/OS built on top
of your existing one just write native applications.

But if you _have_ to do it in a browsers then at least make it so the actual
content (text/images) do not require JS to load and display.

------
an_account_name
Reminder that lack of accessibility causes legal risk:

[https://en.m.wikipedia.org/wiki/National_Federation_of_the_B...](https://en.m.wikipedia.org/wiki/National_Federation_of_the_Blind_v._Target_Corp).

~~~
myroon5
Trailing period gets stripped

[https://en.m.wikipedia.org/wiki/National_Federation_of_the_B...](https://en.m.wikipedia.org/wiki/National_Federation_of_the_Blind_v._Target_Corp.).

~~~
panic
Would it make sense to add a redirect on Wikipedia for this?

------
stockkid
I like the content of the article but did not appreciate the out-of-place call
to action to try their service right in the middle of the body ("LogRocket is
working on ... Click to check it out.").

In my opinion, those call to actions are helpful when in the similar context
with the content itself, or when placed outside of the content. Otherwise they
are just intrusive.

------
foxhop
At the very least gracefully degrade back to just text. Here is an example:
[https://russell.ballestrini.net/capability-driven-
presentati...](https://russell.ballestrini.net/capability-driven-
presentation/)

------
trumped
This page is blocked by uMatrix (pretty rare that it happens to me)... but it
sounds like they are talking about the opposite of Angular.

------
EGreg
How about:

1) Just use text

2) Make all your graphics into an otf font

3) Use CSS to style everything including backgrounds

The ONLY place you may need graphics is user submitted content like profile
photos.

------
ravenstine
[https://motherfuckingwebsite.com/](https://motherfuckingwebsite.com/)

~~~
pcnix
[http://bettermotherfuckingwebsite.com/](http://bettermotherfuckingwebsite.com/)

~~~
deadalus
[https://perfectmotherfuckingwebsite.com/](https://perfectmotherfuckingwebsite.com/)

~~~
ChristianBundy
[https://bestmotherfucking.website/](https://bestmotherfucking.website/)

~~~
seorphates
I can appreciate hn is mostly humor intolerant but these are all basically
right on point. The web experience is now akin to walking the mall; loud,
expensive, garbage.

~~~
justsomedude43
Pretty much, I just said "haha" and I got 5 downvotes in 20min. :)

~~~
petee
because just saying haha adds nothing to the conversation. its just wasted
time and space; this ain't reddit.

~~~
justsomedude43
You mean like your comment?

------
Bluecobra
Also please don't use bad fonts. Someone posted the following article the
other day and the font drove me so nuts that I had to resort editing the CSS
code to make it readable.

[https://blog.bugsnag.com/bug-day-race-condition-
therac-25/](https://blog.bugsnag.com/bug-day-race-condition-therac-25/)

I really wish "reading mode" was a prominent feature in desktop browsers.

~~~
interactivecode
it's pretty prominent in a lot of browsers, like firefox and safari (from the
top of my head)

~~~
digi_owl
Dunno about Safari, but at least for me the Firefox one lacked two features:

An official keyboard shortcut for going to reader mode.

The option of having the browser send all articles to reader mode when
detected as possible.

~~~
phonon
F9? [https://support.mozilla.org/en-US/kb/keyboard-shortcuts-
perf...](https://support.mozilla.org/en-US/kb/keyboard-shortcuts-perform-
firefox-tasks-quickly)

------
extralego
So much unnecessary reading to figure out what this is. I gave up.

~~~
EamonnMR
I'm not sure that this comment is serious, but I think it illustrates exactly
why text isn't more prominent in modern websites.

~~~
Bluecobra
I noticed a similar comment here the other day:

[https://news.ycombinator.com/item?id=17721496](https://news.ycombinator.com/item?id=17721496)

 _Blogs are such a waste. I dont need to hear your life story and opinions.
Post the situation, the plan, and details /documentation.

I do not have the time to read a literal 6,000 words._

I for one, do enjoy reading a long article and if I'm busy I will bookmark
it/add to reading list for later. Everything doesn't need to be crammed into
280 characters or less. Maybe I'm just old fashioned and should embrace our
race to the future presented in the movie Idiocracy?

