Hide from focus

You can use Lectoras token replacement, then you don't have to find the html name:

Add Darrels Run javascript to the image:

On: Page show

Action: Run javascript

Javascript:

document.getElementById(undefined-1undefined

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...

Tim

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.

I've attached my attempt to emulate yours - Would this have anything to do with the image having a "javascript.null" on it as well?

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.

Jason, you need to find the HTML name of the element that you want to remove focus from and then on load of the page set a Run JavaScript action:

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.

Darrel

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?

That seems to me to be the real solution and something to recommend as an option in the software, whether it's to set an image as a link or not (if that's feasible) or an option to set tab order without needing the javascript and the tedium of tracking down image names.

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!

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.

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.

undefined

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".

Tim

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.

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.

I've played around with the sample you've posted.

I've removed all theme graphics and the images on the page from the tab order using Darrel's code, but used Token replacement instead of the static id. You'll see that the javascript is the same for each image, as Lectora inserts the respective html name automatically.

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...

Tim

Follow-up question on the JavaScript item - Is this a general JavaScript I could use to attach other properties to objects? I'm wondering because I'd like to add aria tags to items. I'm testing with NVDA screen reader software and it's reading everything as "clickable button" and "javascript.void(null)" whenever they are hovered.

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?

Hi Laura. Try adding jQuery in a header scripting HTML Extension and then on the show of the page with the drop downs add this in a runJS

$("a[id$='anc']".prop('tabIndex', '-1');

That basically says grab ALL the anchor tags that have an id that ends in "anc" and remove their tab index.

Darrel

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.

I've also since altered my method for removing focus using a class and JavaScript that adds the attribute so I can "code" once instead of having to add actions to images, shapes, etc.

Remember, if you cut and paste you must replace all the quotes.