This is the P2PU Archive. If you want the current site, go to www.p2pu.org!

Alt Text & Universal Design

Exercise: Using a Screen Reader - please add your comments

Bryan Gould's picture
Tue, 2011-01-25 18:40

Please add your experiences and observations about using a screen reader (see course assignment #1 for details.)

Amazing resposes so far!
bg

------------------
from kfern:
 I try NVDA (http://www.*nvda*-project.org). NonVisual
Desktop Access (/NVDA/) is a free and open source screen reader for the
Microsoft Windows operating system.

First, I have activate NVDA and turn off the screen. I think it's very
difficult to understand for a beginner. NVDA voice is "very robotic", but i
think i could understand it!!

I will use NVDA a little time each day, and i will visit a web page for day,
at last.

Yours faithfully

Fernando Navarro Páez, from Spain

------------------
 from Mireia:
I use screen readers regularly in my work. I work with JAWS. I also have a
blind friend who helps me with problematic websites or flash applications.
I often get traped in some applications.
I like the options of navigation through headers and the link list, which I
think would be useful to sighted people as well.

------------------
from dsriedel:

Hello!

As a former web developer I came across accessible pages in some projects for
government or governmente related websites. But so far I have not been able
to experiment with a screen reader for visually impaired people and working
on that topic only in a course is of great interest to me.

I am on Windows 7 and have downloaded the demo of JAWS. Here is my
experience:

The install process is quite assistive so I closed my eyes during the process
when no further "click" sounds came from the application and no announcement
was made. When I opened my eyes I saw that my firewall had asked for
permission that the program can access certain resources, but no audio hint
was connected to that. How annoying! But I guess that visually impaired
people have all sound notifications enabled for all programs possible.
Hopefully all programs have audio notifications...

After all files had been copied, a reboot was necessary. Hitting "Enter" had
no effect at this time as the notification window was in the background and
so hitting "Enter" had no effect. How does someone who relies on audible
information gets notified about that?

I finished the install process and started to "play" with the screen reader
program. Opening the first website, nytimes.com, in Google Chrome was quite
irritating. Without noticing it first, I think in Chrome the screen reader
does not work. I switched to Internet Explorer 9 Beta. Here the screen reader
started happily to read everything, starting from the page title over to
every single line, element, graphic in the source code. Sadly so, he starts
with unimportant links on the top page like "Register", "Login", ...
What I do not like is that the screen reader reads out every element in the
sentence, like hyphens, dashes and brackets. But I guess that is necessary to
reflect the sentence structure for the user.

What I like a lot is the switching of languages. I have a Spanish operating
system and programs, am native German and read a lot in English. The screen
reader is capable most of the times to switch between those languages and
pronounciation.

The start page of nytimes.com felt too cluttered and I started using "Ins+F6"
to get find some starting point. I read the headline and then I could
navigate with arrow down or up to the next text elements or links. Same on
msn.com, selecting headlines. It stops then, which was a bit irritating, as I
expected him to read the block element, say headline, text and the link for
further reading.
When switching to another page it started to read top down again and listed
all the advertisement with URLs. That was annoying! It also reads stuff like
"onmouseover", the event statements in the HTML code. Very bad. Again, very
bad, that it reads all the graphics, whether they are for design purposes or
actually content images. But that is the fault of the
webdesigner/-programmer, not the tools fault.
You actually see how annoying it is when images do not have a good ALT text
and are used for layout and design purposes. A hail to CSS and the background
image.

In general, while reading visually on my own I thought that the screen reader
might actually be to slow. I guess there is a way to speed up the reading?

On Wikipedia I felt quite good when entering, as the cursor was directly in
the search field. Going from there the page I arrived at was quite easy to
navigate with "p", "n" and the arrow keys. It has mainly text so I guess that
is good.
After that I tried a pure flash website, 2advanced.com, which is a no go for
screen readers. Very sad, although I thought I heard of attempts by Adobe to
improve Flash regarding screen readers. Maybe 2advanced are not that
advanced...

Telling the user that a page has over 150 headings and over 200 links might
be a bit frustrating: where to start? I used "INS+F6" again to get some
orientation but selecting one of them, the page jumps visually and stops.
What next? Using arrow keys and "n" and "p" at least lets you  navigate over
and through paragraphs. What was also strange is that the reader seems to
stop within a sentence, after a certain amount of characters, although the
sentence has not finished. That makes for strange interruptions.

I also tried bund.de and zensus2011.de which are government pages and I think
they did it ok. On web.de, german commercial portal, missing or similar ALT
texts in image slideshows were annoying. For a series of 8 images they used
the same alt text which actually only said to which topic the images belonged
but not what was visible on the image. Not so on the zensus2011.de page,
where a correct alt text for the main image was used.

Testing the screen reader on text documents like TXT or DOC was ok. But you
have to actively go line by line using the arrow key, so it does not read
paragraphs to you. Adobe PDF reader seems to be quite assistive and a dialog
was shown on opening a PDF document to configure the reader for screen reader
use. Sadly, only the tabbable items were read, not the assistive text between
the options... So it seems, that when the PDF does not contain labels, the
program tries to scan through the document and make them available or
something. Not sure what that tried to do, as the PDFs I tried were derived
from graphics programs and powerpoint and so it read "graphic", "graphic" all
the time. Navigating was sheer impossible and annoying. But the presention in
PDF was read page by page, switching automatically, which is nice, when it
reads some useful text.

The big question with which I come out of this little experiment now is: how
the heck do you navigate, use the site navigation? Why wasn't this
highlighted somehow to the user? I found out how to use a link, but in a page
of over 200, how do you find the navigation?

I hope I can participate in this course and learn more about this topic and
the use of screen readers.

Regards,
Dennis Riedel

------------------
from verve294:
 
So, I downloaded Jaws and couldn't install it. I tried
MagicEyes instead and that worked. As I'm typing this it's saying every
letter that I'm writing, and I'm typing faster that it can talk, and it's
driving me nuts. I thought I'd turned down the keyboard voice, but apparently
not. Okay, I figured out how to change the program so it only read the words
as I'm typing. I frequently work with people with disabilities and at times
recieve emails from people whom I know use JAWS. I'll admit I've thought
about what it would be like to write an email with such an application but I
never actually tried it.

I've started by looking at my gmail page. I don't think I have magic eyes set
up well enough to do anything in gmail without "peeking". I also visited the
webpage of the non-profit I work for thinking that would be an easy place to
start - our website is suppose to be very accessible. I probably have no idea
what I'm doing in magic eyes (or, lord forbid our site isn't all that
accessible) because I couldn't navigate it all that well. It didn't pick up
on some alt text I think we have - but now I'm going to go back and make
sure.

I also normally watch TV just to have some sound in the background while I'm
working. Not so much anymore. I can't hear both at the same time, even if one
is just meant to be white noise.

Apparently Facebook site is filled with graphics and nothing more. When I tab
through I get nothing on the screenreader, and mousing over names and profile
images in my news feed leads to the computer blaring "graphic" at me
repeatedly.
Big discovery when I open a "context" menu I never noticed that there were
"hotkeys" within that menu in Chrome. I can just hit "a" to "save as" when I
have the menu open? How cool is that?

I spent a lot of time reading the manual for magic eyes, but I normally
follow my reading by mousing over the line I'm on to keep track of where I
am. That lead to window eyes to "helping" me read and making it hard to read
what was going on. I could have turned it off, but that seemed like
cheating.

Also, P2PU is pronounced P 2 Poo by the screen reader, immature, I'm sure,
but still funny when it said it.

I did look at a Word Document I had, a highly formatted grant application on
my desktop. It seemed to handle that well and also picked up some of the
formatting and sections, announcing those to me.

Honestly, this is taught me I have a lot to learn and that I have no idea how
to run a screen reader. I'd at least like to know how to use one so when I
edit our website, develop marketing materials like emails and other documents
I can keep in mind how to make them accessible. I'm incredibly excited for
this class. I've glanced at accessibility standards in the past but have a
hard time absorbing some of the information there.

Thank you

------------------
from vomastic:
I downloaded the screen readers at work.  By the time my
computer reboots and goes through its security routines, the trial period has
just about run out on Windows Eyes. Will try again later.  JAWS worked very
well, better than I expected.  I even tried a PDF that I knew was not tagged
and it read it very well.  Not surprisingly, sites with many links are tough
to navigate while those with simpler layouts are relatively easy.  At this
point though, much is user error, trying to get used to the readers.

------------------
from azeckoski:

I tried using the Apple VoiceOver, it was difficult to say
the least. I had a very hard time just getting through the tutorial.
Using VoiceOver with chrome just does not work. I had to disable it in order
to type in this RTE as VoiceOver would not allow me to use cursor keys while
in here when in Chrome.

1) Gmail - This seems to be basically unusable with VoiceOver. I first tried
to use it with chrome. I could not get anywhere. When I used Safari I was
able to actually get into the email but actually reading it was so difficult
I gave up on it.

