Published: 26 Feb 2022

Semantic structure and navigation

When I got my new job, I started looking for some industry-recognised qualifications that I could possibly study for. Qualifications aren't everything but I like to know that the information I give in work is correct. Given that I have self-learned most of what I know about accessibility, I wanted some way of verifying my information.

When I looked into the quals that would be widely recognised, I found out about Deque University Opens in new window and IAAP (International Association of Accessibility Professionals) Opens in new window. Deque offers lots of courses on various aspects of accessibility and IAAP runs an exam system, to enable certification. They are both quite expensive and I nearly gave up. Then I found a little gem in Deque's frequently asked questions. If you have a disability, you can apply for a scholarship and this gives you access to all their courses for free. So I did!

The courses are arranged into themes. I've completed the set of courses on document accessibility, which was great as it confirmed that what I've been saying and doing was right. Now, I'm working through some of the web content and this week, I've learned a few new things. So I thought I'd share...

Page title

I already knew about the importance of titles. For webpages, the page title goes in the <head> section of the html code, and it shows on the tab in the browser. It is also read by screen readers and users can use it to help navigate, especially when they have several tabs open.

What I didn't know is that unique information in the title tag should come first. So I had been using the following code:

<title>Finnberrys - WCAG</title>

... whereas I should have been using:

<title>WCAG - Finnberrys</title>

It seems like quite a small thing but it does make sense. If someone wants to check what tabs they have open, they may not need to listen to the whole thing, so putting the repeated information at the end is helpful.

Current page

This one is also obvious, and is probably helpful to most people. There should be some visible indication, within the navigation bar, of what page you are currently on. So I have added in a thick underline for the current page. To do this was really easy. I added in a class for the current page, in the html, like this:

<a href="index.html" class="current-page">Home</a>

Then I added in some styling for it in the css, like this:

.navbar a.current-page {
	padding-bottom: 1rem;
	border-bottom: solid 0.2rem #805000;
}

Obviously, that has to be done on each page, changing the link that it is applied to.

Opens in new window

This was the trickiest to get working but it was something that I was keen to find a solution for. When there is a link on a webpage, it can be coded to open in the same window, a new tab or a new window. If I'm linking to something within my own website, I tend to just put in a normal link that opens in the same window. If the link goes somewhere else though, to a different website, I prefer it to open in a new tab. That is because I might want to go back after browsing the new site, to where I was and I don't want to have to click back loads of times.

However, if a link is going to open in a new window, there should be some way of letting the user know this. Deque recommend using an icon which has alt text to say that it will open in a new window. When I looked into using icon libraries though, I found that you have to link to their style sheets and I didn't want to do this. So I found a royalty-free image (which I may replace with my own eventually) and used that. Here's the code:

<img src="../Images/new-window-icon.jpg" alt="Opens in new window" class="new-window"/>

The tricky bit came because I've got css for images elsewhere, and I wanted this image to look and behave differently. I wanted it to sit in with the text and be a sensible size. So I added in this css:

img.new-window {
	display: inline-block;
	float: none;
	height: 20px;
	width: 20px;
	padding: 0;
}

I'm really enjoying learning these new things as I go through the courses. I'm trying to apply them to this site as I go, so that it will model best practice. Once I've finished building and redesigning it, I intend to add an Accessibility page too, in the footer. That might be a few weeks off though.

Clicky