New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add an icon when media has descriptions #14

Merged
merged 4 commits into from Sep 30, 2018

Conversation

Projects
None yet
2 participants
@divergentdave

divergentdave commented Sep 5, 2018

Following this conversation, here's an implementation of an icon that indicates whether media has accessible descriptions or not. I went with Font Awesome's universal access icon. See below for a screenshot of the feature in action. The icon appears when at least one item in a media gallery has a description, and the icon does not appear if none of the media has descriptions. I tagged the whole thing as aria-hidden="true", because I figure there's no point in a screen reader telling you there's an image description before it actually tells you the description itself.

I'm not 100% happy with the CSS, because the icon isn't vertically aligned inside the background box. I believe this is a result of me using a <div> where the adjacent icon uses a <button>. I don't want to use a <button>, because nothing happens when you click on the icon, but at the same time, I don't know how to replicate the vertical centering.

I'm definitely open to input on this and anything else, what do y'all think?

screen shot 2018-09-05 at 06 50 41-fullpage

Fixes #11

@divergentdave

This comment has been minimized.

divergentdave commented Sep 5, 2018

On mspsocial, @lawremipsum recommends making the icon an actual button and displaying the description over the image when it's clicked. https://mspsocial.net/@lawremipsum/100673132193853838

divergentdave and others added some commits Sep 5, 2018

Make singular AND plural
Media box may contain one or multiple described images.

@lawremipsum lawremipsum merged commit 2bc69f1 into lawremipsum:master Sep 30, 2018

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment