
Annoying website features I face as a blind person - Garbage
https://bighack.org/5-most-annoying-website-features-i-face-as-a-blind-screen-reader-user-accessibility/
======
frereubu
This is all good top-level stuff, but one thing I'd quibble with in this
article is something that they don't say, except in the linked article about
writing alt text - the vast majority of images are decorative, and those
images should have an empty alt attribute. I see far too many images with
pointless alt text because "you need to add alt text to all images". The easy
way to think about this is to read the page as if the image alt text was part
of the body copy. So if it goes like this:

"There are a number of different issues at play in universities at the moment.
Stock photograph of students talking at a table. We spoke to the dean of the
faculty of social sciences..."

You can see that this is pointless alt text. So the default should be no alt
text unless there's some content in the image that is important for the
context of the article.

I'm even dubious that photos that show something described in the article
should have alt text, and I'd be interested to hear from blind and partially-
sighted users what they think. For example:

"The dam burst on Saturday, inundating the local town. Photo of burst dam with
rubble and uprooted trees at the side. The mayor said that they were lucky
nobody was injured..."

Presumably if what the dam looked like after it burst was described in the
article, that image shouldn't have alt text?

~~~
Grumbledour
I strongly disagree. Empty alt text means no image description. Think about
that. You are blind. Your Screen reader tells you "image", nothing more.

How are you to know if this image is purely decorational or if the author just
didn't include any alt text, like happens so often?

Also, don't think of the alt text as part of the surrounding text. Think of it
as many browsers would display it, a box with a broken image icon with the alt
text besides it. Would you not wonder what would have been displayed there if
the image would work?

And do images that are just for decoration really need to be images? Can they
not be for example background images in other elements? Like styling an hr
element for a visual divider instead of using just a divider image?

But in any case, provide some alt text! If it just says "divider", "logo" or
"decoration", that is still better than nothing for someone who can't see it
at all.

~~~
chmod775
> I strongly disagree. Empty alt text means no image description. Think about
> that. You are blind. Your Screen reader tells you "image", nothing more.

I feel like this is something where AI can actually shine: generating
descriptions of images and video for blind people.

Best of all it's already a solved problem (and others have thought about it
already): [https://www.blog.google/outreach-
initiatives/accessibility/g...](https://www.blog.google/outreach-
initiatives/accessibility/get-image-descriptions/)

The next step is using AI to describe (important) _changes_ to pages. Think of
a chat on a website with new messages appearing. A voice saying: "Alice writes
'hello'" goes a long way. Thinking of it there really ought to be a way for
JavaScript to interact with screen readers, allowing developers to give
_changes_ performed by JS something like an alt text.

The final step would be using AI to make interacting with sites easier.
Finding the right button/element to click/focus can be really annoying with a
screen reader. If you could just tell the AI "fill the form with X and Y and
click submit", or "go to the next page", and possibly having that work even if
what you're looking is buried in some context menu, pretty much any non-
accessible page becomes accessible.

~~~
JimDabell
> I feel like this is something where AI can actually shine: generating
> descriptions of images and video for blind people.

That's exactly what you don't want in the majority of cases. The alt attribute
is for an _alternative_ to the image, not a description of the image. For
decorative images, the alternative is the empty string, no matter what the
image contains. "Laughing group of people" might be a correct description of a
stock image, but completely wrong as alt text. For, e.g. a red arrow pointing
out a required field, the alternative is "Required", not "Red arrow pointing
right".

------
axegon_
From comments in other threads, I know of one other thing that makes these
people's lives even harder than it already is: thїs їn рaяticиlaр. Yet It's
been becoming annoyingly popular.

~~~
_-___________-_
Could you expand on what you mean? Is there some trend of writing English in
Cyrillic script that I've completely missed?

~~~
matsemann
Not sure if HN approves (it removes emojies at least, this went fine it
seems), but there are glyphs that look like the alphabet/normal letters, but
are not really the same characters, like these: 𝒕𝒉𝒊𝒔, 𝖙𝖍𝖎𝖘, ⓣⓗⓘⓢ, 𝕥𝕙𝕚𝕤, ㄒ卄丨丂,
ｲんﾉ丂, ꙅiʜƚ, 🅃🄷🄸🅂, sıɥʇ, 𝓉𝒽𝒾𝓈

