Support Forum Softcomplex logo
About Us  | Services  | Download  | Order  | Support  | |
| Search | Today's Posts | Stats | Board Rules | Not logged in [ Login | Register ]
go to bottom
Last active: Never

Printable Version | Subscribe | Add to Favourites   Post new thread
Author: Subject: Accesibility
chisholmd
Junior Member

Posts: 7
Registered: 6/14/2006
Location: Canada
Member Is Offline
posted on 6/14/2006 at 11:52 AM Reply With Quote
Accesibility


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
View User's Profile View All Posts By User U2U Member
tigra
Administrator

Posts: 2049
Registered: 6/17/2002
Location: US, CO
Member Is Offline
posted on 6/14/2006 at 07:29 PM Reply With Quote

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.
View User's Profile View All Posts By User U2U Member
chisholmd
Junior Member

Posts: 7
Registered: 6/14/2006
Location: Canada
Member Is Offline
posted on 6/14/2006 at 09:10 PM Reply With Quote
Unneccessary


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,
View User's Profile View All Posts By User U2U Member
chisholmd
Junior Member

Posts: 7
Registered: 6/14/2006
Location: Canada
Member Is Offline
posted on 6/20/2006 at 10:00 AM Reply With Quote
Accessibility


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
View User's Profile View All Posts By User U2U Member
Post new thread

Related Links:
Product Page
Product Demonstrations Live Demos
Simple
XP-styled
3D designed
Product Documentation Documentation
Documenation Page
Change Log
Support Forum Technical Support
Support Forum
Customer Care System
Order Now ORDER NOW!
Add to Cart
View Cart

Go To Top


Powered by XMB 1.9.1 Nexus
Developed By Aventure Media & The XMB Group © 2002-2004