Question of ignorance implementing a:focus in child theme
-
Hi, my understanding is that to ensure accessiblity for a:hover, one must include a:focus.
This understanding is based on larcher’s thread a week earlier, and the awesome link provided in that thread:
https://www.456bereastreet.com/archive/201004/whenever_you_use_hover_also_use_focus/I’m using multisite, 3.5, with child themes (plural) of the twentytwelve theme.
1. In the parent twentytwelve theme, there is this piece of code:
a:focus {
outline: thin dotted;
}
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
nav,
section {
display: block;The only other reference to “focus” that I can see in the parent theme is the following:
/* Assistive text */
.assistive-text,
.site .screen-reader-text {
position: absolute !important;
clip: rect(1px, 1px, 1px, 1px);
}
.main-navigation .assistive-text:hover,
.main-navigation .assistive-text:active,
.main-navigation .assistive-text:focus {
background: #fff;
border: 2px solid #333;
border-radius: 3px;
clip: auto !important;
color: #000;
display: block;
font-size: 12px;
padding: 12px;
position: absolute;
top: 5px;
left: 5px;
z-index: 100000; /* Above WP toolbar */
}So my questions are these:
1. Do I understand the css correctly in the parent theme in that the only feature in which “focus” is enabled is in the .main-navigation .assistive-text:focus ?
2. If my understanding above is correct, then, to make a child theme better accessible through the addition of a:focus, is it true I need to find each instance of a:hover and add to it an instance of a:focus in the child theme’s style.css?
I don’t mind at all taking the time and trouble to do this; for accessibility, it’s worth it. I just want to make sure I understand the situation before I launch into it.
Thanks in advance to any insights you have on this.
- The topic ‘Question of ignorance implementing a:focus in child theme’ is closed to new replies.