Glossary Skip Options

Chris Paxton
Chris Paxton Community Member Posts: 93 ✶ Headliner ✶
REPOSTED from Accessibility area

 

Hello-

I am relatively new to 508, although I have been using Lectora for 10+ years. I have a client that wants the glossary to include the entire alphabet although there are only 10 letters that contain information…in case they add more in the future…no problem.

But, then the client sends me this “Tabbing through the alphabet seems repetitive; improve usability by setting Alphabet section headings in tab ordering.” …I have no idea what this means and didn’t know if I could just make the unused letters “hidden” from the reader and the tabbing?

Any thoughts & ideas would be appreciated! Thanks!

-Chris

**************************

REPONSE FROM: Christine O’Malley
<div class="bbp-author-role">Hi Chris – When I open the HTML file in the Edge Browser, I can tab through the alphabet. I think that’s what they are saying but if you’re able to join our Open Discussion, we can get input from others too.</div>
<div class="bbp-reply-content">

One thought that comes to mind, is to have links that allow the use to jump back up to the alphabet. Not sure about hiding letters, I wonder if that could be confusing. Again, folks in the group may have some suggestions for you.

Thanks for asking the question!

Christine

**************************

RESPONSE FROM: Darrel Somoza

If there is no way to do this  in Lectora itself, you should be able to accomplish it using JavaScript. I would try a script that will search through the letters (DIV elements) that do not have an onClick attribute and remove them from the tab order by setting their tabIndex to -1.  I think that might work. Due to time constraints I can’t promise anything but if you post the .awt file (you always should include this in the zip, IMO) someone may be able to whip something up. I’m also not sure what removing an element from the tab order will do with respect to screen readers. I believe Jason is the forums resident expert there.

You might want to re-post or have this moved to questions and answers.

</div>
****************

REPONSE FROM: Chrisanna (Chris) Paxton McMillin
<div class="bbp-reply-content">

I thought I published with the awt file…let me repost in with the correct file, as possibly also in Q/A!!!

</div>
Chris Paxton McMillin, D3 Training Solutions
[email protected]
www.d3trainingsolutions.com

Comments

  • klaatu
    klaatu Community Member Posts: 988
    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
  • klaatu
    klaatu Community Member Posts: 988
    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
  • jasonadal
    jasonadal Community Member Posts: 439 ♪ Opening Act ♪
    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.
  • klaatu
    klaatu Community Member Posts: 988
    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.
  • klaatu
    klaatu Community Member Posts: 988
    Jason, I forgot to ask, will removing the tabindex have an effect on screen readers?
  • jasonadal
    jasonadal Community Member Posts: 439 ♪ Opening Act ♪
    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.

     
  • timk
    timk Community Member Posts: 1,176 ☆ Superstar ☆
    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.
  • klaatu
    klaatu Community Member Posts: 988
    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.
  • klaatu
    klaatu Community Member Posts: 988
    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.
  • jasonadal
    jasonadal Community Member Posts: 439 ♪ Opening Act ♪
    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.
  • jasonadal
    jasonadal Community Member Posts: 439 ♪ Opening Act ♪
    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.
  • Chris Paxton
    Chris Paxton Community Member Posts: 93 ✶ Headliner ✶
    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!
    Chris Paxton McMillin, D3 Training Solutions
    [email protected]
    www.d3trainingsolutions.com
  • jasonadal
    jasonadal Community Member Posts: 439 ♪ Opening Act ♪
    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!
  • jasonadal
    jasonadal Community Member Posts: 439 ♪ Opening Act ♪
    @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.
Sign In or Register to comment.

So You Wanna Be An eLearning ROCKSTAR?

We're all fans of eLearning here! Want to become an eLearning ROCKSTAR? Just click on one of the buttons below to start your rocking journey!