การสร้าง Tooltip: ข้อมูลที่เข้าถึงได้ผ่าน Hover และ Focus

Tooltip คือข้อความช่วยเหลือขนาดเล็กตามบริบทที่ปรากฏขึ้นเมื่อผู้ใช้นำเมาส์ไปวางเหนือ (hover) หรือโฟกัส (focus) ที่องค์ประกอบต่างๆ ซึ่งสามารถให้ข้อมูลเพิ่มเติม ชี้แจงวัตถุประสงค์ขององค์ประกอบ หรือเสนอคำแนะนำเกี่ยวกับวิธีใช้ฟีเจอร์ได้ อย่างไรก็ตาม Tooltip อาจกลายเป็นฝันร้ายด้านการเข้าถึงได้ (accessibility) หากไม่ได้สร้างขึ้นอย่างถูกต้อง คู่มือนี้จะสรุปแนวทางปฏิบัติที่ดีที่สุดในการสร้าง Tooltip ที่ทุกคนสามารถใช้งานได้ รวมถึงผู้ใช้ที่มีความพิการด้วย

ทำไมการเข้าถึงได้จึงสำคัญสำหรับ Tooltip

การเข้าถึงได้ไม่ใช่แค่เรื่องของการปฏิบัติตามกฎ แต่เป็นการสร้างประสบการณ์ผู้ใช้ที่ดีขึ้นสำหรับทุกคน เมื่อ Tooltip ไม่สามารถเข้าถึงได้ อาจเป็นการกีดกันผู้ใช้ที่ต้องพึ่งพาเทคโนโลยีสิ่งอำนวยความสะดวก เช่น โปรแกรมอ่านหน้าจอ การนำทางด้วยคีย์บอร์ด หรือการป้อนข้อมูลด้วยเสียง ลองพิจารณาสถานการณ์เหล่านี้:

ผู้ใช้โปรแกรมอ่านหน้าจอ: หาก Tooltip ไม่ได้ถูกมาร์กอัปอย่างถูกต้อง โปรแกรมอ่านหน้าจออาจไม่ประกาศการมีอยู่หรือเนื้อหาของมัน
ผู้ใช้คีย์บอร์ด: หาก Tooltip ปรากฏขึ้นเมื่อใช้เมาส์วางเหนือเท่านั้น ผู้ใช้คีย์บอร์ดจะไม่สามารถเข้าถึงได้
ผู้ใช้ที่มีความบกพร่องทางการเคลื่อนไหว: การเคลื่อนไหวเมาส์ที่แม่นยำซึ่งจำเป็นสำหรับการโต้ตอบแบบ hover อาจเป็นเรื่องท้าทายหรือเป็นไปไม่ได้
ผู้ใช้ที่มีความบกพร่องทางสติปัญญา: Tooltip ที่แสดงผลในเวลาที่ไม่เหมาะสมหรือสับสน อาจสร้างความหงุดหงิดและขัดขวางความเข้าใจ

การปฏิบัติตามแนวทางปฏิบัติที่ดีที่สุดด้านการเข้าถึงได้ จะช่วยให้แน่ใจว่า Tooltip ช่วยเสริมสร้างประสบการณ์ผู้ใช้สำหรับทุกคน แทนที่จะเป็นอุปสรรค

หลักการสำคัญสำหรับ Tooltip ที่เข้าถึงได้

หลักการต่อไปนี้มีความสำคัญอย่างยิ่งในการสร้าง Tooltip ที่เข้าถึงได้:

จัดเตรียมช่องทางการเข้าถึงทางเลือก: ตรวจสอบให้แน่ใจว่า Tooltip สามารถเข้าถึงได้ทั้งผ่านการใช้เมาส์วางเหนือและโฟกัสด้วยคีย์บอร์ด
ใช้คุณสมบัติ ARIA: ใช้คุณสมบัติ ARIA (Accessible Rich Internet Applications) เพื่อระบุและอธิบาย Tooltip ให้กับเทคโนโลยีสิ่งอำนวยความสะดวกอย่างถูกต้อง
จัดการโฟกัส: ควบคุมตำแหน่งของโฟกัสเมื่อ Tooltip แสดงและซ่อน
ตรวจสอบความเปรียบต่างของสีที่เพียงพอ: จัดให้มีความเปรียบต่างของสีระหว่างข้อความและพื้นหลังของ Tooltip ที่เพียงพอ
ให้เวลาที่เพียงพอ: ให้เวลาผู้ใช้เพียงพอในการอ่านเนื้อหาของ Tooltip
ทำให้สามารถปิดได้: จัดเตรียมวิธีที่ชัดเจนในการปิด Tooltip
หลีกเลี่ยงการใช้งานมากเกินไป: ใช้ Tooltip อย่างประหยัดและเฉพาะเมื่อจำเป็นเท่านั้น

