0

I have a page that has 10 search results. The first result is more of a answer card (similar to answers you see as the 1st result in google).

Now I am trying to figure out a way to add additional description to the answer card just for voice over..For ex: "This is the best answer for your question" but I don't want to display that for normal users. Is there a way to do that?

Currently I have the below html which I manipulate on the fly to add the values using javascript.

Any idea is appreciated

<div class="well" style="display:none; ">
    <div id="answerCard" class="content-pad" style="line-height: 20px;"></div>
    <div class="content-pad">
        <hr>
        <span class="w50p fLF mT10">
            <a href="#" id="viewFull" class="ui-link">View full article &#8594;</a>
        </span>
        <span class="w50p fRT mT10 pB10 taRT">
         <!-- Feedback Flyout --> <!-- Feedback Toggle -->
             <a data-target-modal="dialog.html" href="dialog.html" data-rel="dialog" data-transition="pop" class="ui-link"><span>Is this helpful?</span></a>
        </span>
    </div>
    <div style="clear: both;"></div>
</div>
Hamish
  • 78,605
  • 19
  • 187
  • 280
Learner
  • 2,303
  • 9
  • 46
  • 81

1 Answers1

0

Separate is not equal. Unless there is some visual thing, showing an answer as "the best" you probably should not do this, it can be confusing to have additional content for sighted VoiceOver users.

Regardless, the attribute you want is aria-label.

MobA11y
  • 18,425
  • 3
  • 49
  • 76