My guess is screen readers can have trouble telling what it really says.

~~~
Ndymium
This can be seen quite a bit on Twitter, both in usernames and the tweets
themselves. Personally, since I think human behaviour cannot be completely
fixed but can be nudged in the correct direction, I'd like to see services
implement something like alt text for text, especially usernames. This way
people can use different characters to be as creative as they want, but
provide an accessible version for screen readers. Something like this example:

    
    
        <span aria-label="like this example"><span aria-hidden="true">𝕝𝕚𝕜𝕖 𝕥𝕙𝕚𝕤 𝕖𝕩𝕒𝕞𝕡𝕝𝕖</span></span>
    

The alternative would be restricting the use of these characters, but this
would kill many valid use cases and you can't just forbid non-latin characters
on an international service.

I've written a post[1] about this and thought I'd implement it in one of my
services as an example. I haven't seen any example of it live yet.

[1] [https://blog.nytsoi.net/2019/12/12/alt-text-for-
text](https://blog.nytsoi.net/2019/12/12/alt-text-for-text)

~~~
marksomnian
I like the idea, but the de-Unicodifier would have to use the current user's
locale - de-Unicodifying certain characters (e.g. Cyrillic that look like
English) would have unintended consequences if you just assumed they're meant
to be English.

~~~
Ndymium
My idea was that this would be something provided manually by the users, just
like you can specify alt text for images on Twitter right now. I know many
wouldn't bother. But at least some would, and it would make using an upside
down nickname possible for me again. :)

~~~
srtjstjsj
The hosting service can solve this million times as effectively as the users
can.

------
causality0
One thing that bothers me is how all-or-nothing visual assistance on today's
smartphones is. It expects you to either be blind or be perfect. It baffles me
I can't say "Ok Google, read me this web page."

~~~
Rebelgecko
Disclaimer: I am Google shill

Have you tried recently? "OK Google, read me this web page" does pretty much
what you'd expect.

There's nice quality of life features of people who can see. The page scrolls
as it's read, and the current word is highlighted.

~~~
dheera
Here are some of the most common things I've wanted, all of which do not work:

"OK google zoom out the map a little" (while driving)

"OK google scroll down"

"OK google insert a waypoint for the next grocery store" (while driving)

"OK google turn off the alarm"

"OK google switch the map to satellite view"

"OK google what color is the Uber I just called"

~~~
basch
>"OK google insert a waypoint for the next grocery store" (while driving)

This one in particular. Or "what are the best couple restaurants on the way"
followed by adding it to the route.

~~~
jabroni_salad
I would be goog4life if I could specify 'The cheapest gas station next to the
interstate within the next 30 miles in the direction I am already traveling'.

------
mlang23
Another blind user here. Indeed, modern web technologies and developers are
killing my productivity. At first, it started to become increasingly hard to
read something with a text browser. For at least half a year, no github wiki
rendered in lynx at all. I am not even sure if that is fixed now. So over
time, I realized I need a modern browser. These days, I have a dedicated
Windows machine for doing things on the web. But it doesnt really help a lot,
because even with a modern screen reader and browser, more and more sites are
practically unusable.

The more I think of it, the more I realize that Accessibility was always just
an accidental byproduct. During the time when graphical displays were not
widespread yet, even non-blind people had to deal with text interfaces. So
there were many around. For instance, around 2000 I was reading guitar
tablature with my braille display. That worked just fine. These days, if I go
and hunt for tablature on the web, all I find are inaccessible graphical
things. The only chance I have to find accessible tablature is to go and find
a newgroup archive somewhere. This underlines my point, accessibility for the
blind is something from the past. These days, _nobody_ cares about us anymore.

~~~
Vespasian
I feel for you and am very sorry that you have to deal with it.

In my experience as a web dev it's simply that the "market" of blind people is
too small for many companies to justify the expenses. I work in a B2B shop
which sells a fairly expensive product so our potential visitor base is maybe
in the low 1000s of people.

I'm certain there are at least some who are visually impaired and are unable
to use our latest online offerings. However, comparing the ROI of fixing that
versus the ROI of implementing a new feature that helps ~99% of our customers
lead to only one conclusion.

