หลักการในการปรับปรุงการช่วยเหลือพิเศษของแอป

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

Android มีบริการการช่วยเหลือพิเศษของระบบหลายอย่าง ซึ่งรวมถึงบริการต่อไปนี้

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

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

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

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

องค์ประกอบป้ายกำกับ

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

ในกรณีส่วนใหญ่ Compose API และ Material จะมีการรองรับการช่วยเหลือพิเศษเริ่มต้นอยู่แล้ว อย่างไรก็ตาม หากคุณต้องการระบุพร็อพเพอร์ตี้เชิงความหมายขององค์ประกอบ UI ด้วยตนเอง ให้ใช้ตัวแก้ไข semantics และพร็อพเพอร์ตี้ contentDescription ดูข้อมูลเพิ่มเติมเกี่ยวกับความหมายได้ที่ความหมาย

ส่วนต่อไปนี้จะอธิบายเทคนิคการติดป้ายกำกับอื่นๆ อีกหลายวิธี

องค์ประกอบที่แก้ไขได้

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

ในตัวอย่างต่อไปนี้ TextField มีพารามิเตอร์ placeholder ที่ให้ข้อความคำแนะนำ

val usernameState = rememberTextFieldState()
TextField(
    state = usernameState,
    lineLimits = TextFieldLineLimits.SingleLine,
    placeholder = { Text("Enter Username") }
)

นอกจากนี้ ช่องข้อความมักจะมีป้ายกำกับที่สื่อความหมายซึ่งอธิบายสิ่งที่ผู้ใช้ต้องป้อน

ในตัวอย่างต่อไปนี้ TextField มีพารามิเตอร์ label ที่ให้คำอธิบายการช่วยเหลือพิเศษ

TextField(
    state = rememberTextFieldState(initialText = "Hello"),
    label = { Text("Label") }
)

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

องค์ประกอบในคอลเล็กชัน

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

ตัวอย่างเช่น เมื่อคุณมี LazyColumn หรือ LazyRow ให้ใช้ตัวแก้ไข semantics เพื่อกำหนด collectionItemInfo ที่ไม่ซ้ำกันให้กับแต่ละรายการ ดังที่แสดงในข้อมูลโค้ดต่อไปนี้

MilkyWayList(
    modifier = Modifier
        .semantics {
            collectionInfo = CollectionInfo(
                rowCount = milkyWay.count(),
                columnCount = 1
            )
        }
) {
    milkyWay.forEachIndexed { index, text ->
        Text(
            text = text,
            modifier = Modifier.semantics {
                collectionItemInfo =
                    CollectionItemInfo(index, 0, 0, 0)
            }
        )
    }
}

ดูข้อมูลเพิ่มเติมเกี่ยวกับพร็อพเพอร์ตี้ความหมายสำหรับรายการและตารางกริดได้ที่ข้อมูลรายการและไอเทม

กลุ่มเนื้อหาที่เกี่ยวข้อง

หากแอปแสดงองค์ประกอบ UI หลายรายการที่รวมกันเป็นกลุ่มตามธรรมชาติ เช่น รายละเอียดของเพลงหรือแอตทริบิวต์ของข้อความ ให้จัดเรียงองค์ประกอบเหล่านี้ภายในคอนเทนเนอร์หลัก (เช่น Column, Row หรือ Box) ใช้ตัวแก้ไข semantics ของคอนเทนเนอร์หลักเพื่อตั้งค่า mergeDescendants เป็น true

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

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

@Composable
private fun PostMetadata(metadata: Metadata) {
    // Merge elements below for accessibility purposes
    Row(modifier = Modifier.semantics(mergeDescendants = true) {}) {
        Image(
            imageVector = Icons.Filled.AccountCircle,
            contentDescription = null // decorative
        )
        Column {
            Text(metadata.author.name)
            Text("${metadata.date} • ${metadata.readTimeMinutes} min read")
        }
    }
}

เมื่อจัดกลุ่มองค์ประกอบที่เกี่ยวข้อง เช่น ในตัวอย่างก่อนหน้านี้ ให้กำหนดให้เฉพาะคอนเทนเนอร์หลักเท่านั้นที่โต้ตอบได้ หลีกเลี่ยงการเพิ่มตัวแก้ไข clickable หรือ focusable ลงในองค์ประกอบย่อยด้านใน แต่ให้ใช้ตัวแก้ไขกับ Row หรือ Column ระดับบนแทน

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

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

