How do I add labels to radio button sets for accessibility?

Mar 07, 2019

I am in the process of converting a drag and drop interaction to a series of radio button sets to make the interaction accessible. 

I've named each button set according to the text label next to it, and I was hoping that the screen reader would say that name aloud for each button choice, but it just says radio button not checked (or checked, depending on the state).

Is there a way of explicitly attaching the text label to the button set?

Do you think having the tab order set up correctly is enough to make this accessible?

Are there better ways of converting drag and drop interactions so they are accessible for keyboard nav and vision impaired learners?

I am avoiding drop down menus until the problem with JAWS not reading the items in the drop-down list is fixed.

Thanks for your thoughts and suggestions!


6 Replies
karen forkish

Hi Crystal,

You gave such a great answer to my last question, so now I have a follow on.

I am creating a list of fields that require user input. I set up a table with 2 columns, one that has the numeric input label, and a column for numeric input. I inserted a numeric input field and named it the same as the label. I also added alternative text for the numeric input field.

When I preview the slide, the screen reader just says "edit" for the input field. Is there a way to make this more friendly for a screen reader? So that the user would definitely know which input field they are on?

Thank you!

Crystal Horn

Hi again, Karen! This is expected behavior. When you tab to the text entry field, it is actively in edit mode. In HTML5 output, the text entry will read aloud the letters as they're being inputted. If you tab back to the field after entering text, the screen reader will read that it "contains text," but not read what is in there because it is again in editing mode.

Is the screen reader reading the column before the entry fields? Does the tabbing bounce from the label column to the input column in the right order?

karen forkish

Hi Crystal,

Thanks for the speedy response!

Yes, it tabs in the correct order. I was just hoping that there was some way for the screen reader to read the alt text for the input field to tie it more closely to the label text in the previous column. I guess it will be obvious, but I'm not totally sure what is helpful and necessary so I thought I would ask in case there is a better way to do this.

Thank you.

This discussion is closed. You can start a new discussion or contact Articulate Support.