WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] Question of ignorance implementing a:focus in child theme (2 posts)

  1. _Redd
    Member
    Posted 1 year ago #

    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:
    http://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.

  2. _Redd
    Member
    Posted 1 year ago #

    Okay, in the "I'm not a keen observer of the obvious" category, I got it to work, simply by adding the above components into the child theme, so that the parent's a:focus characteristics are not wiped out by the child.

    Even better, by having those components in the child theme, we're able to tailor the a:focus components on those parts of the web site likely to be needed by the users.

    Well! Amazing how these things occur to you at 2 in the morning! Marking this resolved!

Topic Closed

This topic has been closed to new replies.

About this Topic