Board Logo

Accesibility
chisholmd - 6/14/2006 at 11:52 AM

Hi I am working on a site that has to meet some strict accessibility guidelines.

Issues in regards to accessibility are improving usability with no mouse, and providing alternatives to color coded feedback.

I have a plan for how to make the tables more accessible and have a reasonably good javascript skill level. I could use some help in deciphering the TTP class.

My goals are:
1) Include the table in the the tabIndex of the page. This would mean adding tabIndex values to the column head links and after the last column the focus should move to the first row in the table.

2) Navigate the table using the up/dn arrows

3) additional feedback for 'highlighted' and 'marked' rows in addtion to current color changes.


Approach:
1) add a new parameter to the TTable() constructor.
Table(structure,data, look, STARTTABINDEX); The startTab value would be an integer and applied to the first colhead link as tabindex=[startindex] eachsuccsive link in the table woud be tabindex=[startindex+1]

After the final link in the table header we would need an element that can accept a tabIndex value and an onFocus event. This event would set the first data row to the 'highlighted' state. The effect for the user is that after tabbing through the column headings they would be moved to the first data row where they could use the up/dn arrows to navigate the table. If they press Tab again they would be moved to the next link after the table.

2) Would need to add a onKeyPress listener to the page and fire code on the up/dn arrows. If a row is highlighted then the event would move 'highlight' state to the next or previous row. This part should be easier then 1 above.

3) The first visible column would contain something like <span class='selector'>&bull;</span> where this class was set to 'display:none' when a row enters the highlighted state we would change the class to 'selectorON' which would change the display to inline. This should provide the effect of a bullet next to the currently highlighted row. Two different shaped bullets could be used one for indicating highlight and one for selected.

MY ISSUES:
How to get a reference to a given row or cell? There are a number of constructs TTPa, TTPc, TTPd and I can't yet tell which ones reference the content array and which ones reference the actual table. A glossary of these would help me a lot.

The docs only list three API methods, are there other API method/function I can call like TTablePRO[0].highlight[rowIndex] and/orTTablePRO[0].select[rowIndex] ?

I am trying to find a code sweeper for javascript so that I can decipher the classes a littler easier that should help a lot but if anyone has any information that could help with this, please let me know.


Dave


tigra - 6/14/2006 at 07:29 PM

As you can see in the terms and conditions the reverse engineering of the scripts is not allowed. In some cases we provide commented source to the developer license owners in return for the obligation to scramble back the code after modifications before publishing online. Submit a support ticket if you want to go this way.


chisholmd - 6/14/2006 at 09:10 PM

Thanks for the reply. As it turns out I was able to accomplish everything I wanted without needing to unravel any of the source. I'll post a link to a sample of the solution eventually so thers can benefit.

I have already purchased two regular license for TTP and was planning on purchasing a developer license to go with this current project so perhaps I should ask for the commented to source when I do.

btw:
Without trying to start to much of a debate about the usfullness or appropriateness of reverse engineering clauses in software licenses (especialy in the case of security vulnerability revealations), I did notice that the "Advanced" tigra menu script posted for some time in this forum contains lines like:
if(this.TTPc[j][this.TTPd] == this.TTPa[this.TTPd]){
Which would be impossible without first figuring out the source aka "reverse engineering"

Thanks again,


chisholmd - 6/20/2006 at 10:00 AM

I managed to provide keyboard navigation by including some <a> in a new left hand column. The default tab order of the page will take the user from the last column heading directly to the first row in the table. A bit of onfocus onlostfocus allowed me to style the row as if it had been moused over.

I also included a bullet in this column so that color was not the only indication of a highlighted row.

However, I have run into a much more serious accessibility issue. Screen readers, like JAWS, can read table data to blind people with a lot of context as long as the correct tags are used for column headings. Specifically

<thead>
<tr><th>col heading</th></tr>
</thead>
<tbody>
<tr><td>data rows...
</tbody>


Looking at the generated source for TTP it looks like it uses tbody for the header rows and not only do the column headings not use TH but the cells contain whole mini-tables to display the column heading. This makes it immpossible for me to make it 'Accessible'.

Tigra table
<table...>
<tbody>
<tr>
<td class="tabCaptionCell0">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody><tr valign="middle">
<td class="tabCaptionLink1" width="99%">
<a title="Sort this column" href="javascript:TTablePRO[0].exeSort(1,false)" class="tabCaptionLink1">Select</a>
</td>
<td></td></tr>
</tbody>
</table>
</td>
<td class="tabCaptionCell0">
<table ...............



TTP Is very nice and VERY FAST, is there any chance that the next version could be made to comply with accessibility guidelines?


The items I have found so far that would need to be addressed are:

- Caption: Support for the <caption> tag
- Proper column heading markup <thead> and <th>
- Optional keyboard navigation row. (I can share how I solved this and I am sure you could do a better job.)


Thanks


Softcomplex: http://www.softcomplex.com/
Back to forum: http://www.softcomplex.com/forum/