2) google.com - the main page is ok but the search results are awful. The
actual search box in the results page is a table and the reader gets really
confused when it tries to read it. The list of search results don't seem to
work much better as I have to go through a lot of items between the search
field and the list of results and once I get in there it was very hard for me
to figure out which result I was on

3) yahoo.com - This was only a little better than goodle but still pretty
much impossible. I could barely navigate around and it seemed like everything
went to nothing I wanted to read. There was way too much garbage on screen.

4) usgs.gov - This was actually pretty easy to figure out at the top. It got
really difficult to deal with the site after the navigation items and the
things I would have been likely to want to see (news) were hard to get into.

5) whitehouse.gov - disappointingly hard to figure this one out. The top nav
would read out all the subnav choices while going through the top level nav
items which meant it took quite awhile just to get a sense of what the top
nav choices were.  Could not figure out how to read the blog at all.

6) virginia.gov - too many "vertical line" separators made this site very
annoying to try to use. It also had a menu where each item in the menu was a
list of the sub items so it would read off each nav item as thing 1 list.

open office document) this started out OK but got difficult really quickly. I
was unable to figure out how to scroll down and was stuck on the first page.
I had to use the mouse to get to a second page and once I was there I could
not get back. I also had trouble working with the toolbar as there were far
too many choices and they were poorly described. I don't understand how
anyone could use a screenreader to actually edit a word document

