Accessibility for screen reader users

[sukiletxe]

First, thanks for this application! I like its customizations, sounds and hotkeys a lot (I've tried several today).

I'm having some issues regarding accessibility. I use a screen reader to navigate the computer (and phone, but that's not important), and this application poses some difficulties. Examples of screen readers are NVDA for Windows (and Narrator, most useful for Windows 10), VoiceOver for Mac and Orca for Linux.

• Checkboxes are not rendered as checkboxes. You use a class checkbox, but semantically the only information I get is that these items are clickable. Thus I don't get any information on their state (checked or unchecked). A solution would be to use native checkboxes (inputs with type checkbox) or checkbox roles (role="checkbox" in the div). The second solution would be more cunversome because then tracking states manually would be needed.
• Same thing for buttons, though here the class is not defined as clearly (I'm just skimming through the code).
• Particularly, the button to start the timer is not labeled, nor the two buttons below the heading with the app title.

I see you use svgs for some of these, check out Accessible SVGs for info on how to fix some of these.

Thanks again for this app! If you need testing (coding outsider code scares me somewhat as I might break the visuals), feel free to reply, also if you have any questions.

[sukiletxe]

Perhaps this codepen, which discusses how to make buttons with svgs accessibly is more appropriate.