Many User interface widgets can be developed using HTML, CSS and JavaScript, in some cases developers build custom versions of native HTML controls because they cannot achieve the exact look and feel or behaviour they desire with a native control.
Where ever possible it is recommended that native HTML controls be used over custom controls as their accessibility support is likely to be more robust and it’s much less work.
However, if you do have a need to develop a custom control there are a number of steps you will have to take to ensure it is accessible. In HTML5 it is conforming to use ARIA to help in the creation of an accessible custom control.
A standard button (input type=”button”)code:
<input type="button" value="search" onclick="alert('submitted');">
Note: The following is a demonstration of the steps to create an accessible custom button. It is not recommended that:
NOTE: the use of an image is for demonstrating the steps required to make a non interactive HTML element into an accessible interactive element. If you want to create an image based control use input type=image.
The image below looks and acts like a button for mouse users who can see, you can click it and something happens and it has a label.
For other users there are problems:
code:
<img src="button.gif" onclick="alert('submitted');">
An accessible label can be added to the image using the alt attribute.
Code:
<img src="button.gif" alt="search" onclick="alert('submitted');">
HTML5: Techniques for providing useful text alternatives
2. Adding a role to identify the controlTo provide the correct identity for the element so users of assistive technology are aware they are dealing with a user interface element that has the behaviour of a button, not an image the WAI-ARIA button role can be used.
Note:adding a button role does not make the element operable as a button for assistive technology or keyboard users. It only identifies the element as a button and AT may provide some usage instructions. For example, when the element receives focus (see step 3.A. below) a screen reader such as JAWS will announce “search button, press spacebar to press.” Unless you add the required keyboard behaviour (step 4.B. below) it will not be usable!
Code:<img src="button.gif" alt="search" role="button" onclick="alert('submitted');">
To provide access to the control for keyboard users, it must be focusable and in the tab order of the page. To do this tabindex with a value of “0” can be added. This puts the element in the default tab order of the page.
Code:<img src="button.gif" alt="search" role="button" tabindex="0" onclick="alert('submitted');">
Using Tabindex to Manage Focus among Widgets (WAI-ARIA)
3. B. expected keyboard behaviour for buttonsA native HTML button has 2 keys associated with it that will operate it: The enter key and the space. You will need to add scripting that listens for these keys being pressed and activates the custom button action.
Code:<img src="button.gif" alt="search" role="button" tabindex="0" onkeypress="if(event.keyCode==32||event.keyCode==13){alert('submitted')};" onclick="alert('submitted');">
Button design pattern (WAI-ARIA)
Other considerations:RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.3