Felt like my portfolio site was done-ish and decided to run an audit using Lighthouse. Accessibility and SEO were where I was getting hit the hardest.
My initial score in Accessibility was 64 which honestly doesn't look good, sound good and generally made me feel like complete and utter crap. I wear glasses and have trouble seeing light backgrounds with dark font, so why on earth was my site set up that way? Well it was just easier to KISS keep it simple stupid it with a white background and black font. So then why was I getting dinged for not having enough contrast? To be honest I'm really not sure but the Google dev-tool Gods had spoken and therefore I had to do something to make sure that everyone out there could enjoy the content on my site. I committed to finding some tools to help me make sure that those contrasting colors were extra accessible.
Now according to Colorsafe.co "WCAG Guidelines recommends contrast ratio of 4.5 for small text or 3 for large text which is 24px or 18px bold." This site lets you pick a background color, font color and even generates palettes for you. But if you like using Adobe Color OR Coolors.co which I mentioned in my last post, you can pull the HEX or RGB values from the aforementioned sites and then pop them into Colorsafe. There is another tool that kinda works a little better in my opinion even though it doesn't look as pretty as Colorsafe.co, and that's WebAIM. WebAIM gives you a breakdown for Normal Text: WCAG AA & WCAG AAA, Large Text: WCAG AA, WCAG AAA, and Graphical Objects and UI Components: WCAG AA. Check out link if you'd like a little background on the difference between AA and AAA. The magic number to get a pass in all categories on WebAIM and give yourself a high-five for being a great human being who cares about others is....7! That's right my friends my favorite number is the magic number for contrast ratio.
On to SEO which stands for Search Engine Optimization. I had a 68, which came from some anchor tags not having aria-labels with them, images not having alt descriptions and my meta not having this little gem: meta name="Description" content="". The aria-labels "provides an invisible label where a visible label cannot be used." To paraphrase moz.com Alt text really comes in handy with screen readers, if an image file cannot be loaded and gives those lovely search engine crawlers help indexing an image. For the meta description content I just put my name as the author and what the page is, like "Personal Website that contains project links, resume and social media links."
After making changes I now have a portfolio website that according to Lighthouse has 100 for Performance, 93 for Accessibility, 93 for Best Practices and 100 for SEO. It still has some opportunities with Navigation and it wants some "discernible" name for the social media icons I have in my navigation bar. Those are next on my list to get 100 in all categories on Lighthouse.
Top comments (0)