창 접근성 실용 안내서

저자: Adewale Abati✏️

소개

우리가 인코딩을 배우기 시작한 순간부터 사용자가 상호작용하는 데이터를 수집하는 것은 매우 어려운 일이다.사용자로부터 데이터를 수집하기 위해서 우리는 어떤 유형의 폼이 필요하다.
의견을 수집하는 것부터 등록, 로그인, 구매 또는 응용 프로그램에서 피드백을 제공하는 것까지 우리는 모두 표를 사용한다.폼은 웹의 관건적인 부분이기 때문에, 우리는 모든 사람이 폼과 상호작용을 할 수 있도록 확보해야 한다. 장애가 있든 없든 간에.

왜 얘가 중요해?

접근성은 일반적으로 맹인 사용자에게 적응하는 방식으로만 여겨지지만, 그것에 그치지 않는다.장애의 형태는 손이나 팔 부상 등 일시적인 장애, 인터넷 속도가 느린 상황성 장애, 실명 등 영구적인 장애를 포함해 다양하다.
우리는 우리의 모든 사용자가 폼을 사용할 수 있도록 확보하고 싶다. 언제든지 나쁜 경험을 하지 않기를 바란다. 우리의 목표는 이러한 관건적인 사용자의 상호작용이 가능한 한 마찰이 없도록 하는 것이다.표를 방문할 수 있게 되면 장애인뿐만 아니라 모든 사람에게 더욱 쉽게 사용할 수 있다.
또 주의해야 할 것은 미국, 영국, 캐나다를 포함한 많은 국가의 기업에 대해 comply with web accessibility standards의 등록이 갈수록 중요해지고 법률적 요구가 되고 있다는 것이다.
2016년에 Target paid millions to the National Federation of the Blind은 그들의 제품 이미지에alt 텍스트가 없고 다른 접근 가능한 문제가 없기 때문이다.최근 U.S. Supreme Court rejected a petition from Domino’s이 하급법원에서 맹인 한 명에게 패했다. 이 맹인은 스크린 리더를 사용해 사이트에서 주문을 내릴 수 없어 회사를 고소했다.
더 많은 국가들이 유사한 법률을 통해 더 많은 기준을 제정하고 사이트에 무장애를 실현하는 명확한 절차를 제공하는 것은 시간문제일 뿐이다.

고려 사항

기존 양식을 개선하거나 새 양식을 만들려면 다음 단계를 확인하기 위해 몇 가지 방법을 찾아야 합니다.

사용자는 어떤 정보를 제공하고 어떤 형식으로 제공해야 하는지 쉽게 확인할 수 있습니까?

시각장애 환자는 표를 사용할 때 어떤 어려움을 겪을 수 있습니까?

표는 화면 판독기를 통해 처리됩니까?

표는 논리적이고 이해하기 쉽습니까?

사용자는 키보드로만 양식을 작성할 수 있습니까?

접근 가능한 폼을 만드는 방법

모든 사람이 완전히 접근할 수 있도록 폼을 개선하는 데 도움을 줄 수 있는 많은 방법이 있다.다음은 몇 가지 권장 사항입니다.

의미 HTML 작성

이것은 첫 번째입니다. 정확한 HTML 요소를 사용하면 많은 접근성 문제가 해결될 수 있기 때문입니다.100 HTML elements여 개가 있는데, 모든 사람이 임무를 수행하는 독특한 목적을 가지고 있다.
HTML의 끊임없는 개선으로 인해 사용자 정의 JavaScript 코드와 결합된 다른 요소를 사용하여 다른 요소처럼 작업할 필요가 없습니다.사용자 정의 button 대신 div 요소를 올바른 위치에 사용하여 버튼과 유사한 모양과 기능을 제공합니다.이로써 화면 판독기는 사용자에게 요소에 대한 더 많은 정보를 제공하기 쉽다.

적절한 HTML 입력 유형 사용하기