------------------
from doughavens:

I've been trying to learn how to write accessible markup for some time. I am
a User Interface Designer at a small software firm and have been tasked with
bringing our existing pages up to WCAG AA standards. I am responsible for all
of the XHTML/CSS and have a team of developers cleaning up years of sloppy
work. I've dotted all the i's and crossed all the t's. Our pages are well on
our way to passing all of the accessibility tests i've found. We use
Compliance Sheriff and webaim utilities to scan all of our pages, yet when i
walk through with JAWS, i'm completely befuddled.

Now to answer the assignment. I find sites that are very cleanly coded and
simple to be the easiest to navigate using a screen reader. When structure is
css based, navigation items grouped into list items, and form fields arranged
into fieldsets, it is no trouble at all. However, I very often run into
dead-ends and confusing navigation when sites use advanced technologies like
jquery, don't label input elements and have a mess of nested tables holding
the site together. It is very frustrating and I believe that this course
would help me sort out the remaining issues I am having with bringing our
product up to accessible standards.

------------------
from lush:

Hi everybody. I was using NVDA and JAWS 12 (demo version). Window FireEyes
has a really "intrusive" form that I have to complete in order to receive my
demo copy and I did not compete it.

Here are my results so far: (I tested my own websites, out of curiosity and
then website displaying tons of info in an apparently organized way)

*RBORN.INFO*

