접근성을 해칠 수 있는 CSS 관행

CSS는 강력한 언어가 되었습니다. 텍스트 및 기타 디자인 요소에 기본 스타일을 추가하는 수단으로 시작된 것이 이제 훨씬 더 많은 기능을 수행할 수 있습니다.

상상할 수 있는 거의 모든 레이아웃을 만드는 데 사용할 수 있습니다. JavaScript 또는 브라우저 플러그인이 필요했던 특수 효과 및 상호 작용이 이제 기본적으로 지원됩니다. 언어는 기본 도구에서 모든 웹사이트의 기본 기술 중 하나로 발전했습니다.

그러나 다른 강력한 도구와 마찬가지로 CSS에도 의도하지 않은 부작용이 있을 수 있습니다. 접근성은 가장 큰 관심사 중 하나입니다. 일부 구현은 실제로 좋은 것보다 더 많은 해를 끼칠 수 있습니다.

이를 염두에 두고 접근성을 손상시킬 수 있는 몇 가지 CSS 사례를 살펴보겠습니다. 여기에는 코드 작성을 시작하기 전에 주의 깊게 고려해야 하는 일반적인 기능이 포함되어 있습니다. 시작하자!

content 속성을 사용하여 중요 텍스트 표시

CSS content 속성은 요소에 시각적 향상을 추가하는 매끄러운 방법을 제공합니다. 예를 들어 의사 요소와 함께 사용하여 텍스트 또는 목록 항목의 구절 앞에 아이콘을 추가할 수 있습니다. 또한 이미지나 텍스트 문자열을 표시할 수도 있습니다.

그러나 마지막 것은 특히 번거로울 수 있습니다. content 속성을 통해 추가된 텍스트는 문서 개체 모델(DOM)에 포함되지 않습니다. 즉, 스크린 리더와 같은 보조 기술이 이를 인식하지 못할 수 있습니다.

순전히 장식용 항목에 적합합니다. 그러나 텍스트가 페이지에 중요한 컨텍스트를 제공하는 경우 접근성 문제가 발생할 수 있습니다. 사용자는 중요한 정보를 놓칠 수 있습니다.

따라서 텍스트를 표시하기 위해 content 속성을 사용하지 않는 것이 가장 좋습니다. 페이지를 이해하는 사용자의 능력을 방해하지 않을 것이라고 확신하지 않는 한 말입니다.

강렬하게 깜박이는 애니메이션 시퀀스 만들기

애니메이션은 CSS가 크게 발전한 영역입니다. 한때 타사 라이브러리의 영역이었던 효과를 이제 비교적 쉽게 만들 수 있습니다. 또한 기본적으로 지원되므로 하드웨어 가속과 같은 기능을 활용하여 성능을 높일 수 있습니다.

기본 전환 및 변형은 분위기를 조성하고 사용자의 관심을 끌 수 있습니다. 또한 JavaScript의 도움으로 놀라울 정도로 사실적인 효과를 구성하는 것도 가능합니다.

그러나 특정 애니메이션 스타일은 부정적인 영향을 미칠 수 있습니다. 일부 사용자의 경우 너무 많이 움직이면 방향 감각을 잃거나 훨씬 더 나빠질 수 있습니다. 강렬한 섬광 또는 섬광 효과는 발작을 유발할 수 있습니다. 이는 영화, 텔레비전 프로그램, 비디오 게임에서처럼 웹에서도 가능합니다.

WCAG 2.0은 발작이나 기타 부작용을 유발하지 않는 애니메이션을 만들기 위한 몇 가지 연구 지원 지침을 제공합니다. 예를 들어 프레젠테이션은 크기를 작게 유지하고 빨간색을 피하는 것과 함께 초당 세 번 이상 깜박이지 않도록 설정하는 것이 좋습니다.

고맙게도 이것은 움직임으로 사용자에게 깊은 인상을 주는 우리의 능력을 제한하지 않습니다. 우리의 업무를 향상시킬 수 있는 기회는 여전히 많이 있습니다. 그러나 사용된 애니메이션 유형과 잠재적인 영향을 면밀히 조사해야 합니다.

상호작용 요소의 직관적이지 않은 :hover 또는 :focus 상태

