웹 접근성 실용 안내서: 제2부분: 접근 가능한 페이지를 실현하고 개발합니다.

과거의 글에서 우리는 웹 접근성의 중요성과 우리가 어떻게 자신의 제품에서 그것을 볼 수 있는지를 보았다.
두 번째 부분에서 우리는 HTML/CSS/JS의 각종 구조 요소를 전시하여 모든 사람이 우리의 사이트를 방문할 수 있도록 할 것이다.본고에 포함된 모든 내용은 모든 전단 프레임워크와 순수한 코드에서 실현될 수 있다.
그럼, 준비 다 됐어요?시작합시다!

1. 의미 HTML

HTML 의미는 정확한 시간에 정확한 태그를 사용하는 것이다.아주 간단하게 들리지 않습니까?그러나 우리 중 많은 사람들이 그것을 정확하게 사용하지 않았다는 것을 알아야 한다.
대부분의 사이트는 복잡한 라벨로 가득 차 있고 HTML이 미리 정의한 라벨 구조를 사용하지 않는다.이게 어떻게 된 일입니까?스크린 리더가 페이지를 조회할 때 그는 사이트의 위치를 잃기 쉬우므로 내비게이션 전의 페이지나 텍스트 내용 후의 제목, 그리고 이런 불량 구조로 인해 발생하는 다른 몇 가지 문제에 접근할 수 있다.

HTML5는 새로운 레이블을 제공하여 이러한 구조를 완전히 해결했다.우리는 전선의 건설을 쉽게 조정하여 이 준칙을 따르게 할 수 있다.더 좋은 본체 페이지 포지셔닝을 얻는 것 외에, 우리는 화면 판독기 사용자가 해결 방법을 찾을 수 있도록 도울 것이다.

2. 테이블의 레이블

형식은 줄곧 장애인의 문제였다.이러한 문제들은 대부분 라벨과 그 각자의 입력 간의 불량한 관련으로 인해 발생한다.
HTML에는 레이블 태그의 for 속성과 같은 자연스러운 해결 방안이 있습니다.이 속성은 설명된 입력을 인용합니다.그러나 불행하게도, 우리가 인터넷에서 찾은 대부분의 표에서 그것을 거의 사용하지 않는다.

<form action="/action_page.php">
  <label for="male">Male</label>
  <input type="radio" name="gender" id="male" value="male"><br>
  <label for="female">Female</label>
  <input type="radio" name="gender" id="female" value="female"><br>
  <label for="other">Other</label>
  <input type="radio" name="gender" id="other" value="other"><br><br>
  <input type="submit" value="Submit">
</form>

이미지 설명 대체

react나 vue 등 프레임워크의 사용에 익숙하고 코드에 이미지를 삽입하려고 시도하는 모든 사람들은 강제alt 속성을 만났습니다. 맞습니까?alt 속성은 대체 설명을 가리키며 화면 리더가 이미지 설명을 수신하는 또 다른 방식으로 시력 장애자가 이미지의 의미를 이해할 수 있도록 한다.

나타나는 이미지에 대한 간결한 설명을 삽입해야 한다는 점은 매우 중요하다. 왜냐하면 어떤 상황에서 묘사의 존재는 나쁜 묘사로 인해 이해 충돌이 발생할 수 있기 때문이다.

설명 제목

그림의 설명을 제외하고, 우리의 앞부분은 모든 요소를 더욱 잘 설명할 수 있다.이것은 title 속성을 통해 완성되며, 구성 요소가 초점을 받을 때 활성화됩니다.그것을 사용하면 프로젝트의 일부 복잡한 영역을 더욱 잘 묘사할 수 있다.

수화와의 통합

수화 의사소통 능력만 있는 귀머거리 사용자는 수화로 당신의 사이트를 방문해야 할 수도 있습니다.다행히도 당신이 살고 있는 나라와 당신이 접촉하고 싶은 관중에 따라 무수한 선택이 있다.대부분의 플러그인은 헤더 탭의 Javascript 코드만 가져옵니다.기타 소프트웨어 패키지를 설치해야 할 수도 있습니다.
다음 그림은 브라질 수화 번역 플러그인 HandTalk의 예입니다.

색상 적응

새로운 인터페이스에서 매우 유행하게 된 것들은 어두운 주제의 존재이다.그것들은 우리 눈의 빛의 강도를 낮추어 눈을 더욱 편안하게 한다.
짙은 색 주제를 제외하고 우리는 우리 사이트에서 시각장애나 색맹 사용자를 포함한 많은 다른 기능을 만들 수 있다.그 중 하나는 운영체제에서 매우 흔히 볼 수 있는 높은 대비도 주제이다.

높은 명암비는 응용 프로그램의 색 수를 줄여 짙은 색 주제와 마찬가지로 그 특징이 시각적 감지력을 가지게 하고 사람의 눈에 대한 위해를 더욱 적게 하도록 한다.그러나 이런 상황에서 색깔의 선택은 선택적이다.

위에 표시된 색상은 Windows 시스템에서 테마를 자동으로 비교하는 데 사용됩니다.몇 가지 연구에 따르면 이런 팔레트는 시력이 낮은 사용자에게 매우 효과가 있고 사이트의 요소를 더욱 잘 볼 수 있다.
소량의 색을 가진 테마를 구축하여 색맹 사용자를 포함하여 여러 개의 지점을 만들 수 있습니다.

그럼 어디서부터 시작할까요?

우리가 이 모든 것을 보고 접근성의 중요성을 이해한 후에 우리는 어디서부터 시작할 수 있습니까?
정답은 시작만 하면.우리는 여기에서 소개한 모든 기능을 포함할 필요가 없지만, 만약 우리가 적어도 그 중 하나를 포함한다면, 우리는 시스템 사용자의 생활을 바꾸고 이를 통해 새로운 사용자에게도 영향을 줄 수 있다.
읽어주셔서 감사합니다.
dev.to 및