TurtleQueenCoding Personal Portfolio

Code Feedback
1

My personal portfolio is here. I leaned into the “Turtle Queen” part of my username and spent a lot of time on the CSS. Let me know what you think!

1 Like
2

I am still working through the projects and the new update curriculum, so I am definitely not an expert, but I think your personal portfolio looks great! I really like how you came up with your theme and I love the wavy hover effects you added as well. And by the way, your other projects look wonderful as well. Great job!

1 Like
3

Hi Allison, or should I say Turtle Queen. I think you did a great job on this portfolio. It’s very unique and quite interesting to look at. I’m just going to point out a few minor accessibility issues, but overall I think this is in great shape.

  • Best practices dictate that there should only be one <h1> heading on the page, and it should near the top of the page, usually right at the beginning of the <main>. You have this with your first <h1> so I would recommend that you change the other <h1>s to <h2>s. You can still keep the styling the same, it’s just a change in semantics, which will help people using screen readers navigate your page a little easier.

  • I think you might need to make the background behind the first <h1> heading a little more opaque as most of the text is over the turtle image and it can make it a little hard to read for people with vision impairments. I think 0.8 is probably sufficient. The other two headings don’t have quite as noisy backgrounds but it might not hurt to increase their opacity a little as well.

  • The alt text on your selfie could be better. If you are including a picture of yourself on your portfolio then I’m assuming you think it is important that people know what you look like. So your alt text should describe what you look like so people who can’t see your image will still get that information.

  • On the other hand, the project images seem more like decorative images to me and should probably have empty alt text (alt="") so that screen readers ignore them completely. I’m basing this on the fact that right now the alt text you have for them is just repeating the link text, so it doesn’t seem that the images really contribute any additional information to the page.

  • Another thing you might consider is wrapping the project images with a link since a lot of people probably expect to be able to click on the image to get to your project. If you do this, then you’ll want to use the aria-hidden="true" attribute on the links around the images so that screen readers ignore them completely. You don’t want screen reader users to have duplicate links going to the same place right in a row like that. Just having the plain text link is enough. I think you’ll also want to set tabindex="-1" on those image links as well so that keyboard users in general can’t Tab to them. Again, keyboard users only need one link to use.

Again, real nice job with this.

1 Like
4

Thank you for the very specific accessibility suggestions. I didn’t realize all of the issues you pointed out, and I will go ahead and implement the changes you suggested.

5

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.