Technical Documentation Page - FIDE LAWS of CHESS | FCC

Hi everyone! :smiley:
It’s my fourth project for FreeCodeCamp.
I would appreciate any feedback.
Thank you in advance :slight_smile:

PS
My first project for FCC is here: https://codepen.io/Vanachima/pen/wvGNaPJ
And second project for FCC here: https://codepen.io/Vanachima/pen/LYNwMBY
Third project here: https://codepen.io/Vanachima/pen/yLoaXvd

Hey, this is nice work. I’m just going to point out a few accessibility improvements.

  • Hamburger menus are actually quite complicated as far as accessibility is concerned. I won’t go into all the details but you definitely need to use a <button> here. Merely adding a click handler to a <div> is not accessible (you will not be able to use the keyboard to open the menu). Using a button brings back the keyboard functionality. In general, always try to use the most semantically correct HTML element. In this case it is definitely a button.

  • Speaking of semantics, you only have one heading on the page (the h1 at the top). All of those dark blue headings that begin each section should be <h2>s. The general rule is that if it looks like a heading then it should be marked up as a heading. Headings are very important to screen reader users.

  • The responsiveness to changes in view port width is quite good with only one exception. The content under the heading “The initial position of the pieces on the chessboard” that associates each piece with its symbol does not reflow very well when the view port gets narrow. First, do not use &nbsp; to line up text. There are a variety of ways to do this with CSS. Second, you will probably want to change the layout for narrower widths. Perhaps put all the text to the left and have the symbol to the right. Don’t be afraid to add helper <span>s to help you do this.

  • Concerning the image alt attributes. You have them for all of your images, which is definitely a good thing, but I’m going to suggest that you probably can leave them blank for a lot of the images. For example, the images under the heading “The moves of pieces”. You first describe in the text itself how a piece may move. The image after the description is merely showing graphically what the text explains, but it is not adding any new information. If the image was not to load for some reason the reader would still understand how the piece could move from just the text. Since the image is not providing any additional information then I think it is best to leave the alt text blank so that screen readers will ignore it. Right now the alt text you have for these images isn’t actually describing what the image shows (for example, the alt text for the bishop is just “bishop”). So that alt text isn’t helpful to begin with. But adding an actual description of the image would just be duplicating what is already explained in the text, which is annoying for screen reader users. Hence, my suggestion to leave the alt text blank for any images that are not providing additional information that can be found in the surrounding text.

  • One image that definitely needs more description is the image under the heading “The initial position of the pieces on the chessboard”. Because you do not explain the initial position of the pieces in the text then you are relying on the image to explain that. But the alt text for the image is merely “chessboard” which is all a screen reader user is going to hear and thus they will not hear the information about how to place the pieces on the board. Personally, I would not put this information in the image alt text because it seems like a lot of information to explain and alt text should be reasonably short. I would either add an explanation in the text itself or add a link right below the image to a page with a good description of how to initially line up the board. If you went with this second option then the alt text for the image could be something like “See link that follows for details on setting up chess board” or something like that.

1 Like

Thank you very much, I have implemented almost all your suggestions. :slight_smile: