Tùy chỉnh văn bản trợ năng trong Swift dựa trên hướng lấy nét

Nâng cao khả năng truy cập VoiceOver cho các thành phần giao diện người dùng động

Khi tạo một ứng dụng iOS toàn diện, các nhà phát triển thường phải đối mặt với những thách thức đặc biệt với chức năng VoiceOver. Một câu hỏi phổ biến là liệu văn bản trợ năng của UIView có thể tự động điều chỉnh dựa trên hướng di chuyển của tiêu điểm hay không. 🧭

Hãy tưởng tượng một bố cục có Nhãn trên cùng, chế độ xem bộ sưu tập hoạt động như một lưới các ô và Nhãn dưới cùng. Mỗi ô trong chế độ xem bộ sưu tập đều có thể truy cập độc lập, mang lại trải nghiệm hợp lý cho người dùng trình đọc màn hình. Nhưng đôi khi, hành vi trợ năng mặc định không đáp ứng đầy đủ nhu cầu của người dùng.

Ví dụ: khi người dùng điều hướng từ Nhãn hàng đầu đến ô đầu tiên trong chế độ xem bộ sưu tập, việc cung cấp ngữ cảnh bổ sung như “Bảng có n hàng và cột” có thể hữu ích. Điều này giúp tăng cường sự rõ ràng và khả năng sử dụng, đặc biệt đối với lưới hoặc cấu trúc dữ liệu phức tạp.

Mặt khác, khi điều hướng ngược lại, từ Nhãn dưới cùng trở lại ô cuối cùng, việc tùy chỉnh văn bản có thể khiến các tương tác trở nên trực quan và liền mạch hơn. Hãy cùng tìm hiểu cách thực hiện điều chỉnh linh hoạt này trong Swift bằng các ví dụ thực tế. 🚀

Tối ưu hóa nhãn trợ năng với tiêu điểm động

Trong ví dụ về tập lệnh đầu tiên, chúng tôi sử dụng phương thức `didUpdateFocusIn` từ giao thức UICollectionViewDelegate để theo dõi thời điểm tiêu điểm VoiceOver di chuyển giữa các thành phần. Phương pháp này cho phép các nhà phát triển phát hiện cả chế độ xem được tập trung trước đó và chế độ xem tiếp theo, khiến nó trở nên lý tưởng cho việc điều chỉnh theo ngữ cảnh. Bằng cách kiểm tra xem chế độ xem tập trung tiếp theo có phải là UICollectionViewCell hay không, tập lệnh sẽ tự động cập nhật thuộc tính accessibilityLabel với ngữ cảnh liên quan. Ví dụ: khi di chuyển tiêu điểm từ nhãn trên cùng sang ô bộ sưu tập, chúng tôi sẽ nối thêm thông tin như "bảng có n hàng và cột," mang lại sự rõ ràng hơn cho người dùng dựa vào các công nghệ hỗ trợ. 🧑‍💻

Tập lệnh thứ hai có cách tiếp cận rộng hơn bằng cách sử dụng NotificationCenter, lắng nghe `UIAccessibility.elementFocusedNotification`. Thông báo này truyền tải những thay đổi về trọng tâm VoiceOver trên ứng dụng. Bằng cách xử lý thông báo này, tập lệnh sẽ tự động xác định phần tử nào có tiêu điểm và cập nhật accessibilityLabel của nó cho phù hợp. Cách tiếp cận này đặc biệt hữu ích khi nhiều thành phần trong một giao diện người dùng phức tạp cần các bản cập nhật nhận biết tiêu điểm tương tự. Ví dụ: hãy tưởng tượng một lưới các thẻ tương tác trong đó mỗi thẻ thay đổi mô tả dựa trên hướng tập trung—việc này được xử lý hiệu quả bằng thông báo.

Cả hai cách tiếp cận đều có tính mô-đun và có thể tái sử dụng. Tập lệnh đầu tiên được tích hợp chặt chẽ với UICollectionView, khiến tập lệnh này trở thành giải pháp lý tưởng cho các giao diện người dùng chủ yếu dựa trên chế độ xem bộ sưu tập. Mặt khác, tập lệnh dựa trên thông báo linh hoạt hơn và hoạt động tốt trên nhiều bố cục khác nhau, chẳng hạn như lưới kết hợp với nhãn và nút. Việc sử dụng thuộc tính tùy chỉnh như `customAccessibilityLabel` đảm bảo rằng các cập nhật cho văn bản trợ năng không ảnh hưởng đến chức năng cơ bản của các thành phần giao diện người dùng. Ví dụ: trong một ứng dụng du lịch, khi trọng tâm chuyển sang thẻ điểm đến, thông tin chi tiết của thẻ có thể tự động bao gồm liệu thẻ đó có phải là một phần của danh sách nổi bật hay đề xuất hay không, từ đó làm phong phú thêm trải nghiệm của người dùng. ✈️

