ಟ್ಯಾಬ್ ಇಂಟರ್ಫೇಸ್‌ಗಳನ್ನು ಕರಗತ ಮಾಡಿಕೊಳ್ಳುವುದು: ಕೀಬೋರ್ಡ್ ನ್ಯಾವಿಗೇಷನ್ ಮತ್ತು ಫೋಕಸ್ ನಿರ್ವಹಣೆಯ ಬಗ್ಗೆ ಒಂದು ಆಳವಾದ ಅಧ್ಯಯನ

ಟ್ಯಾಬ್ಡ್ ಇಂಟರ್ಫೇಸ್‌ಗಳು ಆಧುನಿಕ ವೆಬ್ ವಿನ್ಯಾಸದ ಮೂಲಾಧಾರವಾಗಿದೆ. ಉತ್ಪನ್ನ ಪುಟಗಳು ಮತ್ತು ಬಳಕೆದಾರರ ಡ್ಯಾಶ್‌ಬೋರ್ಡ್‌ಗಳಿಂದ ಹಿಡಿದು ಸಂಕೀರ್ಣ ವೆಬ್ ಅಪ್ಲಿಕೇಶನ್‌ಗಳವರೆಗೆ, ಅವು ವಿಷಯವನ್ನು ಸಂಘಟಿಸಲು ಮತ್ತು ಬಳಕೆದಾರ ಇಂಟರ್ಫೇಸ್ ಅನ್ನು ಸರಳಗೊಳಿಸಲು ಸೊಗಸಾದ ಪರಿಹಾರವನ್ನು ಒದಗಿಸುತ್ತವೆ. ಅವು ಮೇಲ್ನೋಟಕ್ಕೆ ಸರಳವಾಗಿ ಕಾಣಿಸಬಹುದಾದರೂ, ನಿಜವಾಗಿಯೂ ಪರಿಣಾಮಕಾರಿ ಮತ್ತು ಪ್ರವೇಶಿಸಬಹುದಾದ ಟ್ಯಾಬ್ ಘಟಕವನ್ನು ರಚಿಸಲು ಕೀಬೋರ್ಡ್ ನ್ಯಾವಿಗೇಷನ್ ಮತ್ತು ನಿಖರವಾದ ಫೋಕಸ್ ನಿರ್ವಹಣೆಯ ಬಗ್ಗೆ ಆಳವಾದ ತಿಳುವಳಿಕೆ ಅಗತ್ಯವಿದೆ. ಕಳಪೆಯಾಗಿ ಅನುಷ್ಠಾನಗೊಳಿಸಲಾದ ಟ್ಯಾಬ್ ಇಂಟರ್ಫೇಸ್ ಕೀಬೋರ್ಡ್‌ಗಳು ಅಥವಾ ಸಹಾಯಕ ತಂತ್ರಜ್ಞಾನಗಳನ್ನು ಅವಲಂಬಿಸಿರುವ ಬಳಕೆದಾರರಿಗೆ ದುಸ್ತರ ತಡೆಯಾಗಬಹುದು, ಇದರಿಂದಾಗಿ ಅವರು ನಿಮ್ಮ ವಿಷಯದಿಂದ ಪರಿಣಾಮಕಾರಿಯಾಗಿ ಹೊರಗುಳಿಯುವಂತಾಗುತ್ತದೆ.

ಈ ಸಮಗ್ರ ಮಾರ್ಗದರ್ಶಿ ವೆಬ್ ಡೆವಲಪರ್‌ಗಳು, UI/UX ವಿನ್ಯಾಸಕರು ಮತ್ತು ಮೂಲಭೂತ ಅಂಶಗಳನ್ನು ಮೀರಿ ಹೋಗಲು ಬಯಸುವ ಪ್ರವೇಶಿಸುವಿಕೆ ಪ್ರತಿಪಾದಕರಿಗಾಗಿ ಆಗಿದೆ. ಕೀಬೋರ್ಡ್ ಸಂವಹನಕ್ಕಾಗಿ ಅಂತರರಾಷ್ಟ್ರೀಯವಾಗಿ ಗುರುತಿಸಲ್ಪಟ್ಟ ಮಾದರಿಗಳು, ಅರ್ಥಪೂರ್ಣ ಸನ್ನಿವೇಶವನ್ನು ಒದಗಿಸುವಲ್ಲಿ ARIA (ಅಕ್ಸೆಸಿಬಲ್ ರಿಚ್ ಇಂಟರ್ನೆಟ್ ಅಪ್ಲಿಕೇಶನ್ಸ್) ನ ನಿರ್ಣಾಯಕ ಪಾತ್ರ ಮತ್ತು ಪ್ರತಿಯೊಬ್ಬರಿಗೂ, ಅವರ ಸ್ಥಳವನ್ನು ಲೆಕ್ಕಿಸದೆ ಅಥವಾ ಅವರು ವೆಬ್‌ನೊಂದಿಗೆ ಹೇಗೆ ಸಂವಹನ ನಡೆಸುತ್ತಾರೆ ಎಂಬುದನ್ನು ಲೆಕ್ಕಿಸದೆ, ತಡೆರಹಿತ ಮತ್ತು ಅರ್ಥಗರ್ಭಿತ ಬಳಕೆದಾರ ಅನುಭವವನ್ನು ರಚಿಸುವ ಫೋಕಸ್ ಅನ್ನು ನಿರ್ವಹಿಸುವ ಸೂಕ್ಷ್ಮ ತಂತ್ರಗಳನ್ನು ನಾವು ಅನ್ವೇಷಿಸುತ್ತೇವೆ.

