15 ms·

Annoying website features I face as a blind person

445 points by Garbage 6y ago

ecmascript 6y ago
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 6y ago
  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 6y ago
    > 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 6y ago
      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.
    - the_other 6y ago
      My screen reader experience is old and rusty, so I can’t reply on that basis. However, I think it’s valuable to ask yourself “why does a non-visual user need to know the company logo is here?”.
  - captn3m0 6y ago
    > read out an image’s alt text with the text from the nearest block level container. never thought of it this way, but this makes sense. Thanks.
  - ecmascript 6y ago
    Sure that sounds nice, but what to do with user uploaded images? I cannot describe them with words since they can be whatever. Is "user uploaded photo" good enough for example? The best would of course be to analyze the contents of the photo but that is simply not realistic for the stuff I work on.
    - detaro 6y ago
      that's of course not perfect, but you can give users the option to provide their own description. (Twitter does it, altough they've sadly hidden it well, so only some niche bubbles do it)
      - ecmascript 6y ago
        I can do it, but for the app I work on I believe very few would use such a feature. But I'll think about implementing it if I have the time in the future
    - the_other 6y ago
      In the context of your application, does it matter? (I assume it does, but it’s worth asking the question because all apps, and pages in apps are different). What are the images for? Do they have text accompanying them? Are there themes to the images? Can you convey the same meaning and intent another way? Can you educate your users to help you out? The answers to these questions should guide your solutions to access requirements. Alt text isn’t only about providing a description of an image, it’s one tool in a toolbox to improve access to information.
IMAYousaf 6y ago
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.
- deleted 6y ago
  [deleted]
- menybuvico 6y ago
  As a rule of thumb, make sure the site works with Lynx. If it does, then you probably won't need anything but minor adjustments.
  - anilakar 6y ago
    Or browse the site with CSS styling turned off. Firefox also has an accessibility developer mode (Shift-F12) but it mostly focuses on technical issues.
- bebna 6y ago
  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 6y ago
    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.
appleiigs 6y ago
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 6y ago
  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 6y ago
    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 6y ago
      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.
axegon_ 6y ago
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.
- _-___________-_ 6y ago
  Could you expand on what you mean? Is there some trend of writing English in Cyrillic script that I've completely missed?
  - nordsieck 6y ago
    >> this in particular I assume he's talking about using unicode characters that visually similar to english letters, but are not actually english letters.
  - axegon_ 6y ago
    Not Cyrillic in particular, all scripts(I just happen to have Cyrillic layout hence the reason I used it for my example), but if you go around blogs, twitter or other websites, there are tons and tons of people mixing those up to look fancy or whatever it is they are trying to do. It's a nightmare for those of us who know several alphabets and an even bigger nightmare for those who need to use screen readers.
    - _-___________-_ 6y ago
      Ah, OK. I haven't seen this much outside of screen names in some games. If people are going to do strange things like this en masse, perhaps the screen readers could implement some normalisation rules.
      - axegon_ 6y ago
        Something of the sorts could be implemented but this would be an attempt to make something idiot-proof. And from my experience, nothing can ever be idiot-proof. To quote Mark Twain: "they will drag you down to their level and beat you with experience".
gostsamo 6y ago
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
- _-___________-_ 6y ago
  Sometimes stuff gets reposted, and sometimes one or other of the reposts gets a bigger discussion or more upvotes, maybe because of the time of day, or maybe because of other things getting discussed that day that change the context, or whatever. I don't think it's really a problem?
  - gostsamo 6y ago
    Besides the self-validation, not a problem as far as the information reaches people.
- gervwyk 6y ago
  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 6y ago
    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.
deleted 6y ago
[deleted]
Raed667 6y ago
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.
- CJefferson 6y ago
  I know a few people who use VoiceOver on Mac with standard safari. You can also turn it on on an iPad or iPhone, if you have one lying around.
  - Raed667 6y ago
    This doesn't look too bad! Thanks!
- ebg13 6y ago
  JAWS. It's costly, though.
  - RobMurray 6y ago
    Please test with NVDA. It is free and very popular. Jaws is becoming less and less relevant mainly due to it's cost, and the fact that NVDA is perfectly usable for most things. If you do want to test with jaws, there is a demo that works for 40 minutes. By far the easiest screen reader to test with is Microsoft Narrator because it is included with windows.
