ป้ายกำกับเนื้อหา

ผู้ใช้บริการการช่วยเหลือพิเศษ เช่น โปรแกรมอ่านหน้าจอ อาศัยป้ายกำกับเนื้อหาเพื่อทำความเข้าใจความหมายขององค์ประกอบต่างๆ ในอินเทอร์เฟซ

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

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

การใช้งาน

ดู

เมื่อมีการใช้ View บางประเภทในอินเทอร์เฟซ View ดังกล่าวควรมีป้ายกำกับเนื้อหาที่อธิบายจุดประสงค์หรือการทำงานที่เชื่อมโยงกับ View นั้น

วิธีระบุป้ายกำกับเนื้อหา

android:contentDescription

เมื่อใช้ ImageView, ImageButton, CheckBox หรือ View อื่นที่ระบุข้อมูลทางกราฟิก ให้ใช้แอตทริบิวต์ android:contentDescription เพื่อระบุป้ายกำกับเนื้อหาสำหรับ View นั้น

บางครั้งป้ายกำกับเนื้อหาจะขึ้นอยู่กับข้อมูลที่ปรากฏในช่วงรันไทม์เท่านั้น หรือความหมายของ View อาจเปลี่ยนแปลงเมื่อเวลาผ่านไป ตัวอย่างเช่น ปุ่ม "เล่น" อาจเปลี่ยนเป็นปุ่ม "หยุดชั่วคราว" ในระหว่างการเล่นเพลง ในกรณีเหล่านี้ ให้ใช้ View#setContentDescription(CharSequence contentDescription) เพื่ออัปเดตป้ายกำกับเนื้อหาในเวลาที่เหมาะสม

โดยปกติแล้ว เมื่อบริการการช่วยเหลือพิเศษอธิบาย ViewGroup บริการจะรวมป้ายกำกับเนื้อหาจาก View ระดับล่างด้วย หากต้องการลบล้างลักษณะการทำงานนี้และระบุคำอธิบายของคุณสำหรับรายการดังกล่าวรวมถึง View ระดับล่างที่ไม่สามารถโฟกัสได้ ให้ตั้งค่า contentDescription ใน ViewGroup คุณอาจต้องรวมป้ายกำกับเนื้อหาจาก View ระดับล่างภายใน contentDescription เมื่อตั้งค่าใน ViewGroup

android:hint

สำหรับ EditTexts หรือ TextViews ที่แก้ไขได้ ให้ใช้แอตทริบิวต์ android:hint เพื่อระบุจุดประสงค์ของช่องข้อความ ไม่ควรนำ android:contentDescription มาใช้เป็นป้ายกำกับเนื้อหาสำหรับ View ที่แก้ไขได้

android:labelFor

ใช้แอตทริบิวต์ android:labelFor เพื่อระบุว่า View ควรทำหน้าที่เป็นป้ายกำกับเนื้อหาสำหรับ View อื่น

กรณีที่ไม่ต้องใช้ป้ายกำกับเนื้อหา

ไม่ควรระบุป้ายกำกับเนื้อหาเป็นการเฉพาะในกรณีดังต่อไปนี้

• มีข้อความที่แสดงผลใน TextView (หรือคลาสย่อย) สำหรับบริการการช่วยเหลือพิเศษโดยอัตโนมัติ โดยปกติแล้วจึงไม่จำเป็นต้องมีป้ายกำกับเนื้อหาเพิ่มเติม
• ภาพตกแต่งหรือภาพที่ไม่ได้แสดงข้อมูลที่สื่อความหมายทางกราฟิกไม่จำเป็นต้องมีป้ายกำกับเนื้อหา ในกรณีเหล่านี้ ให้ตั้งค่าแอตทริบิวต์ android:contentDescription ให้มีค่าเป็น "@null" หรือแอตทริบิวต์ android:importantForAccessibility ให้มีค่าเป็น "no"

หากต้องการดูข้อมูลเพิ่มเติม โปรดอ่านเกี่ยวกับการใช้ป้ายกำกับเนื้อหาในการฝึกอบรมนักพัฒนาแอป Android และคู่มือ API

เขียน

เมื่อมีการใช้ Composable บางประเภทในอินเทอร์เฟซ ควรมีป้ายกำกับเนื้อหาที่อธิบายจุดประสงค์หรือการทำงานที่เชื่อมโยงกับ Composable นั้น

