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

เฟรมเวิร์ก 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") }
)StateBasedText.kt

นอกจากนี้ โดยปกติแล้วช่องข้อความจะมี ป้ายกำกับอธิบายที่เกี่ยวข้องซึ่งอธิบายสิ่งที่ผู้ใช้ต้องป้อนเป็นอินพุต

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

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

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

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

เมื่อเพิ่มป้ายกำกับให้กับองค์ประกอบของคอลเล็กชัน ป้ายกำกับแต่ละรายการต้องไม่ซ้ำกัน วิธีนี้จะช่วยให้บริการการช่วยเหลือพิเศษของระบบอ้างอิงองค์ประกอบบนหน้าจอได้เพียงรายการเดียวเมื่อประกาศป้ายกำกับ การตอบกลับนี้จะช่วยให้ผู้ใช้ทราบเมื่อ เลื่อนดู 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)
            }
        )
    }
}AccessibilitySnippets.kt

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

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

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

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

ในข้อมูลโค้ดต่อไปนี้ Row Composable จะทำหน้าที่เป็นคอนเทนเนอร์หลัก ภายใน 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")
        }
    }
}AccessibilitySnippets.kt

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

หากองค์ประกอบใน 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?")
    }
}AccessibilitySnippets.kt

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

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

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

หากการโต้ตอบของ 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()
}AccessibilitySnippets.kt

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

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

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

เมื่อองค์ประกอบ 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 }
    )
}TapAndPress.kt

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

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

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

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

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

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

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

อย่างไรก็ตาม คอมโพเนนต์บางอย่างต้องใช้ข้อมูลที่เฉพาะเจาะจงมากกว่าที่ตัวแก้ไขมาตรฐานระบุ ในกรณีเหล่านี้ ให้มองหาตัวแก้ไขเฉพาะ (เช่น 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 ภายในหน้าจอของแอป เทคนิคเหล่านี้อาจรวมถึงการใช้รูปร่างหรือขนาดที่แตกต่างกัน การระบุข้อความหรือรูปแบบภาพ หรือการเพิ่มเสียงหรือการตอบสนองแบบสัมผัส (Haptic) เพื่อทำเครื่องหมายความแตกต่างขององค์ประกอบ

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

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

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

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

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

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

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

Codelab

การช่วยเหลือพิเศษใน Jetpack Compose

ดูเนื้อหา

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