ಟ್ಯಾಬ್ ಇಂಟರ್ಫೇಸ್‌ನ ರಚನೆ: ಪ್ರಮುಖ ಘಟಕಗಳು

ಯಾಂತ್ರಿಕತೆಗೆ ಧುಮುಕುವ ಮೊದಲು, WAI-ARIA ಲೇಖಕರ ಅಭ್ಯಾಸಗಳ ಆಧಾರದ ಮೇಲೆ ಸಾಮಾನ್ಯ ಶಬ್ದಕೋಶವನ್ನು ಸ್ಥಾಪಿಸುವುದು ಅತ್ಯಗತ್ಯ. ಪ್ರಮಾಣಿತ ಟ್ಯಾಬ್ ಘಟಕವು ಮೂರು ಪ್ರಾಥಮಿಕ ಅಂಶಗಳನ್ನು ಒಳಗೊಂಡಿದೆ:

• ಟ್ಯಾಬ್ ಪಟ್ಟಿ (`role="tablist"`): ಇದು ಟ್ಯಾಬ್‌ಗಳ ಗುಂಪನ್ನು ಹೊಂದಿರುವ ಕಂಟೈನರ್ ಅಂಶವಾಗಿದೆ. ಇದು ವಿಭಿನ್ನ ವಿಷಯ ಫಲಕಗಳ ನಡುವೆ ಬದಲಾಯಿಸಲು ಬಳಕೆದಾರರು ಸಂವಹನ ನಡೆಸುವ ಪ್ರಾಥಮಿಕ ವಿಜೆಟ್ ಆಗಿ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತದೆ.
• ಟ್ಯಾಬ್ (`role="tab"`): ಟ್ಯಾಬ್ ಪಟ್ಟಿಯಲ್ಲಿನ ಪ್ರತ್ಯೇಕ ಕ್ಲಿಕ್ ಮಾಡಬಹುದಾದ ಅಂಶ. ಸಕ್ರಿಯಗೊಳಿಸಿದಾಗ, ಅದು ಅದರ ಸಂಬಂಧಿತ ವಿಷಯ ಫಲಕವನ್ನು ಪ್ರದರ್ಶಿಸುತ್ತದೆ. ದೃಷ್ಟಿಗೋಚರವಾಗಿ, ಇದು "ಟ್ಯಾಬ್" ಆಗಿದೆ.
• ಟ್ಯಾಬ್ ಪ್ಯಾನಲ್ (`role="tabpanel"`): ನಿರ್ದಿಷ್ಟ ಟ್ಯಾಬ್‌ಗೆ ಸಂಬಂಧಿಸಿದ ವಿಷಯಕ್ಕಾಗಿ ಕಂಟೈನರ್. ಯಾವುದೇ ಸಮಯದಲ್ಲಿ ಕೇವಲ ಒಂದು ಟ್ಯಾಬ್ ಪ್ಯಾನಲ್ ಮಾತ್ರ ಗೋಚರಿಸುತ್ತದೆ- ಪ್ರಸ್ತುತ ಸಕ್ರಿಯ ಟ್ಯಾಬ್‌ಗೆ ಅನುಗುಣವಾಗಿರುವ ಟ್ಯಾಬ್ ಪ್ಯಾನಲ್.

ಈ ರಚನೆಯನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳುವುದು ದೃಷ್ಟಿಗೋಚರವಾಗಿ ಸುಸಂಬದ್ಧವಾಗಿರುವುದಲ್ಲದೆ ಸ್ಕ್ರೀನ್ ರೀಡರ್‌ಗಳಂತಹ ಸಹಾಯಕ ತಂತ್ರಜ್ಞಾನಗಳಿಗೆ ಅರ್ಥವಾಗುವಂತಹ ಘಟಕವನ್ನು ನಿರ್ಮಿಸುವ ಮೊದಲ ಹೆಜ್ಜೆಯಾಗಿದೆ.

