접근성을 위한 미디어 쿼리 사용

 

접근성을 위한 미디어 쿼리 사용하기

장애를 가진 분들을 위한 미디어쿼리는 접근성 심사를 위해서도 필요하지만 실제 사용성 편의를 위해서도 꼭 알아 둘 필요가 있고, 다양한 미디어가 한 사이트에서 구현되는 경우 일어날 수 있는 위험을 방지할 수 있는 방법입니다.

 

prefers-reduced-motion

깜빡이거나 반짝이는 애니메이션은 주의력결핍 과잉행동증후군(ADHD)와 같은 인지 문제를 가진 사람들에게 문제가 될 수 있습니다. 이러한 종류의 애니메이션 동작들은 전정편두통, 뇌전증, 편두통과 광과민증을 유발할 수 있습니다. 기기의 성능이 떨어지는 사용자에게도 도움이 되지만 접근성 심사를 위해서 과도한 반짝임은 일어나지 않도록 해야 합니다. 실제 장애인 뿐 아니라 아이들이 자주 접속하는 사이트 라면 꼭 있어야 할 미디어 쿼리 구문입니다.

 

reduce 사용자가 시스템에 애니메이션 동작을 최소화하도록 설정하였다는 것을 의미합니다. 가급적이면 필수적이지 않은 동작은 모두 제거됩니다.

 

/* 기본적으로는 애니메이션을 사용 */
.button {
  transition: background-color 0.3s ease-in-out;
}

/* 사용자가 애니메이션을 줄이도록 설정한 경우, 애니메이션을 없애거나 줄임 */
@media (prefers-reduced-motion: reduce) {
  .button {
    transition: none;
  }
}

기본적으로 버튼의 배경색이 부드럽게 변경되도록 설정되어 있습니다. 하지만,  사용자가 시스템 설정에서 애니메이션을 줄이도록 선택한 경우에는, .button의 transition 속성이 none으로 설정되어 애니메이션을 없앱니다.

 

---

prefers-color-scheme 

사용자가 어두운 테마 또는 밝은 테마를 선호하는지를 감지하는 데 사용됩니다. 사용자의 선호에 따라 웹사이트의 테마를 자동으로 전환할 수 있습니다. 밝은 화면을 보기 힘든 시각 장애에 대응합니다.

 

light: 이 옵션은 사용자가 시스템에서 밝은 테마를 선호하는 경우에 적용됩니다. 밝은 테마는 일반적으로 어두운 글자 색상을 밝은 배경색과 함께 사용합니다.

@media (prefers-color-scheme: light) {
   body {
      background-color: white;
      color: black;
   }
}

 

dark: 이 옵션은 사용자가 시스템에서 어두운 테마를 선호하는 경우에 적용됩니다. 어두운 테마는 일반적으로 밝은 글자 색상을 어두운 배경색과 함께 사용합니다.

@media (prefers-color-scheme: dark) {
   body {
      background-color: black;
      color: white;
   }
}

 

---

prefers-contrast 

prefers-contrast 미디어 쿼리는 사용자가 높은 대비를 선호하는지, 또는 기본 대비보다 낮은 대비를 선호하는지 확인하는데 사용됩니다. 이 미디어 쿼리는 시력 문제로 인해 텍스트를 읽는 데 어려움을 겪는 사용자들에게 도움이 될 수 있습니다.

 

high: 사용자가 높은 대비를 선호할 때 적용됩니다. 색상 간의 차이를 더 뚜렷하게 하여 요소를 더 잘 식별할 수 있도록 합니다.

@media (prefers-contrast: high) {
   body {
      background-color: black;
      color: white;
   }
}

 

low: 사용자가 낮은 대비를 선호할 때 적용됩니다. 이 설정은 색상 간의 차이를 덜 뚜렷하게 하여 더 부드러운 느낌을 줍니다.

@media (prefers-contrast: low) {
   body {
      background-color: #f0f0f0;
      color: #333;
   }
}

 

no-preference: 사용자가 대비에 대해 특별한 선호를 설정하지 않은 경우에 적용됩니다. 이 경우 기본 스타일을 유지합니다.

@media (prefers-contrast: no-preference) {
   body {
      background-color: white;
      color: black;
   }
}

 

prefers-contrast 미디어 쿼리를 사용하여 사용자의 대비 선호에 따라 적절한 스타일을 적용함으로써, 웹사이트의 접근성을 개선할 수 있습니다.

 

---

forced-colors

forced-colors 미디어 쿼리는 사용자가 시스템 수준에서 강제 색상 모드를 활성화한 경우 (예: Windows 고대비 모드) 웹사이트가 이를 감지하고 적응하는데 사용됩니다. 이를 통해 시스템 색상 설정을 존중하면서, 접근성이 높은 웹 콘텐츠를 제공할 수 있습니다.

 

active: 사용자가 강제 색상 모드를 활성화한 경우 적용됩니다

@media (forced-colors: active) {
    body {
        forced-color-adjust: none;
        background-color: Canvas;
        color: LinkText;
    }
    
    button {
        background-color: ButtonFace;
        color: ButtonText;
    }
}

 

forced-colors가 활성화된 경우(active), forced-color-adjust를 none으로 설정하여 사용자 지정 색상이 강제 색상 모드에 의해 대체되는 것을 방지합니다. 그 다음, 시스템 색상 키워드 (Canvas, LinkText, ButtonFace, ButtonText 등)를 사용하여 배경색과 글자색을 설정합니다.

이러한 색상 키워드는 강제 색상 모드에서 시스템에 의해 특정 값으로 대체됩니다.