Remove dotted lines without affecting functionality of screen reader

  • Resolved Anonymous User

    (@anonymized-11539796)


    7 years, 9 months ago

    Hello All,

    Just wondering if there is a way to remove dotted lines without affecting accessibility or functionality of the screen reader. I see other sites that are doing so and cannot for the life of me figure it out. I just want it so when the mouse clicks on links etc. anywhere that there isn’t a dotted line surrounding it but I also want an individual to be able to hit the tab button and scroll through while the dotted line outlines the link they are on or scrolling through. Thank you.

    Sincerely,
    Craig

    The page I need help with: [log in to see the link]

Viewing 7 replies - 1 through 7 (of 7 total)
  • Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    7 years, 9 months ago

    That’s not for screen readers. That’s for people who need to see what they’ve selected, particularly for people using simple input devices or keyboard users.

    It is certainly possible, but is it a good idea to remove that dotted highlight? This dotted outline, if I understand your issue correctly, will also change in different browsers. Chrome for example has a blue outline.

    To remove this for people using mouse devices, in the “Additional CSS” section of the dashboard add this:

    
body:hover .button:focus, button:focus, 
body:hover input[type="button"]:focus,
body:hover input[type="reset"]:focus, 
body:hover input[type="submit"]:focus, 
body:hover .main-navigation-container .button > a:focus, 
body:hover .menu-toggle:focus,
body:hover a:focus {
    outline: 0;
}

    https://codex.wordpress.org/CSS#Custom_CSS_in_WordPress

    • This reply was modified 7 years, 9 months ago by Andrew Nevins.
    Thread Starter Anonymous User

    (@anonymized-11539796)

    7 years, 9 months ago

    Hi Andrew,

    Thanks for your help..still pondering myself if it’s a good idea. Thank you for the clarification too.

    it gives me an error of expected indent at line 200, col 23 right before this line body:hover input[type="button"]:focus,

    any recommendations?

    Thread Starter Anonymous User

    (@anonymized-11539796)

    7 years, 9 months ago

    Ahh got it to function (added in each line separately).

    worked a bit too well…removed the outline all together…just wanted it removed for mouse users. Any other suggestions? thanks

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    7 years, 9 months ago

    I’m not sure what you mean, where specifically does the issue persist?

    Thread Starter Anonymous User

    (@anonymized-11539796)

    7 years, 9 months ago

    Now the outlines are completely gone (even when using tab etc)…just wanted them to be removed when someone using a mouse clicks on them..the css you gave removes the outlines entirely (which I could have done w/ a { outline:none !important;} )

    I thought the css you gave would only affect mouse devices. I do appreciate the help Andrew.

    • This reply was modified 7 years, 9 months ago by Anonymous User. Reason: say thanks
    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    7 years, 9 months ago

    The outlines are only gone if you’re using a mouse. Try moving the mouse outside of the website and then pressing tab.

    Thread Starter Anonymous User

    (@anonymized-11539796)

    7 years, 9 months ago

    ahh I see now…thanks Andrew, moved the cursor off the browser completely..Thanks 😉 I greatly appreciate it!

    • This reply was modified 7 years, 9 months ago by Anonymous User.
Viewing 7 replies - 1 through 7 (of 7 total)

The topic ‘Remove dotted lines without affecting functionality of screen reader’ is closed to new replies.