ದೋಷರಹಿತ ಕೀಬೋರ್ಡ್ ನ್ಯಾವಿಗೇಷನ್‌ನ ತತ್ವಗಳು

ದೃಷ್ಟಿ ಹೊಂದಿರುವ ಮೌಸ್ ಬಳಕೆದಾರರಿಗೆ, ಟ್ಯಾಬ್‌ಗಳೊಂದಿಗೆ ಸಂವಹನ ನಡೆಸುವುದು ನೇರವಾಗಿರುತ್ತದೆ: ನೀವು ನೋಡಲು ಬಯಸುವ ಟ್ಯಾಬ್ ಅನ್ನು ಕ್ಲಿಕ್ ಮಾಡಿ. ಕೀಬೋರ್ಡ್-ಮಾತ್ರ ಬಳಕೆದಾರರಿಗೆ, ಅನುಭವವು ಅಂತೆಯೇ ಅರ್ಥಗರ್ಭಿತವಾಗಿರಬೇಕು. WAI-ARIA ಲೇಖಕರ ಅಭ್ಯಾಸಗಳು ಕೀಬೋರ್ಡ್ ಸಂವಹನಕ್ಕಾಗಿ ದೃಢವಾದ, ಪ್ರಮಾಣೀಕೃತ ಮಾದರಿಯನ್ನು ಒದಗಿಸುತ್ತವೆ, ಅದನ್ನು ಸಹಾಯಕ ತಂತ್ರಜ್ಞಾನದ ಬಳಕೆದಾರರು ನಿರೀಕ್ಷಿಸುತ್ತಾರೆ.

ಟ್ಯಾಬ್ ಪಟ್ಟಿಯನ್ನು ನ್ಯಾವಿಗೇಟ್ ಮಾಡುವುದು (`role="tablist"`)

ಪ್ರಾಥಮಿಕ ಸಂವಹನ ಟ್ಯಾಬ್‌ಗಳ ಪಟ್ಟಿಯೊಳಗೆ ನಡೆಯುತ್ತದೆ. ಪುಟದಲ್ಲಿನ ಪ್ರತಿಯೊಂದು ಸಂವಾದಾತ್ಮಕ ಅಂಶದ ಮೂಲಕ ನ್ಯಾವಿಗೇಟ್ ಮಾಡದೆಯೇ ಟ್ಯಾಬ್‌ಗಳನ್ನು ಪರಿಣಾಮಕಾರಿಯಾಗಿ ಬ್ರೌಸ್ ಮಾಡಲು ಮತ್ತು ಆಯ್ಕೆ ಮಾಡಲು ಬಳಕೆದಾರರಿಗೆ ಅವಕಾಶ ನೀಡುವುದು ಗುರಿಯಾಗಿದೆ.

