Joomla Templates Club 406,261 posts

[osseo Friend osseoJoin date: February 2012Posts: 205Downloads:16Uploads:26 Thanks: 69]

#1062339

Hi,
I’m not sure why when using keyboard (the tab key) and tabbing through our site the keyboard on-screen focus will get lost after menu choices.
Please try using Tab key: http://district279.org
and you’ll see the obvious keyboard focus goes across the screen from left to right… then it all the sudden disappeared after the "JA slideshow" module… I can see the "link" on the bottom of the boswer window but the "focus" is gone! until after the news article it will appear again….
Please let me know if there is something we can do to fix that so it will also have a "highlight" or some obvious keyboard focus throughout the page.
Thanks for your help or any suggestions!
Emily

[Saguaros Moderator SaguarosJoin date: September 2014Posts: 31405Downloads:237Uploads:471 Thanks: 845 Thanked: 5346 times in 4964 posts]

#1062610

Hi Emily,

When the Tab key focuses on the final menu item in the menu ‘I want to:’, as I can see that in the next Tab, it focuses on the ‘Enroll Now’ link. In the slideshow, there is no link there so it moves to the next link. It seems to be normal behavior though.

[osseo Friend osseoJoin date: February 2012Posts: 205Downloads:16Uploads:26 Thanks: 69]

#1065929

Hi Saguaros,
Yes, I can see the tab going through because it shows the "hyperlinks" in the bottom of the browser.
However, the keyboard "focus" has to be "visible" to pass on the accessibility test. They give us an example site: http://www.wisc.edu/
On the example site every tab will bring a visible highlight around the focus area, doesn’t matter if is a link, menu or graphic image.

Is that something can be accomplished with the JA template/module? Is it possible by adding some CSS to give the special focus?

Sorry for the details but I’m just trying to make our site compliant with the current accessibility standards and I really like this JA university template so I’m hoping to make it work!

Any ideas will be greatly appreciated! Thanks!!

[Saguaros Moderator SaguarosJoin date: September 2014Posts: 31405Downloads:237Uploads:471 Thanks: 845 Thanked: 5346 times in 4964 posts]

#1066022

You may need to add the style for link with property :focus

For example:

a:focus {
 border: #fff solid;
 background: color_you_wish;
}

[osseo Friend osseoJoin date: February 2012Posts: 205Downloads:16Uploads:26 Thanks: 69]

#1066131

Hi Saguaros,

Thank you for the recommendation by modify the link focus color and it works great on almost everything. Expect the JA slideshow module and the position 1 to 3 (on the homepage http://www.district279.org/).

Here are the css codes I’ve placed on my site:

1. Editing file "/css/template.css" in template "ja_university_t3".

Line 90 to Line 99
a:focus {
color: #d42b1e;
text-decoration: none;
border: #fff solid;
background: yellow;
}

2. Editing file "/css/custom.css" in template "ja_university_t3".

/ Tab link focus color —/
a:focus {
border: #fff solid !important;
background: yellow !important;
}

Is there anything else I’ve missed for the modules to work? Thanks again!

[Saguaros Moderator SaguarosJoin date: September 2014Posts: 31405Downloads:237Uploads:471 Thanks: 845 Thanked: 5346 times in 4964 posts]

#1066229

Hi,

May I know which link are you mentioning? as I can see there is no link tag in the slideshow.

[osseo Friend osseoJoin date: February 2012Posts: 205Downloads:16Uploads:26 Thanks: 69]

#1066395

Hi Saguaros,
I assume the two "left and right arrows" are links so it should be "highlighted" in yellow in css?
Also the position 1 to 3 has "clickable image icon", as you tab through "Schoolology", "ParentPortal" and "Lunch Menu" graphics should all be highlighted in yellow. Is that correct?

Please advise, thanks.
Emily

[Saguaros Moderator SaguarosJoin date: September 2014Posts: 31405Downloads:237Uploads:471 Thanks: 845 Thanked: 5346 times in 4964 posts]

#1066562

Hi Emily,

If you inspect elements of the slideshow, you can see that the PREV / NEXT buttons are using span tag, not < a> tab so when you click Tab key on the keyboard, it doesn’t reach there.

For the graphics in part under slideshow, as I can see they have red border color now.

[Author]

Posts