Keyboard accessibility
The Keyboard accessibility snippet is in review
Tabbing sequence
If a Web page can be navigated sequentially and the navigation sequences affect meaning or operation, focusable components receive focus in an order that preserves meaning and operability.
As a keyboard user navigates through the page, the order in which interactive items receive keyboard focus is important. The default keyboard navigation order must be logical and intuitive. This generally means that it follows the visual flow of the page—left to right, top to bottom. For most pages this means header first, then main navigation, then page navigation (if present), and finally the footer. This navigation order (and also the reading order for screen readers) is determined by the web page’s source code. For best results:
- Structure your underlying source code so that the reading/navigation order is correct.
- Then, if necessary, use CSS to control the visual presentation of the elements on your page.
- Do not use tabindex values of 1 or greater to change the default keyboard navigation order.
Dark & light focus indicator
Any keyboard operable user interface has a mode of operation where the keyboard focus indicator is visible.
As a developer, less is, for most of the time, better. It’s easier to maintain short and long term, but also redueces the use of complex HTML or ARIA markup or CSS directives like !important that could find your web pages to not validate for HTML5 or accessibility. Another benefit of using less and simpler code, it’s that it requires lower bandwidth when a user browses your website.
Having both a dark & light focus indicator in one style reduces the amount of code you’ll have to use and validate.
Exercise: tab and set focus on the following snippets and their respective items “tab” accessibled. We set up tabindex attributes to 0 on all of the selectors for the benefits of the exercise only, but don’t appear in the HTML code snippet for that reason.
Links, buttons, and form controls are natively accessible to keyboard users, so should be used for interactivity whenever possible. Page elements that are not interactive to mouse or touch users should not be made keyboard focusable (such as by using tabindex). Making non-interactive elements keyboard navigable will cause confusion.
The Force is strong with this one. I have you now.
Kid, I've flown from one side of this galaxy to the other. I've seen a lot of strange stuff, but I've never seen anything to make me believe there's one all-powerful Force controlling everything. There's no mystical energy field that controls my destiny. It's all a lot of simple tricks and nonsense. Alderaan? I'm not going to Alderaan. I've got to go home. It's late, I'm in for it as it is.
- What?!
- Don't underestimate the Force.
- I suggest you try it again, Luke. This time, let go your conscious self and act on instinct.
The Force is strong with this one. I have you now.
Kid, I've flown from one side of this galaxy to the other. I've seen a lot of strange stuff, but I've never seen anything to make me believe there's one all-powerful Force controlling everything. There's no mystical energy field that controls my destiny. It's all a lot of simple tricks and nonsense. Alderaan? I'm not going to Alderaan. I've got to go home. It's late, I'm in for it as it is.
- What?!
- Don't underestimate the Force.
- I suggest you try it again, Luke. This time, let go your conscious self and act on instinct.
HTML Code
<div class="live-snippet">
<div class="focus-indicator dark-background">
<h3>The Force is strong with this one. I have you now.</h3>
<p>Kid, I've flown from one side of this galaxy to the other. I've seen a lot of strange stuff, but I've never seen anything to make me believe there's one all-powerful Force controlling everything. There's no mystical energy field that controls my destiny. It's all a lot of simple tricks and nonsense. Alderaan? I'm not going to Alderaan. I've got to go home. It's late, I'm in for it as it is.</p>
<ul>
<li>What?!</li>
<li>Don't underestimate the Force.</li>
<li>I suggest you try it again, Luke. This time, let go your conscious self and act on instinct.</li>
</ul>
<div class="reference-link">
<small><em><a href="http://fillerama.io/" tabindex="0">Fillerama - Star Wars lorem ipsum</a></em></small>
</div>
</div>
<div class="focus-indicator light-background">
<h3>The Force is strong with this one. I have you now.</h3>
<p>Kid, I've flown from one side of this galaxy to the other. I've seen a lot of strange stuff, but I've never seen anything to make me believe there's one all-powerful Force controlling everything. There's no mystical energy field that controls my destiny. It's all a lot of simple tricks and nonsense. Alderaan? I'm not going to Alderaan. I've got to go home. It's late, I'm in for it as it is.</p>
<ul>
<li>What?!</li>
<li>Don't underestimate the Force.</li>
<li>I suggest you try it again, Luke. This time, let go your conscious self and act on instinct.</li>
</ul>
<div class="reference-link">
<small><em><a href="http://fillerama.io/" tabindex="0">Fillerama - Star Wars lorem ipsum</a></em></small>
</div>
</div>
</div>
CSS code
As always, make sure your outlines and borders have a contrast ratio of at least 4.5:1.
.focus-indicator {
padding: .5rem;
border: 1px solid #999;
}
.focus-indicator.dark-background {
background-color: #000;
color: #fff;
}
.focus-indicator.dark-background a {
color: #fff;
}
.focus-indicator.dark-background a:focus,
.focus-indicator.dark-background a:hover {
border-bottom: 3px solid #000;
color: #000;
}
.focus-indicator.light-background {
background-color: #fff;
color: #000;
}
/* Prevents from having movement from the selector when on focus */
.focus-indicator [tabindex="0"] {
border: 2px solid transparent;
outline: 2px solid transparent;
}
.focus-indicator [tabindex="0"]:focus {
border: 2px solid #000;
outline: 2px solid #fff;
}
.reference-link {
text-align: right;
}