How to set aria-label to radio button inside a table layout
When a radio button is put inside a table layout data cell, developers cannot add a label to the radio button. To meet 508 requirements and ensure the radio button has an accessible name, we will need to add an aria-label to the radio button. What are ways we can set the aria-label for radio button inside table cells in Pega?
I was introduced to this support article (https://community.pega.com/support/support-articles/unable-set-aria-label-radio-groups-or-radio-buttons) but it does not address radio buttons inside table cells.
Sky Solutions LLC
US
To clarify:
A developer can set the label value of a radio button outside of a table using the cell properties dialog. This generates the <label> tag that is associated with each radio button input.
A developer cannot set the label value of a radio button inside of a table using the cell properties dialog. The radio button, therefore, lacks an accessible name for the screen reader to programatically identify.
Sky Solutions LLC
US
Do you have any further findings based on clarification I mentioned previously?
Sincerely, Regina
Pegasystems Inc.
IN
Can you try this script in the harness level or UserWorkForm. You would need to modify the script according to your logic.
<script>
$(document).ready(function(){ $(".radioTable segmented").each(function() { var pInputTag = $(this); // you can put your logic here to distinguish this radiotable with others if(pInputTag.attr("aria-label")== ""){ $(this).attr("aria-label", "your value"); } }); });
</script>
Sky Solutions LLC
US
@TashikaSThanks Tashika.
We are looking to apply the custom script to meet this requirement. Otherwise, we will look to changing the control in our table to a dropdown instead of a radio group.
Sincerely,
Regina