เทคนิคการนำไปใช้งาน

1. การใช้ Hover และ Focus

ส่วนที่สำคัญที่สุดของ Tooltip ที่เข้าถึงได้คือการทำให้แน่ใจว่าผู้ใช้ทั้งเมาส์และคีย์บอร์ดสามารถเข้าถึงได้ ซึ่งหมายความว่า Tooltip ควรปรากฏทั้งเมื่อใช้เมาส์วางเหนือและเมื่อองค์ประกอบได้รับโฟกัส

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: คุณสมบัตินี้จะเชื่อมโยงลิงก์กับองค์ประกอบ Tooltip โดยใช้ ID ของมัน เพื่อบอกให้เทคโนโลยีสิ่งอำนวยความสะดวกทราบว่า Tooltip ให้ข้อมูลเพิ่มเติมเกี่ยวกับลิงก์
role="tooltip": ARIA role นี้ระบุว่าองค์ประกอบนี้เป็น Tooltip
CSS ใช้ตัวเลือก adjacent sibling selector (+) เพื่อแสดง Tooltip เมื่อลิงก์ถูก hover หรือ focus

JavaScript (การควบคุมขั้นสูง - ตัวเลือกเสริม):

ในขณะที่ CSS สามารถจัดการการแสดง/ซ่อนแบบง่ายๆ ได้ แต่ JavaScript ช่วยให้ควบคุมได้มีประสิทธิภาพมากขึ้น โดยเฉพาะอย่างยิ่งเมื่อ 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';
});

2. การใช้คุณสมบัติ ARIA

คุณสมบัติ ARIA มีความจำเป็นอย่างยิ่งในการให้ข้อมูลเชิงความหมายแก่เทคโนโลยีสิ่งอำนวยความสะดวก นี่คือรายละเอียดของคุณสมบัติที่สำคัญ:

aria-describedby: ดังที่กล่าวไว้ก่อนหน้านี้ คุณสมบัตินี้สร้างความสัมพันธ์ระหว่างองค์ประกอบที่เรียกใช้กับองค์ประกอบ Tooltip
role="tooltip": คุณสมบัตินี้กำหนดอย่างชัดเจนว่าองค์ประกอบนี้เป็น Tooltip
aria-hidden="true"/aria-hidden="false": ใช้สิ่งเหล่านี้เพื่อระบุว่า Tooltip กำลังแสดงให้เทคโนโลยีสิ่งอำนวยความสะดวกเห็นหรือไม่ เมื่อ Tooltip ถูกซ่อน ให้ตั้งค่า aria-hidden="true" เมื่อแสดงผล ให้ตั้งค่า aria-hidden="false" สิ่งนี้มีความสำคัญอย่างยิ่งเมื่อใช้ JavaScript เพื่อควบคุมการมองเห็นของ Tooltip

ตัวอย่าง:

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

3. การจัดการ Focus

เมื่อ Tooltip ปรากฏขึ้น โดยทั่วไปแล้ว *ไม่ควร* ขโมยโฟกัสจากองค์ประกอบที่เรียกใช้ โฟกัสควรยังคงอยู่ที่องค์ประกอบที่เรียก Tooltip เพื่อให้แน่ใจว่าผู้ใช้คีย์บอร์ดสามารถนำทางในหน้าต่อไปได้โดยไม่มีการขัดจังหวะที่ไม่คาดคิด

อย่างไรก็ตาม อาจมีบางสถานการณ์ที่คุณ *ต้องการ* ย้ายโฟกัสไปที่ Tooltip โดยเฉพาะอย่างยิ่งหาก Tooltip มีองค์ประกอบที่สามารถโต้ตอบได้ (เช่น ลิงก์, ปุ่ม) ในกรณีนี้ ต้องแน่ใจว่า:

Tooltip มีความโดดเด่นทางสายตาเพื่อบ่งชี้ว่ามีโฟกัสอยู่
มีวิธีที่ชัดเจนในการส่งคืนโฟกัสไปยังองค์ประกอบที่เรียกใช้เดิม (เช่น ปุ่มปิดภายใน Tooltip)

ในกรณีส่วนใหญ่ การหลีกเลี่ยงการจัดการโฟกัสภายใน Tooltip เองเป็นสิ่งที่แนะนำเพื่อความเรียบง่ายและการใช้งานที่สะดวก

4. การตรวจสอบความเปรียบต่างของสีที่เพียงพอ

ความเปรียบต่างของสีมีความสำคัญอย่างยิ่งต่อการอ่าน ตรวจสอบให้แน่ใจว่าสีของข้อความใน Tooltip ของคุณมีความเปรียบต่างเพียงพอกับสีพื้นหลัง แนวทางปฏิบัติการเข้าถึงเนื้อหาเว็บ (WCAG) แนะนำอัตราส่วนความเปรียบต่างอย่างน้อย 4.5:1 สำหรับข้อความปกติ และ 3:1 สำหรับข้อความขนาดใหญ่ (18pt หรือ 14pt ตัวหนา)