It is my believe that the only route too improve the situation is through
regulation. It worked for making public buildings more accessible in many
places on this planet.

Threaten noncomplient entities with big fines and see the market adjust.

~~~
worldofmatthew
You will create regulatory capture as small website owners who make no money
from their websites will be the ones affected the worst.

~~~
Vespasian
Yes, that's true.

Nevertheless its a question society should at least discuss (and the
conclusion may very well be that it is too great of a burden).

Many regulations have different rules for different types of entities (e.g.
for profit vs non profit or by number of employees).

------
appleiigs
I think only Google can fix this. They need to more heavily penalize your page
rank if your accessibility score is low. The 5 things the author lists are so
simple. How much effort is it not to auto-play videos? Compare that to the
effort web devs put into SEO tricks which the web devs aren't even sure works.

~~~
hombre_fatal
The problem with penalizing things outside of relevance is that you're just
gimping the quality of the search results.

That something loads faster or has better support for blind people or renders
better on my iPad doesn't mean that it's more relevant to my search. I'll wait
30 seconds longer for a webpage to load and stomach its crappy design if it
has more accurate and relevant content, so I don't think it makes sense for
Google to throw its weight around like this.

I mean, we're all on HN yet it's atrocious on my smartphone. And <table> spam
probably sucks for screen readers. Doesn't mean something you're not looking
for should rank above it just because you can read that unwanted content
easier if you're blind.

Ideally you could opt in to additional weights like "I'm on a slow connection"
and "blind-friendly results first please".

~~~
turbonaut
Whilst it may not be relevant to you, I think part of this is that Google are
in a position to incentivise firms to better serve users with disabilities.

If I am penalised not for relevance but for accessibility then I fix the
accessibility.

I am then both relevant and accessible and the world is a better place.

~~~
dbetteridge
Which is fine if the pages are receiving updates, but a lot of content exists
on pages they are no longer updated and never will be again.

We shouldn't lose that content which can still be very relevant just because
they're not following the current trend of constant website updates.

~~~
tesseract
For better or worse (in my opinion, worse) recent iterations of the Google
algorithm already severely penalize, or even drop, static pages that have not
been recently updated. I suspect it's a big factor in making small academic
and personal websites significantly harder to find than they were in the past.

------
Raed667
What is the most used/popular desktop (web) screen reader out there?

I think it would help if everyone tried using their own product through
accessibility-tools from time to time.

~~~
frank2
If I were blind, I would try to do as much of my interaction with the web as
possible in "edbrowse", a browser designed and written by a blind programmer:

[https://edbrowse.org/](https://edbrowse.org/)

Although it is common for people to refer to vim as a command-line program,
edbrowse is a command-line program in a stricter sense: the user types a line
of text, then hits return, then the computer prints zero or more lines of
text, then the user types a line of text, etc. (vim is a rewrite of an earlier
program named vi, which is short for "visual", a name chosen to emphasize the
fact that it departs from the strictly line-oriented interface of earlier Unix
editors.)

~~~
RobMurray
I am blind, have never tried Edbrowse, but it sounds utterly tedious. A
Mainstream browser is the only option if you actually want to get things done.
I use Firefox with the NVDA screen reader. It is often repeated that command
line programs are naturally more accessible to blind people, but it simply
isn't true in many cases. Most blind people I know prefer accessible GUIs to
command line programs. Think of something as simple as ls - you have to read
the file names with the screen reader's review commands, then if you don't
know the exact spelling of the file you want you have to get the screen reader
to spell it one letter at a time. You then have to type the command plus file
name, and the only thing that helps is tab completion. In a GUI, you read the
list of files with the arrow keys, stop on the one you want and press enter to
open it or ctrl+c to copy or what ever. It is far less keystrokes to perform
the same task.

~~~
frank2
You write, "You then have to type the command plus file name, and the only
thing that helps is tab completion."

I can see your point because for many years I used cd, ls, mv, etc, to do all
my file management and all of my browsing around my local file system. When I
switched to software (Emacs's Dired subsystem) that let me specify the file to
be acted upon without my needing to type the name of the file, it was a
distinct improvement. (I usually use the page-up and page-down keys to find
the page containing the file name I want, then use the mouse to specify the
file.)

Thanks for your reply.

------
brainless
Some CSS libraries suggest not using HTML semantics and just use CSS. So H1
isn't used, rather SPAN with corresponding CSS to make it look like an H1.

I guess this makes things hard for a screen reader since HTML isn't saying
what's what anymore.

~~~
enriquto
Is there a "rationale" for this sort of thing? It seems quite silly to do
that, on a first look.

~~~
jtxx
I only use spans and divs. header, paragraph, etc elements have intrinsic
styles I rarely want, esp wrt margins

~~~
the_other
You need a “style sized solution to a style sized problem”. As the sibling
posters have said, you can use reset stylesheets, or write your own.

At a deeper level, you have to appreciate that browsers are built around the
“separation of concerns”:

\- html for content

\- css for layout, look and feel

\- javascript for behaviour

The front-end community has some loud voices at the moment telling us that
these are the wrong separations; that the styles for a component go hand-in-
hand with their behaviour and semantics. I’m not getting into that debate
here. But I do want to say that this newer interpretation of the “concerns”
applies to code you write for your application, and is (currently) not how
browsers are constructed. It may make more sense for you as a web application
developer to structure your code by colocating your layout and behaviour
solutions in one file, and in that way you’re more likely to use <div> and
<span> over more expressive elements. But that’s not what your users’ browsers
are expecting you to do. They’re built around the older separation of
concerns. And they’re built to amplify the strengths of the three languages
they interpret. So that <div> tells the browser “i want you to treat this
content just the same as you treat any other content”, where a <h1> tells the
browser “add this content to your document outline, expose it as a section
heading to the accessibility tree” as well as reminding it to apply the
default styles.

Attack the problem (unwanted styles) at the right level of separation (at the
styles level).

------
MaxLeiter
For web devs trying to build an accessible web, I can't stress how great the
WebAIM WAVE tool is: [https://wave.webaim.org/](https://wave.webaim.org/).

It opens a sidebar on the webpage you have open showing you accessibility
issues: incorrect heading orders, unlabeled forms, missing alt tags, bad
contrast, etc. It also can walk you through the spec in plain English to help
you understand why you need to make the changes it suggests.

------
Pxtl
The first one confuses me.

He says "click here" isn't helpful, in isolation but that's not helpful to a
sighted person either. In context? Do screen-readers fall over on links
present mid-sentence, like saying I have the article on my block you can
[click here] to read it?

~~~
pbhjpbhj
I've not used screen readers much, but you can skip through links as a mode of
navigation, but if all the links are "click here" "click me" "click" "get the
info" then it's harder to keep track of which links go where.

~~~
acdha
Of note, you can use the ARIA label attribute to customize this for many
users:

[https://www.deque.com/blog/text-links-practices-screen-
reade...](https://www.deque.com/blog/text-links-practices-screen-readers/)

------
KineticLensman
I’d like to emphasise the author’s point about not making excessive use of
auto playing sounds, from the perspective of a partially deaf person.
Background noise / music is jamming that makes it hard to hear the important
sounds, such as speech from TTS. Do you really need that stock audio on your
instructional YouTube video?

------
IMAYousaf
Is there a particularly good resource around accessibility for websites for
people who have trouble seeing or are blind?

Traditionally I always run screenshots and colors through colorblind check
simulators, though I'm sure there's a lot more that I can do.

~~~
bebna
Take a piece of cloth and blindfold yourself.

Now try to use your own website with a text-to-speech (TTS) engine and your
keyboard.

No joke, recreating the users situations is often a cheap and easy way to find
problems.

For example I like to check a design by setting the network speed limit with
the browsers dev tool to 32kbps, to see how long it would take to load on a
bad connection.

~~~
atoav
Curiously enough even using a command line Browser like lynx can be
enlightening. You start to see all the crap.

I'd urge everybody to take a simple unstyled HTML page as a markup. If your
page looks bad without styles, you are doing something wrong. If the
navigation is cluttered and convoluted in unstyled mode you are doing
something wrong.

If your page is less usable than a basic well structured HTML page, go back
and make it a basic well structured HTML page and add styles from there.

------
gostsamo
I already posted this yesterday. Not sure what is the duplication flagging
procedure.
[https://news.ycombinator.com/item?id=24419169](https://news.ycombinator.com/item?id=24419169)

~~~
gervwyk
I was wondering the same thing coz seems to me users with higher karma has a
much better chance that their posts surfaces. Wonder if the HN algorithm works
karma into the equation?

~~~
matsemann
I think there is a correlation, but only because people with more karma have
been her longer and probably posted more stuff. So naturally some of their
posts eventually will end up on the front page.

As for getting it to the front page, having a few early votes are critical.
Then it will be seen by more people, and it snowballs from there. So it's
mostly luck/timing.

------
ecmascript
As a web dev this is very interesting and I try to think about accessibility
when I develop. But I must say I am pretty bad at making labeled forms and alt
texts for images.

I will try to improve on that, thanks author!

~~~
the_other
Always think about what an image is for, as well as what’s in it. Images are
“inline replaced content”, meaning that they are considered part of the text
content, not a structural element like a table, and they are “replaced by”
their content. So imagine them as a text sized box containing their alt text,
and then replace them with their visual content. In other words, read out an
image’s alt text with the text from the nearest block level container. That’ll
give you an impression of the context A blind user will experience your alt
text in.

Some tips:

\- blank alt text is better than no alt text: alt=““ should be fine if the
image is pure decoration

\- if a photo repeats some text next to it (such as an avatar image beside a
user name), it could also be blank, or “User Name’s photo”

\- when a company logo links to the home page, an alt text of “Back to hone
page” is probably more useful than “Company logo”

~~~
adventured
> when a company logo links to the home page, an alt text of “Back to hone
> page” is probably more useful than “Company logo”

I've always used title in the anchor tag for that rather than the image alt
text (title="back to the home page" in the anchor; and then alt="Company logo"
in the img tag). That way you're properly describing what the image is and
also providing information on where the associated link goes.

Can anyone here with experience with screen readers clarify if that's an
effective approach?

~~~
Grumbledour
My screen reader knowledge is a bit dusty, so this might have changed:

As far as I know, screen readers don't read the title tag by themselves,
though users can request it. So your approach works. And I think it is also
has nicer semantics.

Personally, I prefer to use a text link with the company name, then move the
text out with css and add the logo as a background image. This also works
great in text browsers of course, the company/site name just becomes the h1 of
the page.

------
chrismorgan
“Auto-playing audio and video” is confusing me: is it not standard across all
browsers to let the user prevent autoplay of at least audio and unmuted video?
So I feel like this should be an entirely avoidable problem, just by setting
your browser so.

I have Firefox set to block all autoplay. This is generally excellent,
stopping all those annoying videos on news articles from playing (seriously,
does _anyone_ like those things?). But I am surprised at how many things break
in some way, using a <video autoplay> with no controls: like product websites
that have short videos throughout the page, or imgur on a video. You end up
with the page loading and just no visual indication that there’s a video that
you could play at all, and are left to just guess “maybe it’s a video” and
right click on it and click Play.

I wrote myself a simple user script a few days ago to experiment with just
adding the controls attribute to all videos on page load, which will probably
improve most things—though some will add the video element after page load, or
remove the controls attribute gratuitously—in imgur, right click → Show
Controls, and next time the video starts (e.g. unpause, or buffering
completes, or the video loops around) it’ll kill the controls again for
utterly mysterious reasons). I’m contemplating putting a MutationObserver in
that flips the controls attribute on every time it gets switched off.

~~~
curryst
My understanding from a thread a couple of days ago is that are workarounds to
that on some platforms. One that was mentioned was turning the videos into
animated GIFs, which can autoplay on Chrome and require a special setting on
Firefox.

It's one of the many wars on the web; websites want to push content, users
don't want to be annoyed.

------
justinlloyd
I am in the process of building a small application that will have a lot of
text. However, the application will be driven by a game engine that means it
won't be easily accessible to screen reader software. Would there be utility
for a blind person if I created a built-in method of reading the text and
offering a blind-mode/low-sight mode navigation option that radically alters
the UI? Is there a standarized API for the popular screen reader software
packages that I can tie in to that my application can use?

~~~
TonyTrapp
On Windows, that standardized API would be the IAccessible2 interface. If you
need a cross-platform solution it's probably going to be more difficult, at
least I'm not aware of any cross-platform abstraction layer for accessibility
APIs apart from Qt, which of course does a whole lot more than just
accessibility.

~~~
mwcampbell
Correction: The current official accessibility API for Windows is UI
Automation. IAccessible2 (IA2) is an unofficial extension of the very old
Microsoft Active Accessibility (MSAA) API. While IA2 has been crucial in
making non-Microsoft browsers and other applications accessible, I wouldn't
recommend that any new code implement it.

Disclosure: I'm a developer on the Windows accessibility team at Microsoft,
working on UI Automation and Narrator among other things.

------
sradman
HN thread _Common Accessibility Problems, and How to Fix Them_ [1] is relevant
and suggests using Google Lighthouse to fix low-contrast text.

Semantic HTML5 together with alt= image attribute covers the majority of
problems with aria-label*= attributes covering the edge cases.

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

------
tobyhinloopen
I’m just starting on a greenfield consumer-facing website for a client. We
mostly work on business to business web applications so I’m really happy to
finally make something “regular people” will visit. I’ll try better to make it
accessible for less-abled visitors.

Is there a good get-started guide? How can I measure the “accessibility” of my
website? Is there a free screenreader I should test with?

~~~
gostsamo
There are some accessibility assessing tools like wave and lighthouse as far
as I know. Free screen readers are Orca for Linux, NVDA and Narrator for
Windows, and Voice Over in Mac and IOS. Also, Talkback and voice assist in
Android with the latter being Samsung only.

------
kijin
I wish there were better technology around the use of alt texts on images.

Most images on heavily visited social networks like Facebook are not curated
by the site owner. They are uploaded by users, and the alt text can only be as
detailed as the uploader bothers to type in. Most people don't bother at all.
If required, they'll type in garbage to get through the form as quickly as
possible. This is not something that site owners can easily control.

This would seem to be a prime opprtunity to whip out modern image recognition
software, either on the server side or as part of the screen reader. We've all
heard about server side image recognition, but there might be privacy
implications about exposing automatically recognized details as alt text. Are
there any screen readers that can analyze an image and output something like
"an image of a woman and a baby in a playground?"

~~~
rangibaby
Facebook has been auto-alt tagging images for years

------
justusthane
On the subject of unlabeled links, my guess is that FontAwesome icons are
often used as links these days and that screen readers probably don't deal
well with them.

I was just thinking about this the other day and found that FA has a good
guide on accessibility in these scenarios here:
[https://fontawesome.com/v4.7.0/accessibility/](https://fontawesome.com/v4.7.0/accessibility/)

------
every
I dealt with a number of these issues 20+ years ago when working with
nonprofit websites. My quick metric was "does it make sense and work in
lynx?"...

------
lacker
I wonder if you could embed a modern image-recognition AI in browsers, to
create image descriptions when they are missing.

~~~
RobMurray
Microsoft Narrator added this feature in 2017:
[https://mspoweruser.com/windows-10s-narrator-can-now-
automat...](https://mspoweruser.com/windows-10s-narrator-can-now-
automatically-write-photo-captions/)

------
WhyNotHugo
I wish there were a service to hire blind people to test my website.

Sure, I can follow the rules, and try to use a screen reader, but honestly,
I'm terrible at using those tools. I can't _think_ like a blind person. But
I'd definitely pay one to give me honest feedback.

------
kovac
I'm glad I read this article. I just did some HTML email templates and I
didn't add any alt text (I'm not really frontend engineer and I didn't at all
thought about a visually impaired person reading). I will add them now thanks
to this article!

~~~
Grumbledour
Emails are also a special kind of hell, because we often need to fall back on
table layouts, which are painful with screen readers.

If you really want to make life easier for blind people (and many other users
as well), makes sure you are also sending the plain text version along with
the html.

------
cammil
Why don't screen readers have image recognition neutral nets? Seems like an
easy win to me.

~~~
maeln
Some website (Facebook is an example) automatically analyse image to create an
alt attribute. But that is far from perfect.

------
brian_herman__
Auto playing audio and video is annoying period.

