RWD Tribute page

Code Feedback
1

Hi everyone!

I hope you’re having a great day. If anyone is interested, I would like to receive feedback on my Tribute page project at the link below:

https://codepen.io/jspiderhand/pen/JjoeLVj

I look forward to hearing from you.

1 Like
2

Do not use view port units (vw/vh) for font sizes. This is an accessibility issue. The user should be able to manually control the font size but using view port units denies the user this functionality. Please use ‘em’ for font size.

3

Interesting. Where did you get the info about view port units causing an accessibility issue for fonts? Can you post a link?

Thank you for your feedback

4

Narrow your browser as far as it will go. Can you still read the text on the page? Even if you can, I think you will have to admit that there are probably a lot of people who can’t. Yes, you can widen the browser window to make the font size bigger, but what if someone can’t widen it big enough for their needs?

Browsers/browser extensions allow people to manually increase the text size on the page, but that doesn’t work when you use vw for the font size. If you want everyone to be able to read your page then you need to allow them to control the font size. That is the accessibility issue here.

If you don’t know how to manually increase the text size, using Firefox, go to the ‘View->Zoom’ menu and activate ‘Zoom Text Only’. Then while holding down the Ctrl key, scroll your middle mouse button to increase the text size. It won’t work on your page as it is now since you are using vw units for the font size. Other browsers have extensions you can add to enable text only increase.

Bottom line, if you want your page to be truly accessible then it needs to allow the user to control the font size and it should be responsive to changes in the font size.

If you want a link, see:

https://www.ada.gov/pcatoolkit/chap5toolkit.htm

See section B. 1. c. in particular.

See also:

https://www.w3.org/TR/WCAG21/#resize-text

5

Good work.Different layout and styling.

1 Like
6

Page looks good @Jspiderhand. Some things to revisit;

  • Don’t use <br> to force line breaks or spacing. That’s what CSS is for.
  • It’s not a good idea to skip header levels. They should be in order.
    • You have h1, h3, h2.
7

@Roma Thank you for your feedback. I’ve reviewed the elements you pointed out and believe I’ve made the necessary changes if you’d like to review them.