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
- — ,
.
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 « », , , , . .
( ):
— , , , . , .
. «» . , . , ( ), , , , , . , ( ), , , , , , .
,
, , . . .
, , . , , , .
<button type=".." class=“..">
Add to Cart <span class="visually-hidden">, PRODUCT_NAME</span>
</button>
, ,
.
« »
, Dragon , , . , .
, , .
, ( ) . , aria-label
, .
: ,
, , .
, , , ? , , , ( «»)? , , . : (MouseGrid), .
, — . , , (, , ). , Dragon
, — , ?
!
"JavaScript Developer. Professional". , — .