Leeneon is the name of my portfolio template that now is available on GitHub. The the initial idea was to sell it on ThemeForest and in this article I will let you know why I have changed my mind.

A brief history

When I started designing Leeneon, my main goal was to create a product to sell on internet. The idea was to create a website template that had accessibility as its main differential. But throughout the process, I had a hard time looking for other accessible open source websites that I could learn from.

When I finished the first version, I realized that I had developed the project that I would have liked to have had access to during my own template development.

It was my turning point, so I decided that Leeneon would be more useful to dev community as an open source project rather than being sold.

What makes Leeneon accessible (or very close to it)

The WCAG is a document that contains all the instructions for creating accessible content on the web. This document is maintained by W3C, the organization that regulates web standards worldwide. Leeneon was developed to meet a lot of those standards.

Check out some of the features implemented in Leeneon:

• HTML semantics - Correct use of HTML 5 tags that provide meaning for its content.
• Color contrast – All color combinations between text and background have a contrast of at least 4.5:1.
• Keyboard navigation – All functionalities are available from keyboard and the focus are always visible.
• Reduce motion – Leeneon identifies user's system preferences to disable or enable animations.
• Dark and light theme – Leeneon identifies user's system preferences to choose between dark or light themes.
• Responsive – The website adjusts for all screen sizes.
• Zoom – It supports up to 400% zoom without breaking the page.
• Right to left – Both right-to-left and left-to-right versions are supported.
• Form errors – Contact form errors are clearly presented and guides the user on how to fix them.
• Images description – Non-decorative images have alternative text.
• User has the control – Although Leeneon adopts settings based on user's system preferences, an interactive panel is available for the user to manage preferences on their own.

Tests

This is the result of the automated test powered by Web Dev Measure Tool.

IMPORTANT: Automated tests are important, but they are not a substitute for human tests.

To make this article straight to the point I'm not going to explain all details involved in Leeneon's accessibility development. Let me know in the comments below if you would like to know more about it.

Screenshots

Client section in green color and dark mode:

Blog section in blue color and light mode:

Contact form errors alert in purple color and dark mode:

About section in right-to-left version, red color and light mode:

Accessibility preferences opened in orange color and dark mode:

Can you use Leeneon?

Of course you can! But first let me tell you something: Leeneon is an open source project that needs collaborations to be improved. If you find some bug don't forget to open an issue on GitHub. I will try to work on it as soon as possible.

You can use Leeneon to publish either personal or commercial websites, just remember to keep the credit that are at the bottom of the template. The documentation are available in project's repository on GitHub.

I want to be able to dedicate myself more and more to improve Leeneon's accessibility, but for that I would like to ask you for help: consider buying me a coffe.

Conclusion

Starting a project is the best way to learn new web development concepts and tools. The process of developing Leeneon was crucial to me in order to learn more about web accessibility.

If this project is in any way useful for the growth of accessibility on the web, I will be very happy to have made a small contribution to this issue that impacts the lives of millions of people.

Demos

Leeneon has two templates:

• Default
• Fullscreen

Check out the project on GitHub: