Personal Portfolio Page- feedback?

https://codepen.io/clairemalcontent/pen/XWpyXPX

Hi guys,
This is my completed (I think) personal portfolio page. Let me know what you think and if there’s any improvements I could make.
Thanks!
Claire.

1 Like

Hey @clairebrowneillustra, none of the images on your portfolio seem to be showing up :frowning:

Semantically, best practices suggest that you should only have have one <h1> on the page, so I would recommend you change the second/third <h1>s to <h2>s and then the <h2>s under the “Here are some of my projects” heading to <h3>s.

The two current <h2>s under the first <h1> don’t really feel like headings to me. Headings typically introduce content and these two <h2>s don’t have any content underneath them. Is your page completely inaccessible because you made these headings? No. I just wanted to point out that you might be using headings where none exist. There are several options for replacing these headings while keeping the visual styling as it is but I don’t have enough time to go into that at the moment. It would most likely involve visually hidden text and intentionally hiding elements from assistive tech.

Your project image links are using alt text on the images (which is great), but I would suggest that you remove the verbiage “screenshot of” from the beginning of the alt text. When a screen reader announces that link to the user it will use the image alt text. So it will say “screenshot of product landing page for petteepee.com link”. But you aren’t linking to a screenshot of the product landing page, you are linking to the actual landing page project. So it would make more sense for the alt text to just say “product landing page for petteepee.com link”. Or better yet, you might even consider having the alt text set to “product landing page” since the purpose of the link is to take the user to your product landing page project, the actual product on the landing page isn’t really essential information.

Also, concerning these project links, since you are using target="_blank" to force them to open in a new window you need to let the user know that the link opens a new window (both visually and with text). Generally you would do this with an icon at the end of the link text that represents a new window opening and then some visually hidden text (after the <img>) in the HTML telling the user that the link opens a new window. This codepen does a decent job of showing how it can be done.

The order of elements in the DOM is also important for accessibility. Right now you have the <h2> heading for each project coming after the link to the project. I recommend you reverse this. Someone using a screen reader is going to expect the heading to come first and thus if they are navigating your page by headings they are going to be a little confused by the heading following the link it is supposed to introduce.

I would definitely use CSS to add some change to the hover state on your links at the bottom.

2 Likes

Thanks so much for your detailed response. The alt text especially was something I wasn’t too sure on so that was super helpful! Accessibility is so important and I still have a lot to learn in that area so all your advice there was great. My background is in fine art (painting and drawing) so I’m pretty new to web design stuff and I’m still learning. My brain doesn’t automatically think first about functionality it just wants to think about aesthetics!

Regarding the images, I was linking to my icloud but that doesn’t really work for public links to codepen so they’re on Github now instead.

Thanks again for all your help!

1 Like

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