This is my portfolio site built with Materialize CSS
https://hankhint.github.io/css-hankfolio/
Use this fully responsive site to see my projects that showcase my skills: JavaScript ES6, Linux, HTML5, GitHub, SQL, NoSQL, MongoDB, MongoDB Atlas, Express.js, React, Node.js, jQuery, Responsive Design, Progessive Web Applications, Heroku, Materialize CSS, Flatpak, LINE Camera
The application uses the MIT license.
- This site was created using Materialize CSS
- https://www.materializecss.com
- Accesibility Insights for Web
- https://accessibilityinsights.io/docs/en/web/overview/
- Web Content Accessibility Guidelines (WCAG) 2.1
I used the tool Accessibility Insights for Web to audit my portfolio. The assessment is based on the WCAG 2.1 AA. It found two main issues, but also illuminated some bugs that helped me improve my site.
The first issue was the contrast of text to background color. The second ssue was the lack of alt tags on all images.
The bugs had some differences. One bug was highlighted by the tool: I had an href accidently in the list element rather than the anchor tag. The process skipped my email address while tabbing through the page, meaning that my email address was inaccessible to users navigating with a keyboard. While fixing the text contrast issue, I noticed that the link color was inconsistent across my page. I changed the colors to be more high contrast, and in the process I also made my page more consistent. While testing colors for the links, I noticed that a few of the cards weren't behaving correctly when clicked, and I found some mistakes in the html file.
The process of improving the accessibility of my site gave me a different perspective on using it. Accessibility and the overall quality of the site were improved. 🚀🚀♿♿
The site before the audit:
The tool alerted me to some problems:
The visualization tool showed me the problems on my site. Seen here in red:
The tab navigation visualization that showed me a mistake in the html with my email. Notice that the email tag is skipped:
Send questions or comments to [email protected] and find me on github https://github.com/hankhint