• `Tab` ಕೀ: ಇದು ಪ್ರವೇಶ ಮತ್ತು ನಿರ್ಗಮನ ಬಿಂದುವಾಗಿದೆ. ಬಳಕೆದಾರರು `Tab` ಅನ್ನು ಒತ್ತಿದಾಗ, ಫೋಕಸ್ ಟ್ಯಾಬ್ ಪಟ್ಟಿಗೆ ಚಲಿಸಬೇಕು ಮತ್ತು ಪ್ರಸ್ತುತ ಸಕ್ರಿಯ ಟ್ಯಾಬ್‌ನಲ್ಲಿ ಇಳಿಯಬೇಕು. `Tab` ಅನ್ನು ಮತ್ತೊಮ್ಮೆ ಒತ್ತುವುದರಿಂದ ಫೋಕಸ್ ಟ್ಯಾಬ್ ಪಟ್ಟಿಯಿಂದ ಪುಟದಲ್ಲಿನ ಮುಂದಿನ ಫೋಕಸ್ ಮಾಡಬಹುದಾದ ಅಂಶಕ್ಕೆ ಚಲಿಸಬೇಕು (ಅಥವಾ ನಿಮ್ಮ ವಿನ್ಯಾಸವನ್ನು ಅವಲಂಬಿಸಿ ಸಕ್ರಿಯ ಟ್ಯಾಬ್ ಪ್ಯಾನೆಲ್‌ಗೆ). ಪ್ರಮುಖ ವಿಷಯವೇನೆಂದರೆ, ಸಂಪೂರ್ಣ ಟ್ಯಾಬ್ ಪಟ್ಟಿ ವಿಜೆಟ್ ಪುಟದ ಒಟ್ಟಾರೆ ಟ್ಯಾಬ್ ಅನುಕ್ರಮದಲ್ಲಿ ಒಂದೇ ನಿಲುಗಡೆಯನ್ನು ಪ್ರತಿನಿಧಿಸಬೇಕು.
• ಬಾಣದ ಕೀಲಿಗಳು (`Left/Right` ಅಥವಾ `Up/Down`): ಫೋಕಸ್ ಒಮ್ಮೆ ಟ್ಯಾಬ್ ಪಟ್ಟಿಯಲ್ಲಿದ್ದರೆ, ಬಾಣದ ಕೀಲಿಗಳನ್ನು ನ್ಯಾವಿಗೇಷನ್‌ಗಾಗಿ ಬಳಸಲಾಗುತ್ತದೆ.
  • ಸಮತಲ ಟ್ಯಾಬ್ ಪಟ್ಟಿಗಾಗಿ, `Right Arrow` ಕೀ ಫೋಕಸ್ ಅನ್ನು ಮುಂದಿನ ಟ್ಯಾಬ್‌ಗೆ ಚಲಿಸುತ್ತದೆ ಮತ್ತು `Left Arrow` ಕೀ ಫೋಕಸ್ ಅನ್ನು ಹಿಂದಿನ ಟ್ಯಾಬ್‌ಗೆ ಚಲಿಸುತ್ತದೆ.
  • ಲಂಬ ಟ್ಯಾಬ್ ಪಟ್ಟಿಗಾಗಿ, `Down Arrow` ಕೀ ಫೋಕಸ್ ಅನ್ನು ಮುಂದಿನ ಟ್ಯಾಬ್‌ಗೆ ಚಲಿಸುತ್ತದೆ ಮತ್ತು `Up Arrow` ಕೀ ಫೋಕಸ್ ಅನ್ನು ಹಿಂದಿನ ಟ್ಯಾಬ್‌ಗೆ ಚಲಿಸುತ್ತದೆ.
  ನಿರ್ಣಾಯಕವಾಗಿ, ನ್ಯಾವಿಗೇಷನ್ ವೃತ್ತಾಕಾರವಾಗಿರಬೇಕು. ಕೊನೆಯ ಟ್ಯಾಬ್‌ನಲ್ಲಿ `Right Arrow` ಅನ್ನು ಒತ್ತುವುದರಿಂದ ಫೋಕಸ್ ಮೊದಲ ಟ್ಯಾಬ್‌ಗೆ ಚಲಿಸಬೇಕು ಮತ್ತು ಮೊದಲ ಟ್ಯಾಬ್‌ನಲ್ಲಿ `Left Arrow` ಅನ್ನು ಒತ್ತುವುದರಿಂದ ಫೋಕಸ್ ಕೊನೆಯ ಟ್ಯಾಬ್‌ಗೆ ಚಲಿಸಬೇಕು. ಇದು ಒಳಗೊಂಡಿರುವ, ಊಹಿಸಬಹುದಾದ ನ್ಯಾವಿಗೇಷನ್ ಲೂಪ್ ಅನ್ನು ರಚಿಸುತ್ತದೆ.
• `Home` ಮತ್ತು `End` ಕೀಲಿಗಳು: ಅನೇಕ ಟ್ಯಾಬ್‌ಗಳನ್ನು ಹೊಂದಿರುವ ಪಟ್ಟಿಗಳಲ್ಲಿ ದಕ್ಷತೆಗಾಗಿ, ಈ ಕೀಲಿಗಳು ಶಾರ್ಟ್‌ಕಟ್‌ಗಳನ್ನು ಒದಗಿಸುತ್ತವೆ.
  • `Home`: ಪಟ್ಟಿಯಲ್ಲಿರುವ ಮೊದಲ ಟ್ಯಾಬ್‌ಗೆ ಫೋಕಸ್ ಅನ್ನು ಚಲಿಸುತ್ತದೆ.
  • `End`: ಪಟ್ಟಿಯಲ್ಲಿರುವ ಕೊನೆಯ ಟ್ಯಾಬ್‌ಗೆ ಫೋಕಸ್ ಅನ್ನು ಚಲಿಸುತ್ತದೆ.

ಸಕ್ರಿಯಗೊಳಿಸುವಿಕೆ ಮಾದರಿಗಳು: ಸ್ವಯಂಚಾಲಿತ ವಿರುದ್ಧ ಕೈಪಿಡಿ

ಬಳಕೆದಾರರು ಬಾಣದ ಕೀಲಿಗಳನ್ನು ಬಳಸಿ ಟ್ಯಾಬ್‌ಗಳ ನಡುವೆ ನ್ಯಾವಿಗೇಟ್ ಮಾಡಿದಾಗ, ಅನುಗುಣವಾದ ಪ್ಯಾನಲ್ ಅನ್ನು ಯಾವಾಗ ಪ್ರದರ್ಶಿಸಬೇಕು? ಎರಡು ಪ್ರಮಾಣಿತ ಮಾದರಿಗಳಿವೆ:

