WAI-ARIA에 따라 CSS Modules가 가장 적합

CSS 및 WAI-ARIA

'WAI-ARIA'는 주석 브라우저 지원 기술로 식별할 수 있는'함의'를 통해 사용자가 이해할 수 있도록 돕는 기술이다.여기에 제시된 주석도 CSS에 공유돼 그 의미에 따라 장식의 실마리로 활용할 수 있다.

상태의 표현

특별한 이유가 있기 때문에 아래의 표시를 해 보았습니다.span 탭의class명에btn의 이름이 있지만 브라우저 지원 기술은 다음 단추를 식별할 수 없습니다.

<span class="btn">Mute Audio</span>

제공role="button"을 통해 이 span 라벨이 단추임을 식별할 수 있다.그리고 aria-pressed="true"의 주석.이렇게 하면 [버튼이 눌림] 상태를 브라우저 지원 기술에 전달할 수 있습니다.

<span role="button" aria-pressed="true">Mute Audio</span>

"aria-pressed"를 전환하는 기능을 통해 CSS Modules가 WAI-ARIA 표준에 가장 적합한 이유를 살펴봅니다.

CSS in JS 및 WAI-ARIA

CSS in JS에서는 다음 코드isPressed와 같이 Tagged template literals에서 Propos를 참조할 수 있습니다.aria-pressed와 isPressed가 중복된다.CSS in JS, HTML에는 각각 숫자 값이 지정됩니다.이 두 사람에게 다른 가치를 줄 수 있고, 심지어는 배반될 가능성도 있다.

const Button = styled.span<{ isPressed: boolean }>`
  border: 2px solid ${({ isPressed }) => (isPressed ? "#00F" : "#000")};
`;
const Component = ({ isPressed }: Props) => (
  <Button
    role="button"
    aria-pressed={isPressed} // <- 重複
    isPressed={isPressed} // <- 重複
  >
    Mute Audio
  </Button>
);

tagged template literals에서 참조props["aria-pressed"]하면 중복을 피할 수 있습니다.그러나 보시다시피 Button 내부에 대량의 논리를 제공해야 한다.aria-pressed에서 얻을 수 있는 값은 'aria-pressed'?: boolean | "true" | "false" | "mixed" | undefined이기 때문에 이런 조건 지점이 발생할 수 있다.

const Button = styled.span`
  border: 2px solid ${(props) =>
      props["aria-pressed"] === true || props["aria-pressed"] === "true"
        ? "#00F"
        : "#000"};
`;
const Component = ({ isPressed }: Props) => (
  <Button role="button" aria-pressed={isPressed}>
    Mute Audio
  </Button>
);

아리아 속성을 선택기로 지정하는 게 어때요?&[aria-pressed="true"]라는 지정이 있으면 JavaScript의 개입이 필요하지 않습니다.WAI-ARIA 기준에 맞는 스타일링은 이렇다고 본다.

const Button = styled.span`
  border: 2px solid #000;
  &[aria-pressed="true"] {
    border-color: #00f;
  }
`;
const Component = ({ isPressed }: Props) => (
  <Button role="button" aria-pressed={isPressed}>
    Mute Audio
  </Button>
);

이런 문법의 단점은 CSS의 상세도가 더 이상'10'이 아니기 때문에 다시 상세도에 직면해야 한다는 것이다(이 작은 범위 내에서 상세도는 큰 문제가 되지 않을 것이다)
어떤 말을 하자면, 문제는 프롬프트에 의존하는 CSS in JS 스타일의 맞춤법이 봉인됐다는 것이다.강력한 기능이라 나쁘게 생각하는 사람들이 많죠.

CSS Modules 및 WAI-ARIA

이 작법을 팀의 가이드라인으로 삼으려면 CSS 모델즈가 가장 적합하다.분리된 파일은 Pure CSS에 무한히 가깝습니다. 여기서 프롬프트를 참고하거나 참고하지 않는 토론이 발생하지 않습니다.

import styles from "./style.module.scss";
const Component = ({ isPressed }: Props) => (
  <span role="button" aria-pressed={isPressed} className={styles.btn}>
    Mute Audio
  </span>
);

.btn {
  border: 2px solid #000;
  &[aria-pressed="true"] {
    border-color: #00f;
  }
}

는 CSS in JS에 비해 표현력과 유형 안전이 떨어지지만 대체할 수도 있다.

가속 상태와 스타일이 다르지 않음

의미를 촉진하는 표기 조형

Pure CSS에 무한 접근

보조 설계는 떼려야 뗄 수 없는 관계죠.

참고 문헌

본 원고의 예는 매우 극단적이지만 MDN에 WAI-ARIA에 부합되는 조형 예를 게재했으니 참고할 수 있다고 생각합니다.
https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/button_role
https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/checkbox_role
https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/Switch_role
W3C에서도 마찬가지로 관련된 문헌이 있으니 인용해 주십시오.
https://www.w3.org/TR/wai-aria-1.1/#introstates
Most modern user agents support CSS attribute selectors ([css3-selectors]), and can allow the author to create UI changes based on WAI-ARIA attribute information, reducing the amount of scripts necessary to achieve equivalent functionality. In the following example, a CSS selector is used to determine whether or not the text is bold and an image of a check mark is shown, based on the value of the aria-checked attribute.