akjfal

접근성 본문

(구)React 공식문서/고급 안내서

접근성

akjfal 2023. 2. 16. 12:24

접근성

 

접근성 – React

A JavaScript library for building user interfaces

ko.reactjs.org

별칭 : a11y

표준 및 지침

WCAG(Web Content Accessibility Guidelines)

접근성을 갖춘 웹사이트를 만드는데 필요한 지침을 제공합니다.

WAI-ARIA(Web Accessibility Initiative - Accessible Rich Internet Applications)

접근성을 갖춘 javascript 위젯을 만드는데 필요한 기술입니다.

→ React에서는 aria-* 속성을 통해 제공합니다.

→ 카멜케이스로 제공되는 다른 속성과 달리 케밥 케이스로 작성되어야 합니다..

<input
	type='text'
	aria-label="label"
	aria-required="true"
/>

시멘틱 HTML

map등의 내부에서 코드를 동작시키려고 <div>태그를 넣기도 하는데 이러한 것을 피하고 Fragement를 사용해줘야 합니다.

function Sementic(props){
	return (
		<div>
			{props.item.map(item => return (
				<> // <Fragment>를 이렇게 줄여 쓸 수 있다.
					<div>내용 1</div>
					<div>내용 2</div>
				</>
			))}
		</div>

접근성 있는 폼

라벨링

<input>등 form 컨트롤은 구분할 수 있는 라벨이 필요합니다. 따라서 이를 위해서 바닐라 html에서는 for - id를 통해서 사용하는데 React는 htmlFor를 사용하고 있습니다.

<label htmlFor='name'>name</label>
<input id='name'/>

사용자에게 오류 안내하기

오류가 발생하면 사용자에게 볼 수 있도록, 스크린 리더로 읽어주도록 해야합니다.

포커스 컨트롤

키보드만을 사용해서 모든 동작을 할 수 있어야 합니다.

키보드 포커스와 포커스 윤곽선

키보드 포커스는 키보드의 입력을 통해서 동작할 수있는 DOM내의 현재 엘리먼트입니다. 윤곽선을 통해 나타나며 css의 outline 속성을 통해 제어 가능합니다.

원하는 콘텐츠로 건너 뛰기

숨겨진 nav 태그를 통해서 내부의 구역으로 손쉽게 이동할 수 있도록 해야합니다. 따라서 이를 main과 aside와 같은 랜드마크 엘리먼트를 통해 나눠줘야 합니다.

프로그래밍적으로 포커스 관리하기

html은 tabindex를 통해서 동작시킬 수 있으며, React의 경우 DOM엘리먼트의 ref를 사용해서 관리 할 수 있습니다.

const ref = useRef(null);

const handleFocus = () => {
	ref.current.focus();
}

return (
	<div ref={ref}/>
	<button onClick={handleFocus} >포커스</button>
);

또한 HOC(고차 컴포넌트)를 통해 컴포넌트를 확장할 때는 forwardRef를 통해서 제어가 가능합니다.

포커스 관리 예시로 모달창이 있습니다.

  • 모달창의 첫 포커스를 취소로 맞춰 실수로 확인 버튼 누르기 방지하기
  • 키보드 포커스를 모달창 안으로 한정
  • 모달창이 닫힐 때 열게했던 엘리먼트로 포커스 이동

마우스와 포인터 이벤트

마우스나 포인터 이벤트로 동작되는 모든 이벤트들은 키보드만으로 사용할 수 있도록 고려되어야 합니다. 키보드로도 테스트를 해보고 마우스와 같이 동작시킬 수 있는지 여부를 파악해야 합니다.

더운 복잡한 위젯

여러 위젯들은 디자인 패턴들이 존재하기 때문에 이를 파악해서 사용해야 합니다.

기타 고려사항

언어 설정

스크린 리더들이 알맞는 언어를 사용할 수 있도록 하기위해 이를 설정해줘야 합니다.

<html lang='en'>

문서 제목 설정

<title>을 사용해 현재 페이지에 대한 설명을 담아야 합니다.

색 대비

읽을 수 있는 글에 색대비를 주어, 저시력자들도 읽을 수 있도록 해야합니다.

개발 및 테스트 도구

접근성 테스트를 해주는 도구들이 몇 존재합니다.

키보드

직접 하는 방법으로, 마우스를 빼고 테스트해보도록 합니다.

개발 보조 도구

IDE에서 미리 제공해주는 기능들을 사용하도록 권장합니다. ex) eslint-plugin-jsx-a11y

.eslintrc파일에 설정을 해줄 수 있습니다.

브라우저에서 접근성 테스트하기

각종 브라우저에서 제공하는 검사기와 aXe, aXe-core, react-axe등 라이브러리가 존재합니다.

여기까지가 공식문서의 내용을 요약한 것이다. 이제 접근성 자체에 대해서 조사를 해보도록 하겠습니다.

WAI-ARIA에 대해서

aria-activedescendant : DOM에 composite, textbox, group, application 태그에 포커스되어 있을 때 황성화되는 element를 식별합니다.

aria-atomic : aria-relavant 속성에 정의된 알림으로 변경된 assistive technologies들을 알려줄지 말지 정의합니다.

aria-autocomplete : 사용자가 텍스트를 입력할 경우 단어에 대한 예측 여부와 어떠한 예측이 이루어 질 것 인지를 정의합니다.

aria-busy : element가 현재 수정 중이며, 작업이 완료될 때 까지 기다려달라는 표현입니다. 콘텐츠의 업데이트를 aria-live를 통해 알릴 수 있지만, 모든 컨텐츠들이 업데이트 되고 있다는 것을 알 수 없다. 사용자의 사용성을 방해하고 싶지 않을 때 선택적으로 특정 태그에 사용 할 수 있습니다.

aria-checked : 현재 checked가 되어 있는지 표현해줍니다. 하지만 input의 type=checkbox, radio를 사용시 필요없는 태그입니다.

aria-colcount : DOM에 테이블의 모든 열이 없을 경우 열 수를 정의 해줍니다.

aria-colindex : 열 내에서 index를 표시해줍니다.

aria-colspan : aria-colspan내에서 셀 또는 그리드 셀에 걸쳐있는 열 수를 정의해줍니다.

aria-controls : 해당 요소가 컨트롤 하는 요소를 지정해줍니다.

aria-current: null이 아니라면 컨테이너나 관련 요소 내의 현재 항목들을 나타냅니다. → id 를 적어줍니다.

aria-describedby : 속성이 설명된 요소를 지정해줍니다. → id를 적어줍니다.

aria-details : 추가 정보를 제공하는 요소를 지정해줍니다. → id를 적어줍니다.

<label>, aria-label, aria-labelledby는 짧은 설명을 제공합니다.

<title>, aria-description, aria-describedby는 좀 더 긴 텍스트 설명을 제공합니다.

개체와 관련된 추가정보, 복잡한 설명은 aria-details를 사용합니다.

aria-disabled : element는 존재하지만, 비활성화 되어있음을 알려줍니다.

aria-errormessage : 오류 메시지를 제공하는 요소를 지정합니다.

aria-expanded : dropdown과 같은 컨트롤러가 확장되어있는지, 자식이 표시되어있는지 여부를 나타냅니다.

aria-flowto : 콘텐츠 읽기 순서에서 다음 요소를 지정한다. id array를 통해 다음으로 이동한 요소들을 지정할 수 있습니다.

aria-haspopup : 팝업의 종류를 지정합니다. ex) menu, dialog…