많은 HTML 입력 유형이 있는데, 모든 유형의 생성은 사용자로부터 특정 유형의 데이터를 쉽게 검색하기 위한 것이다.정확한 type 및 name 속성(예를 들어 type="password"은 표시된 텍스트를 숨기고 type="email"은 전자메일을 수집하는 데 도움이 됨)을 지정하여 브라우저는 데이터를 수신하는 데 최적화되고 사용자에게 자동 충전 조언을 제공할 수 있습니다.

휴대전화에서 정확한 입력 유형을 사용하면 상응하는 키보드를 표시할 수 있다.예를 들어 type="tel"을 사용할 때 키보드는 전화번호를 입력하기 위해 키보드를 표시하고, type="email"은 키보드를 표시하며, 그 중에서 @ 단추는 우선순위에 따라 배열된다.
휴대폰의 입력 유형 = "tel"
휴대폰의 입력 유형 = "이메일"
또한 <input type="submit">을 사용하여 폼에 제출 단추를 만드십시오.이것은 사용자가 키보드의 enter 단추를 누르기만 하면 제출할 수 있도록 합니다.

태그에 HTML 입력 유형 연결

나는 태그가 HTML에서 가장 과소평가된 요소 중의 하나라고 생각한다.그것들은 상당히 강해서 많은 일을 더욱 잘 할 수 있다.입력 요청한 데이터의 표시 목적을 이해하는 것 외에 더욱 이해할 수 있다.for 속성을 사용하여 태그를 입력에 직접 연결하면 가용성을 높일 수 있습니다.

<label for="hungry">Are you hungry?:</label>
<input type="checkbox" name="hungry" id="hungry">

이렇게 하면 입력 요소마다 더 큰 목표 크기를 얻을 수 있습니다. 탭을 누르면 입력을 초점에 맞출 수 있기 때문입니다.이것은 운동 장애자에게 매우 유용하다. 특히 그들이 반드시 비교적 작은 요소 (예를 들어 라디오나 복선상자) 를 선택해야 할 때.화면 판독기는 포커스에서 간단하게 입력 유형을 가리키는 대신 입력된 연결 탭을 읽습니다.
탭을 클릭하여 체크 상자를 터치합니다.for에 표시된 <label> 속성은 관련 요소의 id 속성과 같아서 그것들을 한데 묶어야 한다. 위의 예시와 같다.시각 장애가 없는 사용자에게는 탭과 연결 폼 필드를 시각적으로 쉽게 연결할 수 있어야 한다.

자리 표시자만 사용하여 예상 값을 설명합니다.

어떤 경우, 사용자는 탭 대신 자리 표시자만 남기고 입력마다 무엇을 포함해야 하는지 알려 줍니다.이 방법의 문제는 사용자가 입력하기 시작하면 자리 표시자가 사라진다는 것이다.
인지 장애자도 종종 자리 차지 문자에 문제가 있다. 왜냐하면 그것은 미리 텍스트를 채운다고 가정할 수 있기 때문이다.자리 표시자를 통해 설명을 제공하지 마십시오.그것들은 라벨의 대체품이 아니다.

추가 도움말 텍스트 제공

폼에 필요한 데이터의 유형에 따라 필요할 때 폼 맨 위에 설명을 포함하는 것이 가장 좋다.각 필드에는 <label> 요소가 하나만 허용되므로 입력에 대한 설명 텍스트가 필요한 경우 aria-describedby 속성을 사용하여 양식 필드와 연결할 수 있습니다.양식 필드에 초점이 맞춰지면 화면 판독기가 탭과 이 도움말 텍스트를 동시에 선언합니다.

<label for="employment_date">Employment date:</label>
<input type="date" name="employment_date" id="employment_date" aria-describedby="employment_date_help">
<span id="employment_date_help">MM/DD/YYYY</span>

또한 사용자가 이해하기 쉽기 때문에 지루한 묘사적인 메시지가 아니라 입력 데이터의 예시를 포함할 것을 권장합니다.

그룹과 관련된 폼 컨트롤

