search

brittanyrw / emojipages

EmojiPages is a listing of books and plays depicted through emojis.
https://emojipages.com/
Other
34 stars 102 forks source link

Accessibility Updates #37

Open brittanyrw opened 5 years ago

brittanyrw commented 5 years ago

Make sure that EmojiPages is fully accessible.

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

david-webber commented 5 years ago

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 commented 5 years ago

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 commented 5 years ago

@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:

Screen Shot 2019-10-01 at 7 02 43 PM Screen Shot 2019-10-01 at 7 02 30 PM

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:

Screen Shot 2019-10-01 at 7 06 25 PM Screen Shot 2019-10-01 at 7 06 13 PM

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:

Screen Shot 2019-10-01 at 7 06 19 PM

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

david-webber commented 5 years ago

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 commented 5 years ago

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.

focus1 focus2 focus3

Thanks.