Greetings!
I have been tasked with making our product 508 Compliant. One of the Standards that our pages have to comply with is that a web page has to be able to work correctly if all CSS has been stripped.
Our Dialog boxes are very simple. They are opened by clicking a hyperlink labeled 'Expand'. They have the label, the X to close the box, and the body of the box simply displays the full text of a field found on the main page.
I have discovered that when you strip out the CSS from the page, the label and X are displayed at the bottom of the page as <label>close with the word 'close' being a hyperlink. The 'Expand' hyperlink still displays in the relative position where it can usually be found.
So it would look like this
Field 1 <value of field 1> Expand
Field 2 <value of field 2> Expand
Field 3 <value of field 3> Expand
Field 4 <value of field 4> Expand
<some amount of fields for the web page>
Label for Field 1’s Dialog Box close
Label for Field 2’s Dialog Box close
Label for Field 3’s Dialog Box close
Label for Field 4’s Dialog Box close
It should be noted at this point everything is still keyboard accessible, and I can tab and shift-tab through all these fields.
My problem comes from when a User activates the Expand hyperlink while CSS has been stripped out. If the Expand hyperlink is clicked on for, say, Field 2, the bottom of the page changes to look like this…
Label for Field 1’s Dialog Box close
Label for Field 3’s Dialog Box close
Label for Field 4’s Dialog Box close
Label for Field 2’s Dialog Box close
<value for field 2>
At this point, it seems the Focus moves to the ‘close’ hyperlink for the Field 2’s Dialog Box (notice that the Label and close hyperlink for Field 2 has moved to be the last item in the displayed list).
And this is where my problem happens. If a User then at any time tabs into the ‘close’ hyperlink for Field 4’s Dialog Box (yes, Field 4, not Field 2), the Focus totally disappears and goes into limbo. Even if I click with a mouse into another field, and see the blinking cursor in that field, the keyboard no longer does anything.
Does it have something to do with the fact that Field 4 used to be the last element in the list? What happened to the keyboard navigation? Does anybody know if it is possible to make that list of labels and hyperlinks disappear from the bottom of the screen when CSS has been stripped?
Was my description confusing?
Any help would be greatly appreciated!