Countdown App Project -FCC Web development

Hi , I just made a Countdown Timer as part of FCC Course. Take a look at it. Codepen

This does indeed look very nice and seems to work as expected, but you have committed one of the cardinal sins of accessibility, it is not keyboard accessible at all.

I’ll get you started. The start and reset buttons are wrapped in a div with the class name “buttons”. I’m not sure there can be a bigger hint here as to what element you should be using for these :slight_smile:

Always use the most semantically correct elements you can. If something is behaving like a button then it should be coded as a <button>. Just doing this simple thing gains you a ton of accessibility. If you code all of the buttons on your app with actual <button>s you pretty much solve the keyboard accessibility issue.

Sorry if I come off as a jerk here, I’m really not trying to make fun of you, a lot of people make this mistake. I know FCC delves into accessibility a little but it is by no means a deep dive and if you are just following the FCC curriculum I don’t necessarily expect you to realize that this is an issue. But hopefully you will take this into consideration for future projects. Don’t overlook the importance of HTML. It is the building blocks of the web, and semantically correct HTML is essential for people who rely on the keyboard or other assistive technology to use the web.

Hey , Thank you for your valuable feedback :slight_smile: .I always forget to use semantics while building things . Thank you for pointing out that . I have changed the code and I will keep this in my mind for the future projects. And I appreciate the time you spent for me .

1 Like

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