如何：指导屏幕阅读器从代码中读出什么

Question

I am unsure on how to make the screenreader read out a specific message for an email input instead of just reading 'email was selected'.

Right now when tabbing to the 'from' box, it says 'Test@gmail.com selected' when I enter Test@gmail.com into the input. I want it to say "Your email address is (read text); you may enter a different email if you would like." I am unsure of how to approach this without entering more elements on the page that say that text exactly.

<input role="textbox"
    tabindex="0"
    id="from-input"
    name="from-input"
    class="liberty-input col-12 disabled"
    formControlName="from"
    [readOnly]="true" />

Answer 1

you can use title attribute. Just hover over input box and type something.

 $('#myid').keyup(function(){ if($('#myid').val() !== ''){ $("img").attr("width", "500"); $('#myid').attr('title', 'your email is :'+ $('#myid').val()) } }) 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <input id="myid" value="" title="Your mail address">Visit our HTML Tutorial</a>