Accessibility / Screen Readers / VoiceOver Helper / VoiceOver Helper Popover
The VoiceOver Helper Popover (minified) bookmarklet displays a quick reference guide for Apple's VoiceOver in a native HTML popover. Creates a green "VoiceOver Helper" button in the bottom-right corner that opens a compact popover with essential VoiceOver commands including start/stop, navigation, rotor usage, and element interaction. Uses the native popover API for modern browser support. Close with X button, clicking outside, or pressing Escape. References Apple's official documentation and Deque University. Useful for quick reference during testing. 2.4.1: Bypass Blocks.
WCAG SC 2.1.1: Keyboard
Run VoiceOver Helper Popover
Test run or drag to
bookmarklets bar to install
javascript:%21function()%7B%22use%20strict%22%3Bfunction%20e()%7Bt.remove()%2Cr.remove()%2Cdocument.removeEventListener(%22keydown%22%2Co)%7Dfunction%20o(e)%7Br.matches(%22%3Apopover-open%22)%26%26%22Escape%22%3D%3D%3De.key%26%26r.hidePopover()%7Dwindow.__voiceoverPopoverCleanup%26%26window.__voiceoverPopoverCleanup()%3Blet%20t%3Ddocument.createElement(%22button%22)%3Bt.id%3D%22voiceover-helper-popover-btn%22%2Ct.type%3D%22button%22%2Ct.textContent%3D%22VoiceOver%20Helper%22%2Ct.setAttribute(%22popovertarget%22%2C%22voiceover-helper-popover%22)%2Ct.style.cssText%3D%22position%3Afixed%3Bbottom%3A1em%3Bright%3A1em%3Bz-index%3A10001%3B%20border-radius%3A1.5em%3Bborder%3Anone%3Bbackground%3A%23155b2a%3Bcolor%3A%23fff%3B%20padding%3A.7em%201.5em%3Bbox-shadow%3A0%202px%208px%20rgba(0%2C0%2C0%2C.2)%3B%20font-family%3Ainherit%3Bfont-size%3A1.1em%3Bcursor%3Apointer%3B%22%3Blet%20r%3Ddocument.createElement(%22div%22)%3Br.id%3D%22voiceover-helper-popover%22%2Cr.setAttribute(%22popover%22%2C%22%22)%2Cr.style.cssText%3D%22border%3A1px%20solid%20%23888%3Bborder-radius%3A.5rem%3Bpadding%3A1em%3B%20background%3A%23fff%3Bbox-shadow%3A0%202px%208px%20rgba(0%2C0%2C0%2C0.2)%3B%20font-family%3A-apple-system%2CBlinkMacSystemFont%2C%27Segoe%20UI%27%2CRoboto%2CArial%2Csans-serif%3B%20font-size%3A.9em%3Bline-height%3A1.2em%3Bcolor%3A%23333%3Bmargin%3A0%20auto%3Bwidth%3A43rem%3Bmax-height%3A95vh%3Boverflow-y%3Aauto%3B%20z-index%3A10002%3B%22%2Cr.innerHTML%3D%22%3Cstyle%3E%23voiceover-helper-popover%20table%7Bborder-collapse%3Acollapse%3Bwidth%3A100%25%7D%23voiceover-helper-popover%20td%2C%23voiceover-helper-popover%20th%7Bpadding%3A8px%3Bborder%3A1px%20solid%20%23ddd%7D%23voiceover-helper-popover%20td%3Anth-child(2)%7Bwhite-space%3Anowrap%7D%23voiceover-helper-popover%20tr%3Anth-child(odd)%7Bbackground%3A%23eee%7D%23voiceover-helper-popover%20tr%3Anth-child(even)%7Bbackground%3A%23fff%7D%23voiceover-helper-popover%20a%7Btext-decoration%3Aunderline%7D%23voiceover-helper-close%7Bfloat%3Aright%3Bfont-size%3A1.3em%3Bpadding%3A.2em%20.8em%3Bmargin%3A0%20auto%20auto%3Bcursor%3Apointer%7D%3C%2Fstyle%3E%3Cdiv%20class%3Dpopover-container%3E%3Cbutton%20aria-label%3DClose%20id%3Dvoiceover-helper-close%20popovertarget%3Dvoiceover-helper-popover%20popovertargetaction%3Dhide%3E%5Cxd7%3C%2Fbutton%3E%3Ch1%3EVoiceOver%20guide%3C%2Fh1%3E%3Cp%3EThe%20default%20VoiceOver%20(VO)%20button%20is%20%3Cstrong%3Ectrl%20%2B%20alt%3C%2Fstrong%3E.%3Ctable%3E%3Ctr%3E%3Ctd%3Estart%20or%20stop%20VoiceOver%3Ctd%3Ecmd%20%2B%20F5%3Ctr%3E%3Ctd%3Estart%20reading%3Ctd%3EVO%20%2B%20A%3Ctr%3E%3Ctd%3Estop%20reading%3Ctd%3EVO%3Ctr%3E%3Ctd%3Ego%20into%20a%20section%3Ctd%3EVO%20%2B%20Shift%20%2B%20%5Cu25bc%3Ctr%3E%3Ctd%3Eexit%20a%20section%3Ctd%3EVO%20%2B%20Shift%20%2B%20%5Cu25b2%3Ctr%3E%3Ctd%3Enext%3Ctd%3EVO%20%2B%20%5Cu25b6%5Cufe0e%3Ctr%3E%3Ctd%3Eprevious%3Ctd%3EVO%20%2B%20%5Cu25c0%5Cufe0e%3Ctr%3E%3Ctd%3Eclick%20a%20link%20or%20button%3Ctd%3EEnter%3Ctr%3E%3Ctd%3Eselect%20a%20checkbox%2C%20radio%20or%20dropdown%3Ctd%3ESpace%3C%2Ftable%3E%3Ch2%3EThe%20rotor%3C%2Fh2%3E%3Cp%3EThe%20rotor%20lets%20you%20navigate%20by%20element%20type%2C%20for%20example%20headings%20and%20links.%3Ctable%3E%3Ctr%3E%3Ctd%3Eopen%20the%20rotor%3Ctd%3EVO%20%2B%20U%3Ctr%3E%3Ctd%3Eswitch%20between%20element%20types%3Ctd%3E%5Cu25c0%5Cufe0e%20%5Cu25b6%5Cufe0e%3Ctr%3E%3Ctd%3Eselect%20an%20element%3Ctd%3E%5Cu25b2%20%5Cu25bc%3Ctr%3E%3Ctd%3Ego%20to%20selected%20element%3Ctd%3ESpace%20or%20Enter%3C%2Ftable%3E%3Cp%3EFor%20more%20shortcuts%2C%20visit%20%3Ca%20href%3Dhttps%3A%2F%2Fsupport.apple.com%2Fguide%2Fvoiceover%2Fgeneral-commands-cpvokys01%2Fmac%3EApple%3C%2Fa%3E%20or%20%3Ca%20href%3Dhttps%3A%2F%2Fdequeuniversity.com%2Fscreenreaders%2Fvoiceover-keyboard-shortcuts%3EDeque%20University%3C%2Fa%3E.%3C%2Fdiv%3E%22%2Cdocument.body.appendChild(t)%2Cdocument.body.appendChild(r)%2Cwindow.__voiceoverPopoverCleanup%3De%2Cdocument.addEventListener(%22keydown%22%2Co)%2Cr.addEventListener(%22close%22%2Ce)%7D()%2Cconsole.log(%22%5CnSource%3A%20https%3A%2F%2Fgithub.com%2Fjoelanman%2Fvoiceover-helper%5CnBookmarklet%20name%3A%20VoiceOver%20Helper%20Popover%5Cn%22)%3B
← Back to all bookmarklets