M

MLOG

فارسی

راهنمای جامع برای پیاده‌سازی tooltipهای قابل دسترس با استفاده از حالت‌های hover و focus، برای تضمین کارایی برای همه کاربران، از جمله افراد دارای معلولیت.

پیاده‌سازی Tooltip: اطلاعات قابل دسترس با Hover و Focus

Tooltipها پیام‌های راهنمای کوچک و متنی هستند که وقتی کاربر نشانگر ماوس خود را روی یک عنصر نگه می‌دارد یا روی آن فوکوس می‌کند، ظاهر می‌شوند. آن‌ها می‌توانند اطلاعات اضافی ارائه دهند، هدف یک عنصر را روشن کنند یا نکاتی در مورد نحوه استفاده از یک ویژگی ارائه دهند. با این حال، اگر tooltipها به درستی پیاده‌سازی نشوند، به راحتی می‌توانند به کابوس‌های دسترس‌پذیری تبدیل شوند. این راهنما بهترین شیوه‌ها را برای ایجاد tooltipهایی که برای همه، از جمله کاربران دارای معلولیت، قابل استفاده باشند، تشریح می‌کند.

چرا دسترس‌پذیری برای Tooltipها اهمیت دارد

دسترس‌پذیری فقط مربوط به انطباق با استانداردها نیست؛ بلکه به معنای ایجاد تجربه کاربری بهتر برای همه است. وقتی tooltipها قابل دسترس نباشند، می‌توانند کاربرانی را که به فناوری‌های کمکی مانند صفحه‌خوان‌ها، ناوبری با صفحه‌کلید یا ورودی صوتی تکیه می‌کنند، محروم کنند. این سناریوها را در نظر بگیرید:

با پیروی از بهترین شیوه‌های دسترس‌پذیری، می‌توانیم اطمینان حاصل کنیم که tooltipها به جای مانع شدن، تجربه کاربری را برای همه بهبود می‌بخشند.

اصول کلیدی برای Tooltipهای قابل دسترس

اصول زیر برای ایجاد tooltipهای قابل دسترس حیاتی هستند:

  1. فراهم کردن دسترسی جایگزین: اطمینان حاصل کنید که tooltipها هم از طریق hover و هم از طریق فوکوس صفحه‌کلید قابل دسترسی هستند.
  2. استفاده از ویژگی‌های ARIA: از ویژگی‌های ARIA (Accessible Rich Internet Applications) برای شناسایی و توصیف صحیح tooltipها به فناوری‌های کمکی استفاده کنید.
  3. مدیریت فوکوس: کنترل کنید که هنگام نمایش و پنهان شدن یک tooltip، فوکوس به کجا می‌رود.
  4. اطمینان از کنتراست کافی: کنتراست رنگ کافی بین متن tooltip و پس‌زمینه آن فراهم کنید.
  5. فراهم کردن زمان کافی: به کاربران زمان کافی برای خواندن محتوای tooltip بدهید.
  6. قابل بستن کردن آن‌ها: راهی واضح برای بستن tooltip فراهم کنید.
  7. پرهیز از استفاده بیش از حد: از tooltipها به ندرت و فقط در مواقع ضروری استفاده کنید.

تکنیک‌های پیاده‌سازی

۱. استفاده از Hover و Focus

مهم‌ترین جنبه tooltipهای قابل دسترس این است که اطمینان حاصل شود هم برای کاربران ماوس و هم برای کاربران صفحه‌کلید قابل دسترسی هستند. این به این معناست که tooltip باید هم هنگام hover و هم زمانی که عنصر فوکوس را دریافت می‌کند، ظاهر شود.

HTML:

<a href="#" aria-describedby="tooltip-example">لینک نمونه</a>
<div id="tooltip-example" role="tooltip" style="display: none;">این یک 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; /* اطمینان از اینکه tooltip در بالاترین لایه قرار دارد */
}

توضیح:

جاوا اسکریپت (کنترل پیشرفته - اختیاری):

در حالی که CSS می‌تواند نمایش/پنهان‌سازی ساده را مدیریت کند، جاوا اسکریپت کنترل قوی‌تری را امکان‌پذیر می‌سازد، به ویژه زمانی که tooltipها به صورت پویا ایجاد می‌شوند یا به رفتار پیچیده‌تری نیاز دارند.

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 برای ارائه اطلاعات معنایی به فناوری‌های کمکی ضروری هستند. در اینجا به تفکیک ویژگی‌های کلیدی می‌پردازیم:

مثال:

<button aria-describedby="help-tooltip">ارسال</button>
<div id="help-tooltip" role="tooltip" aria-hidden="true">برای ارسال فرم اینجا کلیک کنید.</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';
});

۳. مدیریت Focus

وقتی یک tooltip ظاهر می‌شود، به طور کلی *نباید* فوکوس را از عنصر فعال‌کننده بدزدد. فوکوس باید روی عنصری باقی بماند که tooltip را فعال کرده است. این تضمین می‌کند که کاربران صفحه‌کلید می‌توانند بدون وقفه‌های غیرمنتظره به پیمایش صفحه ادامه دهند.

با این حال، ممکن است شرایطی وجود داشته باشد که شما *بخواهید* فوکوس را به tooltip منتقل کنید، به ویژه اگر tooltip حاوی عناصر تعاملی (مانند لینک‌ها، دکمه‌ها) باشد. در این حالت، اطمینان حاصل کنید که:

در بیشتر موارد، برای سادگی و قابلیت استفاده، بهتر است از مدیریت فوکوس در خود tooltip خودداری شود.

