ಟೂಲ್‌ಟಿಪ್ ಅಳವಡಿಕೆ: ಹೋವರ್ ಮತ್ತು ಫೋಕಸ್ ಮೂಲಕ ಪ್ರವೇಶಿಸಬಹುದಾದ ಮಾಹಿತಿ

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

ಟೂಲ್‌ಟಿಪ್‌ಗಳಿಗೆ ಪ್ರವೇಶಸಾಧ್ಯತೆ ಏಕೆ ಮುಖ್ಯ?

ಪ್ರವೇಶಸಾಧ್ಯತೆ ಕೇವಲ ನಿಯಮ ಪಾಲನೆಗೆ ಸೀಮಿತವಲ್ಲ; ಇದು ಎಲ್ಲರಿಗೂ ಉತ್ತಮ ಬಳಕೆದಾರ ಅನುಭವವನ್ನು ಸೃಷ್ಟಿಸುವುದಾಗಿದೆ. ಟೂಲ್‌ಟಿಪ್‌ಗಳು ಪ್ರವೇಶಿಸಬಹುದಾದಂತೆ ಇಲ್ಲದಿದ್ದರೆ, ಸ್ಕ್ರೀನ್ ರೀಡರ್‌ಗಳು, ಕೀಬೋರ್ಡ್ ನ್ಯಾವಿಗೇಷನ್, ಅಥವಾ ಸ್ಪೀಚ್ ಇನ್‌ಪುಟ್‌ನಂತಹ ಸಹಾಯಕ ತಂತ್ರಜ್ಞಾನಗಳನ್ನು ಅವಲಂಬಿಸಿರುವ ಬಳಕೆದಾರರನ್ನು ಹೊರಗಿಡಬಹುದು. ಈ ಸನ್ನಿವೇಶಗಳನ್ನು ಪರಿಗಣಿಸಿ:

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

ಪ್ರವೇಶಸಾಧ್ಯತೆಯ ಉತ್ತಮ ಅಭ್ಯಾಸಗಳನ್ನು ಅನುಸರಿಸುವ ಮೂಲಕ, ಟೂಲ್‌ಟಿಪ್‌ಗಳು ಎಲ್ಲರಿಗೂ ಬಳಕೆದಾರ ಅನುಭವವನ್ನು ಹೆಚ್ಚಿಸುತ್ತವೆಯೇ ಹೊರತು ಅಡ್ಡಿಪಡಿಸುವುದಿಲ್ಲ ಎಂದು ನಾವು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಬಹುದು.

ಪ್ರವೇಶಿಸಬಹುದಾದ ಟೂಲ್‌ಟಿಪ್‌ಗಳಿಗೆ ಪ್ರಮುಖ ತತ್ವಗಳು

ಪ್ರವೇಶಿಸಬಹುದಾದ ಟೂಲ್‌ಟಿಪ್‌ಗಳನ್ನು ರಚಿಸಲು ಈ ಕೆಳಗಿನ ತತ್ವಗಳು ನಿರ್ಣಾಯಕವಾಗಿವೆ:

ಪರ್ಯಾಯ ಪ್ರವೇಶವನ್ನು ಒದಗಿಸಿ: ಟೂಲ್‌ಟಿಪ್‌ಗಳು ಹೋವರ್ ಮತ್ತು ಕೀಬೋರ್ಡ್ ಫೋಕಸ್ ಎರಡರ ಮೂಲಕವೂ ಪ್ರವೇಶಿಸಬಹುದೆಂದು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಿ.
ARIA ಆಟ್ರಿಬ್ಯೂಟ್‌ಗಳನ್ನು ಬಳಸಿ: ಸಹಾಯಕ ತಂತ್ರಜ್ಞಾನಗಳಿಗೆ ಟೂಲ್‌ಟಿಪ್‌ಗಳನ್ನು ಸರಿಯಾಗಿ ಗುರುತಿಸಲು ಮತ್ತು ವಿವರಿಸಲು ARIA (Accessible Rich Internet Applications) ಆಟ್ರಿಬ್ಯೂಟ್‌ಗಳನ್ನು ಬಳಸಿ.
ಫೋಕಸ್ ನಿರ್ವಹಿಸಿ: ಟೂಲ್‌ಟಿಪ್ ಪ್ರದರ್ಶಿಸಿದಾಗ ಮತ್ತು ಮರೆಮಾಡಿದಾಗ ಫೋಕಸ್ ಎಲ್ಲಿಗೆ ಹೋಗುತ್ತದೆ ಎಂಬುದನ್ನು ನಿಯಂತ್ರಿಸಿ.
ಸಾಕಷ್ಟು ಕಾಂಟ್ರಾಸ್ಟ್ ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಿ: ಟೂಲ್‌ಟಿಪ್ ಪಠ್ಯ ಮತ್ತು ಹಿನ್ನೆಲೆಯ ನಡುವೆ ಸಾಕಷ್ಟು ಬಣ್ಣದ ಕಾಂಟ್ರಾಸ್ಟ್ ನೀಡಿ.
ಸಾಕಷ್ಟು ಸಮಯ ನೀಡಿ: ಬಳಕೆದಾರರಿಗೆ ಟೂಲ್‌ಟಿಪ್ ವಿಷಯವನ್ನು ಓದಲು ಸಾಕಷ್ಟು ಸಮಯ ನೀಡಿ.
ಅವುಗಳನ್ನು ವಜಾಗೊಳಿಸುವಂತೆ ಮಾಡಿ: ಟೂಲ್‌ಟಿಪ್ ಅನ್ನು ವಜಾಗೊಳಿಸಲು ಸ್ಪಷ್ಟವಾದ ಮಾರ್ಗವನ್ನು ಒದಗಿಸಿ.
ಅತಿಯಾದ ಬಳಕೆಯನ್ನು ತಪ್ಪಿಸಿ: ಟೂಲ್‌ಟಿಪ್‌ಗಳನ್ನು ಮಿತವಾಗಿ ಮತ್ತು ಅಗತ್ಯವಿದ್ದಾಗ ಮಾತ್ರ ಬಳಸಿ.