• ಸ್ವಯಂಚಾಲಿತ ಸಕ್ರಿಯಗೊಳಿಸುವಿಕೆ: ಬಾಣದ ಕೀಲಿಯ ಮೂಲಕ ಟ್ಯಾಬ್ ಫೋಕಸ್ ಅನ್ನು ಸ್ವೀಕರಿಸಿದ ತಕ್ಷಣ, ಅದರ ಸಂಬಂಧಿತ ಪ್ಯಾನಲ್ ಅನ್ನು ಪ್ರದರ್ಶಿಸಲಾಗುತ್ತದೆ. ಇದು ಅತ್ಯಂತ ಸಾಮಾನ್ಯವಾದ ಮಾದರಿಯಾಗಿದೆ ಮತ್ತು ಅದರ ತಕ್ಷಣದ ಪರಿಣಾಮಕ್ಕಾಗಿ ಸಾಮಾನ್ಯವಾಗಿ ಆದ್ಯತೆ ನೀಡಲಾಗುತ್ತದೆ. ಇದು ವಿಷಯವನ್ನು ವೀಕ್ಷಿಸಲು ಅಗತ್ಯವಿರುವ ಕೀಸ್ಟ್ರೋಕ್‌ಗಳ ಸಂಖ್ಯೆಯನ್ನು ಕಡಿಮೆ ಮಾಡುತ್ತದೆ.
• ಕೈಪಿಡಿ ಸಕ್ರಿಯಗೊಳಿಸುವಿಕೆ: ಬಾಣದ ಕೀಲಿಗಳೊಂದಿಗೆ ಫೋಕಸ್ ಅನ್ನು ಚಲಿಸುವುದು ಟ್ಯಾಬ್ ಅನ್ನು ಮಾತ್ರ ಹೈಲೈಟ್ ಮಾಡುತ್ತದೆ. ಟ್ಯಾಬ್ ಅನ್ನು ಸಕ್ರಿಯಗೊಳಿಸಲು ಮತ್ತು ಅದರ ಪ್ಯಾನಲ್ ಅನ್ನು ಪ್ರದರ್ಶಿಸಲು ಬಳಕೆದಾರರು ನಂತರ `Enter` ಅಥವಾ `Space` ಅನ್ನು ಒತ್ತಬೇಕು. ಬಳಕೆದಾರರು ಟ್ಯಾಬ್ ಆಯ್ಕೆಗಳನ್ನು ಸರಳವಾಗಿ ಬ್ರೌಸ್ ಮಾಡುತ್ತಿರುವಾಗ ಅನಗತ್ಯವಾಗಿ ವಿಷಯವನ್ನು ಲೋಡ್ ಮಾಡುವುದನ್ನು ತಡೆಯುವುದರಿಂದ ಟ್ಯಾಬ್ ಪ್ಯಾನಲ್‌ಗಳು ಹೆಚ್ಚಿನ ಪ್ರಮಾಣದ ವಿಷಯವನ್ನು ಹೊಂದಿರುವಾಗ ಅಥವಾ ನೆಟ್‌ವರ್ಕ್ ವಿನಂತಿಗಳನ್ನು ಪ್ರಚೋದಿಸಿದಾಗ ಈ ಮಾದರಿಯು ಉಪಯುಕ್ತವಾಗಿರುತ್ತದೆ.

ನಿಮ್ಮ ಸಕ್ರಿಯಗೊಳಿಸುವಿಕೆ ಮಾದರಿಯ ಆಯ್ಕೆಯು ನಿಮ್ಮ ಇಂಟರ್ಫೇಸ್‌ನ ವಿಷಯ ಮತ್ತು ಸನ್ನಿವೇಶವನ್ನು ಆಧರಿಸಿರಬೇಕು. ನೀವು ಯಾವುದನ್ನು ಆರಿಸಿಕೊಂಡರೂ, ನಿಮ್ಮ ಅಪ್ಲಿಕೇಶನ್‌ನಾದ್ಯಂತ ಸ್ಥಿರವಾಗಿರಿ.

ಫೋಕಸ್ ನಿರ್ವಹಣೆಯನ್ನು ಕರಗತ ಮಾಡಿಕೊಳ್ಳುವುದು: ಬಳಕೆಯ ಸುಲಭತೆಯ ಕಥೆ ಹೇಳದ ನಾಯಕ

