July 20, 2017 at 9:34 AM #365078
I’m doing accessibility testing on a non-responsive module initially developed in v16 in the latest version, v17.0.4. When testing keyboard access, I’m noticing the tab order no longer matches the reading order. Specifically, my Back and Next buttons at the title level (set to “Set reading order to last”) are in the tab order right after other buttons at the title level but before any of the page-level content. This causes focus to jump around on the page instead of more logically top-down, left-right as I have the reading order.
Examining the code using browser developer tools, it appears that the “tabindex” value of objects is being set from the top of the title downward, irrespective of the “set reading order to last” setting. This makes for a confusing interface for keyboard-only users. In v16, the tabindex attribute was not used so the tab order matched the reading order.
This seems like a bug to me, but I thought I’d ask the collective.
Thoughts?July 20, 2017 at 10:27 AM #365110
P.S. Just examined another page, this one with a Multiple Choice question. It looks like the fieldset (including the radio button input objects) is one of the first items written to the page. With no tabindex set, these are the first items on the page to receive focus. Perhaps that explains why the tabindex was added.July 20, 2017 at 10:53 AM #365118
I am having a similar problem. I followed all the guidelines – 4 navigation buttons at the top of the title in an action group with the reading order set to last. The tab order seems to have no relationship to the order I have the buttons in, and it keeps losing focus between two of the buttons even though there are no objects between any of the buttons. I can’t find any way to change it, and I am worried that the more I move things around, the more I am junking up the code. I am mostly responding to you to see if anyone from Trivantis has the answer!July 20, 2017 at 12:26 PM #365154
Another thing I have discovered looking at the source at run-time… all anchor tags have a tabindex. This includes anchor tags without an href, which are not interactive, but used as “bookmarks” to jump to. I don’t believe these anchors should have a tab index.
Andrea, this is probably what you are seeing (or not seeing) between buttons. The focus is going to these non-visible objects because they have a tabindex set. I’d have to look more closely, but it appears that every text element has an anchor tag with it.
I also noticed that the default audio media player controls have tabindex set to zero which means these controls do not receive focus until last, regardless of where the controller is placed.
I’m going to submit a ticket on this. There’s enough here that needs a closer look by the Trivantis team.July 26, 2017 at 3:41 PM #365997
Jennifer ValleyMember117 pts@jvalley4735
The problems you’re describing sound like a potential bug in the system. Would you mind submitting a support ticket with your project files so someone can take a closer look? There’s a Submit a support ticket button on this page. Look below the recently active member’s list on the right.August 1, 2017 at 8:00 AM #366458
Yes, I submitted a ticket to Support along with a sample title. Here are the three things I called out. So far, two have been deemed “bugs”. Awaiting word on the third item…
August 1, 2017 at 8:36 AM #366470
- The tab order does not match the reading order. The setting “Set reading order to last” is not honored. (declared a “BUG”)
- The default audio player controls have tabindex set to zero, which forces them to be read last no matter where the object is in the page. (declared a “BUG”)
- Anchor tags without hrefs have a tabindex set when they should not; these are non-interactive elements. The “focus” indicator is lost when tabbing through a page because it is hitting these invisible objects. (awaiting status on this one)
Jason DalrympleMember54 pts@JasonADal
On elements I need to hide from tab order, I use onShow -> RunJS:
document.getElementById(“%HTMLNAME%anc).tabindex = “-1”;
The key is knowing what suffix to add to the HTML Name. The above example is used to hide images that are decorative and do not need a description. The elements still get focus if clicked on, but for keyboard only users, this isn’t an issue.
Hope this helps!August 1, 2017 at 8:58 AM #366489
Yes I wrote a couple lines of jQuery to remove the tabindex attribute from anchor tags with no hrefs and then explicitly reference object names to set the tabindex values for the media player buttons and my Back and Next buttons to high values so they would get focus last. That gives me the tab order that the page should have, so I know it’s possible. Would just like it to work correctly on publish 🙂August 3, 2017 at 11:56 AM #366824
There is an accessibility group hosted on the community, but you have join to read things. Someone posted a solution there: https://community.trivantis.com/groups/lectora-accessibility-user-group-laug/forum/topic/logical-order-vs-tab-order/ (Thank you William Griffiths!)
You must be logged in to reply to this topic.