- aloisdg 6y ago
  I test my own creations on Linux with Orca (maintained at https://gitlab.gnome.org/GNOME/orca https://gitlab.gnome.org/GNOME/orca) and on Windows I rely on NVDA (downloadable freely at https://www.nvaccess.org/download/ https://www.nvaccess.org/download/)
  - jscholes 6y ago
    > I test my own creations on Linux with Orca Thank you for carrying out testing. I should note that, unlike the probable majority of HN readers, MacOS and Linux are nowhere near as popular among blind users as Windows. MacOS has a decent market share (around 10-12 percent or so), but the number of screen reader users on Linux is almost insignificant.
causality0 6y ago
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 6y ago
  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.
  - causality0 6y ago
    Well hot damn, it works. Fascinating how the TTS voice is completely different from, and about a thousand times more pleasant than, any of the standard voices.
    - miki123211 6y ago
      According to Google employees, this goes through the cloud, so can be much, much better, while sacrificing responsiveness, which is crucial for a normal screen reader.
      - causality0 6y ago
        To me the older on-device was much more pleasant than the current one. In fact almost every alternative TTS system like the old SVOX and Ivona voices sound better than the current selection of Google ones. It's like someone turned the treble knob up and no matter which voice you pick they sound screechy.
  - dheera 6y ago
    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"
Pxtl 6y ago
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?
- Grumbledour 6y ago
  While I can't speak for the author, I have a few blind friends who use screen readers. They often access a list of all links in a page to navigate, but naturally, you get only the text of the link in this list. I suspect the same problems occurs if you use tab to go from link to link. Surrounding content is of course not read aloud unless requested.
- pbhjpbhj 6y ago
  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 6y ago
    Of note, you can use the ARIA label attribute to customize this for many users: https://www.deque.com/blog/text-links-practices-screen-readers/ https://www.deque.com/blog/text-links-practices-screen-reade...
- onion2k 6y ago
  In addition to the points that pbhjpbhj and Grumbledour have made, in badly written HTML the 'Click Here' link might be in a completely different part of the DOM tree to the rest of the content. For example, a developer could create a <p>Content</p> at the top of the DOM tree, and a <button>Click Here</button> at the end, and then use "position: absolute" to move the button next to the content. Visually they're next to each other but if you strip out the styling they're miles apart. Screenreaders do a decent job of trying to figure out what link goes with the text but understanding HTML is a crapshoot at the best of times.
- 6y ago
brainless 6y ago
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 6y ago
  Is there a "rationale" for this sort of thing? It seems quite silly to do that, on a first look.
  - nargek 6y ago
    At the end it looks the "same" for a normal user. Semantics in html is butchered a lot (remember the alignment with tabs ?)
  - rimliu 6y ago
    Too lazy to learn is one of the reasons. Should use framework/lib is the other. Now people think that by not using frameworks you will have messy code and happily create even bigger mess of frameworks rope spaghetti.
    - enriquto 6y ago
      Ah, "frameworks rope spaghetti", the best kind of spaghetti!
  - jtxx 6y ago
    I only use spans and divs. header, paragraph, etc elements have intrinsic styles I rarely want, esp wrt margins
    - nlightcho 6y ago
      You should use a CSS reset stylesheet like https://github.com/necolas/normalize.css https://github.com/necolas/normalize.css instead.
justinlloyd 6y ago
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 6y ago
  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 6y ago
    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.
frereubu 6y ago
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?
- amelius 6y ago
  But shouldn't there be software that treats the entire page as an image, and from there reconstruct what parts are important? Web design practices are far too unpredictable, and you can't rely on them to extract semantics.
- Grumbledour 6y ago
  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.
kijin 6y ago
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 6y ago
  Facebook has been auto-alt tagging images for years
cammil 6y ago
Why don't screen readers have image recognition neutral nets? Seems like an easy win to me.
- maeln 6y ago
  Some website (Facebook is an example) automatically analyse image to create an alt attribute. But that is far from perfect.
mlang23 6y ago
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 6y ago
  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 6y ago
    You will create regulatory capture as small website owners who make no money from their websites will be the ones affected the worst.
kovac 6y ago
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 6y ago
  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.
tobyhinloopen 6y ago
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 6y ago
  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.
sradman 6y ago
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
KineticLensman 6y ago
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?
chrismorgan 6y ago
“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 6y ago
  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.
justusthane 6y ago
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/
lacker 6y ago
I wonder if you could embed a modern image-recognition AI in browsers, to create image descriptions when they are missing.
- MaxLeiter 6y ago
  Facebook does this. Example of a picture on my feed of some friends outside: "Image may contain: 5 people, including <Redacted>, people standing, sky, cloud, shorts, twilight and outdoor""
- RobMurray 6y ago
  Microsoft Narrator added this feature in 2017: https://mspoweruser.com/windows-10s-narrator-can-now-automatically-write-photo-captions/ https://mspoweruser.com/windows-10s-narrator-can-now-automat...
brian_herman__ 6y ago
Auto playing audio and video is annoying period.
every 6y ago
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?"...
MaxLeiter 6y ago
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.
WhyNotHugo 6y ago
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.

445 points by Garbage 6y ago

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 6y ago
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 6y ago
  > 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 6y ago
    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.
  - the_other 6y ago
    My screen reader experience is old and rusty, so I can’t reply on that basis. However, I think it’s valuable to ask yourself “why does a non-visual user need to know the company logo is here?”.
- captn3m0 6y ago
  > read out an image’s alt text with the text from the nearest block level container. never thought of it this way, but this makes sense. Thanks.
- ecmascript 6y ago
  Sure that sounds nice, but what to do with user uploaded images? I cannot describe them with words since they can be whatever. Is "user uploaded photo" good enough for example? The best would of course be to analyze the contents of the photo but that is simply not realistic for the stuff I work on.
  - detaro 6y ago
    that's of course not perfect, but you can give users the option to provide their own description. (Twitter does it, altough they've sadly hidden it well, so only some niche bubbles do it)
    - ecmascript 6y ago
      I can do it, but for the app I work on I believe very few would use such a feature. But I'll think about implementing it if I have the time in the future
  - the_other 6y ago
    In the context of your application, does it matter? (I assume it does, but it’s worth asking the question because all apps, and pages in apps are different). What are the images for? Do they have text accompanying them? Are there themes to the images? Can you convey the same meaning and intent another way? Can you educate your users to help you out? The answers to these questions should guide your solutions to access requirements. Alt text isn’t only about providing a description of an image, it’s one tool in a toolbox to improve access to information.

