Active/Focus Highlight for Tab Users

robin-king
robin-king Community Member Posts: 9
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?

Comments

  • ssneg
    ssneg Community Member Posts: 1,466 ☆ Roadie ☆
    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.
  • robin-king
    robin-king Community Member Posts: 9
    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.
  • robin-king
    robin-king Community Member Posts: 9
    Sergey,

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

     
  • ssneg
    ssneg Community Member Posts: 1,466 ☆ Roadie ☆
    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;"
  • zgaelynlevai4644
    zgaelynlevai4644 Community Member Posts: 7
    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.