Sometimes the smallest things can make a big difference, and that’s also the case when it comes to accessibility.
If you are targetting, or want to cater for, an audience that is browsing in a non-standard way, such as utilising a screen reader or is using keyboard only, then one small change to your web code can make a huge difference in improving it’s accessibility. It’s an option to “skip navigation” or, perhaps more accurately, an internal link that directs people directly to the main text content of the page.
It works like this – when you first load Fog of Eternity you can press the TAB button, then Enter and the page will scroll to the start of the main text content in just those two keystrokes. If someone is using a screen reader, they will hear the “Skip navigation” option first and can choose that link so they don’t have to have the audio readout of all the standard menu options on all the pages they browse.
This is very easy to implement in your code.
In the HTML section, place the following before any of your site content (navigation menus, design, etc), ideally immediately after opening the <body> tag:
<div class=”hidden”<
<a href=”#skipnav”>Skip Navigation</a>
</div>
This creates a DIV which only has the single internal link as it’s content. Then, within your code, we’re going to create an empty DIV that is placed immediately before the main content section:
<div id=”skipnav”>
</div>
For functionality purposes this is enough, as it means that the first link on your page will jump to the main text content. But you probably don’t want to have that link obvious to all users, as it’s not really that relevant to people browsing through normal methods. So we need to define the hidden class so that the “Skip Navigation” link is hidden from view, but still accessible to screen readers and to people using tab-based browsing:
.hidden
{
position: absolute;
left: 0px;
top: -500px;
width: 1px;
height: 1px;
overflow: hidden;
}
This hides the DIV that contains the “Skip Navigation” link, but it does so in a way that it is still acknowledged by a screen reader and by tab-based browsing.