Design and Accessibility

Process Post 5

One thing that I’ve been concerned about upon creating content for this website is the intersection between design and accessibility. Piecing through the elements that I liked visually was the easiest part. I really enjoyed the process of creating a cohesive theme across the different facets of my website, however as I did so, I was consistently concerned about whether or not my pursuit of making an aesthetically pleasing website and the accessibility factor were intersecting properly.

Designing the site initially after picking a theme seemed like it would be fairly easy. I made sure that I was cropping all of the featured images for each post using the same aspect ratio to ensure that all of the blog posts would be in line with one another on the home page. I ensured that the fonts and headings that I used were consistent with the overall vibe that I wanted the site to have, and were both tidy to look at while also not being incredibly formal. When I posted my first recipe, I made sure to go on my phone and scroll through to make sure that everything was still legible and looked mostly organized.

Upon doing so, I noticed that the size of the images breaking up the text were way too big and were cut off on the right side. Overall this made the whole page look unfinished and difficult to navigate. I had to go into the site again to look at what exactly was shifting my images around, and came to the conclusion that the sizes of the images were not responsive depending on the platform that was being used. After making this work, I was excited to realize that this was also an accessibility feature that I’d unknowingly been working on.

In addition to working with image sizes, I’ve been doing my best to add short but thoughtful alt text with each of the images that I’ve been including. Additionally, I’ve been working to make sure that the font that I picked doesn’t contrast badly against the background and that it’s legible. Overall, I know that I have a lot more work to do to make my site accessible, but it was cool to see that some of the things that I’ve already been trying to do to make things look nice from a design perspective also contribute to the accessibility of the site.

css.php Skip to content