ใช้เครื่องมือตรวจสอบความเปรียบต่างออนไลน์เพื่อตรวจสอบว่าการเลือกสีของคุณเป็นไปตามมาตรฐานการเข้าถึงได้ ตัวอย่างเครื่องมือตรวจสอบความเปรียบต่างได้แก่:

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. การให้เวลาที่เพียงพอ

ผู้ใช้ต้องการเวลาเพียงพอในการอ่านเนื้อหาของ Tooltip หลีกเลี่ยง Tooltip ที่หายไปเร็วเกินไป แม้ว่าจะไม่มีตัวเลขที่แน่นอน แต่ควรตั้งเป้าให้แสดงผลอย่างน้อยสองสามวินาที นอกจากนี้ Tooltip ควรยังคงปรากฏอยู่ตราบเท่าที่ผู้ใช้ยังคงวางเมาส์เหนือหรือโฟกัสที่องค์ประกอบที่เรียกใช้ หากคุณจำเป็นต้องปิด Tooltip เนื่องจากเหตุการณ์อื่น ควรมีตัวบ่งชี้ว่า Tooltip จะปิด

หากเนื้อหาของ Tooltip มีความยาว ควรพิจารณาให้มีวิธีให้ผู้ใช้ปิด Tooltip ด้วยตนเอง (เช่น ปุ่มปิด หรือการกดปุ่ม Escape)

6. การทำให้สามารถปิดได้

แม้ว่า Tooltip มักจะหายไปโดยอัตโนมัติเมื่อผู้ใช้เลื่อนเมาส์ออกไปหรือลบโฟกัสออก แต่ก็เป็นแนวทางปฏิบัติที่ดีที่จะให้มีวิธีที่ชัดเจนในการปิดด้วยตนเอง โดยเฉพาะอย่างยิ่งสำหรับ Tooltip ที่มีความยาวหรือมีองค์ประกอบที่โต้ตอบได้

วิธีการปิด Tooltip:

ปุ่มปิด: รวมปุ่มปิดที่มองเห็นได้ชัดเจนภายใน Tooltip
ปุ่ม Escape: อนุญาตให้ผู้ใช้ปิด Tooltip โดยการกดปุ่ม Escape
คลิกด้านนอก: ปิด Tooltip เมื่อผู้ใช้คลิกที่ใดก็ได้นอก Tooltip และองค์ประกอบที่เรียกใช้ (ควรใช้อย่างระมัดระวังเนื่องจากอาจรบกวนการใช้งาน)

ตัวอย่าง (ปุ่มปิด):

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

ตัวอย่าง (ปุ่ม Escape):

document.addEventListener('keydown', function(event) {
  if (event.key === 'Escape') {
    hideTooltip(); // แทนที่ด้วยฟังก์ชันซ่อน Tooltip ของคุณ
  }
});

7. การหลีกเลี่ยงการใช้งานมากเกินไป

ควรใช้ Tooltip อย่างประหยัดและเฉพาะเมื่อให้ข้อมูลที่เป็นประโยชน์จริงๆ เท่านั้น การใช้ Tooltip มากเกินไปอาจทำให้ส่วนติดต่อผู้ใช้รก ทำให้ผู้ใช้เสียสมาธิ และสร้างประสบการณ์ที่น่าหงุดหงิด

ทางเลือกอื่นนอกเหนือจาก Tooltip:

ป้ายกำกับที่ชัดเจน: ใช้ป้ายกำกับที่ชัดเจนและสื่อความหมายสำหรับฟิลด์ฟอร์ม ปุ่ม และลิงก์
ความช่วยเหลือตามบริบท: ให้ข้อความช่วยเหลือโดยตรงภายในส่วนติดต่อผู้ใช้ ใกล้กับองค์ประกอบที่เกี่ยวข้อง
เอกสารช่วยเหลือ: ลิงก์ไปยังเอกสารช่วยเหลือที่ครอบคลุมสำหรับฟีเจอร์ที่ซับซ้อนมากขึ้น

ข้อควรพิจารณาขั้นสูง

เนื้อหาแบบไดนามิก

หากเนื้อหา Tooltip ของคุณถูกสร้างขึ้นแบบไดนามิก (เช่น โหลดจาก API หรืออัปเดตตามข้อมูลที่ผู้ใช้ป้อน) ตรวจสอบให้แน่ใจว่าคุณสมบัติ aria-describedby และการมองเห็นของ Tooltip ได้รับการอัปเดตตามนั้น ใช้ JavaScript เพื่อจัดการการอัปเดตเหล่านี้

การจัดตำแหน่ง

