การเข้าถึง — พื้นฐาน, VoiceOver และ TalkBack สำหรับผู้ใช้ที่ตาบอด

การเข้าถึง (a11y) ในแอปมือถือคืออะไร?

Accessibility (ตัวย่อ a11y — 11 ตัวอักษรระหว่าง «a» และ «y») — การปฏิบัติในการพัฒนาแอปพลิเคชันที่สามารถใช้งานได้โดยผู้ที่มีความบกพร่องทางสายตา การได้ยิน การเคลื่อนไหว และการรับรู้ ในการพัฒนามือถือ การเข้าถึงครอบคลุมสี่สถานการณ์หลัก: ผู้ใช้ที่ตาบอด (โปรแกรมอ่านหน้าจอ), ผู้ใช้ที่สายตาเลือนราง (การปรับขนาด, ความคมชัด), ผู้ใช้ที่หูหนวกและมีปัญหาทางการได้ยิน (คำบรรยาย, ทางเลือกทางภาพแทนเสียง) และผู้ใช้ที่ควบคุมการเคลื่อนไหวได้จำกัด (การควบคุมด้วยเสียง, Switch Control, พื้นที่สัมผัสขนาดใหญ่)

ข้อกำหนดทางกฎหมาย — ในหลายประเทศ การเข้าถึงเป็นข้อบังคับตามกฎหมาย สหรัฐอเมริกา: Section 508 และ ADA สหภาพยุโรป: European Accessibility Act (2025) สหราชอาณาจักร: Equality Act 2010 หากไม่สนับสนุนการเข้าถึง แอปอาจตกเป็นเป้าของการฟ้องร้อง — ในสหรัฐอเมริกาในปี 2023 มีการยื่นฟ้องมากกว่า 4,000 คดีเกี่ยวกับผลิตภัณฑ์ดิจิทัลที่ไม่สามารถเข้าถึงได้ Apple และ Google ตรวจสอบการเข้าถึงระหว่างการตรวจสอบแอป: App Store Review Guidelines (4.2) และ Google Play Store ต้องการการสนับสนุนการเข้าถึงขั้นต่ำ

เหตุผลทางธุรกิจ — การเข้าถึงช่วยขยายกลุ่มผู้ชมของคุณ ตามข้อมูลของ Return on Disability (2021) ผู้พิการควบคุมรายได้ที่ใช้จ่ายได้ 13 ล้านล้านดอลลาร์ต่อปี แอปที่เข้าถึงได้ยังมีอันดับการค้นหาที่ดีกว่า (HTML เชิงความหมาย, ข้อความทดแทน), มีคะแนนรีวิวจากผู้ใช้สูงกว่า และมีรีวิวน้อยกว่าเกี่ยวกับปัญหา UX ที่ IT Sectr เรารวมการเข้าถึงไว้ในคำจำกัดความของความสำเร็จของทุกโครงการ — เป็นมาตรฐานคุณภาพ ไม่ใช่การปรับปรุงทางเลือก

การเข้าถึงใน iOS: VoiceOver และ UIAccessibility

VoiceOver — โปรแกรมอ่านหน้าจอของ Apple ที่รวมอยู่ใน iOS, iPadOS และ macOS ผู้ใช้วางนิ้วบนหน้าจอ VoiceOver จะอ่านชื่อองค์ประกอบใต้นิ้ว แตะสองครั้งเพื่อเปิดใช้งานองค์ประกอบ VoiceOver รองรับมากกว่า 40 ท่าทาง: ปัดสามนิ้ว (เลื่อน), แตะสองครั้งด้วยสองนิ้ว (หยุด), ท่าทาง Z (กลับไป) นักพัฒนาควบคุมสิ่งที่ VoiceOver อ่านและวิธีการอ่านผ่านโปรโตคอล UIAccessibility และคุณสมบัติ accessibilityLabel, accessibilityTraits, accessibilityHint

class CustomButton: UIButton {

    override var isAccessibilityElement: Bool {
        get { return true }
        set {}
    }

    // แทนที่ accessibilityLabel
    override var accessibilityLabel: String? {
        get { return "ปุ่มส่งแบบฟอร์ม" }
        set {}
    }

    // แทนที่ accessibilityHint
    override var accessibilityHint: String? {
        get { return "แตะสองครั้งเพื่อส่งข้อมูล" }
        set {}
    }

    // แทนที่ accessibilityTraits
    override var accessibilityTraits: UIAccessibilityTraits {
        get { return .button }
        set {}
    }
}

// Dynamic Type — การปรับขนาดข้อความ
titleLabel.font = UIFontMetrics.default.scaledFont(
    for: UIFont.systemFont(ofSize: 16)
)
titleLabel.adjustsFontForContentSizeCategory = true

