Explore the community Forums Lectora Lectora Questions & Answers Tab order does not match reading order

Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #365078 Score: 0
    Profile photo of Ann Sisco
    Ann Sisco
    Member
    beginner
    intermediate
    friend finder
    wise owl
    curious george
    contributor
    profile
    picture perfect
    8 pts
    @prg1792

    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.

    I don’t see a way in the Lectora interface to change the tab order, without adding custom JavaScript to set tab order for each object or to remove all tabindex attributes altogether.

    Thoughts?

    #365110 Score: 0
    Profile photo of Ann Sisco
    Ann Sisco
    Member
    beginner
    intermediate
    friend finder
    wise owl
    curious george
    contributor
    profile
    picture perfect
    8 pts
    @prg1792

    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.

    #365118 Score: 0
    Profile photo of Andrea Vaccaro
    Andrea Vaccaro
    Member
    beginner
    intermediate
    wise owl
    @avaccaro1963

    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!

    #365154 Score: 0
    Profile photo of Ann Sisco
    Ann Sisco
    Member
    beginner
    intermediate
    friend finder
    wise owl
    curious george
    contributor
    profile
    picture perfect
    8 pts
    @prg1792

    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.

    #365997 Score: 0
    Profile photo of Jennifer Valley
    Jennifer Valley
    Member
    contributor
    beginner
    friend finder
    advanced
    lectora beginner
    verified member
    wise owl
    profile
    picture perfect
    curious george
    117 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.

    #366458 Score: 0
    Profile photo of Ann Sisco
    Ann Sisco
    Member
    beginner
    intermediate
    friend finder
    wise owl
    curious george
    contributor
    profile
    picture perfect
    8 pts
    @prg1792

    Hi, Jennifer–

    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…

    1. The tab order does not match the reading order. The setting “Set reading order to last” is not honored. (declared a “BUG”)
    2. 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”)
    3. 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)
    #366470 Score: 0
    Profile photo of Jason Dalrymple
    Jason Dalrymple
    Member
    beginner
    intermediate
    profile
    wise owl
    curious george
    contributor
    friend finder
    advanced
    picture perfect
    54 pts
    @JasonADal

    There is a workaround for elements you want to hide from the tab order using JavaScript. Credit where credit is due, as this workaround came from @klaatu.

    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!

    #366489 Score: 0
    Profile photo of Ann Sisco
    Ann Sisco
    Member
    beginner
    intermediate
    friend finder
    wise owl
    curious george
    contributor
    profile
    picture perfect
    8 pts
    @prg1792

    Hi, Jason–

    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 🙂

    #366824 Score: 0
    Profile photo of Andrea Vaccaro
    Andrea Vaccaro
    Member
    beginner
    intermediate
    wise owl
    @avaccaro1963

    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!)

    In case you are not a member, it basically says that if an image with both “empty alt text” and “always on top” is defined at the top in the title level, this would ensure that this element would have the effect of moving the array over one value, and the next element would be assigned a tab index of 1 and be the very first element in the tab order. I tried this and just put a transparent button at the top of the title with no action. The transparent button is now tabindex 0 and the real buttons start with tabindex 1. This worked for us. It was easier than writing Javascript.

Viewing 9 posts - 1 through 9 (of 9 total)

You must be logged in to reply to this topic.