ಪರಿಣಾಮಕಾರಿ ಫೋಕಸ್ ನಿರ್ವಹಣೆಯು ಒಂದು ಅನನುಕೂಲಕರ ಇಂಟರ್ಫೇಸ್ ಅನ್ನು ತಡೆರಹಿತ ಒಂದರಿಂದ ಬೇರ್ಪಡಿಸುತ್ತದೆ. ಇದು ಪ್ರೋಗ್ರಾಮಿಕ್ ಆಗಿ ಬಳಕೆದಾರರ ಫೋಕಸ್ ಎಲ್ಲಿದೆ ಎಂಬುದನ್ನು ನಿಯಂತ್ರಿಸುವುದು, ಘಟಕದ ಮೂಲಕ ತಾರ್ಕಿಕ ಮತ್ತು ಊಹಿಸಬಹುದಾದ ಮಾರ್ಗವನ್ನು ಖಚಿತಪಡಿಸುವುದು.

ರೋವಿಂಗ್ `tabindex` ತಂತ್ರ

ರೋವಿಂಗ್ `tabindex` ಟ್ಯಾಬ್ ಪಟ್ಟಿಗಳಂತಹ ಘಟಕಗಳಲ್ಲಿ ಕೀಬೋರ್ಡ್ ನ್ಯಾವಿಗೇಷನ್‌ನ ಮೂಲಾಧಾರವಾಗಿದೆ. ಸಂಪೂರ್ಣ ವಿಜೆಟ್ ಒಂದೇ `Tab` ಸ್ಟಾಪ್ ಆಗಿ ಕಾರ್ಯನಿರ್ವಹಿಸುವುದು ಗುರಿಯಾಗಿದೆ.

ಇದು ಹೇಗೆ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತದೆ ಎಂಬುದು ಇಲ್ಲಿದೆ:

1. ಪ್ರಸ್ತುತ ಸಕ್ರಿಯ ಟ್ಯಾಬ್ ಅಂಶಕ್ಕೆ `tabindex="0"` ನೀಡಲಾಗುತ್ತದೆ. ಇದು ನೈಸರ್ಗಿಕ ಟ್ಯಾಬ್ ಕ್ರಮದ ಭಾಗವಾಗಿಸುತ್ತದೆ ಮತ್ತು ಬಳಕೆದಾರರು ಘಟಕಕ್ಕೆ ಟ್ಯಾಬ್ ಮಾಡಿದಾಗ ಫೋಕಸ್ ಅನ್ನು ಸ್ವೀಕರಿಸಲು ಅನುಮತಿಸುತ್ತದೆ.
2. ಇತರ ಎಲ್ಲಾ ನಿಷ್ಕ್ರಿಯ ಟ್ಯಾಬ್ ಅಂಶಗಳಿಗೆ `tabindex="-1"` ನೀಡಲಾಗುತ್ತದೆ. ಇದು ಅವುಗಳನ್ನು ನೈಸರ್ಗಿಕ ಟ್ಯಾಬ್ ಕ್ರಮದಿಂದ ತೆಗೆದುಹಾಕುತ್ತದೆ, ಆದ್ದರಿಂದ ಬಳಕೆದಾರರು ಪ್ರತಿಯೊಂದರ ಮೂಲಕವೂ `Tab` ಅನ್ನು ಒತ್ತಬೇಕಾಗಿಲ್ಲ. ಅವುಗಳನ್ನು ಇನ್ನೂ ಪ್ರೋಗ್ರಾಮಿಕ್ ಆಗಿ ಕೇಂದ್ರೀಕರಿಸಬಹುದು, ಅದು ನಾವು ಬಾಣದ ಕೀಲಿ ನ್ಯಾವಿಗೇಷನ್‌ನೊಂದಿಗೆ ಮಾಡುವುದು.

ಬಳಕೆದಾರರು ಟ್ಯಾಬ್ ಎ ಯಿಂದ ಟ್ಯಾಬ್ ಬಿ ಗೆ ಸರಿಸಲು ಬಾಣದ ಕೀಲಿಯನ್ನು ಒತ್ತಿದಾಗ:

• ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ತರ್ಕವು ಟ್ಯಾಬ್ ಎ ಅನ್ನು `tabindex="-1"` ಹೊಂದಲು ನವೀಕರಿಸುತ್ತದೆ.
• ನಂತರ ಅದು ಟ್ಯಾಬ್ ಬಿ ಅನ್ನು `tabindex="0"` ಹೊಂದಲು ನವೀಕರಿಸುತ್ತದೆ.
• ಅಂತಿಮವಾಗಿ, ಅದು ಬಳಕೆದಾರರ ಫೋಕಸ್ ಅನ್ನು ಅಲ್ಲಿಗೆ ಸರಿಸಲು ಟ್ಯಾಬ್ ಬಿ ಅಂಶದಲ್ಲಿ `.focus()` ಅನ್ನು ಕರೆಯುತ್ತದೆ.

