WCAG compliant way of annotating text

Question

I have a component that lets users annotate fragments of text. The user can select a text fragment, right click on it, that opens a popup where you can enter a comment.

I have to make this component accessible (the whole app has to be level A WCAG compliant). I am new to accessibility and have no idea how to approach this. Are screen readers able to 'select' a fragment of text? I know I could build an alternative version of the component specially for users with disabilities but the component is more complicated then described above and that would require too much effort and time. (For now I just want to make it compliant, I'll take care of the real usability of it as a next step.)

Answer 1

Yes, screenreaders can be used to select text. They work with existing operating system and browser controls, rather than replacing them.

As a first step, make your annotation work with standard keyboard controls (e.g. Enter as well as right-click). Screenreader users rely on these, as do many other people with disabilities which aren't vision impairments.

As a second step, review this plain-English version of the Web Content Accessibility Guidelines to see the other Level A requirements. It links through to the WCAG specs if you need more detail.

Answer 2

As long as you override the default browser's mechanisms (such as interceipting the right click event), you can't hope to be accessible.

I am not sure that selecting text in a non input area is something easy for a standard screenreader user (I am not talking about blind geeks who know every shortcuts).

I think that the best way would be to make the content editable through the use of contenteditable=true attribute, and let the user go through the text to insert his comments where he likes to (and he might be able to use the shift button to select any text he wants).

Using javascript, you can intercept the key press not to delete the original text and opening your popup.