Light-House 와 Accessibility

Light-house

자동으로 webpage의 성능을 향상시키는 오픈소스이다.

performance(퍼포먼스), accessibility(접근성), progressive web apps(PWA), SEO(search engine optimization)등의 점수를 측정해 준다.

사용 방법

1️⃣ 개발자모드에서 lighthouse 탭을 찾는다.

2️⃣ generate import 버튼을 눌러 진단을 시작한다.

3️⃣ 진단 결과 확인

Accessibility : 접근성

웹 개발을 하다보면, 웹이 접근성이 좋다는 생각과 이야기를 많이 듣게 된다.
흔히 생각하는 접근성이 좋다는 장점은 커져가는 모바일 시장에서 ios, android의 네이티브앱 보다 접근성이 좋다는 것을 생각하기 쉽다.

개발자로서 모든 사용자들이 똑같이 키보드로 타자를 치고 마우스로 클릭을하며 화면을 본다고 간과하기 쉽다. 하지만, 세상에는 정말 다양한 배경을 가진 user들이 있으며 그 사용자들까지 접근하기 좋은 웹이 정말 접근성이 좋은 웹이지 않을까?

접근성이 좋은 웹이란?
웹의 컨텐츠들이 사용자의 장애에 관계없이 내용물에 접근이 가능하고 다양한 범위의 사용자들이 기능들을 사용•운영 할 수 있는 사이트이다.

어떠한 유저들을 고려해야 할까?

• 시각
  시각장애는 아예 안보이는 시력부터 약간의 시력이 있는 등 범위가 넓다. 약간의 시력이 있는 사용자는 화면 확대, 색 대비가 큰 테마, 음성변환등을 함께 사용할 수 있다. 또 몇몇 사용자들은 완전히 음성변환 기능에 기대어 페이지를 해석 할 수도 있다.
  
• 운동 기능
  운동 기능 장애가 있으면 사용자가 마우스, 터치스크린, 포인터 디바이스를 사용하기 어려울 것이다. 몇몇 사용자들은 대체 입력장치만을 이용하여 컨텐츠에 접근 할 것이다. 이런 장치들은 키보드가 될 수도 있고, head •eye -tracking 장치를 사용 할 수도 있다.
  
• 청각
  청각장애도 시각장애만큼 청력 범위가 넓다. 특정 주파수에서는 잘 들리는 사람도 있는 방면, 아예 듣지 못하는 사람까지 다양한 양상이 있다. 청각장애를 가진 사용자들은 자막에 의존해서 정보를 얻는다.
  
• 인지
  인지장애는 정말 넓은 영역이고 ADHD, 난독증, 자폐스펙트럼등 매우 다양하다.
  다양하게 웹 페이지의 조정을 해야하지만, 보통 주의산만하게 만드는 요소나, 번쩍거림, 과도한 애니메이션 효과등을 줄여 사용자가 읽기 쉬운 페이지를 만들 수 있다. 사용자 지정 색상과 스타일로 가독성을 높이는 방법이 있다.

접근성이 좋은 웹을 만드는 방법

• keyboard로 움직일 수 있는 사이트
  tab 키로 focus가 되고 움직일 수 있는 웹은 유저에게 더 쉬운 접근성을 제공한다.
• semantic HTML tag를 사용한다.
  • 고려해야할 사항들
    • a role of type ⭐️
    • a name ⭐️
    • a value
    • a state
  • 예) div대신 button을 쓴다.
    종종 click-button을 만들때, div로 만들 때가 있다. (왜? 모양이 같으니까!!) 마우스로 클릭해서 사용하는 사용자에게는 불편함이 전혀 없지만! 키보드로 사용하는 사용자는 tab으로 이동한 후 enter로 접근하려고 할 것이다. button tag 에서는 space 와 enter가 작동하지만, div에서는 그렇지 않다. 또한 어떤 역할을 하는 버튼인지 알 수 없다.

<div>button</div>
<input placeholder="write"/>

VS

<button type="submit" name="sign-up-button" value="sign-up">sign-up</button>
<input type="text" name="sign-up-input" value="input-value" placeholder="write"/>

☑ Tip
맥을 쓰는 경우 voice over 기능으로 얼마나 semantic하게 코드를 작성 하였는지 알기 쉽다!! (cmd+F5로 켜기/끄기)
윈도우를 쓰는 경우 sense-reader와 NVDA를 사용해 보자!!

마치는 말

국제개발과 협력이라는 교양강의에서 에누마(어린이 학습앱 개발 회사)의 킷킷스쿨[링크]의 프로젝트 매니저님의 강연을 들은 적이 있다. 일론 머스크가 후원하는 X-prize에서 우승한 팀으로 테블릿 하나로도 아이들의 교육이 가능함을 증명하였다. 특히, 킷킷스쿨이 타겟으로 삼은 지역은 탄자니아로 잦은 내전으로 문맹률과 중학교•고등학교 입학률이 현저히 낮은 지역이다.

모두가 포기한 이 지역에도 누군가의 기술과 지식으로 아이들이 교육을 받을 수 있게 되었다.

개발을 하게되면 지금 당장의 현실에 매몰되기 쉬운데, 우리가 익힌 기술과 지식이 누군가의 인생을 바꿀 수 있을 만큼 긍정적 영향을 줄 수도 있음을 때때로 상기시켜 보는것도 개발자가 갖추어야 하는 하나의 직업의식 일 듯 하다.

참고하면 좋을 사이트

• 온라인 웹 접근성 체험 [링크]
  
  여러가지 장애사항들로 체험하며, 접근성의 중요성을 느껴 볼 수 있다.

• 에누마 이수인 대표에 대한 인터뷰 [링크]

references

• What is accessibility?
• Semantics and screen readers