Điểm mấu chốt của những cách triển khai này là đảm bảo rằng accessibilityLabel ngắn gọn nhưng vẫn mang tính mô tả. Việc thêm ngữ cảnh định hướng khi dịch chuyển tiêu điểm có thể giúp người dùng tránh nhầm lẫn khi điều hướng các giao diện phức tạp. Ví dụ: bằng cách chỉ định "Nhãn hàng đầu cho ô 1, bảng", người dùng có thể hiểu cả vị trí của họ trong giao diện người dùng và cấu trúc mà họ đang tương tác. Việc tích hợp chu đáo các tính năng trợ năng này không chỉ đáp ứng các nguyên tắc của WCAG mà còn tạo ra trải nghiệm trực quan, lấy người dùng làm trung tâm. Cả hai giải pháp đều đảm bảo rằng khả năng tiếp cận vẫn là ưu tiên hàng đầu trong quá trình phát triển ứng dụng iOS.

// Approach 1: Using Accessibility Focus Delegates
import UIKit
class AccessibleCollectionViewCell: UICollectionViewCell {
    override var accessibilityLabel: String? {
        get {
            return customAccessibilityLabel
        }
        set {
            customAccessibilityLabel = newValue
        }
    }
    private var customAccessibilityLabel: String?
}
class ViewController: UIViewController, UICollectionViewDelegate {
    @IBOutlet weak var topLabel: UILabel!
    @IBOutlet weak var collectionView: UICollectionView!
    @IBOutlet weak var bottomLabel: UILabel!
    override func viewDidLoad() {
        super.viewDidLoad()
        collectionView.delegate = self
    }
    func collectionView(_ collectionView: UICollectionView,
                        didUpdateFocusIn context: UICollectionViewFocusUpdateContext,
                        with coordinator: UIFocusAnimationCoordinator) {
        if let nextFocusedCell = context.nextFocusedView as? AccessibleCollectionViewCell {
            let direction = context.previouslyFocusedView is UILabel ? "table with n Rows, n Columns" : ""
            nextFocusedCell.accessibilityLabel = "\(nextFocusedCell.customAccessibilityLabel ?? ""), \(direction)"
        }
    }
}

// Approach 2: Using Notification Center
import UIKit
class ViewController: UIViewController {
    @IBOutlet weak var collectionView: UICollectionView!
    private var lastFocusedElement: UIView?
    override func viewDidLoad() {
        super.viewDidLoad()
        NotificationCenter.default.addObserver(self,
                                               selector: #selector(handleFocusChange),
                                               name: UIAccessibility.elementFocusedNotification,
                                               object: nil)
    }
    @objc private func handleFocusChange(notification: Notification) {
        guard let userInfo = notification.userInfo,
              let focusedElement = userInfo[UIAccessibility.focusedElementUserInfoKey] as? UIView else { return }
        if let cell = focusedElement as? UICollectionViewCell,
           lastFocusedElement is UILabel {
            cell.accessibilityLabel = "\(cell.accessibilityLabel ?? ""), table with n Rows, n Columns"
        }
        lastFocusedElement = focusedElement
    }
}

Tạo trải nghiệm tiếp cận năng động và theo ngữ cảnh

Khả năng truy cập là nền tảng của việc phát triển ứng dụng hiện đại, đặc biệt là đối với các nền tảng như iOS nơi các công cụ hỗ trợ như VoiceOver đóng vai trò then chốt. Một khía cạnh sắc thái nhưng thường bị bỏ qua là khả năng cung cấp bối cảnh động dựa trên hướng tập trung của điều hướng. Bằng cách triển khai logic theo dõi xem tiêu điểm di chuyển từ trên xuống dưới hay ngược lại, nhà phát triển có thể thêm các chi tiết có ý nghĩa vào văn bản trợ năng của các thành phần, làm phong phú trải nghiệm người dùng. Ví dụ: trong ứng dụng thư viện dựa trên lưới, các ô có thể mô tả vị trí và ngữ cảnh của chúng khi tiêu điểm chuyển từ tiêu đề vào lưới, giúp người dùng hiểu vị trí của chúng trong cấu trúc. 🔍

Một điểm quan trọng khác là việc điều chỉnh động này không bị giới hạn ở UICollectionView. Nó cũng có thể được áp dụng cho các thành phần khác như UITableView, ngăn xếp hoặc chế độ xem tùy chỉnh. Ví dụ: nếu người dùng điều hướng bảng nhiều phần, tiêu đề có thể thêm ngữ cảnh về các hàng bên dưới chúng khi tiêu điểm đi vào hoặc thoát khỏi phần đó. Điều này đảm bảo rằng người dùng điều hướng bằng VoiceOver có thể nhận biết được không gian và phân cấp của giao diện mà không cần nỗ lực thêm, thúc đẩy khả năng sử dụng và tuân thủ các tiêu chuẩn WCAG. 🎯

Ngoài các trường hợp sử dụng cơ bản, kỹ thuật này còn hỗ trợ các mẫu tương tác nâng cao. Ví dụ: trong một ứng dụng giáo dục, khi một câu hỏi trắc nghiệm thu hút được sự chú ý, nó có thể thông báo các chi tiết như số câu hỏi, tổng số câu hỏi còn lại hoặc thậm chí là gợi ý về chủ đề. Những chi tiết như vậy nâng cao mức độ tương tác và giảm tải nhận thức cho người dùng dựa vào công nghệ hỗ trợ. Các nhà phát triển phải ưu tiên những cải tiến năng động này để đảm bảo ứng dụng của họ phục vụ nhiều đối tượng một cách hiệu quả và toàn diện. 🌍