2017-03-21 7 views
0

웹 응용 프로그램에서 사용자가 데이터를 입력하고 탭 아웃 할 때 필요한 필드 유효성 검사가 성공적임을 나타내는 컨트롤 오른쪽에 눈금 표시가 나타납니다. 사용자가 데이터를 입력하지 않고 다른 컨트롤을 탭하면 십자 표시가 나타납니다. 내가 사용시각적으로 문제가있는 사람들을위한 텍스트 추가

스타일은 다음과 같습니다

input-valid::after { 
    position: relative; 
    display: inline-block; 
    margin-left: -1em; 
    content: "\2714"; 
    font-size: 18px; 
    color: #438D5B; 
} 

에 대한 교차

input-invalid::after { 
    position: relative; 
    display: inline-block; 
    margin-left: -1em; 
    content: "\2716"; 
    font-size: 18px; 
    color: #D60036; 
} 

뿐만 시각 도전 사람들이 틱 또는 크로스를 보는 것은 문제입니다. 따라서, 검증이 성공할 때마다 "Validation successful"텍스트를 읽고 싶습니다. 내가 어떻게 해? 한 곳에서 변경하여 전체 응용 프로그램에 적용 할 수 있도록 CSS 자체에서 변경할 수 있습니까?

답변

1

내가 이해한다면 화면 판독기에서 읽을 수있는 라벨을 추가하고 싶습니다.

우리는 브라우저에 구현 된 접근성 API를 통해 보조 기술에 역할, 상태 및 속성 의미를 전달하는 HTML 요소에 추가 할 수있는 속성 집합 인 ARIA 표준을 가지고 있습니다.

본인은 실제로 본 적이 없기 때문에 이에 대한 많은 정보가 없지만 일부 링크 만 제공하므로 도움을받을 수 있습니다. 또한, 내가 아는 한 자바 스크립트로 이것을 추가 할 수 있으므로 애플리케이션을 많이 변경할 필요가 없습니다.

http://html5doctor.com/using-aria-in-html/ http://w3c.github.io/aria-in-html/

+0

그래, 내가 말했듯이 ... – user1447718

+0

@ user1447718 글쎄, 난 정말 그것을 사용하지 않기 때문에 적이 어떻게 어느 하나 내가 할 수있는 우리가 ARIA 라벨을 사용할 필요가 이해하지만, 확인 솔직한 답변을 드릴 수는 없지만 여기에는 아리아 언어에 대한 가이드가 나와 있습니다. 예를 들어 사용 방법에 대한 예제가 있으면 도움이되기를 바랍니다. [link] (https://developers.google.com/web/fundamentals/accessibility/semantics-aria/aria-labels-and-relationships) – egvaldes