टूलटिप अंमलबजावणी: हॉवर आणि फोकसद्वारे सर्वांसाठी सोपी माहिती

टूलटिप्स हे लहान, संदर्भात्मक मदतीचे संदेश आहेत जे वापरकर्ता माउस पॉइंटर एखाद्या घटकावर फिरवतो किंवा त्यावर फोकस करतो तेव्हा दिसतात. ते अतिरिक्त माहिती देऊ शकतात, एखाद्या घटकाचा उद्देश स्पष्ट करू शकतात, किंवा एखादे वैशिष्ट्य कसे वापरावे याबद्दल सूचना देऊ शकतात. तथापि, योग्यरित्या अंमलात न आणल्यास टूलटिप्स सहजपणे ॲक्सेसिबिलिटीच्या दृष्टीने एक मोठे आव्हान बनू शकतात. हे मार्गदर्शक दिव्यांगांसह सर्वांसाठी वापरण्यायोग्य टूलटिप्स तयार करण्यासाठी सर्वोत्तम पद्धतींची रूपरेषा देते.

टूलटिप्ससाठी ॲक्सेसिबिलिटी का महत्त्वाची आहे

ॲक्सेसिबिलिटी केवळ नियमांचे पालन करण्यापुरती मर्यादित नाही; तर ती प्रत्येकासाठी एक चांगला वापरकर्ता अनुभव निर्माण करण्याबद्दल आहे. जेव्हा टूलटिप्स ॲक्सेसिबल नसतात, तेव्हा ते स्क्रीन रीडर, कीबोर्ड नेव्हिगेशन किंवा स्पीच इनपुट यांसारख्या सहायक तंत्रज्ञानावर अवलंबून असलेल्या वापरकर्त्यांना वगळू शकतात. या परिस्थितींचा विचार करा:

स्क्रीन रीडर वापरकर्ते: जर टूलटिप योग्यरित्या मार्क-अप केलेला नसेल, तर स्क्रीन रीडर कदाचित त्याची उपस्थिती किंवा त्यातील मजकूर घोषित करणार नाही.
कीबोर्ड वापरकर्ते: जर टूलटिप केवळ हॉवरवर दिसत असेल, तर कीबोर्ड वापरकर्ते ते ॲक्सेस करू शकणार नाहीत.
मोटर कमजोरी असलेले वापरकर्ते: हॉवर इंटरॅक्शनसाठी आवश्यक असलेल्या अचूक माउस हालचाली आव्हानात्मक किंवा अशक्य असू शकतात.
संज्ञानात्मक अक्षमता असलेले वापरकर्ते: चुकीच्या वेळी किंवा गोंधळात टाकणारा टूलटिप निराशा निर्माण करू शकतो आणि समजण्यात अडथळा आणू शकतो.

ॲक्सेसिबिलिटीच्या सर्वोत्तम पद्धतींचे पालन करून, आपण हे सुनिश्चित करू शकतो की टूलटिप्स सर्वांसाठी वापरकर्त्याचा अनुभव वाढवतात, कमी करत नाहीत.

ॲक्सेसिबल टूलटिप्ससाठी प्रमुख तत्त्वे

ॲक्सेसिबल टूलटिप्स तयार करण्यासाठी खालील तत्त्वे महत्त्वपूर्ण आहेत:

पर्यायी ॲक्सेस प्रदान करा: टूलटिप्स हॉवर आणि कीबोर्ड फोकस दोन्हीद्वारे ॲक्सेस करता येतील याची खात्री करा.
ARIA ॲट्रिब्यूट्स वापरा: सहाय्यक तंत्रज्ञानासाठी टूलटिप्स योग्यरित्या ओळखण्यासाठी आणि त्यांचे वर्णन करण्यासाठी ARIA (ॲक्सेसिबल रिच इंटरनेट ॲप्लिकेशन्स) ॲट्रिब्यूट्स वापरा.
फोकस व्यवस्थापित करा: टूलटिप प्रदर्शित आणि लपवल्यावर फोकस कुठे जाईल हे नियंत्रित करा.
पुरेसा कॉन्ट्रास्ट सुनिश्चित करा: टूलटिप मजकूर आणि पार्श्वभूमीमध्ये पुरेसा रंग कॉन्ट्रास्ट द्या.
पुरेसा वेळ द्या: वापरकर्त्यांना टूलटिपमधील मजकूर वाचण्यासाठी पुरेसा वेळ द्या.
त्यांना डिसमिस करण्यायोग्य बनवा: टूलटिप डिसमिस करण्याचा एक स्पष्ट मार्ग द्या.
अतिवापर टाळा: टूलटिप्स कमी प्रमाणात आणि केवळ आवश्यक असेल तेव्हाच वापरा.

अंमलबजावणीची तंत्रे

१. हॉवर आणि फोकस वापरणे

ॲक्सेसिबल टूलटिप्सचा सर्वात महत्त्वाचा पैलू म्हणजे ते माउस आणि कीबोर्ड वापरकर्त्यांसाठी ॲक्सेसिबल आहेत याची खात्री करणे. याचा अर्थ टूलटिप हॉवर केल्यावर आणि घटक फोकसमध्ये आल्यावर दोन्ही वेळी दिसायला हवा.

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: हा ॲट्रिब्यूट लिंकला त्याच्या आयडीचा वापर करून टूलटिप घटकाशी जोडतो. हे सहायक तंत्रज्ञानाला सांगते की टूलटिप लिंकबद्दल अतिरिक्त माहिती प्रदान करते.
role="tooltip": हा ARIA रोल घटकाला टूलटिप म्हणून ओळखतो.
लिंकवर हॉवर केल्यावर किंवा फोकस केल्यावर टूलटिप दर्शविण्यासाठी CSS ॲडजसंट सिबलिंग सिलेक्टर (+) वापरते.

JavaScript (प्रगत नियंत्रण - ऐच्छिक):

जरी CSS सोपे शो/हाइड हाताळू शकते, तरी JavaScript अधिक मजबूत नियंत्रणाची परवानगी देते, विशेषतः जेव्हा टूलटिप्स डायनॅमिकली तयार केले जातात किंवा अधिक जटिल वर्तनाची आवश्यकता असते.

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';
});

२. ARIA ॲट्रिब्यूट्स वापरणे

सहायक तंत्रज्ञानासाठी सिमेंटिक माहिती देण्यासाठी ARIA ॲट्रिब्यूट्स आवश्यक आहेत. येथे काही प्रमुख ॲट्रिब्यूट्सचे स्पष्टीकरण दिले आहे:

aria-describedby: जसे आधी नमूद केले आहे, हा ॲट्रिब्यूट ट्रिगरिंग घटक आणि टूलटिप घटक यांच्यात संबंध स्थापित करतो.
role="tooltip": हा ॲट्रिब्यूट घटकाला स्पष्टपणे टूलटिप म्हणून परिभाषित करतो.
aria-hidden="true"/aria-hidden="false": टूलटिप सध्या सहायक तंत्रज्ञानासाठी दृश्यमान आहे की नाही हे दर्शवण्यासाठी यांचा वापर करा. जेव्हा टूलटिप लपलेला असेल, तेव्हा aria-hidden="true" सेट करा. जेव्हा तो दृश्यमान असेल, तेव्हा aria-hidden="false" सेट करा. हे विशेषतः महत्त्वाचे आहे जेव्हा तुम्ही JavaScript वापरून टूलटिपची दृश्यमानता नियंत्रित करत असाल.

उदाहरण:

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

JavaScript (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';
});

३. फोकस व्यवस्थापित करणे

