Have an idea?

Visit Sawtooth Software Feedback to share your ideas on how we can improve our products.

Add html tags to under-the-hood scripting

Hope all is well. I have a client that is sensitive to accessibility of their survey (WCAG). They have requested several edits to the underlying code to help make it more user-friendly. Some of them, I think, are comparatively "simple," but I am unable to find very clear examples to reverse engineer. Perhaps the forum can help.

Internally, Lighthouse produces this html for any content in the Header1 field:

<div class="header1">Welcome to the survey!</div>


What I need to do is have the html render as follows:
<div class="header1" role="heading" aria-level="1">Welcome to the survey!</div>



Because I cannot get access to that source html content, I believe I have to add/append using some advanced programming techniques (JQuery, JS, Perl, etc), but, like I said above, I don't know how.


Would welcome suggestions, hints,  guidance,  outright examples.

Thanks forum!
asked Mar 19 by WTW_cal Bronze (1,595 points)

1 Answer

0 votes
Please try adding this script to your survey HTML head tag:

<script>
$(document).ready(function(){
    $('.header1').attr('role', 'heading').attr('aria-level', 1);
})
</script>


Be sure to test this script against the accessibility tools you need to support, as I don't personally have enough experience with them to vouch for what will or will not work.
answered Mar 19 by Zachary Platinum Sawtooth Software, Inc. (144,125 points)
...