วิธีระบุป้ายกำกับเนื้อหา

คำอธิบายเนื้อหา

หากต้องการระบุป้ายกำกับเนื้อหาสำหรับ Image, Icon หรือ Composable ระดับต่ำอื่นซึ่งสื่อข้อมูลทางกราฟิก ให้กำหนดคำอธิบายเนื้อหา

• ป้ายกำกับเนื้อหาจะขึ้นอยู่กับข้อมูลที่ปรากฏในช่วงรันไทม์ หรือความหมายของ Composable อาจเปลี่ยนแปลง ตัวอย่างเช่นในระหว่างการเล่นเพลง ปุ่ม "เล่น" อาจเปลี่ยนเป็นปุ่ม "หยุดชั่วคราว" ได้
  • ในกรณีเหล่านี้ ให้ใช้สถานะเพื่อให้ Compose สามารถสังเกตการเปลี่ยนแปลงในคำอธิบายเนื้อหาและเขียนใหม่ด้วยค่าใหม่ได้ ดูวิธีใช้ State และ Jetpack Compose

• ในบางกรณี คุณอาจต้องการผสานองค์ประกอบต่างๆ ให้เป็นองค์ประกอบที่สามารถโฟกัสได้รายการเดียว ซึ่งจะรวมป้ายกำกับเนื้อหาจากองค์ประกอบที่สืบทอดมา ดูวิธีผสานองค์ประกอบ

พารามิเตอร์ป้ายกำกับ

Composable บางรายการ เช่น TextField รองรับพารามิเตอร์ label ที่จะมีหรือไม่ก็ได้ เมื่อตั้งค่าป้ายกำกับแล้ว องค์ประกอบจะแสดง Composable ที่ส่งผ่านไปยัง label โดยบริการการช่วยเหลือพิเศษสามารถใช้เพื่ออธิบาย Composable ได้

กรณีที่ไม่ต้องใช้ป้ายกำกับเนื้อหา

ไม่ควรเพิ่มป้ายกำกับเนื้อหาในกรณีดังต่อไปนี้

• ข้อความที่แสดงใน Text หรือ Composable อื่นที่มี Text อยู่จะมีให้ในบริการการช่วยเหลือพิเศษโดยอัตโนมัติ
• ภาพตกแต่งหรือภาพที่ไม่ได้แสดงข้อมูลทางกราฟิกที่สื่อความหมาย
  • ในกรณีนี้ ให้กำหนดพารามิเตอร์ contentDescription หรือพร็อพเพอร์ตี้ Modifier.semantics#contentDescription property เป็น null หรือเรียกใช้ Modifier#clearAndSetSemantics

การออกแบบ

เมื่อออกแบบอินเทอร์เฟซผู้ใช้ ให้คิดอย่างรอบคอบว่าควรมีการติดป้ายกำกับเนื้อหาที่มีลักษณะทางกราฟิกอย่างไรสำหรับผู้ใช้บริการการช่วยเหลือพิเศษ ซึ่งป้ายกำกับเนื้อหาควรเป็นไปตามหลักการต่อไปนี้

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

หากต้องการดูข้อมูลเพิ่มเติม โปรดอ่านหลักเกณฑ์การเขียนสำหรับการช่วยเหลือพิเศษของ Material Design

การทดสอบ

หากต้องการยืนยันด้วยตนเองว่าป้ายกำกับเนื้อหาของอินเทอร์เฟซผู้ใช้ของแอปไม่ได้ขาดหายไป ให้ทำดังนี้

1. เปิด TalkBack
2. เปิดแอป
3. ใช้ท่าทางสัมผัสการไปยังส่วนต่างๆ แบบเชิงเส้น เพื่อย้ายโฟกัสการเข้าถึงไปยังแต่ละองค์ประกอบบนหน้าจอ
4. หาก TalkBack ย้ายโฟกัสไปยังบางองค์ประกอบ แต่ไม่ได้พูดถึงลักษณะที่สื่อความหมายขององค์ประกอบนั้น หรือพูดข้อความที่ "ไม่มีป้ายกำกับ" องค์ประกอบนั้นอาจไม่มีป้ายกำกับเนื้อหา

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