Accessibility Guidelines
This guide I created for my ex-colleagues from JUG Ru Group. This is based on common recommendations about accessibility from other guides, articles, checklists, and my own experience.
Design and content are my own. I've designed the site in a browser and was inspired by other guides and some design works from Dribbble.
Project Purpose and Goal
I wanted to share my knowledge about accessibility with a big audience. Therefore I've turned a simple text document into a website.
Also, I wanted to develop CSS color themes. A small and accessibility theme project is a good way for alike experiments.
My first thought was a landing page with a tab panel with developer and designers' guides. But I realized that it was a bad idea and chose a multi-page site format.
Web Stack and Explanation
The project includes a few template pages. I can handle it by Pug. I choose SCSS because it has mixins and global variables.
I wanted to use Webpack from the start, but I changed my mind later. The project is small and it doesn't need this complicated and flexing bundler. I choose Parcel instead of Webpack. It's small, simple, fast, has a lot of useful features out of the box and it doesn't need to configure for a long time.
Problems, Thought Process, and Interesting Features
I had one big issue with Parcel. There were no standard solutions to sort files in different folders. Because of that, I used a few extra plugins to fix this problem. I've found the solution on GitHub. It was convenient for my small project but isn't so good for a bigger one.
The more minor problem with Pug was code snippets formatting. Not all of it was pasing right. I didn't want to add extra plugins because I didn't like the idea to use a lot of extra side code for a few snippets. And I chose not so great but native way to formatting code snippets in Pug.
There are a few interesting features in the project. I mean the skip link and the dark and light themes. I wrote the themes with CSS variables and vanilla JavaScript. In my script, I add a class for the dark theme for the body tag. It changes a text and an icon for a switcher and the current theme saves in localStorage. The script detects a current theme of operation systems and user preferences.
The site is adaptive and accessible (not for 100 %, of course). I've tested it in the desktop and mobile versions of Chrome 86+, Safari 13+, Firefox 84+, Vivaldi 3+, and Edge 88+. Also, I've tested it with JAWS in Chrome and Firefox, and VoiceOver in Safari.
What I've learned
First of all, I've learned how to make the color themes based on CSS variables. Also, I've learned how to create a theme switcher and an accessible card component, and a skip link.
On the second hand, I've used Parcel like a web application bundler for the first time. I've learned how to set it and use extra plugins.
Future Improvements
In a feature I'll want to improve existing guides for developers and designers, add a new guide for QA engineers and create more smoothing theme switching.