널리

안녕하세요, 엔비전스입니다.

매년 2월에는 1년 동안 엔비전스에서 연재한 널리 아티클을 돌아보는 글을 작성해 왔습니다. 올해도 어김없이 2019년 동안 엔비전스에서 작성한 아티클들을 다시 한번 요약하고 2020년의 아티클 작성 방향에 대해 기술하려고 합니다.

2019년에는 기존에 항상 연재해 온 웹, 모바일 접근성, 운영체제 플랫폼 접근성과 더불어 접근성 API 디버깅, CSS 관련 접근성 이슈를 다룬 것이 특징입니다.

다음은 각 주제별 아티클 요약입니다.

CSS 접근성

1. Windows 고대비 모드 사용자를 위한 MS 고대비 반응형 웹 제작하기 1부, 2부에서는 고대비 모드로 웹페이지 사용 시 ms-high-contrast 미디어 쿼리를 통해 특정 CSS를 적용하여 MS 브라우저에서 고대비 모드에서도 호환되는 홈페이지를 제작할 수 있는 가이드를 제공합니다.
2. 저사양 디바이스와 웹 접근성을 위한 애니메이션 동작 줄이기 미디어 쿼리 사용하기: prefers-reduced-motion 소개에서는 여러 운영체제에서 지원하는 애니메이션 동작 줄이기 설정에 반응하는 prefers-reduced-motion 미디어 쿼리를 소개하여 애니메이션에 민감한 사람들을 위한 접근성 개선에 대해 다룹니다.

1. 내 키보드는 어디를 보고 있을까? – 포커스 링 디자인의 중요성에서는 outline, border, box-shadow 등으로 포커스 링을 디자인하는 방법과 예제코드, 주의사항을 기술함으로써 키보드 사용자를 위한 포커스링 디자인 시 접근성을 고려할 수 있는 가이드를 제공합니다.
2. 누구나 쉽게 이해할 수 있는 커스텀 UI 디자인 - 요소 외형 디자인 및 힌트 제공하기에서는 커스텀 컨트롤의 접근성 구현 시 자칫 간과하기 쉬운 요소 유형에 맞는 시각적 디자인의 중요성에 대해 살펴보고 올바른 시각적 디자인 및 힌트 적용 예시에 대해 다룹니다.
3. 미래의 CSS - 시스템 환경에 반응하는 미디어 쿼리 소개에서는 여러 운영체제에서 지원 중인 다크 테마에 반응하는 prefers-color-scheme 미디어 쿼리 소개 및 각 운영체제별 다크 테마 설정방법, 앞으로 지원 예정인 고대비 미디어 쿼리, prefers-reduced-transparency 등의 여러 접근성과 관련된 미디어 쿼리 속성에 대해 다룹니다.
4. 내 키보드는 어디를 보고 있을까? – 포커스 링 디자인의 중요성에서는 outline, border, box-shadow 등으로 포커스 링을 디자인하는 방법과 예제 코드, 주의사항을 기술함으로써 키보드 사용자를 위한 포커스링 디자인 시 접근성을 고려할 수 있는 가이드를 제공합니다.
5. 누구나 쉽게 이해할 수 있는 커스텀 UI 디자인 - 요소 외형 디자인 및 힌트 제공하기에서는 커스텀 컨트롤의 접근성 구현 시 자칫 간과하기 쉬운 요소 유형에 맞는 시각적 디자인의 중요성에 대해 살펴보고 올바른 시각적 디자인 및 힌트 적용 예시에 대해 다룹니다.
6. 미래의 CSS - 시스템 환경에 반응하는 미디어 쿼리 소개에서는 여러 운영체제에서 지원 중인 다크 테마에 반응하는 prefers-color-scheme 미디어 쿼리 소개 및 각 운영체제별 다크 테마 설정 방법, 앞으로 지원 예정인 고대비 미디어 쿼리, prefers-reduced-transparency 등의 여러 접근성과 관련된 미디어 쿼리 속성에 대해 다룹니다.

HTML 마크업 및 브라우저 접근성 API

