앱 접근성 적용해보기!

[Eunice0927]

접근성(VoiceOver)이란?

오디오를 통해서 화면을 보지 못하는 사람이나, 시력이 낮은 사용자를 대상으로 더 쉽게 앱을 사용할 수 있도록 문구를 읽어주는 기능을 말한다. VoiceOver는 시력이 안좋은 사람 뿐만이 아니라, 다른 사용자도 사용한다. 멀미에 취약한 사람이 움직이는 차량에 있는 동안 앱을 사용할 때 VoiceOver 기능을 사용하기도 한다.

참고자료

• https://ios-development.tistory.com/1373
• https://lietenant-k.tistory.com/47
• https://ios-development.tistory.com/1506

소스코드

import UIKit

class ViewController: UIViewController {
    private let firstTopLabel: UILabel = UILabel()
    private let firstBottomLabel: UILabel = UILabel()
    private let secondTopLabel: UILabel = UILabel()
    private let secondBottomLabel: UILabel = UILabel()
    private let stackView = UIStackView()

    override func viewDidLoad() {
        super.viewDidLoad()
        setLabelsUI()
        //setButtonUI() //코드 테스트중
        setUpAccessiblityLabel()

    }

    private func setLabelsUI() {
        firstTopLabel.text = "title1"
        firstBottomLabel.text = "title2"
        secondTopLabel.text = "title3"
        secondBottomLabel.text = "title4"

        [firstTopLabel, firstBottomLabel, secondTopLabel, secondBottomLabel].forEach {
            view.addSubview($0)
            $0.translatesAutoresizingMaskIntoConstraints = false
            $0.font = .systemFont(ofSize: 18, weight: .regular)
            $0.numberOfLines = 0
            $0.textAlignment = .center
        }

        NSLayoutConstraint.activate([
            firstTopLabel.topAnchor.constraint(equalTo: view.topAnchor, constant: 120),
            firstTopLabel.leadingAnchor.constraint(equalTo: view.leadingAnchor, constant: 16),

            firstBottomLabel.topAnchor.constraint(equalTo: firstTopLabel.bottomAnchor, constant: 5),
            firstBottomLabel.leadingAnchor.constraint(equalTo: firstTopLabel.leadingAnchor),

            secondTopLabel.topAnchor.constraint(equalTo: firstTopLabel.topAnchor),
            secondTopLabel.leadingAnchor.constraint(equalTo: firstTopLabel.trailingAnchor, constant: 15),

            secondBottomLabel.topAnchor.constraint(equalTo: firstBottomLabel.topAnchor),
            secondBottomLabel.leadingAnchor.constraint(equalTo: secondTopLabel.leadingAnchor)
        ])
    }

    private func setUpAccessiblityLabel() {
        var elements: [Any] = []

        [firstTopLabel, firstBottomLabel, secondTopLabel, secondBottomLabel].forEach {
            elements.append($0)
        }

        accessibilityElements = elements
    }

    private func setUpAccessibilityLabelColoumn() {
        var elements: [Any] = []

        let leftGroup = UIAccessibilityElement(accessibilityContainer: self)
        leftGroup.accessibilityLabel = "\(String(describing: firstTopLabel.text)), \(String(describing: firstBottomLabel.text))"
        leftGroup.accessibilityFrameInContainerSpace = firstTopLabel.frame.union(firstBottomLabel.frame)

        let rightGroup = UIAccessibilityElement(accessibilityContainer: self)
        rightGroup.accessibilityLabel = "\(String(describing: secondTopLabel.text)), \(String(describing: secondBottomLabel.text)))"
        rightGroup.accessibilityFrameInContainerSpace = secondTopLabel.frame.union(secondBottomLabel.frame)

        elements.append(leftGroup)
        elements.append(rightGroup)

        accessibilityElements = elements
    }

//    private func setButtonUI() {
//        stackView.axis = .vertical
//        stackView.spacing = 8
//        stackView.translatesAutoresizingMaskIntoConstraints = false
//        view.addSubview(stackView)
//        
//        NSLayoutConstraint.activate([
//            stackView.centerXAnchor.constraint(equalTo: view.centerXAnchor),
//            stackView.topAnchor.constraint(equalTo: secondBottomLabel.bottomAnchor, constant: 20)
//        ])
//        
//        var config = UIButton.Configuration.tinted()
//        config.title = "Change Accessebility\nGroup"
//        
//        let changeGroupButton = UIButton()
//        stackView.addArrangedSubview(changeGroupButton)
//        
//        changeGroupButton.configurationUpdateHandler = { button in
//            var container = AttributeContainer()
//            container.font = .systemFont(ofSize: 20, weight: .bold)
//            
//            var configuration = button.configuration
//            
//            switch button.state {
//                
//            case .selected:
//                container.foregroundColor = .white
//                configuration?.background.backgroundColor = .systemBlue
//                configuration?.attributedTitle = AttributedString("준비 완료!", attributes: container)
//            case .highlighted:
//                break
//            default:
//                container.foregroundColor = .black
//                configuration?.background.backgroundColor = .systemGray6
//                configuration?.attributedTitle = AttributedString("준비", attributes: container)
//            }
//            
//            button.configuration = configuration
//        }
//    }
}