How do you make the Loading icon accessible for screen-readers like JAWS?

So the HTML code is this:

<div style="visibility: hidden; display: none; right: 0px;"> <img id="processing" src="PT_LOADING.gif" alt="Processing... please wait" title=""> </div>

Even though the ALT text is provided, upon changing the style to show the icon (visibility:visible), it is not read in the time gap when the loading icon appears.

role=alert is not a feasible solution since this is not an alert

Answer1:

You need to add the following attributes to your DIV attributes role="alertdialog" aria-busy="true" aria-live="assertive"

<div style="visibility: hidden; display: none; right: 0px;" role="alertdialog" aria-busy="true" aria-live="assertive"> <img id="processing" src="PT_LOADING.gif" alt="Processing... please wait" title="" /> </div>

人吐槽 人点赞

Recommend

Comment

用户名: 密码:
验证码: 匿名发表

你可以使用这些语言

查看评论:How do you make the Loading icon accessible for screen-readers like JAWS?