ಅಳವಡಿಕೆಯ ತಂತ್ರಗಳು

1. ಹೋವರ್ ಮತ್ತು ಫೋಕಸ್ ಬಳಸುವುದು

ಪ್ರವೇಶಿಸಬಹುದಾದ ಟೂಲ್‌ಟಿಪ್‌ಗಳ ಅತ್ಯಂತ ನಿರ್ಣಾಯಕ ಅಂಶವೆಂದರೆ ಅವು ಮೌಸ್ ಮತ್ತು ಕೀಬೋರ್ಡ್ ಬಳಕೆದಾರರಿಗೆ ಪ್ರವೇಶಿಸಬಹುದೆಂದು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳುವುದು. ಅಂದರೆ, ಟೂಲ್‌ಟಿಪ್ ಹೋವರ್ ಮೇಲೆ ಮತ್ತು ಎಲಿಮೆಂಟ್ ಫೋಕಸ್ ಪಡೆದಾಗ ಎರಡೂ ಸಂದರ್ಭಗಳಲ್ಲಿ ಕಾಣಿಸಿಕೊಳ್ಳಬೇಕು.

HTML:

<a href="#" aria-describedby="tooltip-example">Example Link</a>
<div id="tooltip-example" role="tooltip" style="display: none;">This is an example tooltip.</div>

CSS:

a:hover + div[role="tooltip"],
a:focus + div[role="tooltip"] {
  display: block;
  position: absolute;
  background-color: #f0f0f0;
  border: 1px solid #ccc;
  padding: 5px;
  z-index: 1000; /* Ensure the tooltip is on top */
}

ವಿವರಣೆ:

aria-describedby: ಈ ಆಟ್ರಿಬ್ಯೂಟ್, ಲಿಂಕ್ ಅನ್ನು ಅದರ ID ಬಳಸಿ ಟೂಲ್‌ಟಿಪ್ ಎಲಿಮೆಂಟ್‌ಗೆ ಸಂಪರ್ಕಿಸುತ್ತದೆ. ಇದು ಸಹಾಯಕ ತಂತ್ರಜ್ಞಾನಗಳಿಗೆ ಟೂಲ್‌ಟಿಪ್ ಲಿಂಕ್ ಬಗ್ಗೆ ಹೆಚ್ಚುವರಿ ಮಾಹಿತಿಯನ್ನು ಒದಗಿಸುತ್ತದೆ ಎಂದು ತಿಳಿಸುತ್ತದೆ.
role="tooltip": ಈ ARIA ರೋಲ್ ಎಲಿಮೆಂಟ್‌ ಅನ್ನು ಟೂಲ್‌ಟಿಪ್ ಎಂದು ಗುರುತಿಸುತ್ತದೆ.
CSS, ಲಿಂಕ್ ಅನ್ನು ಹೋವರ್ ಮಾಡಿದಾಗ ಅಥವಾ ಫೋಕಸ್ ಮಾಡಿದಾಗ ಟೂಲ್‌ಟಿಪ್ ಅನ್ನು ತೋರಿಸಲು ಅಡ್ಜಸೆಂಟ್ ಸಿಬ್ಲಿಂಗ್ ಸೆಲೆಕ್ಟರ್ (+) ಅನ್ನು ಬಳಸುತ್ತದೆ.

ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ (ಸುಧಾರಿತ ನಿಯಂತ್ರಣ - ಐಚ್ಛಿಕ):

