Accessibility improvements

[EmmaDawsonDev]

Hi! I found your site through the a11y slack and would like to help make some accessibility improvements if I can. However, I just wanted to ask a few questions before I touch the code in case you are following any kind of coding conventions etc.

I notice that a lot of the html elements are empty and you are using javascript to inject content into them - is there a reason for that? If so, I will leave it be and try to find the relevant JS that corresponds to the html. If not, a lot of the JS could be stripped down and placed directly into the html making it easier to read. It would also make sure your site loads even if JS fails to load for some reason.

Is anyone else already working on something? I wouldn't want to do duplicate work.

[thewhodidthis]

Hi @EmmaDawsonDev, good point, thanks. We care a lot about accessibility and any help would be greatly appreciated, see #4 for example, x

[hkolbeck]

Hi Emma, the short answer for a huge quantity of those is localization, others because it's using vanilla JS and needs to emulate some of React's ability to replicate complex structures in multiple places, and others because I'm an inexperienced frontend dev.

I'm absolutely willing to chat more in depth, but heads up that I'm making some major UI changes at the moment.

[thewhodidthis]

In terms of i18n, <template> and HTML custom elements might be suitable in this context

[EmmaDawsonDev]

Hi Emma, the short answer for a huge quantity of those is localization, others because it's using vanilla JS and needs to emulate some of React's ability to replicate complex structures in multiple places, and others because I'm an inexperienced frontend dev.

I'm absolutely willing to chat more in depth, but heads up that I'm making some major UI changes at the moment.

Ok, good to know. Let me know when you're done with the major updates and I can take a look at some accessibility fixes.

[hkolbeck]

The page is in more or less its final form for now. The following are the major summary of changes from the currently deployed version:

• Moved some buttons to below the image, all but extract will be moved into an in-progress menu
• Stopped i18n for now, we need a relatively complete list of things for translation anyway
• Made the archive/search result visibility toggleable and hidden at first
• Moved the help dialog into index.html
• Added titles to all emoji buttons
• Made CSS variables for all palette colors

You can find the list of things I hope to do before the next release at #13, there are a few accessibility features there