How I use screen reader

These are notes from one user, me. Do not think of it as all screen reader users use screen readers same way I do! Consider this as a living document.

I am not blind, just dyslexic in a weird way compared to others and scientific papers. I can read serif fonts quite easily but I have great problems with sans serifs with rich line spacing. In those cases I see white noise, words on different lines appear to me on the same line, and some times I get even nauseous.

With this disability I don’t need to use screen reader to navigate through content and navigation. I need help with seeing the content. My preferred web browser is Firefox which isn’t, from my experience fully compatible with VoiceOver (VO), so when I visit web page that I have problems with I open that page in Safari.

When browsing the web it’s easy to get lost especially when you use screen reader. VO highlights the are it converts to speech but some items aren’t visible and makes it difficult. Another thing I find obnoxious are websites where authors did think through the heading structure. This can be confusing because usually when using VO I am relying on the audio input from computer and don’t watch the screen carefully. The reason why in this sound is preferred over visual is speed. If I wanted to spend on it more time than necessary I would try to read it.

Also I am not very skilled user at the moment I can use links, next and previous passage and how to enter and exit an element. So far this was all I needed. I expect that with time I will learn more key combinations to be more effective.

Notes from 10/20/15

Today I “read” a post Future reading and there were things that were complicating accessibility.

  1. No skip to the content link
  2. Drop caps with extra mark up
  3. Interruptions

Number 1 is problematic because it takes time and energy and in the end it’s plain annoying to click through dozens of items. What is pure evil is side bar before content. For a long time we have floats to deal with this and recently we have got flex box for this. We will have to wait a little longer for CSS grid.

Drop caps using <span>  element as from an example on CSS-tricks:

can be confusing because the VoiceOver will read separately L and the rest of the paragraph. There’s a solution which won’t work on IE8 and older but let’s face it, there are probably more screen reader users than IE8 and older users.

And last, interruptions like the one in the red rectangle is (1)Long paragraph of text with a div where are links to other popular post annoying and (2) confusing. It is annoying because I want to read the post and this interrupts me. There’s almost no way in hell I would click on any of the links. I sometimes open links which are related to the post I’m reading.

It’s confusing because there’s no warning that the post continues after this box. One of the solutions would be to use aria-hidden or role to hide it from assistive technology. The other solution would be adding information that this is an interuption:

Unfortunately this doesn’t work with Firefox and VoiceOver, but it works with Safari and VoiceOver.

Later today I’ll try it on Windows with Firefox and NVDA. So I tried this solution on both, Chrome and Firefox, NVDA ignores the title  as well aria-description . At the moment I don’t know universal solution to this problem.

There’s also a problem with mixed heading I encountered somewhere else, actually on more than one website. The styles for those headings were appropriate for the intended structure.

There are problems with this in my opinion because to me this is confusing. Specification allows this and I’ve heard some front-end developers shaming those who try to make their markup as accessible as possible that they get stuck in the past. I don’t know how many of them use screen reader on regular or semi-regular basis. To me clear overall heading structure is more important than following the newest trends.