IMAYousaf 6y ago

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.

deleted 6y ago
[deleted]
menybuvico 6y ago
As a rule of thumb, make sure the site works with Lynx. If it does, then you probably won't need anything but minor adjustments.
- anilakar 6y ago
  Or browse the site with CSS styling turned off. Firefox also has an accessibility developer mode (Shift-F12) but it mostly focuses on technical issues.
bebna 6y ago
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 6y ago
  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.

appleiigs 6y ago

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 6y ago
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 6y ago
  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 6y ago
    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.

axegon_ 6y ago

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.

_-___________-_ 6y ago
Could you expand on what you mean? Is there some trend of writing English in Cyrillic script that I've completely missed?
- nordsieck 6y ago
  >> this in particular I assume he's talking about using unicode characters that visually similar to english letters, but are not actually english letters.
- axegon_ 6y ago
  Not Cyrillic in particular, all scripts(I just happen to have Cyrillic layout hence the reason I used it for my example), but if you go around blogs, twitter or other websites, there are tons and tons of people mixing those up to look fancy or whatever it is they are trying to do. It's a nightmare for those of us who know several alphabets and an even bigger nightmare for those who need to use screen readers.
  - _-___________-_ 6y ago
    Ah, OK. I haven't seen this much outside of screen names in some games. If people are going to do strange things like this en masse, perhaps the screen readers could implement some normalisation rules.
    - axegon_ 6y ago
      Something of the sorts could be implemented but this would be an attempt to make something idiot-proof. And from my experience, nothing can ever be idiot-proof. To quote Mark Twain: "they will drag you down to their level and beat you with experience".

gostsamo 6y ago

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

_-___________-_ 6y ago
Sometimes stuff gets reposted, and sometimes one or other of the reposts gets a bigger discussion or more upvotes, maybe because of the time of day, or maybe because of other things getting discussed that day that change the context, or whatever. I don't think it's really a problem?
- gostsamo 6y ago
  Besides the self-validation, not a problem as far as the information reaches people.
gervwyk 6y ago
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 6y ago
  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.

deleted 6y ago

[deleted]

Raed667 6y ago

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.

CJefferson 6y ago
I know a few people who use VoiceOver on Mac with standard safari. You can also turn it on on an iPad or iPhone, if you have one lying around.
- Raed667 6y ago
  This doesn't look too bad! Thanks!
ebg13 6y ago
JAWS. It's costly, though.
- RobMurray 6y ago
  Please test with NVDA. It is free and very popular. Jaws is becoming less and less relevant mainly due to it's cost, and the fact that NVDA is perfectly usable for most things. If you do want to test with jaws, there is a demo that works for 40 minutes. By far the easiest screen reader to test with is Microsoft Narrator because it is included with windows.
aloisdg 6y ago
I test my own creations on Linux with Orca (maintained at https://gitlab.gnome.org/GNOME/orca https://gitlab.gnome.org/GNOME/orca) and on Windows I rely on NVDA (downloadable freely at https://www.nvaccess.org/download/ https://www.nvaccess.org/download/)
- jscholes 6y ago
  > I test my own creations on Linux with Orca Thank you for carrying out testing. I should note that, unlike the probable majority of HN readers, MacOS and Linux are nowhere near as popular among blind users as Windows. MacOS has a decent market share (around 10-12 percent or so), but the number of screen reader users on Linux is almost insignificant.

causality0 6y ago

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 6y ago
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.
- causality0 6y ago
  Well hot damn, it works. Fascinating how the TTS voice is completely different from, and about a thousand times more pleasant than, any of the standard voices.
  - miki123211 6y ago
    According to Google employees, this goes through the cloud, so can be much, much better, while sacrificing responsiveness, which is crucial for a normal screen reader.
    - causality0 6y ago
      To me the older on-device was much more pleasant than the current one. In fact almost every alternative TTS system like the old SVOX and Ivona voices sound better than the current selection of Google ones. It's like someone turned the treble knob up and no matter which voice you pick they sound screechy.
- dheera 6y ago
  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"

Pxtl 6y ago

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?

Grumbledour 6y ago
While I can't speak for the author, I have a few blind friends who use screen readers. They often access a list of all links in a page to navigate, but naturally, you get only the text of the link in this list. I suspect the same problems occurs if you use tab to go from link to link. Surrounding content is of course not read aloud unless requested.
pbhjpbhj 6y ago
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 6y ago
  Of note, you can use the ARIA label attribute to customize this for many users: https://www.deque.com/blog/text-links-practices-screen-readers/ https://www.deque.com/blog/text-links-practices-screen-reade...
onion2k 6y ago
In addition to the points that pbhjpbhj and Grumbledour have made, in badly written HTML the 'Click Here' link might be in a completely different part of the DOM tree to the rest of the content. For example, a developer could create a <p>Content</p> at the top of the DOM tree, and a <button>Click Here</button> at the end, and then use "position: absolute" to move the button next to the content. Visually they're next to each other but if you strip out the styling they're miles apart. Screenreaders do a decent job of trying to figure out what link goes with the text but understanding HTML is a crapshoot at the best of times.
6y ago

brainless 6y ago

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 6y ago
Is there a "rationale" for this sort of thing? It seems quite silly to do that, on a first look.
- nargek 6y ago
  At the end it looks the "same" for a normal user. Semantics in html is butchered a lot (remember the alignment with tabs ?)
- rimliu 6y ago
  Too lazy to learn is one of the reasons. Should use framework/lib is the other. Now people think that by not using frameworks you will have messy code and happily create even bigger mess of frameworks rope spaghetti.
  - enriquto 6y ago
    Ah, "frameworks rope spaghetti", the best kind of spaghetti!
- jtxx 6y ago
  I only use spans and divs. header, paragraph, etc elements have intrinsic styles I rarely want, esp wrt margins
  - nlightcho 6y ago
    You should use a CSS reset stylesheet like https://github.com/necolas/normalize.css https://github.com/necolas/normalize.css instead.

justinlloyd 6y ago

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 6y ago
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 6y ago
  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.

frereubu 6y ago

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?

amelius 6y ago
But shouldn't there be software that treats the entire page as an image, and from there reconstruct what parts are important? Web design practices are far too unpredictable, and you can't rely on them to extract semantics.
Grumbledour 6y ago
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.

kijin 6y ago

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 6y ago
Facebook has been auto-alt tagging images for years

cammil 6y ago

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

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

mlang23 6y ago

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 6y ago
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 6y ago
  You will create regulatory capture as small website owners who make no money from their websites will be the ones affected the worst.

kovac 6y ago

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 6y ago
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.

tobyhinloopen 6y ago

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 6y ago
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.

sradman 6y ago

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

KineticLensman 6y ago

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?

chrismorgan 6y ago

“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 6y ago
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.

justusthane 6y ago

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/

lacker 6y ago

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

MaxLeiter 6y ago
Facebook does this. Example of a picture on my feed of some friends outside: "Image may contain: 5 people, including <Redacted>, people standing, sky, cloud, shorts, twilight and outdoor""
RobMurray 6y ago
Microsoft Narrator added this feature in 2017: https://mspoweruser.com/windows-10s-narrator-can-now-automatically-write-photo-captions/ https://mspoweruser.com/windows-10s-narrator-can-now-automat...

brian_herman__ 6y ago

Auto playing audio and video is annoying period.

every 6y ago

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?"...

MaxLeiter 6y ago

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.

WhyNotHugo 6y ago

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.