พิจารณาตำแหน่งของ Tooltip อย่างรอบคอบ หลีกเลี่ยงการวางในลักษณะที่บดบังเนื้อหาที่สำคัญหรือทำให้เลย์เอาต์เปลี่ยนแปลง คำนึงถึงขนาดหน้าจอและความละเอียดที่แตกต่างกัน และใช้ CSS เพื่อให้แน่ใจว่า Tooltip จะมองเห็นได้ภายใน viewport เสมอ

อุปกรณ์เคลื่อนที่

โดยปกติแล้ว Tooltip จะอาศัยการโต้ตอบแบบ hover ซึ่งไม่มีในอุปกรณ์แบบสัมผัส สำหรับอุปกรณ์เคลื่อนที่ ให้พิจารณาใช้วิธีการโต้ตอบทางเลือก เช่น:

แตะ: แสดง Tooltip เมื่อผู้ใช้แตะที่องค์ประกอบ
กดค้าง: แสดง Tooltip เมื่อผู้ใช้กดค้างที่องค์ประกอบ
แสดงเมื่อโฟกัส: แสดงเมื่อองค์ประกอบได้รับโฟกัส ซึ่งสามารถทำได้ด้วย JavaScript โดยตรวจสอบการรองรับการสัมผัส (เช่น `('ontouchstart' in window)`) และปรับเปลี่ยนพฤติกรรมการแสดงผลให้สอดคล้องกัน

การทดสอบ Tooltip ของคุณ

ทดสอบ Tooltip ของคุณอย่างละเอียดเพื่อให้แน่ใจว่าผู้ใช้ทุกคนสามารถเข้าถึงได้ ใช้การทดสอบด้วยตนเองร่วมกับเครื่องมือทดสอบการเข้าถึงได้อัตโนมัติ

วิธีการทดสอบ:

การนำทางด้วยคีย์บอร์ด: ตรวจสอบว่าสามารถเข้าถึง Tooltip ได้โดยใช้คีย์บอร์ด
การทดสอบด้วยโปรแกรมอ่านหน้าจอ: ใช้โปรแกรมอ่านหน้าจอเพื่อให้แน่ใจว่า Tooltip ถูกประกาศอย่างถูกต้อง
การวิเคราะห์ความเปรียบต่างของสี: ใช้เครื่องมือตรวจสอบความเปรียบต่างของสีเพื่อตรวจสอบว่ามีความเปรียบต่างเพียงพอ
การทดสอบบนมือถือ: ทดสอบ Tooltip บนอุปกรณ์เคลื่อนที่และขนาดหน้าจอต่างๆ
การทดสอบการเข้าถึงได้อัตโนมัติ: ใช้เครื่องมือเช่น axe DevTools, WAVE หรือ Lighthouse เพื่อระบุปัญหาการเข้าถึงได้ที่อาจเกิดขึ้น

การทำให้เป็นสากล (i18n) และการปรับให้เข้ากับท้องถิ่น (l10n)

เมื่อพัฒนา Tooltip สำหรับผู้ชมทั่วโลก ควรคำนึงถึงการทำให้เป็นสากลและการปรับให้เข้ากับท้องถิ่น:

ทิศทางของข้อความ: รองรับทิศทางของข้อความทั้งจากซ้ายไปขวา (LTR) และขวาไปซ้าย (RTL) ใช้คุณสมบัติทางตรรกะของ CSS (เช่น `margin-inline-start`, `margin-inline-end`) แทนคุณสมบัติทางกายภาพ (เช่น `margin-left`, `margin-right`) สำหรับเลย์เอาต์
การแปลเฉพาะภาษา: จัดเตรียมคำแปลของเนื้อหา Tooltip สำหรับภาษาต่างๆ
รูปแบบวันที่และเวลา: ปรับรูปแบบวันที่และเวลาให้เข้ากับท้องถิ่นของผู้ใช้
รูปแบบตัวเลข: ใช้รูปแบบตัวเลขที่เหมาะสมสำหรับแต่ละภูมิภาค (เช่น ตัวคั่นทศนิยม, ตัวคั่นหลักพัน)

สรุป

การสร้าง Tooltip ที่เข้าถึงได้ต้องมีการวางแผนอย่างรอบคอบและใส่ใจในรายละเอียด การปฏิบัติตามหลักการและเทคนิคที่ระบุไว้ในคู่มือนี้ จะช่วยให้คุณสร้าง Tooltip ที่ทุกคนสามารถใช้งานได้ โดยไม่คำนึงถึงความสามารถของพวกเขา โปรดจำไว้ว่าการเข้าถึงได้เป็นกระบวนการที่ต่อเนื่อง ดังนั้นควรทดสอบและปรับปรุง Tooltip ของคุณต่อไปเพื่อให้แน่ใจว่าตอบสนองความต้องการของผู้ใช้ทุกคน

MLOG