This week I’ve been learning all about Accessibility and the User Experience. I gotta say, after learning about what User Experience Designers do, I’m fascinated and actively researching the field! So much goes into the User Experience than just the look of the webpage. I had no idea!
But what I really want to focus on is Accessibility. In a crazy twist of fate, while I was working through my Treehouse videos, all on Accessibility, I stumbled on a coding podcast and the first episode was on… you guessed it, Accessibility! Listening to this really opened my mind to all the different ways to make websites accessible. There are so many disabilities beyond blindness that effect how people experience the web. Color blindness, physical limitations, hearing loss, sensitivity to lighting effects, etc. Wow! Who knew!?! And if you don’t comply with the WCAG you could end up in some legal trouble.
So our assignment this week was to take a website that we created and made it more accessible. I chose my Discography homepage to focus on, the one I redesigned with CSS Grid. It could really use some help! While all of my images had alt text, which is great for screen readers, my page had some limitations that didn’t make it as accessible as I would like.
So without further ado, here’s what I fixed and why…
The first fix I wanted to made was more of a UX fix than Accessibility. I wanted to fix the Header and make it span the page. It just looked odd shortened like that. I had to play around with this and figure out what was causing it. Turns out, it was a media query causing all the problems.
The Navigation Font
The Nav Font actually wasn’t too bad. It was an improvement from the Bootstrap version which was really hard to read, especially with the hover effect that has a gradient light up effect. After listening to the podcast and thinking about what the speaker said about making the font larger for those with limited sight. I decided to enlarge the font and make it thicker to really stand out.
Background Color of Navigation Links
If you’ll look at the two images above, you’ll also notice how the background on the buttons has gotten a little lighter. I wanted more distinction to set them apart from the Header background. When you hover over them, the gradient effect with a very light red still occurs, but is a little easier on the eyes now.
This was actually the saddest change I made to the page, but I stand by why I did it. In the first two versions of this page, I had created an Overlay effect where, when you scrolled over the Hero image of the band, a screen would push up from the bottom of the image, relating more info on the band. It was a really cool effect that I enjoyed figuring out. However, I noticed it didn’t work so well on touch screens. I also wonder if the effect might be too much for someone with sensitivities. Either way, if didn’t satisfy my UX, so I placed the text in the caption at the bottom of the image. And I have to say, I like how it turned out.
The Caption Font
I wanted to enlarge the font under the Hero image that held the info about the band. It was small and hard to read. After adding the text from the Overlay, I increased the font size and played around with different fonts only to settle on the original due to its readability.
Originally, my color scheme for the page was black, gray, and red (a favorite of mine) and the visited links would appear pink. After going back and accessing the whole thing, it really made for an odd choice. I think someone may have commented when I sent it out for testing originally on how they didn’t like the pink. And with the dark color of the pink, it wouldn’t have enough distinction from the background for a color blind person. Therefore, I decided to change the color from pink to white. It provides a better distinction and fits better with the overall color scheme of the page.
H1 and Lead Text
When I switched from using Bootstrap to playing with CSS Grid, the H1 and Lead Text suffered a little in regards to size. I didn’t think too much of it at the time because they were distinct enough to read and at the top of the page. However, I knew I could do better. By making them larger, it’s easier for those accessing the site to tell what it’s actually about.
After enlarging the text, I wanted to give the H1 a little more definition to really make it stand out. So I added a text shadow to really set apart the different sections of the page. It looks distinctive and gives it a bit of added appeal.
New and Improved Site
By playing around with some of the colors and fonts, I think I’ve improved my discography page.