DEV Community

Discussion on: How do you rate my website?

Collapse
 
tmaxxcar profile image
tmaxxcar

So I am just looking from an accessibility perspective.

Contrast between the text and background is not sufficient for the Social, Drop an Email, nor Connect text. The first h1 on the page is for the #social-heading, which is at the bottom of the page. WCAG guidelines say headings should follow a logical order (h1 through h6). Your image is missing an alt tag, or the aria-hidden="true" attribute to either provide a text description or hide the image from a screen reader. Also, I would add the aria-hidden="true" attribute to the hr objects. Finally, your icons at the bottom of the page are missing inner text, so a screen reader wouldn't know that the link would be to Github or Codepen.

Looking from a keyboard perspective, it might be nice to add a skip-link to the different sections. When using my tab key I skip over the About Me and My Skills sections and jump down to the Instagram link. You can read how to implement a skip-link.

Overall you seem to be using the additional social links as the footer, but you used a div tag as opposed to the footer tag. You are doing the same thing for the header, which you could just use the header tag itself, and you don't have any main content section. I would suggest wrapping the div's of the main content into a main tag. You can take a look at the Web Content Accessibility Guidelines (WCAG) to learn a bit more about accessibility.

Collapse
 
harshvats2000 profile image
HARSH VATS

This is great to learn from this comment. I will make changes and again ask for your opinion in some time. :)