Accesskey Attribute 101

Accesskey Attribute 101.markdown

Accesskey Attribute 101

Trigger accesskeys on OSX in Safari, Chrome, or Firefox by holding ⌃ + ⌥ and selecting the accesskey.

For Windows in IE, Safari, or Chrome (may need shift) use alt and in Firefox use shift + alt

accesskey toggles :focus state on these buttons. Because of varying os/browser implementations and vague specs, this isn't very usable...yet. Great article/overview at webaim.org.

A Pen by Jake Albaugh on CodePen.

License.

index.haml

.container
  %h1 
    %code accesskey
    attribute 101

  %button{:id => "key-1", :accesskey => "h"} H
  %button{:id => "key-2", :accesskey => "j"} J
  %button{:id => "key-3", :accesskey => "k"} K
  %button{:id => "key-4", :accesskey => "l"} L
  
  %h2
    Trigger 
    %code accesskeys
    on OSX in Safari, Chrome, or Firefox by holding 
    %code ⌃
    +
    %code ⌥ 
    and selecting the 
    %code accesskey
    \.
  %h3
    On Windows in IE, Safari, or Chrome (may need 
    %code shift
    \) use 
    %code alt
    and in Firefox use
    %code shift
    +
    %code alt

  %p 
    %code accesskey
    toggles 
    %code :focus
    state on these buttons. Because of varying os/browser implementations and vague specs, this isn't very usable...yet.
    Great article/overview at
    %a{:href => "http://webaim.org/techniques/keyboard/accesskey", :target => "blank"}
      webaim.org
    \.
    
  %h2 
    Using 
    %code accesskeys
    to trigger CSS Transitions:

  .datas
    %span.data#data-1 How Heroic He Heralded
    %span.data#data-2 Jake Jams Jazzy Jingles
    %span.data#data-3 Kind Kangaroos Keep Kicking
    %span.data#data-4 Limp Levites Live Loosely 

style.scss

$font_family: Helvetica, Arial, sans-serif;
$color: #00eeff;

body {
  font-family: $font_family;
  font-weight: 200;
  background: #5f5f5f;
  color: #f9f9f9;
}

.container {
  width: 80%;
  margin: 2em auto;
}

h1, h2, h3 {
  margin-bottom: 1em;
  line-height: 1.4;
}
h1 {
  font-size: 2em;
}
h2 {
  font-size: 1.6em;
  margin-top: 1em;
}
h3 {
  font-size: 1.3em;
}
p {
  margin-top: 2em;
  line-height: 1.4;
}
a {
  color: $color;
  text-decoration: none;
}
strong {
  color: $color
}
pre, code {
  font-family: 'Andale Mono', monospace;
  color: $color;
}
pre {
  margin-top: 2em;
  white-space: pre;
  max-width: 100%;
}

button {
  padding: 1.2em;
  border: none;
  background: darken($color, 10%);
  color: white;
  font-size: 2em;
  font-family: $font_family;
  font-weight: 200;
  transition-property: background, opacity;
  transition-timing-function: ease-in-out;
  transition-duration: 200ms;
  
  border-radius: 0.125em;
  box-shadow: 
    inset 0px 0px 0px rgba(0,0,0,0.2),
    0px 2px 0px 2px rgba(0,0,0,0.2);
  
  &:focus {
    opacity: 0.8;
    outline: none;
    background: darken($color, 20%);
  }
}

.datas {
  position: relative;
  margin-top: 2em;

  .data {
    position: absolute;
    top: 0px; left: 50%;
    transform: translateX(-50%);
    border-radius: 0.125em;
    text-align: center;
    padding: 1em 0px;
    opacity: 0;
    color: white;
    width: 100%;
    background: white;
    box-shadow: 
      inset 0px 0px 0px rgba(0,0,0,0.2),
      0px 2px 0px 2px rgba(0,0,0,0.2);
  }
}

@for $i from 1 through 4 {
  #key-#{$i}:focus ~ .datas #data-#{$i} {
    transition-property: opacity, background;
    transition-duration: 500ms;
    transition-timing-function: ease-in-out;
    
    opacity: 1;
    font-size: 1.6em;
    background: darken($color, 10%);
  }
}