Outreach Pro – :focus outline not working in Safari

[ciara.cable]

Hi all,

I'm working on my website's ADA compliancy and am experiencing an issue with our keyboard accessibility specifically in Safari 11.0 on Mac. It works fine in all other browsers, but for some reason items with a background color will not display the outline when keyboard tabbed to.

It's important to note I do have the accessibility feature turned on in Safari to allow focus on each item when tabbed through, and it DID display the outline on all appropriate items not more than a week ago. I'm wondering if it has something to do with Safari's recent updates. I have not done any major overhauls to our website's CSS since the last time I noticed it was working properly.

Here's our website: http://sunybroome.edu

The outline appears on the left & top edge of the logo when you tab to it, but then none of the navigation items, but DOES appear on the "get started" menu and items specifically without a background color (links in the rotating banner and in the footer).

I notice the same issue when I try to tab through the Outreach Pro demo theme:

https://demo.studiopress.com/outreach/

It highlights items that do not have a background color specified, but doesn't display the outline on links in the green menu bar.

This is the default that is in both the theme demo for Outreach Pro & in my theme:

a:focus {
	outline: thin dotted !important;
}

(but the !important tag was my addition to experiment with to see if any other styles were conflicting with it - no success)

Has anyone else noticed this? Does anyone have any suggestions?

Thank you for your time!

http://sunybroome.edu

[carasmo]

Outreach Pro is not under the accessible-ready themes.

I add a focus to my CSS, then on areas that have dark backgrounds, I change the outline color:

:focus {
	color: #000;
	outline: #777 dotted 1px; /* works on light backgrounds */
	outline-offset: 2px;
}

/* example for dark background */
.nav-secondary :focus {
	outline: #fff dotted 1px;
}

---

Genesis Theme Customization and Help

[ciara.cable]

Thank you for your suggestion, but this only affects the items without a CSS-specified background color.

It still doesn't force the outline to display on the menu items (and other items with a CSS-specified background color) in Safari 11.0 on Mac, specifically for Outreach Pro for some reason.

The rest of my child theme is accessible, and all of these items WERE receiving keyboard focus with no issues less than a week ago. I'm not sure what happened to change this.

[carasmo]

Since it's not an accessible theme, the menu js is old and doesn't have the accessible stuff in it, since the newer themes open the drop menus with tabbing (see Monochrome Pro -- I bought the dev package -- for an example).

However, it looks like the outline is there but the menu items are covering it. So would make a negative offset:

outline-offset: -2px;

However, that theme is missing more than CSS to make it accessible, skip links and the js for the menu and the CSS for the menu is missing code.

---

Genesis Theme Customization and Help

[ciara.cable]

I've actually resolved all accessibility problems with this theme with my own customizations to my child theme, so I'm not too worried about that for now.

My big area is concern is why the :focus styles work as expected in all browsers except Safari, and it only doesn't work in Safari as of approximately a week ago with no major changes made to my website. It appears to be a glitch with Safari, because if I tab to an element with a background color and then either click off that window or very slightly resize the window, the outline is then visible.

[carasmo]

I'm viewing your (http://www1.sunybroome.edu/) and Safari 11 on Mac and the outlines are there but not seen very easily when it's not the first or the last one. Using a negative offset would probably fix this.

Screen Shots
https://christinacreativedesign.com/studiopressforum/Screen%20Shot%202017-10-25%20at%203.32.54%20PM.png

https://christinacreativedesign.com/studiopressforum/Screen%20Shot%202017-10-25%20at%203.32.49%20PM.png

---

Genesis Theme Customization and Help

[ciara.cable]

THAT FIXED IT!

Thank you VERY much for talking this through with me. I set the outline offset to -1px and it's fine now in Safari (and other browsers).

[carasmo]

Sure. Please mark as resolved.

---

Genesis Theme Customization and Help

[Author]

Posts