An accessible version of links that look like buttons!!
<span data-accessible="button" data-type="button" data-value="Register" data-href="http://www.google.com" data-class="button"> <noscript> <a href="http://www.google.com" class="button">Register</a> </noscript> </span>
Breaking down the Polybutton markup
Let’s take a moment to break down the Polybutton elements so we’re on the same page with what’s happening the the HTML.
I chose to use a span because there’s no real semantic meaning behind it, and it’s default display state of inline wouldn’t interrupt the natural flow of the layout while allowing the button styles to come through. A very unobtrusive element overall.
This is the custom data attribute I chose as a trigger for the polyfill. At first I was using data-button=”accessible”, but I changed it to data-accessible=”button” so I could possibly add more elements into the accessibility script for the future.
Data-type sets the type of button that will get generated, even though there isn’t much reason to use anything other than “button” in this attribute, I wanted to open it up for any future possibilities.
The data-value attribute is the text that gets outputted with the final generated button.
Data-href is the URL where the button/link should go when it’s ultimately clicked by the end user.
This is the CSS class you want to use on the button, this makes it inherit the normal styles you would use on a button. I close to use a data attribute instead of a straight class just to make sure the normal button CSS didn’t get applied to the when the button is generated.
Free Software, Hell Yeah!