NVDA
- "good surprises" - it reads my "skip to" links and my hidden headings. It
reads the code as I wrote it, as if JS is not in place and this way my ARIA
tab zone is read by NDVA altough the portfolio is mostly hidden. Reads the
ARIA elements in the contact form, and speaks when an element is required.
- "bad surprises" - it reads my cufon titles in a funny way, I think it's an
NVDA bug. It does not read elements.

JAWS
- "good surpirses" - reads my skip links, reads cufon the proper way. I like
the summary of headings, lists and links at the beginning of the page. Does
not start reading the page automatically like NVDA does.
- "bad surprises" - does not read ARIA and it reads the headings inside as
"application landmark" but not as heading. It does not read the Tabs JS area
as NVDA. Does not read .    It has a different way of reading the
forms to which I am not used. So it only read the labels and the submit
button.  

*EDU-APPS.MOBI*

NVDA
- "good surprises" - reads the blockquote element and the hidden text in the
video.
- "bad surprises" - none.

JAWS
- "good surprises" - It reads we have a flash element but it also reads the
hidden text explaining the video. Reads the blockquote element.
- "bad surprises" - What "file upload" means? It reads it sometimes and I do
not know what element in the code triggers this.

*CSSGALLERY.INFO*
(http://cssgallery.info/seven-days-with-titanium-%E2%80%93-day-4-%E2%80%9...)

NVDA
- "good surprises" - reads the contact & search form pretty well and the
widgets too. I see how it reads graphics without ALT in an widget for sharing
the article.
- "bad surprises" - It does not read punctuation. Heard how it read the Tweet
This iframe which goes outside CSSGallery and it has the name of the URL in
the content several times. (the URL name being really complicated in this
case)

JAWS
- "good surprises" -  Does it scroll long pages???
- "bad surprises" - sometimes when navigating with arrows it reads a "blank"
although there is nothing in the code to suggest it is someting there to be
read. Weird behaviour in the form, this time it did not read the label (there
is none) so it read the Title of the input without saying anything else
(like the fact that it's an edit field and the cursor was there so the user
could edit the field). Then it jumped to the textarea with the focus skipping
the other iput elements.

*YAHOO.COM* (how original, right? :) )

NVDA - interesting/weird reading of the top tab list (web, images, video,
local, etc) - read the tabs in pair, donno why...After finishes reading that
tab list it gets stucked until it receives some sort of keyboard input. The
left navigation is read also in a non correct way, by adding an extra
"clickable link" which goes nowhere and which is not present in the markup.
The interesting idea is that the popup windows do get read but needs keyboard
input to finally be spoken. The inner links with video stories are impossible
to listen since the videos autoplay and it's hard to reach the controls to
pause them. The controls have a shortcut and can be used by blind people. I
think this is VIMEO's bad implementation cause it's stealing the focus and I
cannot tab any more.

JAWS - it enters the forms mode directly!!! Because the search input is
focused Jaws reads directly that part and enters forms mode and I cannot get
out (donno how, actually). That is the major difference compared with NVDA's
behaviour. It reads the left menu better, it does not read an extra empty
link like NVDA does. Also the popup windows is read and you get notified when
the window is loaded and you can start reading on your own. It does not read
the content of that window automatically.

*UNIOVI.ES ( university website in Spanish )*

NVDA - the search result table is well read. Nothing weird, the website is
well coded.

JAWS - it does not speak the new page with Spanish accent. The search results
are displayed in a table and each of them is read in an unusual way: it
always inserts "on mouse over" between the words of the propositions. There
is nothing in the code to suggest such a reaction.

*ELPAIS.COM (newspaper website in Spanish)*

NVDA -  some weird numbers are read at the beginning, but I do not see
anything in the code. Might be someting related to the ads or statistics but
I am not sure.

JAWS - same as NVDA, otherwise I had to navigate with keys due to the huge
amount of info. I see in the right side they update the info every few
minutes but no screenreader anounced me that due to the way they implemented
the idea.

*PDF/Word document*

They both tend to read it the same as a web page. Read headings, lists,
tables where they exist, otherwise read whatever it is written there, in the
order of appearance. The same problem with the graphics shows up, they read
it's a graphic and they try to identify it (I do not know how, all I het is
some number..) and the only surprise I got is that in one document (written
in Spanish) Jaws switched to a Spanish accent all of a sudden. It only
happened in one PDF file out of 3 so it was a surprise. NVDA did not do the
same.

The word documents are w bit different, the moment I open them the screen
readers eneter an edit mode that I do not know how to exit and I had to
navigate with keys. But the same conclusion as the PDF, if they are
structured like the websites, they can be navigated. If not, I have to listen
to the entire document.

Comments

Wow, I see we all were a bit

Lucica Ibanescu's picture
Lucica Ibanescu
Tue, 2011-01-25 19:49

Wow, I see we all were a bit frustrated, weren't we? And the question was almost the same all the time: "How do they manage to read and perform normal actions every day, all day with all this chaos around?"

I think people using AT everyday have their ways to trick the bad-programmed pages and to manage to squeeze some extra info that can be helpful. I can't wait to learn how to use AT better and find my way around without struggling.

I didin't see my

Ed Degeyter's picture
Ed Degeyter
Sun, 2011-01-30 16:27

I didin't see my response:
---------------------------------------------------------------------
from edde (on Windows 7)

Experience with JAWS:
Installing JAWS was pretty painless. With JAWS selected, I went through the menu with my eyes closed. It handles menus fairly well in any application. Next I decided to look through the help docs to try and familiarize myself with the shortcuts and noticed the insert key is used quite a bit. It will certainly take some time to get use of key combinations involving the insert key. As I'm writing this email, I noticed it was repeating every letter I typed but I couldn't figure out how to get JAWS to repeat the words I had already typed. Then after trying a few sites in IE, I determined it is practically unusable in the Chrome browser. With that figured out, I tried a few sites:

msn.com:
The HTML links were handled fairly well as I tabbed through . The up and down arrows were useful for repeating the links. I couldn't figure out how to goto a link after "navigating" to it with the arrows.

bing.com
Going to this site, I was bombarded with the stats of the page, such as number of links. It then started to recite every link but I couldn't get it to select the recited link. It also took a bit to figure out why it was reciting numbers until I saw it mapped to the percentage loaded on the page.

gmail.com
I was able to get to my email but couldn't figure out how to have it recite the selected email. I figure it was the grouping that might be the problem so I tried another email web client.

mail.yahoo.com
Even after playing with insert-function menus, I couldn't figure out how to get to the link to open my first email. I can definitely see how these menus would be helpful. I also realized that capital letters are spoken in a higher pitch.

Overall, I'd be quite interested to see how well someone familiar with JAWS could navigate these pages. I'm also very curious on what these pages could of done to make this experience better. One idea I had was to hide a menu of links that only a person using a screenreader would get access to.

Next time I'm going to use my macbook to see if it better.

I believe my idea of "hidden

Ed Degeyter's picture
Ed Degeyter
Sun, 2011-01-30 18:08

I believe my idea of "hidden menu of links" is exactly what Lucica refers to as "skip to links". Is that the correct terminology for this concept? Are there references to such ideas?

Hi Ed, I believe these 2

Lucica Ibanescu's picture
Lucica Ibanescu
Sun, 2011-01-30 19:45

Hi Ed, I believe these 2 articles from Webaim might help you grasp the concept better:

http://webaim.org/techniques/css/invisiblecontent/
http://webaim.org/techniques/skipnav/

Thanks Lucica! I'm actually

Ed Degeyter's picture
Ed Degeyter
Sun, 2011-01-30 20:01

Thanks Lucica! I'm actually on vacation right now and was able to wake up early to make comments. :D I planned on reading webaim when I get back. Your links seem to be exactly what I needed. Thanks!!