ಈ ತಂತ್ರವು ಪಟ್ಟಿಯಲ್ಲಿ ಎಷ್ಟು ಟ್ಯಾಬ್‌ಗಳಿದ್ದರೂ, ಘಟಕವು ಪುಟದ ಒಟ್ಟಾರೆ `Tab` ಅನುಕ್ರಮದಲ್ಲಿ ಕೇವಲ ಒಂದು ಸ್ಥಾನವನ್ನು ಮಾತ್ರ ಆಕ್ರಮಿಸುತ್ತದೆ ಎಂದು ಖಚಿತಪಡಿಸುತ್ತದೆ.

ಟ್ಯಾಬ್ ಪ್ಯಾನೆಲ್‌ಗಳಲ್ಲಿ ಫೋಕಸ್

ಟ್ಯಾಬ್ ಸಕ್ರಿಯವಾದ ನಂತರ, ಫೋಕಸ್ ಮುಂದೆ ಎಲ್ಲಿಗೆ ಹೋಗುತ್ತದೆ? ಸಕ್ರಿಯ ಟ್ಯಾಬ್ ಅಂಶದಿಂದ `Tab` ಅನ್ನು ಒತ್ತುವುದರಿಂದ ಅದರ ಅನುಗುಣವಾದ ಟ್ಯಾಬ್ ಪ್ಯಾನೆಲ್‌ನ *ಒಳಗೆ* ಮೊದಲ ಫೋಕಸ್ ಮಾಡಬಹುದಾದ ಅಂಶಕ್ಕೆ ಫೋಕಸ್ ಚಲಿಸುತ್ತದೆ ಎಂದು ನಿರೀಕ್ಷಿಸಲಾಗಿದೆ. ಟ್ಯಾಬ್ ಪ್ಯಾನಲ್ ಯಾವುದೇ ಫೋಕಸ್ ಮಾಡಬಹುದಾದ ಅಂಶಗಳನ್ನು ಹೊಂದಿಲ್ಲದಿದ್ದರೆ, `Tab` ಅನ್ನು ಒತ್ತುವುದರಿಂದ ಫೋಕಸ್ ಟ್ಯಾಬ್ ಪಟ್ಟಿಯ *ನಂತರ* ಪುಟದಲ್ಲಿನ ಮುಂದಿನ ಫೋಕಸ್ ಮಾಡಬಹುದಾದ ಅಂಶಕ್ಕೆ ಚಲಿಸಬೇಕು.

ಅಂತೆಯೇ, ಬಳಕೆದಾರರು ಟ್ಯಾಬ್ ಪ್ಯಾನಲ್‌ನ ಒಳಗೆ ಕೊನೆಯ ಫೋಕಸ್ ಮಾಡಬಹುದಾದ ಅಂಶದ ಮೇಲೆ ಕೇಂದ್ರೀಕರಿಸಿದಾಗ, `Tab` ಅನ್ನು ಒತ್ತುವುದರಿಂದ ಫೋಕಸ್ ಪ್ಯಾನೆಲ್‌ನಿಂದ ಪುಟದಲ್ಲಿನ ಮುಂದಿನ ಫೋಕಸ್ ಮಾಡಬಹುದಾದ ಅಂಶಕ್ಕೆ ಚಲಿಸಬೇಕು. ಪ್ಯಾನಲ್‌ನ ಒಳಗೆ ಮೊದಲ ಫೋಕಸ್ ಮಾಡಬಹುದಾದ ಅಂಶದಿಂದ `Shift + Tab` ಅನ್ನು ಒತ್ತುವುದರಿಂದ ಫೋಕಸ್ ಸಕ್ರಿಯ ಟ್ಯಾಬ್ ಅಂಶಕ್ಕೆ ಹಿಂತಿರುಗಬೇಕು.

ಫೋಕಸ್ ಟ್ರ್ಯಾಪಿಂಗ್ ಅನ್ನು ತಪ್ಪಿಸಿ: ಟ್ಯಾಬ್ ಇಂಟರ್ಫೇಸ್ ಮಾಡಲ್ ಡೈಲಾಗ್ ಅಲ್ಲ. ಬಳಕೆದಾರರು ಯಾವಾಗಲೂ `Tab` ಕೀಯನ್ನು ಬಳಸಿ ಟ್ಯಾಬ್ ಘಟಕ ಮತ್ತು ಅದರ ಪ್ಯಾನೆಲ್‌ಗಳಿಗೆ ನ್ಯಾವಿಗೇಟ್ ಮಾಡಲು ಮತ್ತು ಹೊರಗೆ ಹೋಗಲು ಸಾಧ್ಯವಾಗುತ್ತದೆ. ಘಟಕದೊಳಗೆ ಫೋಕಸ್ ಅನ್ನು ಟ್ರ್ಯಾಪ್ ಮಾಡಬೇಡಿ, ಏಕೆಂದರೆ ಇದು ದಿಗ್ಭ್ರಮೆಗೊಳಿಸುತ್ತದೆ ಮತ್ತು ನಿರಾಶೆಗೊಳಿಸುತ್ತದೆ.

