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][archive]. 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][html5doc]. 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.

### header

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

### nav

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

### footer

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 *section*s 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][artVsSec]

## 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][SEOimage_before]

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][SEOimage_after]

---------

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.


[archive]: https://web.archive.org/web/20140517102136/http://hockeybuggy.com/
[html5doc]: https://html5doctor.com/
[aria]: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA
[artVsSec]: http://www.brucelawson.co.uk/2010/html5-articles-and-sections-whats-the-difference/

[SEOimage_before]: /static/img/blog/2014-06-23-misc_2en5AjCl/SEO_before.jpg
[SEOimage_after]: /static/img/blog/2014-06-23-misc_2en5AjCl/SEO_after.jpg

1 post in with the tag "html"