Skip to content

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