November 16, 2016 at 4:59 PM #334638
I know that by using the Empty Alt Tag option, screen readers will skip objects in the reading order. I am wondering if there is a way to have them skipped in the tab order when a learner is using the keyboard to navigate through the page. This came up as I noticed that the tab focus does land on the theme graphics, which from my standpoint is quite annoying and I can imagine even more so for a keyboard learner.
The only results I’ve found through research is using tabindex=”-1″ on objects but I’m not sure how I could apply that within the lesson.November 17, 2016 at 8:12 AM #334702
document.getElementById(“HTML NAME”).tabIndex = “-1”;
Replace HTML NAME with the actual HTML Name of the object you are trying to take out of the tab index so it wont get focus via tabbing. Keep in mind that some of the Lectora HTML Names found in properties is not the right one to target. If you try that first and it does not work, you will need to open a preview in a browser like Chrome then right click the object and choose inspect. This will open up the developers console with the item selected. Look in the highlighted code for the elements ID. A lot of the time it is similar to the Lectora HTML Name with “id” added. Use the ID you find in place of HTML NAME in the code above and it should work.
Let me know if this helped. If you can’t get that to work, please post a sample and I will edit it and repost.
In the attached I used this method to remove focus from the third checkbox. you will notice when you tab through them that it gets skipped.
DarrelThis post has received 2 votes up.
- This reply was modified 3 years, 11 months ago by Darrel Somoza.
- This reply was modified 3 years, 11 months ago by Darrel Somoza. Reason: typos
Attachments:November 17, 2016 at 12:11 PM #334746
Hi Darrel – I’m unable to duplicate this in my title, unfortunately. In the attachment, I’m trying to remove the image of the boy hugging the mother. Lectora shows the HTML name as image7696. In the element information, it looks to me like the ID is “image7696Img”. However, I do not see it in the HTML after I add it on the element.
Attachments:November 17, 2016 at 1:38 PM #334775
You can use Lectoras token replacement, then you don’t have to find the html name:
On: Page show
document.getElementById("%HTMLNAME%").tabIndex = "-1";
Lectora will automatically replace %HTMLNAME% with the correct id.
If you copied Darrels code directly from the forum you’ll have to replace the fancy quotes with real ones…
TimNovember 17, 2016 at 4:42 PM #334895
Still no dice – I thought I had it when I ungrouped it, but now it’s not working whether it’s grouped or not. Instead, it goes right to that graphic after tabbing past the window title, url and search. This is really stumping me, as it works just fine in Darrel’s sample, but not at all on any images when I try it.November 18, 2016 at 7:17 AM #335131
Jason, I’m sorry, I did not explain the target correctly in my first post. As a matter of fact I probably confused you a bit. Images alone will not receive focus but an image wrapped in an anchor tag (makes the image a link) will. You have to target the anchor. In this case its “image7696anc”.
Replace that and it should work just fine.
Token replacement has its value as well although in this case since you know the targets id it’s just as easy to just use it.
Let us know how you make out.November 18, 2016 at 9:08 AM #335160
Using “anc” did it! This begets the next question: Why does it see the image as a link and is there a way around that?
Any ideas on how to enlarge the tab focus box? I have a sample, but it’s the published HTML version. I suspect it’s CSS, but can’t determine the tag that would define the border on the tab focus.
Thanks again!November 18, 2016 at 12:22 PM #335193
Lectora wraps almost every element in it’s own anchor tags. I do not think there is a way around it other than to add your images via HTML Extension. When you wrap something in an anchor tag inheritance provides additional attributes the item would not otherwise have (like being in the tab order). However, I am sure Trivantis programmers have better reasons.
What do you mean increase the size of the tab focus box? Do you want the element to have a larger clickable/touch area? Normally I would say to add padding but this won’t work in Lectora (at least not without a lot of other extra work). In Lectora, you’ll have to increase the actual size of the object. If you don’t want it to look bigger, you can also add a border as thick as you need to get the right size clickable area and select a border color the same as the background (if that’s possible). Remember though that adding a border also increases the size of the overall element. Unfortunately, there’s a lot you can’t do inside Lectora that you can do when working with HTML5 from scratch. It’s frustrating at times.
Maybe someone from support (or one of the other real sharp forum posters) can shed some more light.
November 18, 2016 at 12:35 PM #335198
- This reply was modified 3 years, 11 months ago by Darrel Somoza. Reason: typo
When I say tab focus, I mean the box that highlights the object when landing on it using the tab key. As an example, this is what I want the tab focus to look like: http://mn.gov/mnit-accessibility/e-LearnTemplate/html/
By default, the focus box is pretty thin and not easy to see – in the example, the box width of the focus is much higher and much more visible. I think I may have actually found my solution and, with some experimentation, can get the results I’m looking for. I looked at the styles.css that used in the linked module and noticed that it calls out the :focus settings with an outline value of 6px. I think it’s a custom CSS developed and attached to the module, so it may become a matter of experimenting and seeing how to add it so that it works with my current titles.
I attached a copy of the CSS file that I’ll be playing with.
Attachments:November 18, 2016 at 1:18 PM #335205
The image is in a link to enable the “Scroll to” feature.
The tab order is defined by the sequence of the objects in the title explorer from top to bottom, i.e. title level objects are tabbed before page elements. You can make title level objects be selected after page elements by grouping them and check “Set Reading Order to last”.
TimNovember 18, 2016 at 2:05 PM #335207
If you publish a title with “Use Web Accessibility settings” Lectora adds the “trivantis-focus.css” which is responsible for the way the focus looks.November 18, 2016 at 2:42 PM #335216
I’ve played around with the sample you’ve posted.
I’ve grouped the title level objects (navigation buttons and theme graphics) and checked “Set Reading Order to last”. If you tab through the objects you’ll see that the page objects are focused before the navigation buttons.
I’ve modified Lectoras “trivantis-focus.css” to show you can influence the way the focus box looks. Check it in the html folder, it won’t be visible when previewing the page. Please mind, that it’s quite some effort to do it, because the file is overwritten each time you publish the title…
Attachments:December 3, 2016 at 4:47 PM #337277
Laura GillenwaterMember14 pts@tecocat
I have a form with a series of statements and a drop-down box next to each statement (so they can rate the statement). One of my user testers “complained” that, to tab from drop-down to drop-down, he had to hit Tab twice (presumably because the next statement was taking focus before its drop-down box).
I tried doing what you suggested and, while it worked great in terms of Lectora inserting the ID for me, it did nothing to fix the original problem — I still had to double-Tab to get to the next drop-down. (BTW, in case it matters, all of the drop-downs are grouped together into a form in the Title Explorer, and that form object is before any of the statements in the “tree.”)
Since 508 isn’t an issue for me, I’m open to any solution that would fix this problem, whether that be hiding the statements from focus or just changing the focus order so that they come after all of the drop-downs (since, presumably, once the user is done with all of the drop-downs, he/she won’t be tabbing anymore).
Any suggestions?March 15, 2018 at 7:45 AM #390684
Laura – If you can post a sample, I’m happy to take a look at it. It MAY have to do with the elements in a form versus free-standing drop downs.
You must be logged in to reply to this topic.