ในบริบทของรายการหรือตารางกริด โปรแกรมอ่านหน้าจออาจรวมข้อความของโหนดข้อความย่อยขององค์ประกอบรายการหรือตารางกริด ทางที่ดีควรหลีกเลี่ยงการแก้ไขประกาศนี้

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

ส่วนหัวภายในข้อความ

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

@Composable
private fun Subsection(text: String) {
    Text(
        text = text,
        style = MaterialTheme.typography.headlineSmall,
        modifier = Modifier.semantics { heading() }
    )
}

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

ดูข้อมูลเพิ่มเติมเกี่ยวกับพร็อพเพอร์ตี้ความหมาย heading ได้ที่ส่วนหัว

ชื่อแผงการช่วยเหลือพิเศษ

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

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

ShareSheet(
    message = "Choose how to share this photo",
    modifier = Modifier
        .fillMaxWidth()
        .align(Alignment.TopCenter)
        .semantics { paneTitle = "New bottom sheet" }
)

ดูข้อมูลเพิ่มเติมเกี่ยวกับพร็อพเพอร์ตี้ความหมาย paneTitle ได้ที่คอมโพเนนต์ที่คล้ายกับหน้าต่าง

องค์ประกอบตกแต่ง

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

สำหรับ Composable Image หรือ Icon ให้ตั้งค่า contentDescription = null สำหรับองค์ประกอบอื่นๆ ที่ใช้เพื่อการตกแต่งเท่านั้นซึ่งไม่ได้ให้บริบทหรือฟังก์ชันการทำงาน คุณสามารถใช้ hideFromAccessibility พร็อพเพอร์ตี้ความหมายนี้จะบอกบริการการช่วยเหลือพิเศษให้ไม่ต้องสนใจรายการนี้

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

ในตัวอย่างต่อไปนี้ Icon และ Text เป็นองค์ประกอบย่อยที่ใช้ตกแต่งภายในปุ่มเปิด/ปิดที่กำหนดเอง หากต้องการป้องกันไม่ให้บริการการช่วยเหลือพิเศษไปยังองค์ประกอบย่อยเหล่านี้ทีละรายการ คุณสามารถล้างความหมายขององค์ประกอบย่อยได้โดยใช้ clearAndSetSemantics ใน Row ระดับบน ซึ่งจะบอกบริการการช่วยเหลือพิเศษให้จัดการ Row ทั้งหมดเป็นปุ่มเปิด/ปิดที่ไปยังส่วนต่างๆ ได้ ดังนี้

// Developer might intend this to be a toggleable.
// Using `clearAndSetSemantics`, on the Row, a clickable modifier is applied,
// a custom description is set, and a Role is applied.

@Composable
fun FavoriteToggle() {
    val checked = remember { mutableStateOf(true) }
    Row(
        modifier = Modifier
            .toggleable(
                value = checked.value,
                onValueChange = { checked.value = it }
            )
            .clearAndSetSemantics {
                stateDescription = if (checked.value) "Favorited" else "Not favorited"
                toggleableState = ToggleableState(checked.value)
                role = Role.Switch
            },
    ) {
        Icon(
            imageVector = Icons.Default.Favorite,
            contentDescription = null // not needed here

        )
        Text("Favorite?")
    }
}

ดูข้อมูลเพิ่มเติมเกี่ยวกับการล้างความหมายได้ที่ล้างและตั้งค่าความหมาย

เพิ่มการดำเนินการสำหรับการช่วยเหลือพิเศษ

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

หากการโต้ตอบของ Composable ที่กำหนดเองเปลี่ยนสถานะของแอปในลักษณะที่ไม่ชัดเจน ให้ระบุป้ายกำกับที่สื่อความหมายสำหรับการแตะมาตรฐานโดยใช้พารามิเตอร์ เช่น onClickLabel หรือ onLongClickLabel ใน Modifier.clickable หรือ Modifier.combinedClickable

สำหรับการโต้ตอบที่ซับซ้อนซึ่งไม่สามารถแมปกับการแตะมาตรฐานได้ ให้ใช้ customActions

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

ใน Compose คุณสามารถกำหนดการดำเนินการสำหรับการช่วยเหลือพิเศษที่กำหนดเองผ่านพร็อพเพอร์ตี้ customActions ในตัวแก้ไข semantics โดยใช้ CustomAccessibilityAction

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

