Skip to content
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

make vex-close a button to help with accessibility #134

Open
wants to merge 1 commit into
base: master
Choose a base branch
from

Conversation

WesKetch
Copy link

Related to #133

Hello,

I have been working on making the vex modal more accessible. By using a button to close the modal instead of a div, someone can now focus on the button using the tab key, and close the button using the enter key. I have gone through all the themes to make sure the styles are consistent. CSS is not my strongest skill so I may be a little off on some of them.

Thanks!

@adamschwartz
Copy link
Contributor

👍

@modean
Copy link

modean commented Feb 21, 2016

You could achieve the same with something similar to the below code snippet. The point is to make the screenreader think it deals with a button. Tho, from a markup point of view I like it more to have more expressive markup so that you immediately know the meaning of a markup element if you see it for the first time. That is if you want to provide a button use <button />.

    $('.vex-close').attr('role', 'button');
    $('.vex-close').attr('tabindex', '0');
    $('.vex-close').attr('aria-label', 'close');

Also use the aria-label role instead of title. See:

http://wesbos.com/times-html-entity-close-button/

Any plans to merge this PR with #133 to get both into the master branch?

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

Successfully merging this pull request may close these issues.

4 participants