pixelpanic.me neo

Introducing pixel1 theme




It is my pleasure to present you the all-new pixel1 hugo theme.

This blog post will explain my reasons to build my own theme, tech used, considerations and what is the next steps.

Making a truely personal theme

I have been blogging in different platforms, like Google’s Blogspot(also known as Blogger), Several WordPress site and finally Hugo, all these while I am using either free or premium themes downloaded online. As a person working around website for half of my life, shoudldn’t I have my own theme that is work from stratch as well?

Reasons to build my own

Building my own means it is fully personalised. I have complete control on which framework to use, styling and the content layout.

Accessibility

I have been working on projects that compliant with local laws about accessible websites. Universal design and making website accessible is something I would love to push forward in the industry and I would like to start from my own personal website.

Hugo is become more popular and stock themes are showing up on the market, however, there are not much accessible themes that are currently available. For pixel1 theme, I am targeting to complaint with WCAG 2.1 AA standard. These including some basic considerations:

  • Reduced motion (Minimise animations and effects)
  • Use of colours, they are carefully selected and has a contrast ratio at least 4.5:1.
  • Can be fully controlled by keyboard.
  • Alt text are used on non decrorative images or grpahics.
  • Writing that are targeting and considering for boarder audiences.

Technology used

For the initial release I am using only Bootstrap 5.2.1, as it provides good browser compartibilty, robust accessibilty support and it is well documented.

Roadmap

To-do items

Althought several tools has been used to check on best practices and technical errors, this theme is yet to complete independent audit on the WCAG levels. Once the audit is done I will be happy to open source under MIT license.

  • Release
  • Independent WCAG AA Audit
  • Open-source