CSS ಸರಳವಾಗಿ ತೋರಿಸಲು/ಮರೆಮಾಡಲು ಸಹಾಯಕವಾಗಿದ್ದರೂ, ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಹೆಚ್ಚು ದೃಢವಾದ ನಿಯಂತ್ರಣವನ್ನು ನೀಡುತ್ತದೆ, ವಿಶೇಷವಾಗಿ ಟೂಲ್‌ಟಿಪ್‌ಗಳು ಡೈನಾಮಿಕ್ ಆಗಿ ರಚನೆಯಾದಾಗ ಅಥವಾ ಹೆಚ್ಚು ಸಂಕೀರ್ಣವಾದ ನಡವಳಿಕೆ ಅಗತ್ಯವಿದ್ದಾಗ.

const link = document.querySelector('a[aria-describedby="tooltip-example"]');
const tooltip = document.getElementById('tooltip-example');

link.addEventListener('focus', () => {
  tooltip.style.display = 'block';
});

link.addEventListener('blur', () => {
  tooltip.style.display = 'none';
});

link.addEventListener('mouseover', () => {
  tooltip.style.display = 'block';
});

link.addEventListener('mouseout', () => {
  tooltip.style.display = 'none';
});

2. ARIA ಆಟ್ರಿಬ್ಯೂಟ್‌ಗಳನ್ನು ಬಳಸುವುದು

ಸಹಾಯಕ ತಂತ್ರಜ್ಞಾನಗಳಿಗೆ ಲಾಕ್ಷಣಿಕ ಮಾಹಿತಿಯನ್ನು ಒದಗಿಸಲು ARIA ಆಟ್ರಿಬ್ಯೂಟ್‌ಗಳು ಅತ್ಯಗತ್ಯ. ಇಲ್ಲಿ ಕೆಲವು ಪ್ರಮುಖ ಆಟ್ರಿಬ್ಯೂಟ್‌ಗಳ ವಿವರಣೆ ಇದೆ:

aria-describedby: ಮೊದಲೇ ಹೇಳಿದಂತೆ, ಈ ಆಟ್ರಿಬ್ಯೂಟ್ ಪ್ರಚೋದಕ ಎಲಿಮೆಂಟ್ ಮತ್ತು ಟೂಲ್‌ಟಿಪ್ ಎಲಿಮೆಂಟ್ ನಡುವೆ ಸಂಬಂಧವನ್ನು ಸ್ಥಾಪಿಸುತ್ತದೆ.
role="tooltip": ಈ ಆಟ್ರಿಬ್ಯೂಟ್ ಎಲಿಮೆಂಟ್‌ ಅನ್ನು ಸ್ಪಷ್ಟವಾಗಿ ಟೂಲ್‌ಟಿಪ್ ಎಂದು ವ್ಯಾಖ್ಯಾನಿಸುತ್ತದೆ.
aria-hidden="true"/aria-hidden="false": ಟೂಲ್‌ಟಿಪ್ ಪ್ರಸ್ತುತ ಸಹಾಯಕ ತಂತ್ರಜ್ಞಾನಗಳಿಗೆ ಗೋಚರಿಸುತ್ತದೆಯೇ ಅಥವಾ ಇಲ್ಲವೇ ಎಂಬುದನ್ನು ಸೂಚಿಸಲು ಇವುಗಳನ್ನು ಬಳಸಿ. ಟೂಲ್‌ಟಿಪ್ ಮರೆಮಾಡಿದಾಗ, aria-hidden="true" ಎಂದು ಹೊಂದಿಸಿ. ಅದು ಗೋಚರಿಸುವಾಗ, aria-hidden="false" ಎಂದು ಹೊಂದಿಸಿ. ಟೂಲ್‌ಟಿಪ್‌ನ ಗೋಚರತೆಯನ್ನು ನಿಯಂತ್ರಿಸಲು ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಬಳಸುವಾಗ ಇದು ವಿಶೇಷವಾಗಿ ಮುಖ್ಯವಾಗಿದೆ.

ಉದಾಹರಣೆ:

<button aria-describedby="help-tooltip">Submit</button>
<div id="help-tooltip" role="tooltip" aria-hidden="true">Click here to submit the form.</div>

ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ (aria-hidden ಗಾಗಿ):