CSS는 대화형 요소의 스타일을 지정하는 데 능숙합니다. 하이퍼링크 및 양식 필드와 같은 일상적인 항목으로 무엇이 가능한지 고려하십시오. 기본 모양과 비교할 때 인식할 수 없을 정도로 사용자 정의할 수 있습니다.

그것은 모두 훌륭하고 좋습니다. 그러나 사용자가 요소와 상호 작용할 때 어떤 일이 발생하는지 생각하는 것도 중요합니다. 무슨 일이 일어났는지 확인할 시각적 단서를 제공하지 않는 버튼을 클릭한다고 상상해 보십시오. 또는 키보드를 사용하여 현재 링크를 강조 표시하지 않는 메뉴를 탭합니다.

간단할 수 있지만 이러한 마이크로 인터랙션은 사용자에게 컨텍스트를 제공하는 데 도움이 됩니다. 버튼 클릭을 확인하거나 커서가 어떤 메뉴 항목에 집중되어 있는지 이해하는 것은 두 가지 예일 뿐입니다. 그리고 각각은 방문자가 웹사이트를 탐색할 때 자신감을 줍니다.

인터랙티브 요소의 초기 스타일링은 전투의 절반에 불과합니다. :hover 및 :focus 의사 클래스에 대한 직관적인 스타일을 제공하여 사용자 경험을 완성합니다.

이러한 스타일은 쉽게 인지할 수 있어야 합니다. 실제로 이는 단순한 색상 이상을 지표로 사용하는 것을 의미합니다. 애니메이션, 윤곽선 또는 아이콘을 추가하면 아무도 빠지지 않도록 할 수 있습니다.

접근 가능한 디자인의 기본을 당연하게 여김

우리는 모두 거기에 있었습니다. 프로젝트 기한이 빠르게 다가오고 있으며 작업을 완료해야 합니다. 출시 경쟁에서 일부 접근성 관련 항목은 균열을 통해 미끄러질 수 있습니다.

접근하기 쉬운 디자인의 기본이 뒤쳐지는 경우가 많습니다. 디자이너가 당연하게 여기고 가정할 수 있는 이러한 CSS 관행은 이미 표준에 부합합니다.

대표적인 예로는 읽기 쉬운 타이포그래피 및 허용 가능한 색상 대비 비율과 같은 기본 요소가 있습니다. 이러한 항목을 고려하고 테스트하지 않으면 생각만큼 웹 사이트에 액세스할 수 없습니다.

그렇기 때문에 사이트 스타일의 광범위한 측면을 검토하는 데 약간의 추가 시간을 할애할 가치가 있습니다. 항목이 "눈알" 검사를 통과하더라도 감사를 수행하기 위해 추가 마일을 사용하십시오. 미묘한 개선의 기회가 얼마나 많은지 알게 되면 놀랄 것입니다.

책임감 있는 CSS 사용에 관한 것입니다.

CSS는 매우 강력하기 때문에 CSS가 제공하는 가능성에 현혹되기 쉽습니다. 영화 같은 것을 만들 수 있는데 왜 기본 애니메이션에 만족합니까? 그리고 콘텐츠 생성에 사용하는 편리함을 어떻게 사랑하지 않을 수 있겠습니까?

그것은 모두 공감과 책임감으로 귀결됩니다. 다른 도구와 마찬가지로 CSS는 훌륭한 일을 할 수 있습니다. 하지만 특정 기능을 구현할 수 있다고 해서 접근성에 적합하다는 의미는 아닙니다. 우리는 각계각층의 사람들이 우리가 만든 것을 소비하는 세상에 살고 있습니다. 그리고 그들이 장애물 없이 그렇게 할 수 있도록 하는 것이 우리의 일입니다.

밝은 면은 위의 관행을 피하는 것이 모든 사람의 손이 닿는 범위 내에 있다는 것입니다. 대부분의 경우 우리가 하는 일의 잠재적인 영향에 대해 생각하는 문제입니다. 거기에서 테스트는 우리가 더 세분화하는 데 필요한 데이터를 제공합니다.

CSS는 접근성을 쉽게 하기 위해 존재합니다. 그것은 우리가 그것을 사용하기로 선택한 방법에 달려 있습니다.