Explore the community Forums Lectora Online Lectora Online Questions & Answers Active/Focus Highlight for Tab Users

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #297078 Score: 0
    Profile photo of robin.king
    robin.king
    Member
    beginner
    intermediate
    1 pt
    @robin.king

    Client is unhappy with the little 1px dotted line box that appears around active elements when they are tabbed to.  I have tried to edit code in the style sheet such as adding to the trivantisPage.css:

    a:focus, a:active {
    border: 4px; border-color: #FFFF00; display: block; background-color: #FFFFFF;  min-height: 26px; min-width: 30px;
    }

    However, the change in the outline is completely ignored when the course is published.  The background does display in the size box requested, but is oddly placed around the element.

    Does anyone have a more elegant solution?

    #297087 Score: 0
    Profile photo of Sergey Snegirev
    Sergey Snegirev
    Member
    contributor
    intermediate
    advanced
    friend finder
    lab member
    junior moderator
    advocate
    LUC16
    LUC16 Attendee
    wise owl
    336 pts
    @ssneg

    I’m not sure what you tried to achieve with the above CSS but if you need to remove the 1px dotted line on focused elements, you should place this code in CSS in Lectora (use Ext HTML set to Meta tags):

    <style>
    :focus {
    outline: none;
    }
    </style>

    Alternatively, you might want to explain to your client that keyboard users heavily depend on that outline to be visible. Without it, they simply cannot navigate the course. Maybe the client will want to re-think their approach to accessibility. More arguments, if need be: Stop Messing with the Focus Outline.

    I’ve attached an example, see if it does what you want.

    Attachments:
    1. Title_15.zip
    #297089 Score: 0
    Profile photo of robin.king
    robin.king
    Member
    beginner
    intermediate
    1 pt
    @robin.king

    I think I was unclear in my post. I don’t want to remove the 1px dotted box.  I just want to either make it something like 4px, a bit larger than the icons it highlights, pretty much anything to make it more obvious.  Our 508 reviewers don’t think the standard box is enough.

    #297090 Score: 1
    Profile photo of robin.king
    robin.king
    Member
    beginner
    intermediate
    1 pt
    @robin.king

    Sergey,

    Your post gave me enough to go on.  I now have what I need.  Thanks for your help.

     

    This post has received 1 vote up.
    #297091 Score: 1
    Profile photo of Sergey Snegirev
    Sergey Snegirev
    Member
    contributor
    intermediate
    advanced
    friend finder
    lab member
    junior moderator
    advocate
    LUC16
    LUC16 Attendee
    wise owl
    336 pts
    @ssneg

    Ah, I see. You can then edit my example and use the following words instead of “none”: “solid”, “double” or even use “outline: #00FF00 solid thick;”

    This post has received 1 vote up.
    #298842 Score: 0
    Profile photo of Zariah Gaelyn-Levai
    Zariah Gaelyn-Levai
    Member
    beginner
    intermediate
    1 pt
    @zgaelynlevai4644

    I am currently working with a similar issue. When the user opens the table of content (TOC) icon to access the TOC elements, I need the focus to move from the icon to the elements. The result: the keyboard user should be to 1- tab to TOC, opening TOC, access TOC elements.

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

You must be logged in to reply to this topic.