Enable

Accessible Textboxes

It may surprise a lot of people that you can make editable textboxes without JavaScript and without using <input type="text"> or <textarea> tags.

Why would you use the ARIA method? I can see two reasons:

  1. Maybe because you can't use ::before or ::after pseudo-elements to style form elements, although there are other ways around this without using ARIA.
  2. If you wanted to create a WYSIWYG editor then you would have to do this, since form elements don't allow the editing of formatted text.

This last use case we do not cover, since creating an accessible WYSIWYG editor would involve quite a bit of JavaScript (I will be adding a page in Enable about WYSIWYG editors in the future).

HTML example

This is the best solution to use, especially when building from scratch.
Payment information

Example code explanation

Below is the HTML of the above example. Use the dropdown to highlight each of the individual steps that makes the example accessible.

☜ Scroll to read full source ☞

                    
                

ARIA example

Recommended only if you needed to create a JavaScript WYSIWYG editor.

Keep in mind that if you use this in a form, none of the nice free form functionality (e.g.: HTML5 validation, inclusion of data when submitting a form in an HTTP request, etc), won't work. These example do, however, show up in Voiceover's Rotor and NVDA's Element Dialogue.

Payment Information

Example code explanation

Below is the HTML of the above example. Use the dropdown to highlight each of the individual steps that makes the example accessible.

☜ Scroll to read full source ☞