aria-hidden : 요소가 접근성 api에 노출 여부를 지정합니다.

aria-invalid : 유효성 검사를 통과하지 못한 상태임을 나타냅니다.

aria-keyshortcuts : element를 활성화 하거나, 포커스를 주기 위해 지정해놓은 단축키를 나타냅니다.

aria-label : element에 대한 설명을 적어줍니다.

aria-labelledby : label을 지정합니다.

aria-level : header, treeid 등에서 level을 지정해줍니다.

aria-live : 해당 요소가 업데이트 될 것임을 나타냅니다.

aria-modal : 모달인지 여부를 나타냅니다.

aria-multiline : 여러줄 입력을 허용하는지 여부를 나타냅니다.

aria-multiselectable : 하위 항목에서 둘 이상의 항목을 선택할 수 있음을 나타냅니다.

aria-orientation : 요소의 방향이 수직, 수평, 알 수 없는지 등을 나타냅니다.

aria-owns : dom계층 구조를 통해 관계를 나타낼 수 없을 때 부모 자식 요소간 시각적, 기능적 관계를 나타냅니다.

aria-placeholder : placeholder를 제공합니다.

aria-posinset : position in set의 약자로 하위 항목만 DOM에 있는 경우 전체 목록 항목 또는 트리 항목 집합 내에서 요소의 위치를 지정합니다.

aria-pressed : 토글 버튼이 현재 눌림 상태임을 나타냅니다.

aria-readonly : readonly 상태임을 나타냅니다.

aria-relevant : live내 접근성 트리가 수정 될 경우 발생시킬 알람을 지정합니다.

aria-required : form 제출 전에 필수 값임을 나타냅니다.

aria-roledescription : 요소의 역할에 대한 설명을 나타냅니다.

aria-rowcount : 테이블, 트리 등의 총 행수를 정의합니다.

aria-selected : 선택된 상태임을 나타냅니다.

aria-setsize : 집합 모든 항목이 DOM에 없을 때 현재 목록 항목이나 트리 항목 수를 나타냅니다.

aria-sort : 오름차순, 내림차순을 나타냅니다.

aria-valuemax : 최대 값을 정의합니다.

aria-valuemin : 최소 값을 정의합니다.

aria-valuenow : 현재 값을 나타냅니다.

aria-valuetext : 사람이 읽을 수 있는 대체 텍스트를 정의합니다.

a11y google Rob Dodson

  • tab을 통해서 포커스를 이동하는데 사이드바 등으로 인해서 컨텐츠 내용물로 이동하는데 오래 걸릴 수 있습니다. 이때 inert 속성을 통해서 해당 필드를 활성화 비활성화 시켜 조절할 수 있습니다.
  • non-interactive 인 속성은 tab을 통해서 접근할 수 없습니다. 따라서 스크린 리더에서 읽도록 해주기 위해서는 aria-*를 통해서 처리해줘야 합니다.
  • a tag : 다른 페이지나 같은 페이지의 위치 등 연결하는 하이퍼링크 생성 → 링크의 목적지 설명을 나타내야합니다.
  • aria의 state와 properties
  • properties 는 잘 안 변하고 state는 자주 변합니다.
  • 14강의 경우 w3의 aria 문서를 보는 법을 설명해주니 영상을 보는 것을 추천합니다.

https://www.youtube.com/watch?v=QbV8M2btU8c

'(구)React 공식문서 > 고급 안내서' 카테고리의 다른 글

Fragment  (0) 2023.02.16
Ref 전달하기  (0) 2023.02.16
Error Boundaries  (0) 2023.02.16
Context  (0) 2023.02.16
코드 분할  (0) 2023.02.16
'(구)React 공식문서/고급 안내서' Related Articles more
Comments