1. WAI-ARIA 바르게 사용하기 7부, 8부에서는 미디어 플레이어 등에서 사용되는 커스텀 슬라이더 컨트롤 및 자동완성 편집창 내에서의 자동완성 지원 여부 및 하위 자동완성 리스트 탐색을 도울 수 있는 slider, combobox, aria-owns, aria-activedescendant 속성 등에 대해 다룹니다.
2. Chrome, Firefox 브라우저에서 제공하는 접근성 트리 검사 기능 살펴보기에서는 접근성을 테스트할 때 스크린 리더가 특정 요소를 지원하지 못하는 경우 브라우저의 접근성 API 지원 문제인지를 확인하기 위한 크롬과 파이어폭스에서 지원하는 접근성 트리 검사기의 사용법에 대해 알아봅니다.
3. 모바일 웹 브라우저에서 접근성 이슈 디버깅하기에서는 모바일 크롬, 파이어폭스, 사파리 브라우저에서 접근성 이슈를 테스트하는 경우 PC와 모바일을 연결하여 PC에서 모바일 브라우저의 DOM 및 접근성 트리를 확인하는 방법에 대해 기술합니다.

모바일 및 문서 접근성

1. 안드로이드 접근성을 고려한 XML 마크업 5부, 6부에서는 모바일 네이티브 앱에서 흔히 사용되는 버튼 마크업 시 주의사항, 커스텀 컨트롤을 번으로 읽어주도록 하는 방법 및 키보드 접근성 구현 등에 대해 알아봅니다.
2. 안드로이드 앱 접근성 트리 디버깅하기 1부, 2부에서는 안드로이드 네이티브 앱의 접근성 이슈를 조금 더 정확하게 파악하기 위해 톡백 스크린리더에서 읽어주는 각 요소의 접근성 트리를 디버깅하는 방법 및 장점 등에 대해 알아봅니다.
3. PDF 문서에 접근성 적용하기 2부에서는 PDF에서 스크린 리더 사용자가 문서를 올바르게 읽을 수 있도록 하는 접근성 태그를 상황에 따라 수동으로 추가해야 하는 이유 및 아크로뱃 프로 버전에서 태그 삽입 화면의 접근 방법에 대해 다룹니다.

운영체제 플랫폼 및 스크린리더

1. NVDA 추가 기능 개발 가이드라인 4부, 5부에서는 NVDA 스크린리더에서 특정 화면이나 상황에서 정보를 더 효율적으로 음성 출력할 수 있도록 지원하는 추가 기능 제작 영역에서의 글로벌 플러그인 및 특정 응용 프로그램에서 동작하는 플러그인을 제작하는 방법에 대해 다룹니다.
2. Windows 10 Version 1803, 1809, 1903에서의 업데이트된 접근성 기능 살펴보기에서는 윈도 접근성 설정 UI 변경을 통한 효율적인 설정, 저시력 사용자를 위한 확대 기능 향상 및 다크 테마 지원, 내레이터의 변경된 설정 등에 대해 살펴봅니다.
3. iOS 13에서 변경된 접근성 기능 알아보기 1부, 2부에서는 접근성 설정 화면 위치 변경, UINavigation 컨트롤러 적용시 보이스오버 초점 이동 방식의 변화, 자막패널 도입 등 접근성 테스트 시에 참고할 수 있는 여러 변경된 사항들에 대해 다룹니다.

2020년 아티클 계획

엔비전스에서는 2020년에도 접근성과 관련된 여러 유용한 아티클을 준비하고 있습니다.

1. WAI-ARIA 1.2에서의 변경되는 내용들에 대해 다룰 예정입니다.
2. 커스텀 웹 요소의 초점을 관리하는 blocking-element에 대해 다룰 예정입니다.
3. 안드로이드의 커스텀 체크박스 구현을 위한 자바 메서드에 대해 다룰 예정입니다.
4. iOS와 안드로이드 네이티브 접근성 API에서 다루는 힌트 메시지의 종류와 차이점 등에 대해 다룰 예정입니다.
5. iOS 네이티브 앱에서의 접근성 구현 시 참고할 수 있는 이슈들을 다룰 예정입니다.
6. 이 밖에도 각 플랫폼 별 접근성 업데이트 소식 및 기타 여러 주제에 대해 다룰 예정입니다.

2020년에도 널리 아티클과 함께 조금 더 나은 접근성 향상을 위해 함께 앞으로 나아갔으면 좋겠습니다.