ทำให้เข้าถึงแอปได้ง่ายขึ้น

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

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

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

เพิ่มระดับการมองเห็นข้อความ

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

  • หากข้อความมีขนาดเล็กกว่า 18sp หรือหากข้อความเป็นตัวหนาและมีขนาดเล็กกว่า 14sp ให้ใช้สีพื้นหน้าและพื้นหลังที่ทำให้ได้อัตราส่วนคอนทราสต์ของสีอย่างน้อย 4.5:1
  • สำหรับข้อความอื่นๆ ทั้งหมด ให้ตั้งค่าอัตราส่วนคอนทราสต์ของสีเป็นอย่างน้อย 3:1

รูปภาพต่อไปนี้แสดงตัวอย่าง 2 รายการของคอนทราสต์สีข้อความกับพื้นหลัง

ตัวอย่างคำว่า "ข้อความ" 2 ตัวอย่างบนพื้นหลังสี ตัวอย่างทางด้านซ้ายมีคอนทราสต์สีต่ำระหว่างข้อความและพื้นหลัง ส่วนตัวอย่างทางด้านขวามีคอนทราสต์สีที่เพียงพอ
รูปที่ 1 คอนทราสต์ของสีต่ำกว่าที่แนะนำ (ซ้าย) และเพียงพอ (ขวา)

หากต้องการตรวจสอบคอนทราสต์ของสีข้อความกับพื้นหลังในแอป ให้ใช้เครื่องมือตรวจสอบคอนทราสต์ของสีออนไลน์หรือแอปเครื่องตรวจการเข้าถึง

ใช้ตัวควบคุมขนาดใหญ่ที่ใช้งานง่าย

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

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

ในข้อมูลโค้ดต่อไปนี้ องค์ประกอบ UI ขนาดเล็กจะเข้าถึงได้โดยการกำหนดเป้าหมายการสัมผัสที่ใหญ่ขึ้น

@Composable
private fun LargeBox() {
    var clicked by remember { mutableStateOf(false) }
    Box(
        Modifier
            .size(100.dp)
            .background(if (clicked) Color.DarkGray else Color.LightGray)
    ) {
        Box(
            Modifier
                .align(Alignment.Center)
                .clickable { clicked = !clicked }
                .background(Color.Black)
                .sizeIn(minWidth = 48.dp, minHeight = 48.dp)
        )
    }
}

ดูข้อมูลเพิ่มเติมเกี่ยวกับขนาดเป้าหมายการสัมผัสได้ที่ขนาดเป้าหมายการสัมผัสขั้นต่ำ

อธิบายองค์ประกอบ UI แต่ละรายการ

สำหรับองค์ประกอบ UI แต่ละรายการในแอป ให้ใส่คำอธิบายที่อธิบายวัตถุประสงค์ขององค์ประกอบนั้น ในกรณีส่วนใหญ่ คุณจะใส่คำอธิบายนี้ในแอตทริบิวต์ contentDescription ขององค์ประกอบ ดังที่แสดงในข้อมูลโค้ดต่อไปนี้

@Composable
private fun ShareButton(onClick: () -> Unit) {
    IconButton(onClick = onClick) {
        Icon(
            imageVector = Icons.Filled.Share,
            contentDescription = stringResource(R.string.label_share)
        )
    }
}

โปรดทราบว่าคุณไม่จำเป็นต้องระบุ contentDescription สำหรับ Composable Text บริการการช่วยเหลือพิเศษของ Android (เช่น TalkBack) จะประกาศข้อความโดยอัตโนมัติ

เมื่อเพิ่มคำอธิบายลงในองค์ประกอบ UI ของแอป โปรดคำนึงถึงแนวทางปฏิบัติแนะนำต่อไปนี้

  • ใช้คำอธิบายเพื่อสื่อถึงวัตถุประสงค์และผลลัพธ์ของการโต้ตอบ ไม่ใช่รายละเอียดภาพ ใช้พร็อพเพอร์ตี้ความหมาย Role (เช่น Role.Button หรือ Role.Switch) เพื่อแสดงประเภทขององค์ประกอบ UI วิธีนี้จะช่วยให้โปรแกรมอ่านหน้าจออ่านองค์ประกอบได้อย่างถูกต้อง

  • หลีกเลี่ยงความซ้ำซ้อนในคำอธิบาย ตัวอย่างเช่น หากการเลือกปุ่มทำให้เกิดการดำเนินการ "ส่ง" ในแอป ให้ตั้งค่าคำอธิบายของปุ่มเป็น "Submit" ไม่ใช่ "Submit button"

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

  • ใช้ hideFromAccessibility API เพื่อทำเครื่องหมายองค์ประกอบเพื่อการตกแต่งเท่านั้น เพื่อให้บริการการช่วยเหลือพิเศษสามารถละเว้นองค์ประกอบดังกล่าวได้ หากองค์ประกอบ UI มีพารามิเตอร์ contentDescription แต่เป็นเพียงการตกแต่ง (เช่น Icon ที่เป็นส่วนหนึ่งขององค์ประกอบ UI อื่น) ให้ส่ง null เพื่อหลีกเลี่ยงการติดป้ายกำกับซ้ำซ้อน ดู Use Case ที่ซับซ้อนมากขึ้นได้ที่หัวข้อการผสานและการล้าง

  • ทดสอบโค้ดเพื่อให้แน่ใจว่าระบบส่งคำอธิบายเนื้อหาตามที่คาดไว้ Android Lint, การทดสอบ Compose รวมถึงเครื่องมือทดสอบด้วยตนเองและแบบอัตโนมัติสามารถแจ้งปัญหาที่พบได้ทั่วไปและแสดงปัญหาในการติดตั้งใช้งาน

แหล่งข้อมูลเพิ่มเติม

ดูข้อมูลเพิ่มเติมเกี่ยวกับการทำให้แอปของคุณเข้าถึงได้ง่ายขึ้นได้ที่แหล่งข้อมูลเพิ่มเติมต่อไปนี้

Codelab

วิดีโอ

ดูเนื้อหา