Glossary Skip Options

Jason, I forgot to ask, will removing the tabindex have an effect on screen readers?

Jason, thanks, I was hoping you would chime in. Great catch, I totally forgot about removing the pointer on mouse over!

Also, I keep forgetting about the Lectora %HTMLNAME% token replacement (I do most of my work outside of Lectora). It should work and make implementation easier.

The class idea for the hover "might" work, however, I think the adding a class in the appearance tab will assign it to the wrong element ( button131383 instead of button131383btn ). This is something that is sketchy in Lectora, experimentation is necessary.

There is a way to control tabindex via CSS (although user-select might work, hmmmm).

These are definitely some great ideas to try.

This is similar to something I did with a button that I used to simulate behavior where a user would open a menu that would only close by clicking on a menu option or an area of the screen outside the menu. In this case, I removed it from the tab order using Darrel's second example (using %HTMLNAME%btn instead of the specific button ID).

I know your initial intent is remove the button from the tab order, but you may want to consider changing the cursor image when hovering over a button that doesn't actually "do" anything. I used another Darrel solution using:

document.getElementById("%HTMLNAMEbtn").style.cursor="default";

Darrel - it occurs to me wonder...Could you create a class that sets this and just add the class to the description when needed? i.e.

.nohover {

cursor: default;

}

I thought this might be doable with the tabindex, too, but haven't had a chance to tinker just yet...I have a couple months of buffer now that the last of my initial 6 courses are done and released.

Check out the attached. Is this what you are shooting for? I was overthinking it originally. I was thinking it had to be accomplished dynamically, however, since the client can't change the glossary without your altering the .awt and re-publishing it becomes really simple. The answer is to place a run JavaScript action that removes that button from the tab index on each button that does not have a glossary entry. In the future if you add content just remove the action from that button.

With jQuery: $('#button131383btn').removeAttr("tabindex"); // D

Without jQuery: document.getElementById("button129523btn").removeAttribute('tabindex'); // D

Sorry if I created confusion with my post example, I should have used the same button ID on both so:

With jQuery: $(‘#button131383btn’).removeAttr(“tabindex”); // D

Without jQuery: document.getElementById(“button131383btn”).removeAttribute(‘tabindex’); // D

Darrel

Tim, I'm pretty sure that tabindex is an HTML attribute that cannot be styled (changed) using CSS. You might be able to have a similar effect using 'user-select' but since it works as requested I didn't bother to check.

Wouldn't it be easier to style all buttons alike, blue for Normal, Hover, Down and Grey for Disabled. Check "initially disabled" and "empty Alt tag" for all buttons that don't have entries.

An empty Alt tag should influence the screen reader, shouldn't it?

Give all buttons the same class, e.g. "glossary_btn" so you can adress the disabled buttons in CSS or jQuery with ".glossary_btn :disabled" to set the tab index.

Tim - I did some testing and empty alt tag sort of affects screenreaders. Empty Alt tag only removes the what the name of the button, but the screen reader still announces that there is a clickable button on the page. If it's disabled, the screen reader will announce "clickable button unavailable".

The "clickable button" is somehow taken from a role attribute, but I cannot determine how that could be removed from an individual element or set a class for a role to not announce the button.

The only, and maybe easiest way to remove it from the screen reader is to set it initially hidden. This removes it from both tab order and from being visible by a screen reader. I tried looking at aria-hidden to see if that worked to hide it from the reader, but unfortunately, it hid it entirely.

Darrel - Removing the object from the tab index does not affect screen readers when I tested with NVDA. I was very confident before testing but wanted to make sure before I answered.

Unfortunately, I couldn't get the nohover or notab to work using CSS and a class in the appearance setting. I was using Chrome in developer mode and even when I changed the cursor value on the buttonXXXX div, it would swap the cursor and I could see the HTML change each time I did it.

I was thinking about some work I was doing on a custom skin where I was adding :hover to the play/pause and CC buttons and was able to pull off changing the opacity:

.nohover button:hover {

opacity: 0;

}

However, adding the cursor property did not change its behavior. It looks like the div id keeps overriding the cursor value set even when targeting the :hover.

I'm out of ideas, as I think I've hit the peak of my knowledge and research on this one.

undefined

Wait a minute. Tim, ha ha ha ha, you're absolutely right about setting the 'empty' buttons to initially disabled. No need for ANYTHING else. Oh man, I need a vacation.

Here's a sample of what NVDA does with the buttons based on their state, visibility, and alt tag settings. The audio cuts weird a bit here and there, but I added text that says what it's doing, too.

You guys are AWESOME!!! I have drafted a few of these to see how my client likes them as I don't have a screen reader to test them on!

I'm not sure where you are on this, but I stumbled on this site in my own research on other things:

Accessify

There are a TON of tools including a Skip Navigation Builder that might be helpful, too!

@cpaxton - Not sure if you're still working on this, but I may have an additional option that may be useful, especially as you "enable" other letters of the alphabet in the future. This was inspired by some other work @timk helped with, re-ordering icons and drop downs that are within a question. @klaatu - I think this finally answers the question as to how to remove from tab order more globally than adding an an onShow to every element on a page.

I was able to put together a javascript that can be run at the title level that effectively hides images, shapes and buttons from tab order that have a specific class. Instead of removing the tabindex attribute, it sets the value to "-1", which hides it from tab order. This allows you to add a class to an element you want hidden and later, simply remove the class from the element to add it back in.

I've attached a sample that shows images, shapes and buttons removed from tab order. At the moment, I have them as two separate JS actions and there may be some cleanup that could be done. I'm not sure if they could be combined, as I tried and it didn't work the same.

Note: You can remove the console log lines if you want. I had those in there for testing purposes so I could verify I was getting the right values for each variable and how they each looked.