const button = document.querySelector('button[aria-describedby="help-tooltip"]');
const tooltip = document.getElementById('help-tooltip');

button.addEventListener('focus', () => {
  tooltip.setAttribute('aria-hidden', 'false');
  tooltip.style.display = 'block';
});

button.addEventListener('blur', () => {
  tooltip.setAttribute('aria-hidden', 'true');
  tooltip.style.display = 'none';
});

button.addEventListener('mouseover', () => {
  tooltip.setAttribute('aria-hidden', 'false');
  tooltip.style.display = 'block';
});

button.addEventListener('mouseout', () => {
  tooltip.setAttribute('aria-hidden', 'true');
  tooltip.style.display = 'none';
});

3. ಫೋಕಸ್ ನಿರ್ವಹಣೆ

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

ಆದಾಗ್ಯೂ, ನೀವು ಫೋಕಸ್ ಅನ್ನು ಟೂಲ್‌ಟಿಪ್‌ಗೆ ಸರಿಸಲು ಬಯಸುವ ಸಂದರ್ಭಗಳು ಇರಬಹುದು, ವಿಶೇಷವಾಗಿ ಟೂಲ್‌ಟಿಪ್ ಸಂವಾದಾತ್ಮಕ ಅಂಶಗಳನ್ನು (ಉದಾ., ಲಿಂಕ್‌ಗಳು, ಬಟನ್‌ಗಳು) ಹೊಂದಿದ್ದರೆ. ಈ ಸಂದರ್ಭದಲ್ಲಿ, ಇದನ್ನು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಿ:

ಟೂಲ್‌ಟಿಪ್ ಫೋಕಸ್ ಹೊಂದಿದೆ ಎಂದು ಸೂಚಿಸಲು ದೃಷ್ಟಿಗೋಚರವಾಗಿ ಭಿನ್ನವಾಗಿರುತ್ತದೆ.
ಫೋಕಸ್ ಅನ್ನು ಮೂಲ ಪ್ರಚೋದಕ ಎಲಿಮೆಂಟ್‌ಗೆ ಹಿಂತಿರುಗಿಸಲು ಸ್ಪಷ್ಟವಾದ ಮಾರ್ಗವಿದೆ (ಉದಾ., ಟೂಲ್‌ಟಿಪ್‌ನಲ್ಲಿ ಮುಚ್ಚುವ ಬಟನ್).

ಹೆಚ್ಚಿನ ಸಂದರ್ಭಗಳಲ್ಲಿ, ಸರಳತೆ ಮತ್ತು ಉಪಯುಕ್ತತೆಗಾಗಿ ಟೂಲ್‌ಟಿಪ್‌ನೊಳಗೆ ಫೋಕಸ್ ನಿರ್ವಹಣೆಯನ್ನು ತಪ್ಪಿಸುವುದು ಉತ್ತಮ.

4. ಸಾಕಷ್ಟು ಕಾಂಟ್ರಾಸ್ಟ್ ಖಚಿತಪಡಿಸಿಕೊಳ್ಳುವುದು

ಓದಲು ಬಣ್ಣದ ಕಾಂಟ್ರಾಸ್ಟ್ ನಿರ್ಣಾಯಕವಾಗಿದೆ. ನಿಮ್ಮ ಟೂಲ್‌ಟಿಪ್‌ಗಳಲ್ಲಿನ ಪಠ್ಯದ ಬಣ್ಣವು ಹಿನ್ನೆಲೆ ಬಣ್ಣಕ್ಕೆ ಹೋಲಿಸಿದರೆ ಸಾಕಷ್ಟು ಕಾಂಟ್ರಾಸ್ಟ್ ಹೊಂದಿದೆ ಎಂದು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಿ. ವೆಬ್ ಕಂಟೆಂಟ್ ಅಕ್ಸೆಸಿಬಿಲಿಟಿ ಗೈಡ್‌ಲೈನ್ಸ್ (WCAG) ಸಾಮಾನ್ಯ ಪಠ್ಯಕ್ಕಾಗಿ ಕನಿಷ್ಠ 4.5:1 ಮತ್ತು ದೊಡ್ಡ ಪಠ್ಯಕ್ಕಾಗಿ (18pt ಅಥವಾ 14pt ಬೋಲ್ಡ್) 3:1 ರ ಕಾಂಟ್ರಾಸ್ಟ್ ಅನುಪಾತವನ್ನು ಶಿಫಾರಸು ಮಾಡುತ್ತದೆ.

