google chrome Lighthouse 에 대해 알아보자

구글 크롬 라이트하우스 접근성검사하는법

PWA(프로그레시브 웹 앱) 를 위해 lighthouse를 사용한 검사를 시행했다.

크롬의 개발자모드에서 Lighthouse 탭을 클릭하거나 웹스토어(링크)를 설치해서 사용해도 된다.

카테고리를  보면

Performance

- FCP : 사용자가 페이지 탐색 후 브라우저가 DOM contents의 첫 번째 부분을 렌더링 하는 데 걸리는 시간 측정

- Speed Index  : 페이지로드 중 Contents가 시각적으로 표시되는 속도 측정

- LCP : Viewport 에서 가장 큰 Contents 요소가 화면에 렌더링 되는 시기 측정

외에도 여러가지가 있다. 각 항목에 대해 Learn more. 을 클릭해보면 자세히 정리가 되어있음.

대충 요약해보면 웹의 성능에 대해 측정하는 부분이다.  보통 사용하지 않는 리소스는 제거하고, 필요한 리소스만 inline 하는 것을 권고하는 것 같다.

 

Accessibilty

전형적인 사용자라는 좁은 범위를 벗어난 곳에 있는 사용자, 개발자가 예상하는 것과 다르게 웹페이지에 액세스하거나 상호 작용할지도 모르는 사용자가 경험하는 사용환경을 지칭한다. 구체적으로 말하면 어떤 유형의 결함이나 장애를 가진 사용자를 배려한 사용환경을 말함.

[출처]

 

이 부분에 대해 인지 가능, 작동가능,이해 가능, 안정적 이라는 네가지 원칙(웹콘텐츠 접근성 가이드라인 WCAG 2.0의 구성)을 충족시켜서  사용자에게 긍정적 경험을 제공할 수 있다.

색약 사용자를 고려하지 못한 나의 색상값 지정..

- 명암비 

클릭해서 보면 어느 부분이 문제인지 친절히 알려준다.

배경색 : #f4f4f4

글자색 : #7d7d7d

WCAG 통과 기준에 따라 글자와 배경색의 대비가 최소 4.5:1 의 명암비를 가져야한다.

이를 어떻게 알 수 있는지?

https://app.contrast-finder.org/?lang=ko 

해당 사이트를 이용하면 된다.

이런 세상 친절한 기능을 이용해서 수정해준다.

 

- html lang 설정

html 의 lang 속성은 스크린 리더를 사용하는 사용자들에 대한 배려다. 

 

-alt

이미지가 로드되지 않았을 때의 text 역할을 할 수도 있지만 시각장애인은 이미지에서 얻는 정보보다 이러한 대체 text에서 정보를 얻을 수 있다.

대체텍스트 지정에도 몇가지 규칙이 있는데.

-> 이미지와 동일한 내용과 기능을 정확하게 표현해야한다.

-> 간결하게 표시해야 한다. 짧은 문장 한 두개가 적절할 수 있다.

-> 중복 되거나 이미지 컨텍스트 내에서 텍스트와 동일한 정보를 제공 하지마라.

-> 이미지를 설명할 때 '...의 이미지" '...의 그래프' 와 같이 표시하지 않는다. 

이렇게 하지 말라는 뜻.

https://webaim.org/techniques/alttext/ 에서 친절히 설명해준다. 재밌으니까 한번 읽어 보길 추천함.

이외에도 저시력자를 위한 viewport scalable 설정 등등을 진행 해준다.

 

SEO

검색엔진 최적화

기본원칙은 

• 검색 엔진을 위해서가 아니라 사용자를 위한 페이지를 만듭니다.
• 사용자를 속이지 않습니다.
• 검색 엔진 순위를 높이기 위한 속임수를 쓰지 않습니다. 사용되는 기술이 편법인지 아닌지를 판단하기에 가장 좋은 기준은 다른 경쟁 사이트나 Google 직원에게 그 방법에 대해 거리낌 없이 설명할 수 있느냐입니다. '사용자들에게 도움이 될까? 검색 엔진이 없어도 이 행동을 하게 될까?'하고 스스로에게 물어보는 것도 좋은 방법입니다.
• 어떻게 하면 본인의 웹사이트를 고유하고 가치 있게, 더 매력적으로 보이게 만들 수 있을지 생각해 봅니다. 전문 분야에서 다른 경쟁자와 차별화되도록 해야 합니다.

https://developers.google.com/search/docs/advanced/guidelines/webmaster-guidelines?visit_id=637588994878133210-1329771845&rd=1 

웹마스터 가이드라인  |  검색 센터  |  Google Developers

에서 내용을 확인하고 적용해 볼 수 있다.

 

 

그렇게해서 매우 열악하던 Accessibility 를 대폭 끌어 올렸다..

SEO는 아직 건들 수 없는 부분 이 있어 차근차근 끌어올려 볼 예정이다.