การพิมพ์แบบไดนามิก — Dynamic Type ใน iOS ให้ผู้ใช้เลือกขนาดข้อความ (จาก XS ถึง XXXL) นักพัฒนาใช้ UIFontMetrics.scaledFont สำหรับการปรับขนาดอัตโนมัติ ข้อความต้องแสดงอย่างถูกต้องในทุกขนาด: บรรทัดต้องไม่ถูกตัด ปุ่มต้องขยายตามสัดส่วนของข้อความ UITableView อัปเดตความสูงของเซลล์โดยอัตโนมัติเมื่อขนาดข้อความเปลี่ยนไป การละเว้น Dynamic Type หมายถึงการทำให้แอปของคุณไม่สามารถเข้าถึงได้สำหรับผู้ใช้ที่สายตาเลือนราง

การเข้าถึงใน SwiftUI

SwiftUI มีตัวปรับแต่งการเข้าถึง: .accessibilityLabel(), .accessibilityHint(), .accessibilityAddTraits(), .accessibilitySortPriority() โดยค่าเริ่มต้น องค์ประกอบ SwiftUI มาตรฐานทั้งหมด (Text, Button, Image) เป็นองค์ประกอบการเข้าถึงที่มีป้ายกำกับอัตโนมัติอยู่แล้ว สำหรับมุมมองที่กำหนดเอง ให้ใช้ .accessibilityElement(children: .combine) เพื่อรวมองค์ประกอบย่อยเป็นหนึ่งเดียว SwiftUI รองรับ Dynamic Type และ VoiceOver โดยอัตโนมัติ

VStack {
    Image(systemName: "trash")
        .accessibilityLabel(Text("ลบรายการ"))
    Text("ถังขยะ")
        .font(.body)
}
.accessibilityElement(children: .combine)
.accessibilityAddTraits(.isButton)
.accessibilityHint(Text("ลบรายการที่เลือกอย่างถาวร"))

การเข้าถึงใน Android: TalkBack และ contentDescription

TalkBack — โปรแกรมอ่านหน้าจอของ Google ติดตั้งไว้ล่วงหน้าบนอุปกรณ์ Android ส่วนใหญ่ (มีให้ใน Google Play สำหรับ Android 5+ ทุกรุ่น) TalkBack ใช้ท่าทางเดียวกับ VoiceOver: ปัดเพื่อนำทาง แตะสองครั้งเพื่อเปิดใช้งาน นักพัฒนากำหนดคำอธิบายองค์ประกอบผ่านแอตทริบิวต์ android:contentDescription ใน XML หรือผ่าน setContentDescription() ในโค้ด สำหรับ ImageView นั้น contentDescription เป็นข้อบังคับ — หากไม่มี TalkBack จะพูดว่า «ไม่มีป้ายกำกับ» หรืออ่านชื่อไฟล์

// XML: contentDescription สำหรับ ImageView
<ImageView
    android:id="@+id/iconDelete"
    android:src="@drawable/ic_delete"
    android:contentDescription="@string/delete_button_desc"
    android:focusable="true"
    android:clickable="true" />

// Kotlin: การกำหนดเชิงโปรแกรม
iconDelete.contentDescription = getString(R.string.delete_button_desc)

// Accessibility Delegate (กำหนดเอง)
iconDelete.accessibilityDelegate = object : View.AccessibilityDelegate() {
    override fun onInitializeAccessibilityNodeInfo(
        host: View, info: AccessibilityNodeInfo
    ) {
        super.onInitializeAccessibilityNodeInfo(host, info)
        info.text = "ปุ่มลบ"
        info.contentDescription = "ลบรายการที่เลือก"
        info.className = Button::class.java.name
    }
}

// Live Regions สำหรับการอัปเดตแบบไดนามิก
textView.accessibilityLiveRegion = View.ACCESSIBILITY_LIVE_REGION_POLITE

Live Regions — กลไกของ Android สำหรับแจ้ง TalkBack เกี่ยวกับการเปลี่ยนแปลงเนื้อหาโดยไม่ต้องโฟกัส แอตทริบิวต์ android:accessibilityLiveRegion รับสามค่า: none (ไม่มีการแจ้งเตือน), polite (ประกาศหลังจากปัจจุบัน), assertive (ประกาศทันที) ใช้ polite สำหรับการอัปเดตสถานะการโหลด ใช้ assertive สำหรับข้อผิดพลาดที่สำคัญ การใช้ assertive มากเกินไปจะทำให้เกิดความสับสนสำหรับผู้ใช้ — TalkBack จะขัดจังหวะการดำเนินการปัจจุบันอย่างต่อเนื่อง

Accessibility Scanner

Accessibility Scanner — แอปฟรีจาก Google สำหรับทดสอบการเข้าถึงแอป Android โดยไม่ต้องเข้าถึงซอร์สโค้ด สแกนเนอร์ตรวจสอบ: ความคมชัดของข้อความ, ขนาดพื้นที่สัมผัส (ขั้นต่ำ 48×48dp ตามแนวทางการเข้าถึงของ Android), contentDescription สำหรับ ImageView และลำดับชั้นองค์ประกอบที่ถูกต้อง สำหรับการทดสอบอัตโนมัติ ให้ใช้ AccessibilityChecks จาก Espresso — มันรวมเข้ากับ CI/CD และตรวจสอบการเข้าถึงในทุกบิลด์

