React Random Quote Machine - FCC Project

[rturner89]

Hey all!

Please take a look at my Random Quote Machine and let me know what you think!

https://rturner1989.github.io/FCC-Random-Quote-Machine-React/

I appreciate anything you can feed back

[bbsmooth]

First of all, bravo on the keyboard focus indicator. Most people just use the browser defaults, which in my opinion are usually terrible.

I’m going to throw a bunch of accessibility issues at you. I don’t expect you to know all of these but this is how you learn

• Anytime you have a timer you need to give the user the ability to turn it off (unless it is absolutely necessary, such as a timer on a test). People may not be able to finish reading a quote before the timer goes off and the next one is shown, so they need the ability to turn that feature off.
• The color contrast ratio on the New Quote and Short Quote buttons are not quite big enough to be accessible. Use the WebAIM color contrast checker to ensure that your color combinations meet accessibility standards.
• The Twitter link needs actual text associated with it so that screen readers know how to announce it. What text would you have for the link if you weren’t using the icon? You should add that text inside of the <a> and then you can visually hide the text so it doesn’t actually show up on the page. Same goes for the copy quote button.
• This feels like a <blockquote> to me. Consider using this tag for the quote. Take a look at how MDN marks up a block quote.
• The use of a progressbar here is probably not the best option for accessibility. A progressbar is generally used to display the amount of time left for a task to complete. If retrieving a quote took 10 seconds before it could be displayed then a progress bar would be appropriate here. But the new quote displays instantly so there is no task we are waiting to complete. I think what you want here instead is a timer. I’m guessing you added this feature just to play around and learn, which is great, but in the “real world” this simple feature would take a lot of work to make accessible. It is best to avoid time limits like this unless they are essential (but as mentioned above, you could add the ability to turn it off).