ನಿಮ್ಮ ಬಣ್ಣದ ಆಯ್ಕೆಗಳು ಪ್ರವೇಶಸಾಧ್ಯತಾ ಮಾನದಂಡಗಳನ್ನು ಪೂರೈಸುತ್ತವೆಯೇ ಎಂದು ಪರಿಶೀಲಿಸಲು ಆನ್‌ಲೈನ್ ಕಾಂಟ್ರಾಸ್ಟ್ ಚೆಕರ್‌ಗಳನ್ನು ಬಳಸಿ. ಕಾಂಟ್ರಾಸ್ಟ್ ಚೆಕರ್‌ಗಳ ಉದಾಹರಣೆಗಳು:

WebAIM Contrast Checker: https://webaim.org/resources/contrastchecker/
Coolors: https://coolors.co/contrast-checker

ಉದಾಹರಣೆ (ಉತ್ತಮ ಕಾಂಟ್ರಾಸ್ಟ್):

.tooltip {
  background-color: #000;
  color: #fff;
}

ಉದಾಹರಣೆ (ಕಳಪೆ ಕಾಂಟ್ರಾಸ್ಟ್):

.tooltip {
  background-color: #fff;
  color: #eee;
}

5. ಸಾಕಷ್ಟು ಸಮಯವನ್ನು ನೀಡುವುದು

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

ಟೂಲ್‌ಟಿಪ್ ವಿಷಯವು ದೀರ್ಘವಾಗಿದ್ದರೆ, ಬಳಕೆದಾರರಿಗೆ ಟೂಲ್‌ಟಿಪ್ ಅನ್ನು ಹಸ್ತಚಾಲಿತವಾಗಿ ವಜಾಗೊಳಿಸಲು ಒಂದು ಮಾರ್ಗವನ್ನು ಒದಗಿಸುವುದನ್ನು ಪರಿಗಣಿಸಿ (ಉದಾ., ಮುಚ್ಚುವ ಬಟನ್ ಅಥವಾ ಎಸ್ಕೇಪ್ ಕೀ ಒತ್ತುವುದು).

6. ಅವುಗಳನ್ನು ವಜಾಗೊಳಿಸುವಂತೆ ಮಾಡುವುದು

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

ಟೂಲ್‌ಟಿಪ್‌ಗಳನ್ನು ವಜಾಗೊಳಿಸುವ ವಿಧಾನಗಳು:

ಮುಚ್ಚುವ ಬಟನ್: ಟೂಲ್‌ಟಿಪ್‌ನೊಳಗೆ ದೃಷ್ಟಿಗೋಚರವಾಗಿ ಪ್ರಮುಖವಾದ ಮುಚ್ಚುವ ಬಟನ್ ಅನ್ನು ಸೇರಿಸಿ.
ಎಸ್ಕೇಪ್ ಕೀ: ಬಳಕೆದಾರರಿಗೆ ಎಸ್ಕೇಪ್ ಕೀ ಒತ್ತುವ ಮೂಲಕ ಟೂಲ್‌ಟಿಪ್ ಅನ್ನು ವಜಾಗೊಳಿಸಲು ಅನುಮತಿಸಿ.
ಹೊರಗೆ ಕ್ಲಿಕ್ ಮಾಡುವುದು: ಬಳಕೆದಾರರು ಟೂಲ್‌ಟಿಪ್ ಮತ್ತು ಪ್ರಚೋದಕ ಎಲಿಮೆಂಟ್‌ನ ಹೊರಗೆ ಎಲ್ಲಿಯಾದರೂ ಕ್ಲಿಕ್ ಮಾಡಿದಾಗ ಟೂಲ್‌ಟಿಪ್ ಅನ್ನು ವಜಾಗೊಳಿಸಿ. (ಇದನ್ನು ಎಚ್ಚರಿಕೆಯಿಂದ ಬಳಸಿ ಏಕೆಂದರೆ ಇದು ಅಡ್ಡಿಪಡಿಸಬಹುದು).

ಉದಾಹರಣೆ (ಮುಚ್ಚುವ ಬಟನ್):

<div id="my-tooltip" role="tooltip" aria-hidden="true">
  This is my tooltip content.
  <button onclick="hideTooltip()">Close</button>
</div>

ಉದಾಹರಣೆ (ಎಸ್ಕೇಪ್ ಕೀ):

document.addEventListener('keydown', function(event) {
  if (event.key === 'Escape') {
    hideTooltip(); // ನಿಮ್ಮ ನಿಜವಾದ ಹೈಡ್ ಟೂಲ್‌ಟಿಪ್ ಫಂಕ್ಷನ್‌ನೊಂದಿಗೆ ಬದಲಾಯಿಸಿ
  }
});

