Tab Key Menu

Click 'tab' key or 'shift + tab' keys to navigate page. 'enter/return' key = 'mouse click'
T1 T123   T1 Aud/Txt   T2 T321   T2 Aud/Txt   T3 Links

multi-aud-123.js

To Tab Key Menu
By linking a multi-aud-123.js JavaScript/jQuery file to your web page, you can quickly add 'click events' to one or more elements on a web page, that when 'clicked,' will play audio files. An adapted version of a 'multi-aud-123.js' JavaScript/jQuery file, named 'multi-aud-123-demo-2.js,' has been linked to this web page to control the audio-text buttons displayed above.
Optionally, you can add 'text' to any element on a web page that displays text (such as '<div>,' '<p>,' '<span>,' and 'figcaption' elements). The 'multi-aud-123.js' JavaScript/jQuery file will permit only one targeted array audio-file to play at a time.
The 'multi-aud-123.js' file will automatically add 'HTML-code' to your linked-to web page that will enable your viewers to navigate through pre-selected elements on the web page using their 'tab' key or 'shift + tab' keys—just like you are able to do on this instructional page!
For example: if you press your 'tab' key a couple of times, a 'Tab Key Menu' will display near the top of this web page. From there, if you keep pressing your 'tab' key, you can open up a 'Tabbing 123' popup-window by navigating to the 'T1 T123' underlined-text (that will have a 'dashed aqua border' surrounding it when 'focused' on) and then pressing your 'enter/return' key. [Pressing your 'enter/return' key is the equivalent to 'left-clicking' a mouse.]
At that point, if you wish, you can 'tab' down from the aqua-highlighted '[tkm]' button on the 'Tabbing 123' popup-window to the 'UP' or 'DN' buttons. These two buttons will move the popup-window up-or-down the web page when you press your 'enter/return' key while either button is being highlighted.
Now, reverse direction and 'tab' back up to the '[tkm]' button by holding down your 'shift' key, and then pressing your 'tab' key. When the '[tkm]' button is highlighted in 'aqua,' press your 'enter/return' key to be returned to the 'Tab Key Menu.'
'Tab' down to the 'T1 Aud/Txt' underlined-text on the 'Tab Key Menu' and press your 'enter/return' key. You will now be 'focused' on the first 'multi-aud-123-demo-2.js'-generated audio-text button displayed directly below—that will be highlighted in orange. Press you 'enter/return' key and you will hear audio, and see on the 'Tabbing 123' popup-window statistics relating to the underlying audio-text button’s HTML-code.
If you then repeatedly press your 'tab' key you will end up at the bottom of this 'T1' (Tab 1) section you are currently reading, from where you can activate the aqua-highlighted 'To Tab Key Menu' text—by pressing your 'enter/return' key—and be returned to the 'Tab Key Menu' once again, from where you can duplicate the process described above ... but this time, for the 'T2' (Tab 2) 'multi-aud-321-demo-2.js'-generated audio-text buttons. Just 'tab' to the 'T2 T321' underlined-text (that will open up the 'Tabbing 321' popup-window when you press your 'enter/return' key); and then press your 'enter/return' key one more time (while still on the aqua-highlighted '[tkm]' button) to return to the 'Tab Key Menu'—from where you can navigate down to the 'T2 Aud/Txt' underlined-text, and then press your 'enter/return' key, to be 'focused' on the first 'multi-aud-321-demo-2.js'-generated audio-text button displayed directly below, that will be highlighted in orange.
This may seem like a lot of work, using the 'tab' key, as opposed to just 'clicking' on everything with your mouse—but for many people it is the next best thing to using a mouse ... if they do not have a mouse; or if they are unable to use a mouse effectively. People who use 'screen readers' also employ the 'tabbing' method.
As a general rule, most of the things that you will see being surrounded by an 'aqua border' as you are navigating through this web page can be 'clicked' on via your 'enter/return' key—and will take you to somewhere else on the web page; or will perform an action, such as playing an audio clip.
Have fun navigating through this 'Multi-Aud-123-321' web page!
Here is a basic-looking web page that demonstrates the features of a standard 'multi-aud-123.js' JavaScript/jQuery file.
Note: You will see the same '123' vertically-aligned button (that is positioned on the left side of this web page) on the basic-looking web page.
'Clicking' that vertically-aligned button (or 'tabbing' to it, and then pressing your 'enter/return' key) will open up the 'Tabbing 123' popup-window on this web page, or the 'Tabbing 123' popup-window when you are on the basic-looking web page!
The 'Tabbing 123' popup-window and '123' vertically-aligned button are used by the person putting the web page together—for testing purposes—and would normally be 'hidden' from view when the web page is up on a website. The standard multi-aud-123.js JavaScript/jQuery file has instructions at the top of the file with information about the popup-window and button, as well as information about other features in the file.
The first audio-text button at the top of the basic-looking web page plays audio from 'index position 0' of an audio array. That 'index position 0' is considered the 'first element' in the audio array. Therefore, audio-array 'index position 0' is the same as audio-array 'element 1'! Computers start counting at zero, while we humans start counting at 1.
A word about 'tabbing': Try to avoid activating the Tab keys (T1, T2, and T3) (by pressing your 'enter/return' key) when you see them 'highlighted' in aqua. Those Tab keys are meant for those who use a mouse. Instead, do as much of your navigating as possible from the 'Tab Key Menu'—from where you will be taken to exact locations throughout the web page.
If you press your 'enter/return' key (or 'click' your mouse) while aqua-highlighting surrounds a 'link' on this web page, a new 'window tab' will open up for that link’s web-page location. You can get back to this web page by holding down your 'ctrl' key, then repeatedly pressing your 'tab' key, until you have 'looped' back around to this web page. Here are some browser tabbing tips that are specific to different browsers, such as Microsoft, Google, and Firefox browsers.
And, if you find yourself lost in 'Tabbing' no man’s land, as it is called (that can occur when you are 'tabbing' away, and notice that there are no items in the visible viewport being highlighted in 'aqua'), then immediately hold down your 'shift' key, and then repeatedly press your 'tab' key until you again see items in your viewport being highlighted in 'aqua.' [That 'Tabbing' no man’s land equates to sections of a web page that are not currently visible in your viewport, but that are readily accessed by 'screen readers' via tabbing.
If the 'shift + tab' method does not get you out of 'Tabbing' no man’s land—then it’s time to 'refresh' your web page! Once you have 'refreshed' your web page, you can start fresh, and access the 'Tab Key Menu' after just a 'tab' or two. To 'refresh' your web page:
  • Press your 'F5' key.
  • Or, on some devices, hold down the 'fn' key ('function' key) and then press your 'F5' key.
  • Or, try holding down your 'ctrl' key, and then press the letter 'R' key.
One of these three methods is sure to extract you from the 'Tabbing' no man’s land that you will surely find yourself stuck in at some point when you navigate through a web page using the 'tab' key method. Good luck.
To First T1 Audio-Text Button
To First T2 Audio-Text Button
To Tab Key Menu
'Tabbing' no man’s land ahead. Go back!
[Hold down 'shift' key; then press 'tab' key.]
Screen readers only beyond this point.

multi-aud-321.js

Saint John’s Choir Image
Audio array index position 2.
Saint John’s Choir
Xiamen, China 2006
[Article/Img Src]
Alexandrov Choir Image
Audio array index position 1.
Alexandrov Choir
Warsaw, Poland 2009
[Article/Img Src]
St. Olaf Choir Image
Audio array index position 0.
St. Olaf Choir
Northfield, Minn. 2007
[Article/Img Src]
Guy Lombardo - 1941Guy Lombardo - 1948
South Pacific - 1949
To Tab Key Menu
By linking a multi-aud-321.js JavaScript/jQuery file to your web page, you can quickly add 'click events' to one or more elements on a web page—at any location on your web page, while maintaining array-element order—that when 'clicked,' will play audio files. An adapted version of a 'multi-aud-321.js' JavaScript/jQuery file, named 'multi-aud-321-demo-2.js,' has been linked to this web page to control the audio-text buttons displayed above.
The 'multi-aud-321.js' file will automatically add 'HTML-code' to your linked-to web page that will enable your viewers to navigate through pre-selected elements on the web page using their 'tab' key or 'shift + tab' keys—just like you are able to do on this instructional page!
This Mozilla accessibility tutorial will tell you everything you ever wanted to know about the crytic-sounding terms (with dynamically-changing values) that are displayed on the 'Tabbing 123' and 'Tabbing 321' popup-windows. An example term would be the acronym [ posinset ], which stands for [ position-in-set ].
Note the '321' vertically-aligned button that is positioned on the left side of this web page. 'Clicking' that button (or 'tabbing' to it, and then pressing your 'enter/return' key) will open up the 'Tabbing 321' popup-window ... as does 'tabbing' to the 'T2 T321' underlined-text in the 'Tab Key Menu' and pressing your 'enter/return' key—or 'clicking' the underlined-text with your mouse.
The 'Tabbing 321' popup-window and '321' vertically-aligned button are used by the person putting the web page together—for testing purposes—and would normally be 'hidden' from view when the web page is up on a website. This standard multi-aud-321.js JavaScript/jQuery file has instructions at the top of the file with information about the popup-window and button, as well as information about other features in the file.
Here is a basic-looking web page that demonstrates the features of a standard 'multi-aud-321.js' JavaScript/jQuery file.
The standard 'multi-aud-321.js' JavaScript/jQuery file (just like the 'multi-aud-321-demo-2.js' file used for this page) will optionally add 'text' and/or 'images' to a dedicated element that you have chosen on your web page (that would normally display text), such as a 'div' element. The 'text' and/or 'image(s)' will appear when a 'click event' occurs on any element targeted by the 'multi-aud-321.js' file. The basic-looking web page linked-to above demonstrates this optional 'text/image-adding' capability.
New: Now you can display dynamically-changing text, that sits below (or, if you choose, above) the 'text' and/or 'images' added to the dedicated element on your web page mentioned above. Great for displaying karaoke-style lyrics if the audio-file being played is a song—so that a viewer can sing along!
To see the dynamically-changing text in action, 'tab' back up this web page to the 'Guy Lombardo - 1941,' 'Guy Lombardo - 1948,' or 'South Pacific - 1949' audio-buttons, and press your 'enter/return' key while focused on any of these audio-buttons (or 'click' your mouse) to see the lyrics of the song you are listening to.
Note to web-page developers: Include the two jQuery 'click events' code displayed below in your HTML file if you have both the 'multi-aud-123.js' and 'multi-aud-321.js' JavaScript/jQuery files hooked up to your HTML file at the same time—so that either the 'Tabbing 123' or 'Tabbing 321' popup-window will display on top of the other when its associated audio-text buttons have been clicked.
[The 'click' event code below uses the 'default' class-name selectors used for this instructional web page.]

[Note: Each second selector below ('#consoleO,' and '#consoleR') has been 'wrapped' to a second line for display purposes.]
$(".ABO,
#consoleO").click(function(){
$("#consoleO").css({"z-index":"100"});
$("#consoleR").css({"z-index":"99"});
});

$("[class*=ABU_],
#consoleR").click(function(){
$("#consoleR").css({"z-index":"100"});
$("#consoleO").css({"z-index":"99"});
});
To First T2 Audio-Text Button
To First T1 Audio-Text Button
To Tab Key Menu
'Tabbing' no man’s land ahead. Go back!
[Hold down 'shift' key; then press 'tab' key.]
Screen readers only beyond this point.

Helpful Links

To First T1 Audio-Text Button
To First T2 Audio-Text Button
To Tab Key Menu
'Tabbing' no man’s land ahead. Go back!
[Hold down 'shift' key; then press 'tab' key.]
Screen readers only beyond this point.