ARIA ಪಾತ್ರ: ಸಹಾಯಕ ತಂತ್ರಜ್ಞಾನಗಳಿಗೆ ಅರ್ಥವನ್ನು ತಿಳಿಸುವುದು

ARIA ಇಲ್ಲದೆ, `

<h2 id="tablist-label">ಖಾತೆ ಸೆಟ್ಟಿಂಗ್‌ಗಳು</h2>
<div role="tablist" aria-labelledby="tablist-label">
  <button id="tab-1" type="button" role="tab" aria-selected="true" aria-controls="panel-1" tabindex="0">
    ಪ್ರೊಫೈಲ್
  </button>
  <button id="tab-2" type="button" role="tab" aria-selected="false" aria-controls="panel-2" tabindex="-1">
    ಗುಪ್ತಪದ
  </button>
  <button id="tab-3" type="button" role="tab" aria-selected="false" aria-controls="panel-3" tabindex="-1">
    ಅಧಿಸೂಚನೆಗಳು
  </button>
</div>

<div id="panel-1" role="tabpanel" aria-labelledby="tab-1" tabindex="0">
  <p>ಪ್ರೊಫೈಲ್ ಪ್ಯಾನೆಲ್‌ಗಾಗಿ ವಿಷಯ...</p>
</div>
<div id="panel-2" role="tabpanel" aria-labelledby="tab-2" tabindex="0" hidden>
  <p>ಗುಪ್ತಪದ ಪ್ಯಾನೆಲ್‌ಗಾಗಿ ವಿಷಯ...</p>
</div>
<div id="panel-3" role="tabpanel" aria-labelledby="tab-3" tabindex="0" hidden>
  <p>ಅಧಿಸೂಚನೆಗಳ ಪ್ಯಾನೆಲ್‌ಗಾಗಿ ವಿಷಯ...</p>
</div>

const tablist = document.querySelector('[role="tablist"]');
const tabs = tablist.querySelectorAll('[role="tab"]');

tablist.addEventListener('keydown', (e) => {
  let currentTab = document.activeElement;
  let newTab;

  if (e.key === 'ArrowRight' || e.key === 'ArrowDown') {
    // ಅಗತ್ಯವಿದ್ದರೆ ಸುತ್ತುವ ಮೂಲಕ ಅನುಕ್ರಮದಲ್ಲಿ ಮುಂದಿನ ಟ್ಯಾಬ್ ಅನ್ನು ಹುಡುಕಿ
    newTab = getNextTab(currentTab);
  } else if (e.key === 'ArrowLeft' || e.key === 'ArrowUp') {
    // ಅಗತ್ಯವಿದ್ದರೆ ಸುತ್ತುವ ಮೂಲಕ ಅನುಕ್ರಮದಲ್ಲಿ ಹಿಂದಿನ ಟ್ಯಾಬ್ ಅನ್ನು ಹುಡುಕಿ
    newTab = getPreviousTab(currentTab);
  } else if (e.key === 'Home') {
    newTab = tabs[0];
  } else if (e.key === 'End') {
    newTab = tabs[tabs.length - 1];
  }

  if (newTab) {
    activateTab(newTab);
    e.preventDefault(); // ಬಾಣದ ಕೀಲಿಗಳಿಗಾಗಿ ಡೀಫಾಲ್ಟ್ ಬ್ರೌಸರ್ ನಡವಳಿಕೆಯನ್ನು ತಡೆಯಿರಿ
  }
});

function activateTab(tab) {
  // ಇತರ ಎಲ್ಲಾ ಟ್ಯಾಬ್‌ಗಳನ್ನು ನಿಷ್ಕ್ರಿಯಗೊಳಿಸಿ
  tabs.forEach(t => {
    t.setAttribute('aria-selected', 'false');
    t.setAttribute('tabindex', '-1');
    document.getElementById(t.getAttribute('aria-controls')).hidden = true;
  });

  // ಹೊಸ ಟ್ಯಾಬ್ ಅನ್ನು ಸಕ್ರಿಯಗೊಳಿಸಿ
  tab.setAttribute('aria-selected', 'true');
  tab.setAttribute('tabindex', '0');
  document.getElementById(tab.getAttribute('aria-controls')).hidden = false;
  tab.focus();
}