OJT 교육 3~4

211214 입사 2주차 OJT 교육 중에 새롭게 알게된 부분들을 간단하게 정리해 보았다.

3. 웹접근성

• 다양한 환경(주변 소음까지...)을 보장할 수 있어야 하지만, html/css/js로 보장 가능한 접근성은 시각 장애 환경이라고 볼 수 있다.
• iOS = VoiceOver, Android = Talkback을 설정하여 시각 장애 환경을 테스트 할 수 있다.
• WAI-ARIA속성을 활용하면 더욱 유연한 대처가 가능하다. ex) role=""
• aria-label, blind처리 등을 활용하여 대체 텍스트를 해결할 수 있다.
• button의 경우 aria-pressed="true / false"속성을 활용하여 활성화 상태여부를 확인할 수 있다.
• img태그는 세세하고 정확하게 대체 텍스트를 제공하기 어렵다면 alt를 빈 값으로 제공한다.
• table(표)을 마크업 할 때 scope="col / row, colgroup"속성을 정확하게 써 준다.
• label을 활용할 수 없을 경우, aria-labelledby속성과 id를 일치시켜 줌으로 해결할 수 있다.
• checkbox도 label 없이 단독으로 쓰여질 때 aria-labelledby속성을 활용하여 어디에 속해있는지 구분해 줄 수 있다.
• 이외에도 활용가능한 다양한 WAI-ARIA속성이 있으니 틈틈이 찾아보자.

4. 모바일 마크업

• shrink-to-fit=no속성은 safari 11이하에서 뷰포트보다 콘텐츠 크기가 크면 자동으로 축소해서 fit하게 보여주는것을 방지한다.
• viewport-fit=cover속성은 아이폰 X에서 좌/우/하단 영역 대응하기위한 전체화면 적용가능 여부
• 미디어쿼리 템플릿
  
• 노치가 있는 아이폰 기기의 경우 safe area 속성을 활용하여 대응할 수 있다.

  .wrap {
    padding-left:0;  /* 노치가 없는 기기 */
    padding-left:env(safe-area-inset-left);  /* 버전에 따라 safe area 적용 */
    padding-left:constant(safe-area-inset-left);
  }
  /* padding 말고 margin 속성도 적용 가능 */
  
  /* 축약형 */
  .wrap {
    padding-left:calc(0 + env(safe-area-inset-left));
  }

• 모바일 화면 작업시 a태그에 tel, geo, maps 활용하여 유용하게 사용가능
• -webkit-line-clamp 속성으로 말줄임 처리 쉽게 가능