HTML elements like check buttons, radio buttons or select options can be hard to style with CSS in a custom design. There are many workarounds for this, but are they accessible? Here’s my point of view.
HTML elements like check buttons, radio buttons or select options can be hard to style with CSS in a custom design. There are many workarounds for this, based on two different approaches:
Hide the form elements from sight and apply the styling on a container or related element
The Genesis Framework is my favorite tool to build a WordPress website. And with the next update (version 2.2) a lot of accessibility features and fixes will be added. But a framework is no child theme.
The HTML5 themes you can purchase with StudioPress have a beautiful responsive menu for the primary navigation. And that menu is completely inaccessible for keyboard and screen reader users.
The HTML code to show the responsive menu is:
A div is not focusable, if you tab though a page the menu is skipped and you have no way to open it, only by using a mouse. And also the div is an empty container, with no content.
What needs to be changed?
Change the <div> to a <button>, a button is focusable and clickable
Add some text inside the <button></button> to tell a screen reader user what the button is about. You can make this visibly hidden by using the screen-reader-text class
Tell a screen reader user if the menu is open or closed by adding dynamically aria-expanded=”false” or aria-expanded=”true”
You have to add the screen-reader-text class and maybe change the CSS .responsive-menu-icon to style the button so it fits your theme.