1. Fuck Yeah Keyboard :Focus

    The surprise and delight that comes from hovering over something is great. Every so often though, I need a reminder that not all users use a mouse to navigate the web. We web developers need to remember to include keyboard :focus states in our CSS. Making your site navigable with the TAB-key can benefit people with disabilities, like motor or cognitive impairment, as well as UNIX’y neckbeards who never leave the keyboard.

    CSS :focus

    How do we add in this functionality? 90% of the time it’s just a matter of remembering to include the :focus pseudo-class along side your hover properties.

    a:hover,
    a:focus /* There I fixed it. */ {
        background-color: red;
    }
    

    Good “accessible” keyboard focus should also take into account color-blindness, and not rely solely on color changes. Default focus states like Mozilla’s dotted outlines or WebKit’s glow are pretty helpful here. Let the user know where they are without the mouse pointer.

    HTML tabindex :focus

    Sometimes though it’s not that easy. CSS allows us to write div:hover with ease and it works on mouseover. However, div:focus doesn’t work because div elements technically aren’t “focussable”. It’s a little hacky, but you can add focusability to a div using an old and often abused accessibility tool called tabindex.

    <div tabindex=0>
        My content
    </div>
    

    Adding tabindex=0 means that your div will now be added to the page’s index of tabbable/focussable flow of items. Rarely does tabindex have to be greater than 0. Once added to your div, use CSS to style like you would an anchor link.

    div:hover,
    div:focus /* tabindex */ {
        background-color: red;
    }

    Typically something that is focusable is also an element you can interact with (like a link or form control). So be mindful of that.

    JavaScript focus

    If you still can’t achieve focus, you’re getting into managing state with JavaScript territory, which can be a bit of a nightmare depending on the situation. If possible, refactor your HTML and/or design to avoid this stage.

    If you do find yourself in this situation my advice would be a SMACSS class-based approach and instead of styling off of pseudo-classes. Styling off of more generic, reusable classes like .is-hovered will save headaches.

    An oversimplified jQuery example of this would be:

    $('div').on('hover', function(){
        $(this).toggleClass('is-hovered');
    });
    $('div .child').on('focus', function(){
        $(this).parent('div').addClass('is-hovered');
    }).on('blur', function(){
        $(this).parent('div').removeClass('is-hovered');
    });

    In an ideal world, all users would get the same content/experience, but in reality you’ll need to make intelligent decisions to suit your situation. “Don’t penalize users” is a good moral compass. If accessibility is a concern for you or your organization, consult an accessibility professional for help.

     
    1. cherylboles reblogged this from fuckyeahhovers
    2. fuckyeahhovers posted this
     

    Posted by: davatron

    Permalink 18th Jun 2013 14:11

    Notes: 2