Adding Semantics

2014-06-23
meta
html, development

Today I made a change to this blog. I hope that you can't see the difference between the site now and an archived copy from last month. The change that I made (as you may be able to tell from the title) was to add semantics to the site.

I was prompted to add semantics after giving some thought to how accessible my site was to people who use screen readers. After doing some research I realized that by changing some of my markup and less of my CSS the site would be able to be better traversed by screen readers. I did quite a bit of my research at html5doctor. Here is a summary of the changes I made:

Landmarking elements

Some elements exist on most websites. Screen readers allow people to jump between these common elements using semantic tags that perform the same role on every tag.

The top of the page that in my case includes the title and the navigation bar.

The unordered list of links to other sections of the page. The tag for this is <nav>.

The bottom of the page that in my case includes links to the rss feed, twitter, and Github.

main

This tag denotes the main section of the page. On each page this is the section that is light-blue.

article and section

These tags denote an atom of the page. Each of the sections denote a particular area of the page. The article tag is a particular type of section. To decide wither I should have used one or the other I looked here

Improving SEO

This is not just an improvement for people using screen readers, but for everyone. When I searched for my page on the one search engine to rule them all I saw that the listing for my homepage looked really ugly. All of my other pages had enough content to look ok but because my homepage was just a list of other pages it looked like this:

Image of my homepage's Google results before the change

The 'fix' for this was to add a small paragraph of text explaining the intent of this site. The listing now looks like this:

Image of my homepage's Google results after the change

Note = I do recognize the irony of having a picture of words on a page that discusses making the site better for screen readers. If you are reading this on a screen reader = Sorry.