7. ಅತಿಯಾದ ಬಳಕೆಯನ್ನು ತಪ್ಪಿಸುವುದು

ಟೂಲ್‌ಟಿಪ್‌ಗಳನ್ನು ಮಿತವಾಗಿ ಮತ್ತು ನಿಜವಾಗಿಯೂ ಸಹಾಯಕವಾದ ಮಾಹಿತಿಯನ್ನು ಒದಗಿಸಿದಾಗ ಮಾತ್ರ ಬಳಸಬೇಕು. ಟೂಲ್‌ಟಿಪ್‌ಗಳ ಅತಿಯಾದ ಬಳಕೆಯು ಇಂಟರ್ಫೇಸ್ ಅನ್ನು ಗೊಂದಲಮಯವಾಗಿಸಬಹುದು, ಬಳಕೆದಾರರ ಗಮನವನ್ನು ಬೇರೆಡೆಗೆ ಸೆಳೆಯಬಹುದು ಮತ್ತು ನಿರಾಶಾದಾಯಕ ಅನುಭವವನ್ನು ಸೃಷ್ಟಿಸಬಹುದು.

ಟೂಲ್‌ಟಿಪ್‌ಗಳಿಗೆ ಪರ್ಯಾಯಗಳು:

ಸ್ಪಷ್ಟ ಲೇಬಲ್‌ಗಳು: ಫಾರ್ಮ್ ಫೀಲ್ಡ್‌ಗಳು, ಬಟನ್‌ಗಳು ಮತ್ತು ಲಿಂಕ್‌ಗಳಿಗೆ ಸ್ಪಷ್ಟ ಮತ್ತು ವಿವರಣಾತ್ಮಕ ಲೇಬಲ್‌ಗಳನ್ನು ಬಳಸಿ.
ಸಂದರ್ಭೋಚಿತ ಸಹಾಯ: ಸಂಬಂಧಿತ ಅಂಶಗಳ ಬಳಿ, ನೇರವಾಗಿ ಇಂಟರ್ಫೇಸ್‌ನಲ್ಲಿ ಸಹಾಯ ಪಠ್ಯವನ್ನು ಒದಗಿಸಿ.
ಸಹಾಯ ದಸ್ತಾವೇಜು: ಹೆಚ್ಚು ಸಂಕೀರ್ಣವಾದ ವೈಶಿಷ್ಟ್ಯಗಳಿಗಾಗಿ ಸಮಗ್ರ ಸಹಾಯ ದಸ್ತಾವೇಜಿಗೆ ಲಿಂಕ್ ಮಾಡಿ.

ಸುಧಾರಿತ ಪರಿಗಣನೆಗಳು

ಡೈನಾಮಿಕ್ ವಿಷಯ

ನಿಮ್ಮ ಟೂಲ್‌ಟಿಪ್ ವಿಷಯವು ಡೈನಾಮಿಕ್ ಆಗಿ ರಚನೆಯಾಗಿದ್ದರೆ (ಉದಾ., API ನಿಂದ ಲೋಡ್ ಮಾಡಲಾಗಿದ್ದರೆ ಅಥವಾ ಬಳಕೆದಾರರ ಇನ್‌ಪುಟ್ ಆಧರಿಸಿ ನವೀಕರಿಸಲಾಗಿದ್ದರೆ), aria-describedby ಆಟ್ರಿಬ್ಯೂಟ್ ಮತ್ತು ಟೂಲ್‌ಟಿಪ್ ಗೋಚರತೆಯನ್ನು ಅದಕ್ಕೆ ಅನುಗುಣವಾಗಿ ನವೀಕರಿಸಲಾಗಿದೆಯೇ ಎಂದು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಿ. ಈ ನವೀಕರಣಗಳನ್ನು ನಿರ್ವಹಿಸಲು ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಬಳಸಿ.

ಸ್ಥಾನೀಕರಣ

ನಿಮ್ಮ ಟೂಲ್‌ಟಿಪ್‌ಗಳ ಸ್ಥಾನೀಕರಣವನ್ನು ಎಚ್ಚರಿಕೆಯಿಂದ ಪರಿಗಣಿಸಿ. ಅವುಗಳನ್ನು ಪ್ರಮುಖ ವಿಷಯವನ್ನು ಮರೆಮಾಚುವ ಅಥವಾ ಲೇಔಟ್ ಶಿಫ್ಟ್‌ಗಳಿಗೆ ಕಾರಣವಾಗುವ ರೀತಿಯಲ್ಲಿ ಇಡುವುದನ್ನು ತಪ್ಪಿಸಿ. ವಿಭಿನ್ನ ಪರದೆಯ ಗಾತ್ರಗಳು ಮತ್ತು ರೆಸಲ್ಯೂಶನ್‌ಗಳ ಬಗ್ಗೆ ಗಮನವಿರಲಿ ಮತ್ತು ಟೂಲ್‌ಟಿಪ್‌ಗಳು ಯಾವಾಗಲೂ ವೀಕ್ಷಣೆಪೋರ್ಟ್‌ನೊಳಗೆ ಗೋಚರಿಸುವಂತೆ ಮಾಡಲು CSS ಬಳಸಿ.

