Tribute feedback - acessibility

Code Feedback
1

Hello all,
Could you please provide some feedback, especially regarding acessibility, on my tribute project?
CodePen: https://codepen.io/nosmaritimos/pen/poEmdoJ
Github: https://github.com/Nosmaritimos/fcc/tree/main/tribute

I’ve tried to add some responsiveness, and use some of the fancy stuff from the challenges.

Thank you very much!

2

Welcome to the forums @nosmaritimos. Your page looks good. Some things to revisit;

  • Codepen provides the boilerplate for you. It only expects the code you’d put within the body element in HTML. (No need to include the body tags). For anything you want to add to the <head> element click on the ‘Settings’ button, then HTML and add it into the ‘Stuff for <head>’ box.
  • All your styling should be external. Do not use internal styling.
  • Do not use the <br> element to force line breaks or spacing. That’s what CSS is for.
  • Make your page responsive. Remember, the R in RWD stands for Responsive
    • There’s always a horizontal scrollbar on large or small screens
3

A few accessibility issues:

  • The <figure> should be inside the <main>. In general, all content should be contained within a landmark. This particularly helps screen reader users who can navigate your page by landmark.
  • I think the link at the bottom needs to be set back to its default display of inline and then placed in the <p> that precedes it. Since you set the display to block it takes up the entire width of the page and thus the keyboard focus indicator also wraps the entire width of the page instead of just the link text itself, which is how most people expect it to behave. Generally, you should avoid going against expected behavior unless you have a really good reason to do so.
  • Your page is responsive to changes in view port width but there is a horizontal scroll bar at all widths. Granted, it doesn’t scroll very much but I think you should try to get rid of it.
  • Your page is not as responsive to changes in text size. If you don’t know how to manually increase the text size, using Firefox, go to the Edit->Preferences menu, scroll down to Zoom and activate ‘Zoom text only’. Then while holding down the Ctrl key scroll your middle mouse button to increase the text size to at least 200%. I think you’ll see the issue at the top of the page. This one is an easy fix with a few changes to your CSS.
2 Likes
4

@Roma and @bbsmooth
Thank you very much for your time and effort.
I really appreciate not only the feedback, but how it was given. You guys did not give the actual answer. I appreciate this.

  • I was coding in the VSCode, and copying and pasting the code. :upside_down_face:

  • I will keep styling external but on the challenges, they are done internally.

  • I understood the
    element.

  • I tried to fiddle with the code to make the bar disappear. It is related to the img-div. I will keep hacking at it.

  • Understood, I have made contain the and the quotes .

  • I understood the focus indicator spreading to the whole width of the page in block element.

  • I will keep hacking at this horizontal scrolling. I have tried to improved it but somewhat failed.

  • I went back and saw the responsive attribute to be alloted to the fonts. I believe it is better now.

Codepen: https://codepen.io/nosmaritimos/pen/poEmdoJ

Could you guys check?
Thanks

5

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