Hello Friends. This video is going to go
over how to make your HTML tables more
accessible. Before I get into the details
let me say that in preparation for this
video I was all over the Internet
watching videos, looking at posts and
forums, reading articles - all from what
appeared to be a large variety of
experts on the subject. The code updates
I found were based on the complexity of
the table. However once I began testing
them I quickly realized that the
solutions produced inconsistent results.
Some solutions worked in one screen
reader, but didn't work in another; or
they would work in one browser, but not
another. Consequently what I've
determined as of December 7, 2016 is that
ODE will adhere to the most basic
HTML table solutions, that are the most
consistent across various screen readers
and browsers. Next, we'll look at some
HTML, view the results, and here and
compare the results in screen readers.
The two screen readers I'm using are
NVDA and Window Eyes, and the browsers I
tested them in were Internet Explorer
and Chrome. Our example is based on a
video I was planning on using until I
found some inconsistencies. In this first
example you'll find a basic table that
does not contain header information and
we will listen to this as a baseline to
drive home the importance of including
header information in all tables. Listen
to how it sounds with the NVDA screen
reader. Column one column two peaches
column three pairs column four apples. Row
two column one New York row three canned
column two dollar two column three dollar one
column four dollar two. Row four column one
fresh, column two dollar three column three
dollar two column four dollar three row
five column one California row six canned
column two dollar one column three dollar
two column four dollar one row seven column
one fresh column two dollar two column three
dollar three column four dollar two. Now listen
to it with Window Eyes. Heading one
accessible table screen reader example
peaches pears apples New York can two
dollars one dollars two dollars fresh
three dollars two dollars three
dollars California canned one dollars two dollars
one dollars fresh two dollars three dollars two
dollars. Notice that I faded the page in
the middle during both of the examples.
That gives us a taste of what our
friends that have to use these screen
readers have to deal with. Both of the
screen readers are operating under their
default values and notice that the NVDA
reader at least repeated column two row
one dollar two. While Window Eyes only
read the value. NVDA obviously did a
better job on this first table. Now I
want to show you what the standards say
we should have done. First a couple of
things that are reasonable. You can add a
summary attribute to the table tag. The
summary contents will not be displayed,
but some screen readers will read the
summary out loud which is a benefit. You
would do this in areas where you may
have several small tables like in a
report and there's no space for the
details to display. Second you can create
a caption tag and place it directly
below the table tag. Inside the tag you
would put your description. The
description will automatically display
directly above the table and the screen
readers seem to do a good job reading
this tag. Now the next part should be
pretty direct, but I was hoping for a
better result. The and
tags are nice for structure and although
there are benefits to using them,
those benefits were not evident in this
table using the two screen readers I had.
I also added an abbreviation attribute
to the states, and didn't notice a
difference. The big surprise was the
obvious thing that most of us are used
to using, and that's the tag which
tells a cell it's a header cell. Now just
changing the to a I was expecting
to hear a different result, but when I
played all this back it didn't make a
difference in Window Eyes and NVDA
actually got worse as it repeated the
span cells saying - New York California
together when it would read the cell...
take a listen. Fruit prices in New York
and California Row one New York
California column one
peaches New York California column to
peaches pears New York California
column three pears apples New York
California column four apples. So now I'll
show you what I did that change the look
of the table slightly but the structure
still works and the table reads much
better in both screen readers. I kept the
cells since that's a standard we
should all be aware of that one. The big
structural change i made was moving the
states from to on the
affected rows which makes better logical
sense. And finally I added scope
attributes to each of the cells
identifying columns, rows, and the row
groups. And now let's listen to it first
with NVDA. Fruit prices in New York and
California. Row one state column one
state, packaging type column two packaging
type, peaches column three peaches pears
column four pears apples column five apples
New York canned row two state column one New
York, packaging type column two canned
peaches column three dollar two pears
column four dollar one apples column five
dollar two New York fresh row three
packaging type column two peaches
column three dollar three pears column four
dollar two apples column five dollar three
California canned row four state column one
California packaging type column two
canned peaches column three dollar one pears
column four dollar two apples column five
dollar one California fresh row five packaging
type column two fresh peaches
column three dollar two pears column four
dollar three apples column five dollar
two. And now with Window Eyes. Fruit
prices in New York and California State
packaging type peaches pears apples New
York canned two dollars $1 two dollars
fresh three dollars two dollars three
dollars California canned $1 two dollars
$1 fresh two dollars three dollars two.
To be fair to Window Eyes I have to
remind you that these tests were
performed with their default settings
and they should have settings that can
improve these results but I wanted you
to hear exactly how they read to users
that don't change any settings, which is
how i generally test third party
software. Ok, that's it for now. Thanks for
watching!