For many users, accessibility literally is the user interface, and its features can often be useful to those who don't need accessibility as a primary means of interacting with your extension. The techniques are varied. At the very least, text should be high-contrast. Videos should captioned. Images should include alt attributes.
But, as stated, this is just the minimum. Additional techniques are described in what follows.
There are a few ways to implement accessibility, but the easiest is to use a standard HTML control, particularly the input elements. The following image shows these controls.
To make other elements accessible, use ARIA attributes. These attributes provide information to the screen reader about the function and current state of controls on a web page. Here is an example.
<div role="toolbar" tabindex="0" aria-activedescendant="button1">
<img src="buttoncut.png" role="button" alt="cut" id="button1">
<img src="buttoncopy.png" role="button" alt="copy" id="button2">
<img src="buttonpaste.png" role="button" alt="paste" id="button3">
</div>
By default, the only elements in the HTML DOM that can receive keyboard focus are anchors, buttons, and form controls. Fortunately, setting the tabIndex attribute on an HTML element lets it receive keyboard focus. For example:
<div tabindex="0">I can receive focus with the tab key.</div>
For instructions on implementing these techniques and more, see Support accessibility.