Feedback on my Technical Doc project

[mirandabecodes]

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

[bbsmooth]

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.

[mirandabecodes]

@bbsmooth

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.

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.

@bbsmooth

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 .

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

@bbsmooth

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, 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!