Custom controls are not standard form elements that you stylize to suit your needs, just to be clear. Those are the good kinds of custom controls—if you want to call them custom—as they retain their inherent accessibility traits whatever you style them to look like. Readers will not have problems interacting with these controls as they natively map to the underlying accessibility APIs, and so will work regardless of the scripting capabilities any reading system has built in.
A custom control is the product of taking an HTML element and enhancing it with
script to emulate a standard control, or building up a number of elements for
the same purpose. Using images to simulate buttons is one of the more common
examples, as custom toolbars are often created in this way. There is typically
no native way for a reader using an accessible device to interact with these
kinds of custom controls, however, as they are presented to them as whatever
HTML element was used in their creation (e.g., just another img element in the case of image buttons).
It would be ideal if no one used custom controls, and you should try to avoid them unless you have no other choice, but the existence of ARIA reflects the reality that these controls are also ubiquitous. The increase in native control types in HTML5 holds out hope for a reduction in their use, but it would be neglectful not to cover some of the basics of their accessible creation. Before launching out on your own, it’s good to know what you’re getting into.
If you aren’t familiar with ARIA, a very quick, high-level introduction for
custom controls is that it provides a map between the new control and the
standard behaviors of the one being emulated (e.g., allowing your
otherwise-inaccessible image to function identically to the button element as far as the reader is concerned).
This mapping is critical, as it’s what allows the reader to interact with your
controls through the underlying accessibility API. (The ARIA specification
includes a graphical depiction that can help visualize this
process.)
Or, put differently, ARIA is what allows the HTML element you use as a control to be identified as what it represents (button) instead of what it is (image). It also provides a set of attributes that can be set and controlled by script to make interaction with the control accessible to all. As the reader manipulates your now-identifiable control, the changes you make to these attributes in response get passed back to the underlying accessibility API. That in turn allows the reading system or assistive technology to relay the new state on to the reader, completing the cycle of interaction.