ಮೊಬೈಲ್ ಸಾಧನಗಳು

ಟೂಲ್‌ಟಿಪ್‌ಗಳು ಸಾಂಪ್ರದಾಯಿಕವಾಗಿ ಹೋವರ್ ಇಂಟರಾಕ್ಷನ್‌ಗಳನ್ನು ಅವಲಂಬಿಸಿವೆ, ಇದು ಟಚ್-ಆಧಾರಿತ ಸಾಧನಗಳಲ್ಲಿ ಲಭ್ಯವಿಲ್ಲ. ಮೊಬೈಲ್ ಸಾಧನಗಳಿಗಾಗಿ, ಪರ್ಯಾಯ ಸಂವಾದ ವಿಧಾನಗಳನ್ನು ಬಳಸುವುದನ್ನು ಪರಿಗಣಿಸಿ, ಉದಾಹರಣೆಗೆ:

ಟ್ಯಾಪ್: ಬಳಕೆದಾರರು ಎಲಿಮೆಂಟ್ ಅನ್ನು ಟ್ಯಾಪ್ ಮಾಡಿದಾಗ ಟೂಲ್‌ಟಿಪ್ ಅನ್ನು ಪ್ರದರ್ಶಿಸಿ.
ದೀರ್ಘ ಪ್ರೆಸ್: ಬಳಕೆದಾರರು ಎಲಿಮೆಂಟ್ ಅನ್ನು ದೀರ್ಘವಾಗಿ ಒತ್ತಿದಾಗ ಟೂಲ್‌ಟಿಪ್ ಅನ್ನು ಪ್ರದರ್ಶಿಸಿ.
ಫೋಕಸ್ ಮೇಲೆ ತೋರಿಸಿ: ಎಲಿಮೆಂಟ್ ಫೋಕಸ್ ಪಡೆದಾಗ ಪ್ರದರ್ಶಿಸಿ. ಇದನ್ನು ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಬಳಸಿ, ಟಚ್ ಬೆಂಬಲವನ್ನು ಪರಿಶೀಲಿಸಿ (ಉದಾ., `('ontouchstart' in window)`) ಮತ್ತು ಅದಕ್ಕೆ ಅನುಗುಣವಾಗಿ ಪ್ರದರ್ಶನ ನಡವಳಿಕೆಯನ್ನು ಬದಲಾಯಿಸುವ ಮೂಲಕ ಸಾಧಿಸಬಹುದು.

ನಿಮ್ಮ ಟೂಲ್‌ಟಿಪ್‌ಗಳನ್ನು ಪರೀಕ್ಷಿಸುವುದು

ನಿಮ್ಮ ಟೂಲ್‌ಟಿಪ್‌ಗಳು ಎಲ್ಲ ಬಳಕೆದಾರರಿಗೂ ಪ್ರವೇಶಿಸಬಹುದೆಂದು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಲು ಅವುಗಳನ್ನು ಸಂಪೂರ್ಣವಾಗಿ ಪರೀಕ್ಷಿಸಿ. ಹಸ್ತಚಾಲಿತ ಪರೀಕ್ಷೆ ಮತ್ತು ಸ್ವಯಂಚಾಲಿತ ಪ್ರವೇಶಸಾಧ್ಯತಾ ಪರೀಕ್ಷಾ ಸಾಧನಗಳ ಸಂಯೋಜನೆಯನ್ನು ಬಳಸಿ.

ಪರೀಕ್ಷಾ ವಿಧಾನಗಳು:

ಕೀಬೋರ್ಡ್ ನ್ಯಾವಿಗೇಷನ್: ಕೀಬೋರ್ಡ್ ಬಳಸಿ ಟೂಲ್‌ಟಿಪ್‌ಗಳು ಪ್ರವೇಶಿಸಬಹುದೇ ಎಂದು ಪರಿಶೀಲಿಸಿ.
ಸ್ಕ್ರೀನ್ ರೀಡರ್ ಪರೀಕ್ಷೆ: ಟೂಲ್‌ಟಿಪ್‌ಗಳು ಸರಿಯಾಗಿ ಘೋಷಿಸಲ್ಪಟ್ಟಿವೆಯೇ ಎಂದು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಲು ಸ್ಕ್ರೀನ್ ರೀಡರ್ ಬಳಸಿ.
ಬಣ್ಣದ ಕಾಂಟ್ರಾಸ್ಟ್ ವಿಶ್ಲೇಷಣೆ: ಸಾಕಷ್ಟು ಕಾಂಟ್ರಾಸ್ಟ್ ಇದೆಯೇ ಎಂದು ಪರಿಶೀಲಿಸಲು ಬಣ್ಣದ ಕಾಂಟ್ರಾಸ್ಟ್ ಚೆಕರ್ ಬಳಸಿ.
ಮೊಬೈಲ್ ಪರೀಕ್ಷೆ: ವಿಭಿನ್ನ ಮೊಬೈಲ್ ಸಾಧನಗಳು ಮತ್ತು ಪರದೆಯ ಗಾತ್ರಗಳಲ್ಲಿ ಟೂಲ್‌ಟಿಪ್‌ಗಳನ್ನು ಪರೀಕ್ಷಿಸಿ.
ಸ್ವಯಂಚಾಲಿತ ಪ್ರವೇಶಸಾಧ್ಯತಾ ಪರೀಕ್ಷೆ: ಸಂಭಾವ್ಯ ಪ್ರವೇಶಸಾಧ್ಯತಾ ಸಮಸ್ಯೆಗಳನ್ನು ಗುರುತಿಸಲು axe DevTools, WAVE, ಅಥವಾ Lighthouse ನಂತಹ ಸಾಧನಗಳನ್ನು ಬಳಸಿ.

ಅಂತರರಾಷ್ಟ್ರೀಕರಣ (i18n) ಮತ್ತು ಸ್ಥಳೀಕರಣ (l10n)

ಜಾಗತಿಕ ಪ್ರೇಕ್ಷಕರಿಗಾಗಿ ಟೂಲ್‌ಟಿಪ್‌ಗಳನ್ನು ಅಭಿವೃದ್ಧಿಪಡಿಸುವಾಗ, ಅಂತರರಾಷ್ಟ್ರೀಕರಣ ಮತ್ತು ಸ್ಥಳೀಕರಣವನ್ನು ಮನಸ್ಸಿನಲ್ಲಿಟ್ಟುಕೊಳ್ಳಿ:

ಪಠ್ಯದ ದಿಕ್ಕು: ಎಡದಿಂದ-ಬಲಕ್ಕೆ (LTR) ಮತ್ತು ಬಲದಿಂದ-ಎಡಕ್ಕೆ (RTL) ಎರಡೂ ಪಠ್ಯ ದಿಕ್ಕುಗಳನ್ನು ಬೆಂಬಲಿಸಿ. ಲೇಔಟ್‌ಗಾಗಿ ಭೌತಿಕ ಗುಣಲಕ್ಷಣಗಳ (ಉದಾ., `margin-left`, `margin-right`) ಬದಲಿಗೆ CSS ತಾರ್ಕಿಕ ಗುಣಲಕ್ಷಣಗಳನ್ನು (ಉದಾ., `margin-inline-start`, `margin-inline-end`) ಬಳಸಿ.
ಭಾಷಾ-ನಿರ್ದಿಷ್ಟ ಅನುವಾದಗಳು: ವಿಭಿನ್ನ ಭಾಷೆಗಳಿಗೆ ಟೂಲ್‌ಟಿಪ್ ವಿಷಯದ ಅನುವಾದಗಳನ್ನು ಒದಗಿಸಿ.
ದಿನಾಂಕ ಮತ್ತು ಸಮಯದ ಸ್ವರೂಪಗಳು: ಬಳಕೆದಾರರ ಸ್ಥಳಕ್ಕೆ ದಿನಾಂಕ ಮತ್ತು ಸಮಯದ ಸ್ವರೂಪಗಳನ್ನು ಹೊಂದಿಸಿ.
ಸಂಖ್ಯೆ ಸ್ವರೂಪಗಳು: ವಿಭಿನ್ನ ಪ್ರದೇಶಗಳಿಗೆ ಸೂಕ್ತವಾದ ಸಂಖ್ಯೆ ಸ್ವರೂಪಗಳನ್ನು ಬಳಸಿ (ಉದಾ., ದಶಮಾಂಶ ವಿಭಜಕಗಳು, ಸಾವಿರಾರು ವಿಭಜಕಗಳು).

ತೀರ್ಮಾನ

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

MLOG