Feedback on my Technical Doc project

Hi campers!

Finished my technical documentation page. I couldn’t think of something to write about, so I just used the project example text and focused more on the html and css of it. Nav bars continue to be the bane of my existence and now I want to just fiddle around with making a bunch of them. Why are they so hard…lol

Here is my project. Thanks for any feedback!

Technical Documentation Project

Nice job. Overall, looks great and functions well. I do have a few suggestions though.

  • When you narrow the browser you get a horizontal scroll bar at some point. I think most people would solve this by turning the nav menu into a hamburger menu that you can toggle open/close. But to do that properly you need JS. Without JS, I think you should look at moving the nav menu to the top of the page with the content below it.

  • The color of the blue text does not have enough contrast with the background to be accessible. Normal text (such as the links after they have been visited) should have a contrast of at least 4.5:1 with the background. The larger blue headings can go as low as 3:1. So you’ll either need to make the blue darker or the background lighter (or a combination of both). You can check your contrasts using WebAIM’s Contrast Checker.

  • You don’t have any heading elements (h1, h2) on your page. Headings are very important for accessibility as they allow people who listen to your page to get a good overview of how the page is structured. I would say that the “JS Documentation” heading should be an h1 and then the blue headings in the content should all be h2s.

Thanks, yah I noticed that. I also noticed it doesn’t work on a smaller device/phone. Unfortunately, no JS under my belt yet. It’s next after I finish the html/css course.

Thanks! That was really helpful. I actually tried to choose my colors well based on visibility and color theory but it was a lot of trial and error. That link is so helpful and I will keep it for future reference. I made changes and now it should follow the rule of 4.5:1

Thanks, fixed this too! I actually put it through a code validator and it mentioned this but I was confused and didn’t get it. You explained it well and I realized it was a fairly quick fix. All good now! Accessibility rules are definitely a hard thing to hold onto right now as I new and still just trying to hold onto the html/css language. I know there are likely other accessibility issues with the site too.

Thanks for your help! So grateful!