Available text labels for everyone

How to make online shopping more convenient for screen readers without breaking voice input

 « : »  .  — , ,  () , - (WCAG). , . , .






VoiceOver macOS ,

VoiceOver (VO) — macOS. , , «».





VoiceOver - . , -.





VoiceOver  Ctrl



 + option



 + U



. . .





-. , , . , .





, VoiceOver A List Apart. «» «» , .





(  nav



header



main



footer



aside



. .), .    .





,   HTML-. , , . , .





:





  • VoiceOver





  • VoiceOver -






, , , , . , , .





VoiceOver

- — ,  



.





Yeti, .



,  — . , VoiceOver.





, ,



.





,  — , , . ?





,  —     .





   :





<button type=".." class=“..">
    Add <span class="visually-hidden">PRODUCT_NAME</span> to Cart
</button>
<!-- P.S. Don’t do this -->
      
      



, , .





, ,      — , .





-

. , - .





- Dragon Naturally Speaking. -. , .  — , , ( ), , ( , ).





, .  Level Access   , - Dragon Naturally Speaking. ,   YouTube.





. , «» (Go to sleep) «» (Wake up).





, ( )  . ,   .





 



, Dragon  , .  — , .  , , .   WCAG 2.5.3 « », ,  , , . .





( ):





 — , , , . , .





. «» .  , .  , ( ), , , , , .  , ( ), , , , , , .





WCAG 2.5.3





,

, , . . .





, , .    ,    ,    , .





<button type=".." class=“..">
    Add to Cart <span class="visually-hidden">, PRODUCT_NAME</span>
</button>
      
      



, ,  



  .





« »



, Dragon   , , . , .





, , .





, ( ) . ,  aria-label



, .





: ,

, , .





, , , ? , , , ( «»)? , , . : (MouseGrid), .





,  — . , , (, , ).     , Dragon  



  ,  — , ?





, , — . , , , , .





!






"JavaScript Developer. Professional". , — .








All Articles