WebAIM - Web Accessibility In Mind

E-mail List Archives

Thread: Proper Way to Render Table for Reading Cells

for

Number of posts in this thread: 5 (In chronological order)

From: Christopher Koeber
Date: Mon, Jul 06 2015 10:22AM
Subject: Proper Way to Render Table for Reading Cells
No previous message | Next message →

Hello,

So this may be a long post, hope folks can hear me out.

As I mentioned in prior posts, I am developing a webpage for IE8 and JAWS
11. I need to not only have all elements of the webpage read but the
application completely usable; any disabled user can perform the
functionality as a sighted/non-disabled user can.

What I have is the HTML output below. So far, in IE 8 / Jaws 11 I can get
most of everything read from the output below BUT I have the following
problems:

- Table Cell values are not being read at all. All I get is something
like "Row 5 Cell 1". As you will see below, I have additional content that
I want only the screen reader (JAWS) to read and not shown. So I have
content wrapped inside a DIV with a class that I want only the JAWS reader
to pick up. Within JAWS 11 and IE 8 how can I get the content in the cells
to be read? In the output below you will note that I have the content that
I want the JAWS reader to read which describes exactly what the cell
contains.
- Related to the table, for non-disabled users folks can select the row
using a mouse and then easily click on a set of functions related to the
row (EDIT, EXPORT, DELETE, etc.) What I want is an easy way for disabled
folks to be able to have this functionality. Ideally I want to have a
hotkey of some kind so that people can just press a key on their keyboard
and a function within JavaScript fires off that executes the said function.
Via another forum I found that screen-readers take over most of the
shortcuts, however. What is the best alternative I can offer disabled folks
while keeping the functionality for sighted folks the same?
- The labels are not being read for the Text fields. All I here when I
tab to a text field is "Type in Text".

Thank you for all of your time, I have linked the HTML output below; if
needed I can post additional content, etc. if needed.

Note; this isn't all of the output, just the HTML output as this is an
internal application. Content sanitized.
Regards,

Christopher Koeber

---------------------------------------------------------------------------------------------------------------------
Link to Text File containing HTML Output
​---------------------------------------------------------------------------------------------------------------------​

http://csmadeeasy.chriskoeber.com/pluginfile.php?file=/311/mod_page/content/2/HTMLOutput.html

From: Moore,Michael (HHSC)
Date: Mon, Jul 06 2015 10:39AM
Subject: Re: Proper Way to Render Table for Reading Cells
← Previous message | Next message →

A couple of quick tests to make sure that JAWS is really behaving the way that you think it is.

If it is not reading the form field labels - make sure that you are in forms mode. JAWS 11 was pretty finicky about switching modes automatically. Also when in the field use JAWSKey+up arrow to read the line again - this is the say current line command.

For the table make sure that you are navigating using the table reading commands. Cntrl+alt+arrows should provide enough for your purposes. Also make sure that you are out of Forms mode. Go into settings and turn on enter forms mode manually so that you can toggle reliably.

If you are relying on WAI-ARIA support keep in mind that both Freedom Scientific and IE have done a lot to add support since IE8 and JAWS 11 so you may find that there are WAI-ARIA features that are not supported.

Mike Moore
Accessibility Coordinator
Texas Health and Human Services Commission
Civil Rights Office
(512) 438-3431 (Office)
(512) 574-0091 (Cell)