SwipeToDismissBox(
    modifier = Modifier.semantics {
        // Represents the swipe to dismiss for accessibility
        customActions = listOf(
            CustomAccessibilityAction(
                label = "Remove article from list",
                action = {
                    removeArticle()
                    true
                }
            )
        )
    },
    state = rememberSwipeToDismissBoxState(),
    backgroundContent = {}
) {
    ArticleListItem()
}

เมื่อใช้การดำเนินการสำหรับการช่วยเหลือพิเศษที่กำหนดเอง ผู้ใช้จะเข้าถึงการดำเนินการผ่านเมนูการดำเนินการได้

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

ทำให้การดำเนินการที่ทำได้เข้าใจง่าย

เมื่อองค์ประกอบ UI รองรับการทำงาน เช่น แตะค้างไว้ บริการการช่วยเหลือพิเศษ เช่น TalkBack จะประกาศว่า "แตะสองครั้งค้างไว้เพื่อกดค้าง"

ประกาศทั่วไปนี้ไม่ได้ให้บริบทแก่ผู้ใช้เกี่ยวกับสิ่งที่การแตะค้างไว้จะทำ

หากต้องการให้ประกาศนี้มีประโยชน์มากขึ้น ให้ระบุคำอธิบายที่มีความหมายสำหรับการดำเนินการ

ใน Compose ตัวปรับแต่งการโต้ตอบมาตรฐาน เช่น clickable และ combinedClickable มีพารามิเตอร์ในตัว (ได้แก่ onClickLabel และ onLongClickLabel) ที่คุณใช้ระบุคำอธิบายสำหรับการดำเนินการได้ ดังตัวอย่างต่อไปนี้

var contextMenuPhotoId by rememberSaveable { mutableStateOf<Int?>(null) }
val haptics = LocalHapticFeedback.current
LazyVerticalGrid(columns = GridCells.Adaptive(minSize = 128.dp)) {
    items(photos, { it.id }) { photo ->
        ImageItem(
            photo,
            Modifier
                .combinedClickable(
                    onClick = { activePhotoId = photo.id },
                    onLongClick = {
                        haptics.performHapticFeedback(HapticFeedbackType.LongPress)
                        contextMenuPhotoId = photo.id
                    },
                    onLongClickLabel = stringResource(R.string.open_context_menu)
                )
        )
    }
}
if (contextMenuPhotoId != null) {
    PhotoActionsSheet(
        photo = photos.first { it.id == contextMenuPhotoId },
        onDismissSheet = { contextMenuPhotoId = null }
    )
}

ซึ่งจะทำให้ TalkBack ประกาศว่า "เปิดเมนูตามบริบท" เพื่อช่วยให้ผู้ใช้เข้าใจวัตถุประสงค์ของการดำเนินการ

นอกจากนี้ คุณยังระบุป้ายกำกับในตัวแก้ไข semantics ได้โดยตรงด้วย

ดูข้อมูลเพิ่มเติมเกี่ยวกับการตอบสนองต่อการแตะและการคลิกได้ที่การแตะและการกดและองค์ประกอบแบบอินเทอร์แอกทีฟ

ใช้ฟีเจอร์การช่วยเหลือพิเศษในตัว

เมื่อออกแบบ UI ของแอป ให้ใช้ประโยชน์จากฟีเจอร์การช่วยเหลือพิเศษในตัวเพื่อหลีกเลี่ยงการใช้ฟังก์ชันการทำงานที่มีอยู่แล้วซ้ำ Material, Compose UI และ Foundation API จะใช้และเสนอแนวทางปฏิบัติที่เข้าถึงได้หลายอย่างโดยค่าเริ่มต้น

ใน Jetpack Compose ให้ใช้ Composable ในตัว เช่น Button, Switch และ Checkbox เพื่อสร้าง UI ที่เข้าถึงได้ คอมโพเนนต์เหล่านี้มาพร้อมกับตัวปรับแต่ง semantics เช่น role และ stateDescription ซึ่งคุณสามารถใช้เพื่อทำให้แอปเข้าถึงได้มากขึ้น

ใช้ความหมายกับคอมโพเนนต์ที่กำหนดเอง

เมื่อสร้างคอมโพเนนต์ที่กำหนดเอง โปรดคำนึงถึงประเภทการรองรับการช่วยเหลือพิเศษที่คอมโพเนนต์นี้ต้องใช้เพื่อทำหน้าที่ของตน บ่อยครั้งที่ Compose API มาตรฐานที่คุณใช้อยู่แล้ว เช่น clickable, toggleable หรือ selectable ก็เพียงพอแล้ว เนื่องจากจะสร้างแผนผังความหมายให้คุณโดยอัตโนมัติ

