If it ain’t broke, why fix it?
The answer is more in the journey that helps a developer sharpen his tools than in fixing anything. In fact, the website was stable and accessible. Now, that I am finished, I am writing this post coincident with Global Accessibility Awareness Day. I do not expect this small site to be a significant contribution, but I wish to keep the needs of accessibility on par with the other criteria that should be used for web publishing.
Markdown is another accessibility contributor, in that you can edit plain text that will be turned into the final HTML by Hugo or any other content management system, CMS. This means that you can keep all your valuable content in basic files that could easily move to another CMS in the future.
The other motivation for change was the controversy concerning the privacy that should be extended to your site visitors. The previous template had Google Analytics and Search. I decided to remove all external resources that can lead to tracking. Bye-bye analytics. For search, we are now using DuckDuckGo, a privacy first service.
What needed to be done
I located a theme for Hugo that used Bootstrap 4 and then went to town using it as a model to rebuild the theme based on the Web Experience Toolkit, WET. The separate Markdown content files served as the test case for the implementation since Hugo allows you to have multiple themes.
- I started with changing the color palette of Bootstrap that does not meet the accessibility contrast recommendations. I used the WET colors although I do not know the history of why they were chosen.
- I fixed a text zoom that was in the WET Hugo template allowing up to 10 times zoom. Along the way, I used the Web Accessibility Evaluation Tool (WAVE) to look for deficiencies; try it on your site for starters.
- I replaced the search with DuckDuckGo. It started to fail WAVE tests, so I opened a problem report with DuckDuckGo.
- Tossed all the analytics code, and anything that I think leads to user tracking.
- I decided on the Font Awesome icons and used their recommended accessibility markup in the layout templates.
- Banned the “Hamburger Menu,” leaving site-search in the header and extra navigation in the footer.
Made some generic template snippets to handle the headshots at the start of the articles based on metadata in the Markdown file. For this article it looks like this:
+++ draft = false title = "An Accessible Website Theme" description= "Refreshing the Vation.ca website, maintaining accessibility." slug = "website-accessibility" author = "stevehume" language = "en" tags = [ "development" ] date = "2018-05-17T13:00:02-05:00" lastmod = "2018-05-17T30:00:02-05:00" type = "article" +++
Publish the theme to GitHub: vation-ca/hugo-theme-bootstrapfour
Post a link to this article on Twitter ← (if you like loops follow this).
What still needs doing - future agile iterations!
At the end of this “Sprint” (I actually just walked), some of the next steps.
- Try the themes on some of my other websites in order to slowly retire them by moving their content to Markdown.
- Publish the theme to Hugo theme directory
- Add JSON-LD to the headers for better “robot accessibility”
- make a theme using bootstrap-vue as an experiment to bring WET forward a decade.
Learning by iterations of doing.