जेव्हा एखादा टूलटिप दिसतो, तेव्हा त्याने साधारणपणे ट्रिगरिंग घटकाकडून फोकस *घेऊ नये*. फोकस टूलटिप ट्रिगर करणाऱ्या घटकावरच राहिला पाहिजे. हे सुनिश्चित करते की कीबोर्ड वापरकर्ते अनपेक्षित व्यत्ययांशिवाय पेज नेव्हिगेट करणे सुरू ठेवू शकतात.

तथापि, अशा काही परिस्थिती असू शकतात जिथे तुम्ही फोकस टूलटिपवर हलवू *इच्छिता*, विशेषतः जर टूलटिपमध्ये परस्परसंवादी घटक (उदा. लिंक्स, बटणे) असतील. या प्रकरणात, हे सुनिश्चित करा की:

टूलटिपमध्ये फोकस आहे हे दर्शवण्यासाठी तो दिसायला वेगळा असावा.
मूळ ट्रिगरिंग घटकाकडे फोकस परत करण्याचा एक स्पष्ट मार्ग असावा (उदा. टूलटिपमधील क्लोज बटण).

बहुतेक प्रकरणांमध्ये, साधेपणा आणि उपयोगितेसाठी टूलटिपमध्येच फोकस व्यवस्थापन टाळणे श्रेयस्कर आहे.

४. पुरेसा कॉन्ट्रास्ट सुनिश्चित करणे

वाचनीयतेसाठी रंगांमधील कॉन्ट्रास्ट महत्त्वपूर्ण आहे. तुमच्या टूलटिप्समधील मजकूराच्या रंगाचा पार्श्वभूमी रंगाशी पुरेसा कॉन्ट्रास्ट असल्याची खात्री करा. वेब कंटेंट ॲक्सेसिबिलिटी गाइडलाइन्स (WCAG) नुसार सामान्य मजकुरासाठी किमान ४.५:१ आणि मोठ्या मजकुरासाठी (१८pt किंवा १४pt ठळक) ३:१ कॉन्ट्रास्ट रेशोची शिफारस केली जाते.

तुमच्या रंगांची निवड ॲक्सेसिबिलिटी मानकांनुसार आहे की नाही हे तपासण्यासाठी ऑनलाइन कॉन्ट्रास्ट चेकर्स वापरा. कॉन्ट्रास्ट चेकर्सची उदाहरणे:

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;
}

५. पुरेसा वेळ देणे

वापरकर्त्यांना टूलटिपमधील मजकूर वाचण्यासाठी पुरेसा वेळ आवश्यक असतो. खूप लवकर नाहीसे होणारे टूलटिप्स टाळा. जरी यासाठी कोणतीही निश्चित संख्या नसली तरी, किमान काही सेकंदांसाठी डिस्प्ले वेळ देण्याचे ध्येय ठेवा. तसेच, जोपर्यंत वापरकर्ता ट्रिगरिंग घटकावर हॉवर करत आहे किंवा फोकस करत आहे तोपर्यंत टूलटिप दिसला पाहिजे. जर तुम्हाला इतर घटनांमुळे टूलटिप डिसमिस करण्याची आवश्यकता असेल, तर टूलटिप बंद होईल असा एक सूचक द्या.

जर टूलटिपमधील मजकूर मोठा असेल, तर वापरकर्त्याला टूलटिप स्वतःहून डिसमिस करण्याचा एक मार्ग देण्याचा विचार करा (उदा. क्लोज बटण किंवा Escape की दाबणे).

६. त्यांना डिसमिस करण्यायोग्य बनवणे

जरी वापरकर्त्याने माउस दूर नेल्यावर किंवा फोकस काढल्यावर टूलटिप्स आपोआप नाहीसे होतात, तरी त्यांना स्वतःहून डिसमिस करण्याचा एक स्पष्ट मार्ग देणे ही एक चांगली पद्धत आहे, विशेषतः लांबलचक टूलटिप्स किंवा परस्परसंवादी घटक असलेल्या टूलटिप्ससाठी.