WCAG 2.1: ความคมชัด ขนาด และพื้นที่สัมผัส

WCAG 2.1 (Web Content Accessibility Guidelines) — มาตรฐานการเข้าถึงระดับสากลที่พัฒนาโดย W3C เวอร์ชัน 2.1 (2018) รวมถึงเกณฑ์เพิ่มเติม 13 ข้อสำหรับแอปพลิเคชันมือถือ ระดับความสอดคล้อง: A (ขั้นต่ำ), AA (ข้อบังคับสำหรับองค์กรส่วนใหญ่), AAA (สูงสุด) Apple และ Google แนะนำระดับ AA เป็นขั้นต่ำสำหรับการเผยแพร่แอป WCAG 2.2 เปิดตัวในปี 2023 โดยมีการปรับปรุงสำหรับโฟกัสและการป้อนข้อมูล

เกณฑ์สำคัญ สำหรับการพัฒนามือถือ: ความคมชัดของข้อความอย่างน้อย 4.5:1 (AA) หรือ 7:1 (AAA), ขนาดพื้นที่สัมผัสอย่างน้อย 44×44pt (iOS) หรือ 48×48dp (Android), รองรับการวางแนวทั้งแนวนอนและแนวตั้งโดยไม่สูญเสียฟังก์ชันการทำงาน, ความสามารถในการปิดใช้งานแอนิเมชัน (prefers-reduced-motion), คำบรรยายสำหรับมัลติมีเดีย และความเข้ากันได้กับการควบคุมด้วยเสียง (Voice Control บน iOS, Voice Access บน Android)

เครื่องมือตรวจสอบความคมชัด — Colour Contrast Analyser (TPGI), WebAIM Contrast Checker, Stark (Figma), Accessibility Inspector (Xcode) ที่ IT Sectr เราตรวจสอบความคมชัดในขั้นตอนการออกแบบ (Figma + Stark) และอีกครั้งในขั้นตอนการพัฒนา (Accessibility Inspector / Accessibility Scanner) ข้อกำหนดขั้นต่ำคือ 4.5:1 สำหรับข้อความทั้งหมดต่ำกว่า 18pt (14pt ตัวหนา) โลโก้และองค์ประกอบตกแต่งไม่ต้องการความคมชัด

การทดสอบการเข้าถึง: เครื่องมือและรายการตรวจสอบ

การทดสอบ iOS — Accessibility Inspector ใน Xcode (Xcode → Open Developer Tool → Accessibility Inspector) ตรวจสอบป้ายกำกับ traits และคำแนะนำสำหรับแต่ละองค์ประกอบ VoiceOver สามารถเปิดใช้งานได้ในการตั้งค่าหรือผ่านทางลัดการเข้าถึง (คลิกปุ่มสามครั้ง) สำหรับการทดสอบอัตโนมัติ ให้ใช้ XCUITest กับ XCTAssertTrue(app.staticTexts["label"].isAccessibilityElement) Apple แนะนำให้ทดสอบหน้าจอแอปทั้งหมดเมื่อเปิด VoiceOver

การทดสอบ Android — Accessibility Scanner (Play Store) ตรวจสอบความคมชัด ขนาดพื้นที่สัมผัส และ contentDescription สำหรับระบบอัตโนมัติ: Espresso AccessibilityChecks (นำเข้า: androidTestImplementation 'androidx.test.espresso:espresso-accessibility:3.5.1') Google แนะนำรายการตรวจสอบดังต่อไปนี้: ImageView ทุกอันมี contentDescription, พื้นที่สัมผัสอย่างน้อย 48×48dp, ข้อความปรับขนาดได้ถึง 200% โดยไม่ถูกตัด และองค์ประกอบทั้งหมดสามารถเข้าถึงได้ด้วยการปัด TalkBack

รายการตรวจสอบ IT Sectr — ก่อนเผยแพร่ เราตรวจสอบ: (1) VoiceOver/TalkBack อ่านองค์ประกอบทั้งหมดถูกต้อง, (2) ข้อความปรับขนาดเป็นขนาดสูงสุดโดยไม่สูญเสียฟังก์ชันการทำงาน, (3) ImageView ทุกอันมี contentDescription, (4) ความคมชัดของข้อความ ≥4.5:1 ในทุกธีม, (5) พื้นที่สัมผัส ≥44pt/48dp, (6) ไม่มีเมนูบริบทที่เข้าถึงได้เฉพาะการกดค้าง, (7) รองรับ Reduce Motion / Remove Animations ในการตั้งค่าระบบ รายการตรวจสอบนี้เป็นส่วนหนึ่งของคำจำกัดความของความสำเร็จของทุกสปรินต์