-----Original Message-----
From: WebAIM-Forum [mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of Christopher Koeber
Sent: Monday, July 06, 2015 11:22 AM
To: WebAIM Discussion List
Subject: [WebAIM] Proper Way to Render Table for Reading Cells

Hello,

So this may be a long post, hope folks can hear me out.

As I mentioned in prior posts, I am developing a webpage for IE8 and JAWS 11. I need to not only have all elements of the webpage read but the application completely usable; any disabled user can perform the functionality as a sighted/non-disabled user can.

What I have is the HTML output below. So far, in IE 8 / Jaws 11 I can get most of everything read from the output below BUT I have the following
problems:

- Table Cell values are not being read at all. All I get is something
like "Row 5 Cell 1". As you will see below, I have additional content that
I want only the screen reader (JAWS) to read and not shown. So I have
content wrapped inside a DIV with a class that I want only the JAWS reader
to pick up. Within JAWS 11 and IE 8 how can I get the content in the cells
to be read? In the output below you will note that I have the content that
I want the JAWS reader to read which describes exactly what the cell
contains.
- Related to the table, for non-disabled users folks can select the row
using a mouse and then easily click on a set of functions related to the
row (EDIT, EXPORT, DELETE, etc.) What I want is an easy way for disabled
folks to be able to have this functionality. Ideally I want to have a
hotkey of some kind so that people can just press a key on their keyboard
and a function within JavaScript fires off that executes the said function.
Via another forum I found that screen-readers take over most of the
shortcuts, however. What is the best alternative I can offer disabled folks
while keeping the functionality for sighted folks the same?
- The labels are not being read for the Text fields. All I here when I
tab to a text field is "Type in Text".

Thank you for all of your time, I have linked the HTML output below; if needed I can post additional content, etc. if needed.

Note; this isn't all of the output, just the HTML output as this is an internal application. Content sanitized.
Regards,

Christopher Koeber

---------------------------------------------------------------------------------------------------------------------
Link to Text File containing HTML Output ​---------------------------------------------------------------------------------------------------------------------​

BLOCKEDcsmadeeasy[.]chriskoeber[.]com/pluginfile[.]php?file=/311/mod_page/content/2/HTMLOutput[.]htmlBLOCKED

From: Christopher Koeber
Date: Mon, Jul 06 2015 12:58PM
Subject: Re: Proper Way to Render Table for Reading Cells
← Previous message | Next message →

Hey,



Thank you for your feedback, what we have discovered is that when using the
commands in IE 8 and JAWS 11 it reads the cell contents after issuing the
command. Is there a way that JAWS can do this automatically? I couldn't
find the setting.



Also, not sure if anyone can answer the question about cell "editing", I'd
like to either use hotkeys within the web browser using JavaScript or
accept any other recommendations on replicating the functionality for
disabled folks to be able to "select" a table row to perform actions after
the fact.



For non-disabled users they can simply select a table row with a mouse; the
table row then has specific classes added for each cell.



Thank you for your excellent feedback and help.


​

Regards,

Christopher Koeber

On Mon, Jul 6, 2015 at 12:39 PM, Moore,Michael (HHSC) <
= EMAIL ADDRESS REMOVED = > wrote:

> A couple of quick tests to make sure that JAWS is really behaving the way
> that you think it is.
>
> If it is not reading the form field labels - make sure that you are in
> forms mode. JAWS 11 was pretty finicky about switching modes automatically.
> Also when in the field use JAWSKey+up arrow to read the line again - this
> is the say current line command.
>
> For the table make sure that you are navigating using the table reading
> commands. Cntrl+alt+arrows should provide enough for your purposes. Also
> make sure that you are out of Forms mode. Go into settings and turn on
> enter forms mode manually so that you can toggle reliably.
>
> If you are relying on WAI-ARIA support keep in mind that both Freedom
> Scientific and IE have done a lot to add support since IE8 and JAWS 11 so
> you may find that there are WAI-ARIA features that are not supported.
>
> Mike Moore
> Accessibility Coordinator
> Texas Health and Human Services Commission
> Civil Rights Office
> (512) 438-3431 (Office)
> (512) 574-0091 (Cell)
>
>
> -----Original Message-----
> From: WebAIM-Forum [mailto: = EMAIL ADDRESS REMOVED = ] On
> Behalf Of Christopher Koeber
> Sent: Monday, July 06, 2015 11:22 AM
> To: WebAIM Discussion List
> Subject: [WebAIM] Proper Way to Render Table for Reading Cells
>
> Hello,
>
> So this may be a long post, hope folks can hear me out.
>
> As I mentioned in prior posts, I am developing a webpage for IE8 and JAWS
> 11. I need to not only have all elements of the webpage read but the
> application completely usable; any disabled user can perform the
> functionality as a sighted/non-disabled user can.
>
> What I have is the HTML output below. So far, in IE 8 / Jaws 11 I can get
> most of everything read from the output below BUT I have the following
> problems:
>
> - Table Cell values are not being read at all. All I get is something
> like "Row 5 Cell 1". As you will see below, I have additional content
> that
> I want only the screen reader (JAWS) to read and not shown. So I have
> content wrapped inside a DIV with a class that I want only the JAWS
> reader
> to pick up. Within JAWS 11 and IE 8 how can I get the content in the
> cells
> to be read? In the output below you will note that I have the content
> that
> I want the JAWS reader to read which describes exactly what the cell
> contains.
> - Related to the table, for non-disabled users folks can select the row
> using a mouse and then easily click on a set of functions related to the
> row (EDIT, EXPORT, DELETE, etc.) What I want is an easy way for disabled
> folks to be able to have this functionality. Ideally I want to have a
> hotkey of some kind so that people can just press a key on their
> keyboard
> and a function within JavaScript fires off that executes the said
> function.
> Via another forum I found that screen-readers take over most of the
> shortcuts, however. What is the best alternative I can offer disabled
> folks
> while keeping the functionality for sighted folks the same?
> - The labels are not being read for the Text fields. All I here when I
> tab to a text field is "Type in Text".
>
> Thank you for all of your time, I have linked the HTML output below; if
> needed I can post additional content, etc. if needed.
>
> Note; this isn't all of the output, just the HTML output as this is an
> internal application. Content sanitized.
> Regards,
>
> Christopher Koeber
>
>
> ---------------------------------------------------------------------------------------------------------------------
> Link to Text File containing HTML Output
> ​---------------------------------------------------------------------------------------------------------------------​
>
>
> BLOCKEDcsmadeeasy[.]chriskoeber[.]com/pluginfile[.]php?file=/311/mod_page/content/2/HTMLOutput[.]htmlBLOCKED
> > > at http://webaim.org/discussion/archives
> > > > > >

From: _mallory
Date: Tue, Jul 07 2015 4:23AM
Subject: Re: Proper Way to Render Table for Reading Cells
← Previous message | Next message →

On Mon, Jul 06, 2015 at 02:58:39PM -0400, Christopher Koeber wrote:
> Hey,
> Also, not sure if anyone can answer the question about cell "editing", I'd
> like to either use hotkeys within the web browser using JavaScript or
> accept any other recommendations on replicating the functionality for
> disabled folks to be able to "select" a table row to perform actions after
> the fact.

How are these selectable in the first place? contenteditable?

> For non-disabled users they can simply select a table row with a mouse; the
> table row then has specific classes added for each cell.

You can be non-disabled and still have no good mouse. Can you make
the cells be focusable? Or the table itself and once focussed, listen
for arrow keys or whatever spreadsheet people tend to use to move
"focus" around cells. You could then either contenteditable+real focus
or onfocus switch the cell info for a real input with current cell
info as the current value.
Since switching around DOM stuff is slow, probably waiting for someone
to hit ENTER would be better to switch in an input/textarea.

_mallory

From: Jonathan Avila
Date: Tue, Jul 07 2015 7:30AM
Subject: Re: Proper Way to Render Table for Reading Cells
← Previous message | No next message

> I'd like to either use hotkeys within the web browser using JavaScript
> or accept any other recommendations on replicating the functionality
> for disabled folks to be able to "select" a table row to perform
> actions after the fact.

Remember that the page/script won't know where the virtual/browser cursor is. So you will actually have to provide some sort of focusable mechanism as _mallory indicates even if you create hotkeys unless the hotkeys are hard coded to specific rows. In addition, JAWS is different from other screen readers like NVDA and Window-Eyes that it only focuses controls like links on tab while other screen readers will focus them when you reach them via arrow keys in browse mode.

Jonathan

-- 
Jonathan Avila 
Chief Accessibility Officer
SSB BART Group 
= EMAIL ADDRESS REMOVED =
Phone 703.637.8957  
Follow us: Facebook | Twitter | LinkedIn | Blog | Newsletter

-----Original Message-----
From: WebAIM-Forum [mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of _mallory
Sent: Tuesday, July 07, 2015 6:24 AM
To: WebAIM Discussion List
Subject: Re: [WebAIM] Proper Way to Render Table for Reading Cells

On Mon, Jul 06, 2015 at 02:58:39PM -0400, Christopher Koeber wrote:
> Hey,
> Also, not sure if anyone can answer the question about cell "editing",
> I'd like to either use hotkeys within the web browser using JavaScript
> or accept any other recommendations on replicating the functionality
> for disabled folks to be able to "select" a table row to perform
> actions after the fact.

How are these selectable in the first place? contenteditable?

> For non-disabled users they can simply select a table row with a
> mouse; the table row then has specific classes added for each cell.

You can be non-disabled and still have no good mouse. Can you make the cells be focusable? Or the table itself and once focussed, listen for arrow keys or whatever spreadsheet people tend to use to move "focus" around cells. You could then either contenteditable+real focus or onfocus switch the cell info for a real input with current cell info as the current value.
Since switching around DOM stuff is slow, probably waiting for someone to hit ENTER would be better to switch in an input/textarea.

_mallory