टूलटिप्स डिसमिस करण्याच्या पद्धती:

क्लोज बटण: टूलटिपमध्ये स्पष्टपणे दिसणारे क्लोज बटण समाविष्ट करा.
एस्केप की: वापरकर्त्यांना Escape की दाबून टूलटिप डिसमिस करण्याची परवानगी द्या.
बाहेर क्लिक करणे: जेव्हा वापरकर्ता टूलटिप आणि ट्रिगरिंग घटकाच्या बाहेर कुठेही क्लिक करतो तेव्हा टूलटिप डिसमिस करा. (हे व्यत्यय आणू शकते म्हणून सावधगिरीने वापरा).

उदाहरण (क्लोज बटण):

<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(); // तुमच्या वास्तविक हाइड टूलटिप फंक्शनने बदला
  }
});

७. अतिवापर टाळणे

टूलटिप्सचा वापर कमी प्रमाणात आणि फक्त जेव्हा ते खरोखर उपयुक्त माहिती देतात तेव्हाच केला पाहिजे. टूलटिप्सचा अतिवापर केल्याने इंटरफेस गोंधळलेला होऊ शकतो, वापरकर्त्यांचे लक्ष विचलित होऊ शकते आणि एक निराशाजनक अनुभव निर्माण होऊ शकतो.

टूलटिप्सचे पर्याय:

स्पष्ट लेबल्स: फॉर्म फील्ड्स, बटणे आणि लिंक्ससाठी स्पष्ट आणि वर्णनात्मक लेबल्स वापरा.
संदर्भात्मक मदत: संबंधित घटकांच्या जवळ, थेट इंटरफेसमध्ये मदतीचा मजकूर द्या.
मदत दस्तऐवजीकरण: अधिक जटिल वैशिष्ट्यांसाठी सर्वसमावेशक मदत दस्तऐवजीकरणाशी लिंक करा.

प्रगत विचार

डायनॅमिक सामग्री

जर तुमच्या टूलटिपची सामग्री डायनॅमिकली तयार होत असेल (उदा. API वरून लोड केलेली किंवा वापरकर्त्याच्या इनपुटवर आधारित अपडेट केलेली), तर aria-describedby ॲट्रिब्यूट आणि टूलटिपची दृश्यमानता त्यानुसार अपडेट केली आहे याची खात्री करा. ही अद्यतने व्यवस्थापित करण्यासाठी JavaScript वापरा.

पोझिशनिंग

तुमच्या टूलटिप्सच्या पोझिशनिंगचा काळजीपूर्वक विचार करा. त्यांना अशा प्रकारे ठेवणे टाळा की ज्यामुळे महत्त्वाची सामग्री झाकली जाईल किंवा लेआउटमध्ये बदल होईल. वेगवेगळ्या स्क्रीन साईज आणि रिझोल्यूशनची काळजी घ्या आणि टूलटिप्स नेहमी व्ह्यूपोर्टमध्ये दिसतील याची खात्री करण्यासाठी CSS वापरा.

मोबाइल डिव्हाइस

टूलटिप्स पारंपरिकरित्या हॉवर इंटरॅक्शनवर अवलंबून असतात, जे टच-आधारित डिव्हाइसवर उपलब्ध नसतात. मोबाइल डिव्हाइससाठी, पर्यायी इंटरॅक्शन पद्धती वापरण्याचा विचार करा, जसे की:

टॅप: जेव्हा वापरकर्ता घटकावर टॅप करतो तेव्हा टूलटिप प्रदर्शित करा.
लाँग प्रेस: जेव्हा वापरकर्ता घटकावर जास्त वेळ दाबून ठेवतो तेव्हा टूलटिप प्रदर्शित करा.
फोकसवर दाखवा: जेव्हा घटकाला फोकस मिळतो तेव्हा प्रदर्शित करा. हे JavaScript वापरून, टच सपोर्ट तपासून (उदा. `('ontouchstart' in window)`) आणि त्यानुसार डिस्प्ले वर्तन बदलून साध्य केले जाऊ शकते.

तुमच्या टूलटिप्सची चाचणी करणे

तुमचे टूलटिप्स सर्व वापरकर्त्यांसाठी ॲक्सेसिबल आहेत याची खात्री करण्यासाठी त्यांची कसून चाचणी करा. मॅन्युअल टेस्टिंग आणि ऑटोमेटेड ॲक्सेसिबिलिटी टेस्टिंग टूल्स यांचे मिश्रण वापरा.

चाचणी पद्धती:

कीबोर्ड नेव्हिगेशन: कीबोर्ड वापरून टूलटिप्स ॲक्सेसिबल आहेत की नाही हे तपासा.
स्क्रीन रीडर टेस्टिंग: टूलटिप्स योग्यरित्या घोषित केले जात आहेत की नाही हे सुनिश्चित करण्यासाठी स्क्रीन रीडर वापरा.
कलर कॉन्ट्रास्ट विश्लेषण: पुरेसा कॉन्ट्रास्ट तपासण्यासाठी कलर कॉन्ट्रास्ट चेकर वापरा.
मोबाइल टेस्टिंग: वेगवेगळ्या मोबाइल डिव्हाइस आणि स्क्रीन साईजवर टूलटिप्सची चाचणी करा.
ऑटोमेटेड ॲक्सेसिबिलिटी टेस्टिंग: संभाव्य ॲक्सेसिबिलिटी समस्या ओळखण्यासाठी axe DevTools, WAVE, किंवा Lighthouse सारख्या साधनांचा वापर करा.

आंतरराष्ट्रीयीकरण (i18n) आणि स्थानिकीकरण (l10n)

जागतिक प्रेक्षकांसाठी टूलटिप्स विकसित करताना, आंतरराष्ट्रीयीकरण आणि स्थानिकीकरण लक्षात ठेवा:

मजकूराची दिशा: डावीकडून-उजवीकडे (LTR) आणि उजवीकडून-डावीकडे (RTL) दोन्ही मजकूर दिशांना सपोर्ट करा. लेआउटसाठी फिजिकल प्रॉपर्टीज (उदा. `margin-left`, `margin-right`) ऐवजी CSS लॉजिकल प्रॉपर्टीज (उदा. `margin-inline-start`, `margin-inline-end`) वापरा.
भाषा-विशिष्ट भाषांतर: वेगवेगळ्या भाषांसाठी टूलटिप सामग्रीचे भाषांतर द्या.
तारीख आणि वेळ स्वरूप: वापरकर्त्याच्या लोकॅलनुसार तारीख आणि वेळ स्वरूप जुळवून घ्या.
संख्या स्वरूप: वेगवेगळ्या प्रदेशांसाठी योग्य संख्या स्वरूप वापरा (उदा. दशांश विभाजक, हजारो विभाजक).

निष्कर्ष

ॲक्सेसिबल टूलटिप्स लागू करण्यासाठी काळजीपूर्वक नियोजन आणि तपशिलाकडे लक्ष देणे आवश्यक आहे. या मार्गदर्शकामध्ये नमूद केलेली तत्त्वे आणि तंत्रे पाळून, तुम्ही असे टूलटिप्स तयार करू शकता जे प्रत्येकासाठी, त्यांच्या क्षमता विचारात न घेता, वापरण्यायोग्य असतील. लक्षात ठेवा की ॲक्सेसिबिलिटी ही एक सतत चालणारी प्रक्रिया आहे, म्हणून तुमच्या टूलटिप्सची चाचणी आणि सुधारणा करत रहा जेणेकरून ते तुमच्या सर्व वापरकर्त्यांच्या गरजा पूर्ण करतील.

MLOG