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

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

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

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

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

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

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

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

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

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

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

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

ใน 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)
        )
    }
}
AccessibilitySnippets.kt

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

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

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

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

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

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

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

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

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

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

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

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

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

Codelabs

วิดีโอ

ดูเนื้อหา