Explore the community Forums Lectora Lectora Questions & Answers Glossary Skip Options

Viewing 15 posts - 1 through 15 (of 15 total)
  • Author
    Posts
  • #375825 Score: 0
    Profile photo of Chrisanna (Chris) Paxton McMillin
    Chrisanna (Chris) Paxton McMillin
    Member
    beginner
    intermediate
    friend finder
    verified member
    advanced
    contributor
    testimonial writer
    LUC16 Attendee
    picture perfect
    profile
    2 pts
    @cpaxton

    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>

    #375993 Score: 1
    Profile photo of Darrel Somoza
    Darrel Somoza
    Member
    contributor
    friend finder
    beginner
    intermediate
    junior moderator
    advanced
    wise owl
    curious george
    profile
    199 pts
    @Klaatu

    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

    This post has received 1 vote up.
    #375996 Score: 1
    Profile photo of Darrel Somoza
    Darrel Somoza
    Member
    contributor
    friend finder
    beginner
    intermediate
    junior moderator
    advanced
    wise owl
    curious george
    profile
    199 pts
    @Klaatu

    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

    This post has received 1 vote up.
    #376002 Score: 1
    Profile photo of Jason Dalrymple
    Jason Dalrymple
    Member
    beginner
    intermediate
    profile
    wise owl
    curious george
    contributor
    friend finder
    advanced
    picture perfect
    45 pts
    @JasonADal

    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.

    This post has received 1 vote up.
    #376010 Score: 1
    Profile photo of Darrel Somoza
    Darrel Somoza
    Member
    contributor
    friend finder
    beginner
    intermediate
    junior moderator
    advanced
    wise owl
    curious george
    profile
    199 pts
    @Klaatu

    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 post has received 1 vote up.
    #376012 Score: 0
    Profile photo of Darrel Somoza
    Darrel Somoza
    Member
    contributor
    friend finder
    beginner
    intermediate
    junior moderator
    advanced
    wise owl
    curious george
    profile
    199 pts
    @Klaatu

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

    #376117 Score: 0
    Profile photo of Jason Dalrymple
    Jason Dalrymple
    Member
    beginner
    intermediate
    profile
    wise owl
    curious george
    contributor
    friend finder
    advanced
    picture perfect
    45 pts
    @JasonADal

    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.

     

    #376120 Score: 1
    Profile photo of Tim K
    Tim K
    Member
    contributor
    beginner
    intermediate
    advanced
    friend finder
    junior moderator
    advocate
    wise owl
    curious george
    Group Member
    309 pts
    @timk

    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.

    This post has received 1 vote up.
    #376123 Score: 1
    Profile photo of Darrel Somoza
    Darrel Somoza
    Member
    contributor
    friend finder
    beginner
    intermediate
    junior moderator
    advanced
    wise owl
    curious george
    profile
    199 pts
    @Klaatu

    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.

    This post has received 1 vote up.
    #376125 Score: 1
    Profile photo of Darrel Somoza
    Darrel Somoza
    Member
    contributor
    friend finder
    beginner
    intermediate
    junior moderator
    advanced
    wise owl
    curious george
    profile
    199 pts
    @Klaatu

    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.

    This post has received 1 vote up.
    #376131 Score: 1
    Profile photo of Jason Dalrymple
    Jason Dalrymple
    Member
    beginner
    intermediate
    profile
    wise owl
    curious george
    contributor
    friend finder
    advanced
    picture perfect
    45 pts
    @JasonADal

    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.

    This post has received 1 vote up.
    #376135 Score: 1
    Profile photo of Jason Dalrymple
    Jason Dalrymple
    Member
    beginner
    intermediate
    profile
    wise owl
    curious george
    contributor
    friend finder
    advanced
    picture perfect
    45 pts
    @JasonADal

    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.

    This post has received 1 vote up.
    #376535 Score: 0
    Profile photo of Chrisanna (Chris) Paxton McMillin
    Chrisanna (Chris) Paxton McMillin
    Member
    beginner
    intermediate
    friend finder
    verified member
    advanced
    contributor
    testimonial writer
    LUC16 Attendee
    picture perfect
    profile
    2 pts
    @cpaxton

    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!

    #379584 Score: 0
    Profile photo of Jason Dalrymple
    Jason Dalrymple
    Member
    beginner
    intermediate
    profile
    wise owl
    curious george
    contributor
    friend finder
    advanced
    picture perfect
    45 pts
    @JasonADal

    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!

    #380493 Score: 0
    Profile photo of Jason Dalrymple
    Jason Dalrymple
    Member
    beginner
    intermediate
    profile
    wise owl
    curious george
    contributor
    friend finder
    advanced
    picture perfect
    45 pts
    @JasonADal

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

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

You must be logged in to reply to this topic.