하나의 목적을 위해 여러 개의 컨트롤을 제공해야 하는 경우 (일반적으로 라디오 단추나 체크 상자를 사용할 때) <fieldset></fieldset> 요소를 사용하여 그룹을 나누고 <legend></legend>을 사용하여 설명 텍스트를 제공하는 것을 강력히 권장합니다.
은 필드 집합을 사용하여 컨트롤을 그룹화합니다.<fieldset></fieldset>과 <legend></legend>을 사용하면 그룹 컨트롤이 초점 위치에 있으면 텍스트 설명이 화면 판독기 사용자에게 읽힐 수 있습니다.

액세스 가능 검증

양식의 검증은 서버 측 또는 클라이언트에서 JavaScript를 사용하여 수행됩니다.HTML5는 이메일 주소와 같은 입력을 검증하는 데 도움이 되는 일련의 내장 기능을 제공합니다.오류가 발생했을 때, 중요한 것은 액세스 가능한 방식으로 사용자에게 표시하는 것이다. 이것은 사용자가 화면 판독기를 더욱 쉽게 사용할 수 있도록 하는 것을 포함한다.
따라서 화면 판독기가 이를 지원하므로 속성 role="alert"이 있는 오류 메시지가 표시되고 오류가 즉시 사용자에게 알려집니다.오류 메시지에는 사용자가 오류를 수정할 수 있도록 조언이나 예시도 포함될 수 있습니다.
일반적인 방법은 모든 오류를 모아 폼 맨 위에 추가하는 것이지만, 오류를 입력과 직접 연결하는 것이 가장 좋다.아래에 오류 메시지를 추가하여 aria-과 연결하고 어떤 입력 필드에 오류가 있는지 직관적으로 표시합니다.
필수 입력 필드에는 레이블을 사용하여 식별해야 합니다.HTML5는 또한 required 속성을 제공하여 이 속성을 폼 컨트롤에 추가하여 필요한 것을 표시할 수 있습니다.이 속성은 현대 웹 브라우저에서 지원되며 사용자에게 부족한 입력을 전달합니다.

결론

표는 인터넷에서 다양한 유형의 상호작용에 사용되기 때문에 웹 응용 프로그램의 일반적인 가용성에 매우 중요하다.올바른 HTML 요소를 사용하면 더욱 발전할 수 있지만, 의식적으로 추가 물건을 배치하면 모든 사용자가 장애가 있든 없든 우리의 폼을 사용할 수 있도록 확보할 수 있다.
사용자가 전체 웹 체험에 접근할 수 있는 방법을 더 많이 찾기 위해 Web Content Accessibility Guidelines (WCAG) 2.0은 설명을 제공했다. 이러한 설명은 다양한 장애인과 비장애인이 내용을 접근할 수 있게 할 것이다.
우리가 폼의 접근성과 가용성을 향상시키면 모든 사람이 이익을 얻을 수 있다.
편집자: 이 문장에 무슨 문제가 있습니까?정확한 버전 here을 찾을 수 있습니다.

플러그인: 네트워크 어플리케이션용 DVR용 LogRocket

 

 
LogRocket은 프론트 로그 기록 도구로 질문을 다시 재생할 수 있습니다. 마치 브라우저에서 발생한 것처럼.LogRocket은 오류가 발생한 원인을 추측하거나 화면 캡처와 로그 저장을 물어보지 않고 세션을 다시 재생할 수 있도록 합니다.프레임워크가 어떻든지 간에 모든 응용 프로그램과 완벽하게 어울릴 수 있으며, 플러그인은 Redux, Vuex, @ngrx/store의 추가 상하문을 기록합니다.
 
LogRocket은 Redux 작업과 상태를 기록하는 것 외에도 콘솔 로그, JavaScript 오류, 스택 추적, 헤더+본문이 있는 네트워크 요청/응답, 브라우저 메타데이터와 사용자 정의 로그를 기록합니다.또한 DOM은 페이지의 HTML과 CSS를 기록하여 가장 복잡한 단일 페이지 응용 프로그램이라도 픽셀 수준의 비디오를 재구성합니다.
 
Try it for free .
게시물 A practical guide to accessibility for forms이 LogRocket Blog에 먼저 올라왔습니다.