My Accessibility Challenges

MarsacKg86 — Mon, 26 Aug 2019 19:50:54 +0000

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.

Creating A Portfolio Site

MarsacKg86 — Fri, 23 Aug 2019 20:21:06 +0000

So Week 11 of theClubhou.se Coding Bootcamp. I was excited about designing and learning to use new tools to help get across my vision(HA!). We looked at resources for three different design styles: Brutalist, Flat, and Material. We started with making button designs using Figma. Relatively easy enough but then when it came to adding a text element (which went through too many iterations for three sentences) and a header(thankfully it was just my first and last name) it became abundantly clear that layout is hard. We made three more designs for all the components using each of the three designs. All looked pretty blah, if I'm being honest (not the designs fault but the designer). Then we were told we could use any design elements we wanted but had to write out a style guide for those choices. Well hell! I don't know why I wanted to use a certain rule/formatting/style over any other. How was I going to have any of that make sense with words? Then had a little one on one psychological profile meeting with the instructor to try to get at the root of what would communicate me on the page. I'm too eclectic to really nail down anything, except I like grey and I wanted a brush stroke font for my name as the header. Then the TA suggested using coolors.co to randomly select a color palette that could help me figure out where to go. So now I've got these five colors to use. They are the colors and no questions from the instructor are changing 'em! Update on those colors, come to find out one of my colors isn't very Accessible friendly so I'm gonna have to change that one. Since Google fonts was failing me, I created an SVG in Figma using the pencil tool and did my signature, header complete for now. Hope to find a free, open source tool to use a different brush to get the effect I'm actually looking for. I ended up doing a lot of try this px Ctrl-S, nope what about this, with the live server in Visual Studio Code to see my changes and hope my "vision" would come to life. Now realize I should've just been using CodePen to see all the changes, would've saved me all that Ctrl-S. Well anyway. I've got four pages and a .css. What to do next, publish it? How the instructor wants us to do that is TBD.

DEV Community: MarsacKg86

My Accessibility Challenges

Creating A Portfolio Site