۴. اطمینان از کنتراست کافی

کنتراست رنگ برای خوانایی بسیار مهم است. اطمینان حاصل کنید که رنگ متن در tooltipهای شما کنتراست کافی در برابر رنگ پس‌زمینه دارد. دستورالعمل‌های دسترس‌پذیری محتوای وب (WCAG) نسبت کنتراست حداقل 4.5:1 برای متن معمولی و 3:1 برای متن بزرگ (18pt یا 14pt ضخیم) را توصیه می‌کند.

از ابزارهای بررسی کنتراست آنلاین برای تأیید اینکه انتخاب‌های رنگ شما با استانداردهای دسترس‌پذیری مطابقت دارد، استفاده کنید. نمونه‌هایی از ابزارهای بررسی کنتراست عبارتند از:

مثال (کنتراست خوب):

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

مثال (کنتراست ضعیف):

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

۵. فراهم کردن زمان کافی

کاربران برای خواندن محتوای tooltip به زمان کافی نیاز دارند. از tooltipهایی که خیلی سریع ناپدید می‌شوند، خودداری کنید. اگرچه عدد جادویی وجود ندارد، اما هدف را بر روی حداقل زمان نمایش چند ثانیه قرار دهید. همچنین، tooltip باید تا زمانی که کاربر روی عنصر فعال‌کننده hover کرده یا فوکوس دارد، قابل مشاهده باقی بماند. اگر نیاز به بستن tooltip به دلیل رویدادهای دیگر دارید، نشانگری ارائه دهید که tooltip بسته خواهد شد.

اگر محتوای tooltip طولانی است، در نظر بگیرید که راهی برای بستن دستی tooltip توسط کاربر فراهم کنید (مانند دکمه بستن یا فشردن کلید Escape).

۶. قابل بستن کردن آن‌ها

در حالی که tooltipها اغلب به طور خودکار با دور شدن ماوس کاربر یا برداشتن فوکوس ناپدید می‌شوند، ارائه یک راه واضح برای بستن دستی آن‌ها، به ویژه برای tooltipهای طولانی یا tooltipهای حاوی عناصر تعاملی، یک عمل خوب است.

روش‌های بستن Tooltipها:

مثال (دکمه بستن):

<div id="my-tooltip" role="tooltip" aria-hidden="true">
  این محتوای tooltip من است.
  <button onclick="hideTooltip()">بستن</button>
</div>

مثال (کلید Escape):

document.addEventListener('keydown', function(event) {
  if (event.key === 'Escape') {
    hideTooltip(); // با تابع واقعی پنهان کردن tooltip خود جایگزین کنید
  }
});

۷. پرهیز از استفاده بیش از حد

از tooltipها باید به ندرت و فقط زمانی که اطلاعات واقعاً مفیدی ارائه می‌دهند، استفاده شود. استفاده بیش از حد از tooltipها می‌تواند رابط کاربری را شلوغ کند، حواس کاربران را پرت کند و تجربه‌ای ناامیدکننده ایجاد کند.

جایگزین‌های Tooltipها:

ملاحظات پیشرفته

محتوای پویا

اگر محتوای tooltip شما به صورت پویا تولید می‌شود (مثلاً از یک API بارگیری می‌شود یا بر اساس ورودی کاربر به‌روز می‌شود)، اطمینان حاصل کنید که ویژگی aria-describedby و قابلیت دیده‌شدن tooltip به طور متناسب به‌روز می‌شوند. از جاوا اسکریپت برای مدیریت این به‌روزرسانی‌ها استفاده کنید.

موقعیت‌یابی

موقعیت‌یابی tooltipهای خود را با دقت در نظر بگیرید. از قرار دادن آن‌ها به گونه‌ای که محتوای مهم را بپوشانند یا باعث تغییرات در چیدمان شوند، خودداری کنید. به اندازه‌های مختلف صفحه و وضوح تصویر توجه داشته باشید و از CSS برای اطمینان از اینکه tooltipها همیشه در داخل viewport قابل مشاهده هستند، استفاده کنید.

دستگاه‌های موبایل

Tooltipها به طور سنتی به تعاملات hover متکی هستند که در دستگاه‌های لمسی موجود نیست. برای دستگاه‌های موبایل، روش‌های تعامل جایگزین را در نظر بگیرید، مانند:

تست کردن Tooltipهای شما

Tooltipهای خود را به طور کامل تست کنید تا اطمینان حاصل شود که برای همه کاربران قابل دسترس هستند. از ترکیبی از تست دستی و ابزارهای تست دسترس‌پذیری خودکار استفاده کنید.

روش‌های تست:

بین‌المللی‌سازی (i18n) و بومی‌سازی (l10n)

هنگام توسعه tooltipها برای مخاطبان جهانی، بین‌المللی‌سازی و بومی‌سازی را در نظر داشته باشید:

نتیجه‌گیری

پیاده‌سازی tooltipهای قابل دسترس نیازمند برنامه‌ریزی دقیق و توجه به جزئیات است. با پیروی از اصول و تکنیک‌های ذکر شده در این راهنما، می‌توانید tooltipهایی ایجاد کنید که برای همه، صرف نظر از توانایی‌هایشان، قابل استفاده باشند. به یاد داشته باشید که دسترس‌پذیری یک فرآیند مداوم است، بنابراین به تست و بهبود tooltipهای خود ادامه دهید تا اطمینان حاصل کنید که نیازهای همه کاربران شما را برآورده می‌کنند.

منابع