Make skip link focusable

This pull request tweaks the position of some class names so the invisible skip link becomes visible when keyboard users tab to it. This helps make the skip link usable for not just screen reader users, but keyboard users as well.

**Unfocused**
![_s-focusable-skip-link-before](https://f.cloud.github.com/assets/1473618/1258591/1cc4c986-2bc3-11e3-9da0-3eca740ea8fb.png)

**Focused**
![_s-focusable-skip-link-after](https://f.cloud.github.com/assets/1473618/1258585/d69d2156-2bc2-11e3-915e-c5e83ee63d7f.png)

With the current code, the `screen-reader-text` class is on a div, which is not focusable by default. We could add a [tabindex attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes#tabindex) to the div, but it's more natural to just use the `<a>` element because it's naturally focusable.

This helps `_s` set a good example of how to implement skip links. It also harmonizes with the way core implements its skip links.

Let me know if there are any questions!