Fourth project(Technical documentation Page)

hello again, everyone. This is my Fourth project on responsive web design course, technical documentation Page.This one was okay. Again, i Would love to get feedback your feedback on this project as well, if you have any.

Edit: Better accessibility and alt for images. Corrections on the <ol>.

here’s the link : https://codepen.io/parth0201-in/full/dyRdvPP

Overall this is great. The responsiveness on this is very nice. And I just noticed that you added a link to jump back to the menu in narrow views, a nice feature. I do have some suggestions for you to think about.

  • You should probably use the <code> element for all of your HTML examples. I see you are using it for inline examples in sentences, but I don’t see it being used in the colored box examples (instead, you are wrapping them in <p> tags).

  • Technically, the <ol> tag can only have <li> elements as direct children, so you need to move the <div> and <p> inside of an <li>.

  • I would highly recommend you customize the CSS outline property on the links in the nav menu (or something similar). I cannot see the keyboard focus indicator at all as I tab through the links. Someone using the keyboard should be able to tell where the current keyboard focus is. Same issue with the Index jump link.

  • I think the alt text for the images with HTML examples could be more descriptive. For example, the first image has the alt text “image explaining different aspects of html tag.” You actually don’t want to include the word “image” in the alt text because it is unnecessary since it is already assumed that the alt text is for an image. Since you have actual HTML code in the image you need to describe the code. In general, anytime you have text in an image then you need to include that text in the alt text. I think something more appropriate might be “An opening p tag, followed by the text ‘My cat is very grumpy’, followed by a closing p tag”). Now if the image doesn’t load people will still be able to “see” the example. And blind people will be able to see the example by hearing this description.

  • The alt attribute is not supported on the anchor element, so the alt text you have on the Index link is doing nothing (a screen reader is not going to read it). A screen reader is just going to read “Index link”. You could possibly make its intent a little clearer, such as “Jump to Index” and you could visually hide the “Jump to”.

  • I might be tempted to put a min-width on the HTML image examples so the text in them doesn’t get too small if the user has a very narrow view port. If you do this then you’ll want to wrap them in a div and set the overflow to auto so that the user can scroll the image. There are actually some other things that need to be done to make the scrolling perfectly keyboard accessible (because of limitations in Chrome-based browsers) but I won’t go into those here.

Thank you again for analysing my work @bbsmooth .

i knew i should have put the <div> in the <li> tag, but i did it to escape that extra work for assigning a new id and making the <li> bullet transparent. i will try not to do that again.

outline-property and visually hiding stuff i will have to first learn and then i will try to implement it.

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