อย่างไรก็ตาม องค์ประกอบบางอย่างต้องการข้อมูลที่เฉพาะเจาะจงมากกว่าที่ตัวแก้ไขมาตรฐานมีให้ ในกรณีนี้ ให้มองหาตัวแก้ไขเฉพาะ (เช่น triStateToggleable) หรือหากไม่มี ให้ระบุความหมายอย่างชัดเจนโดยใช้ Modifier.semantics ระดับต่ำ

ตัวอย่างเช่น ลองพิจารณา TriStateSwitch ซึ่งเป็นสวิตช์ที่มี 3 สถานะ (เปิด ปิด และไม่แน่นอน)

แม้ว่าตัวแก้ไข toggleable มาตรฐานจะถือว่ามี 2 สถานะ แต่ตัวแก้ไข triStateToggleable จะจัดการความซับซ้อนของสถานะที่ 3 โดยจะตั้งค่าการช่วยเหลือพิเศษ Role (Switch) และ State โดยอัตโนมัติ วิธีนี้จะช่วยให้บริการการช่วยเหลือพิเศษได้รับข้อมูลที่ถูกต้อง และคุณไม่จำเป็นต้องกำหนดความหมายด้วยตนเอง

ข้อมูลโค้ดต่อไปนี้แสดง TriStateSwitch ที่ใช้แนวทางนี้

@Composable
fun TriStateSwitch(
    state: ToggleableState,
    onClick: () -> Unit,
    modifier: Modifier = Modifier
) {
    // A real implementation would include custom drawing for the switch.
    // This example uses a Box to demonstrate the semantics.
    Box(
        modifier = modifier
            .size(width = 64.dp, height = 40.dp)
            // triStateToggleable handles the semantics (Role and State)
            // automatically, so explicit Modifier.semantics is not needed here.
            .triStateToggleable(
                state = state,
                onClick = onClick,
                role = Role.Switch
            )
            // Add visual feedback based on the state
            .background(
                when (state) {
                    ToggleableState.On -> Color.Green
                    ToggleableState.Off -> Color.Gray
                    ToggleableState.Indeterminate -> Color.Yellow
                }
            )
    )
}

// Usage within another composable:
var state by remember { mutableStateOf(ToggleableState.Off) }
TriStateSwitch(
    state = state,
    onClick = {
        state = when (state) {
            ToggleableState.Off -> ToggleableState.Indeterminate
            ToggleableState.Indeterminate -> ToggleableState.On
            ToggleableState.On -> ToggleableState.Off
        }
    }
)

เมื่อสร้างคอมโพเนนต์ที่กำหนดเอง โปรดตรวจสอบว่าคุณได้ระบุพร็อพเพอร์ตี้เชิงความหมายที่เกี่ยวข้องทั้งหมดเพื่อวัตถุประสงค์ด้านการช่วยเหลือพิเศษ ตัวอย่างเช่น หากคอมโพเนนต์เลียนแบบการควบคุมมาตรฐาน เช่น สวิตช์หรือปุ่ม พร็อพเพอร์ตี้เหล่านี้จะรวมบทบาทของคอมโพเนนต์ (เช่น Role.Switch หรือ Role.Button), stateDescription (เช่น "เปิด" "ปิด" "เลือก" หรือ "ไม่ได้เลือก") และป้ายกำกับการดำเนินการที่เกี่ยวข้อง ดูข้อมูลเพิ่มเติมได้ที่คอมโพเนนต์ที่กำหนดเอง

ใช้สัญญาณอื่นๆ นอกเหนือจากสี

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

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

ทางด้านซ้ายเป็นหน้าจอที่มีปุ่มวงกลม 2 ปุ่ม ปุ่มหนึ่งสีเขียวและอีกปุ่มสีแดง ทางด้านขวาเป็นหน้าจอเดียวกัน แต่ปุ่มวงกลม 2 ปุ่มมีป้ายกำกับเป็นข้อความและไอคอนที่มีความหมาย
รูปที่ 1 ตัวอย่างการสร้างองค์ประกอบ UI โดยใช้สีเท่านั้น (ซ้าย) และใช้สี รูปร่าง และข้อความ (ขวา)

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

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

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

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

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

Codelab

ดูเนื้อหา