Accessibility Updates

[brittanyrw]

Make sure that EmojiPages is fully accessible.

• Run the site through accessibility tools such as AXE or Accessibility Insights for the Web
• Go through this accessibility checklist
• Suggest accessibility updates that need to be made.

You can either make accessibility updates yourself or create Issues for things that need to be updated.

[david-webber]

I ran both AXE and Accessibility Insights on emojipages, the only issue was a missing lang attribute on the html element. I will open a PR for this.

Do you have any ideas for handling alt text on the emojis?

[david-webber]

Setting the font-size to 200% (one of the things in the accessibility checklist) causes the grid to go wider than the viewport. This can be fixed using a grid layout like repeat(auto-fill, minmax(200px, 1fr)).

This might not be an issue following the fixes made in issue #217 ?

[brittanyrw]

@david-webber We don't have to add alt text on the emojis, it is built in. For example, if you use a voice over tool to read out what is on a webpage, it will read the official name of the emoji. So for example 😂this one is "Face With Tears of Joy" and this one is 🤣"Rolling on the Floor Laughing".

Okay, I will try to merge that other Issue in soon then we can see about the font sizing.

Another accessibility item that can be updated is the focus outline that shows up when you navigate the site using tab. Right now it is the default blue color. Examples below around the button and cards:

Since the background is so dark, it is a little hard to see the focus. We can change the color so that it is more prominent and also make it so that the focus isn't touching the edge of what it is surrounding so that it is easier to see what we are focusing on.

So like this for example if the focus was white and had an offset:

But the focus for the hint icon will need to be a different color or remain the default blue because this is what it looks like white:

Let me know if you'd like to tackle that one.

[david-webber]

Oh I had no idea emojis we're accessible by default, that's cool! Yeah I'll take a look at the outline issue tomorrow or the next day and then I'll do the pull request.

Thanks.

[david-webber]

Hi @brittanyrw - I see you have now opened this up again. I made some changes for this last week before you closed it,

I have modified the focus state for the contribute-callout button and the emoji-images class.
I have changed the outline to a 1px solid white line. I am unable to use the default outline 'blur' style when mixing with an outline-offset (I can change the colour to white but it will ignore the offset, I am unable to reproduce your example above unfortunately, unless you are aware of a way to set an offset whilst retaining the blurred style?).

I have added a slight box-shadow to the focus state on the emoji-images class and :after element.

Please see preview of my changes, if you would like me to make any other changes let me know, if not I will open a PR.

Thanks.