Skip to main content
One of the things I love about Edtech is that I'm constantly learning new things. Even when I already know something, there's always more to learn. This week, I've been revisiting the issue of assistive technologies, and trying to improve the accessibility of our Learning Management System (LMS) for our clients. To improve it, I wanted to do two things:
As soon as you get into the <body> you need to insert this line:
- Make the focus boxes more visible, so that users who use keyboard navigation can see where they are on the page more easily;
- Provide a way to bypass all the menus and skip straight to the main content, if the user wants to.
It's the latter of these that I learnt some things from. I will start by saying that this blog has a 'skip to main content' option and I had never seen it. Do you want to try it out?
Keyboard Navigation
Instead of using your mouse to get around the page, only use your keyboard. You can refresh the page by hitting F5. Then you can move from item to item by pressing the 'TAB' key. If you want to click on a link or button, tab through until it is highlighted and then click 'ENTER'.
Try it now (but only if you are using a computer with a keyboard).
Once you have loaded/refreshed the page, hit tab, and the first thing you should see is a little drop-down box that says, 'Skip to main content'. You don't have to. You can continue hitting 'TAB' and explore everything. If you only want to read the main content though, hit 'ENTER' while the 'Skip to main content' button is highlighted and you'll bypass all the other stuff.
So how do you make this happen? Well, you'll need a few lines of html and a few lines of css.
HTML5
As soon as you get into the <body> you need to insert this line:
<a class="skip-navigation" href="#main">Skip to main content</a>
You will then need to decide where in your code you want to identify the 'main content'. When you have found it, you need to add the element:
id="main"
inside the relevant tag. This tells the browser where to go when the user clicks on the words 'Skip to main navigation'.
CSS
Technically you don't need any css for it to work, but it will look better if you use it. This is what I used and liked (which I got from inspecting the code on this blog):
.skip-navigation {
background-color: #fff;
box-sizing: border-box;
color: #000;
display: block;
height: 0;
left: 0;
line-height: 50px;
overflow: hidden;
padding-top: 0;
position: fixed;
text-align: center;
top: 0;
transition: box-shadow .3s, height .3s, padding-top .3s;
width: 100%;
z-index: 900;
}
Why does this matter?
Web designers have a legal responsibility to make their websites as accessible as possible and this will add to some of the features that were already in place. The main reason though, is because we want our site to be fully inclusive. I try my absolute best to make sure that people with disabilities are not at a disadvantage when using my sites or those I work with in my job.
What if others notice it and don't like it?
Whenever a website changes, in any way, people notice. Sometimes people don't like changes to what they have become familiar with. Generally, they soon get used to it and get to like it again. However, this is not just an aesthetic change. It's like putting a wheelchair ramp in to replace steps. Somebody might not like it, but like/dislike are less important than accessibility. The drop-down box only shows to those who use keyboard navigation, so that isn't likely to be a problem. Making the focus boxes more visible will be noticed but you could always put an explainer at the top of the page for a week or two, so that people understand why it has changed.
Comments
Post a Comment