Softonic

접근성 있는 CSS 스피너 생성기

단계 1 / 2
다음

화면 낭독기를 사용하는 사람에게 회전하는 원은 아무 의미가 없습니다. 또한 계속되는 움직임은 동작에 민감한 사람들에게 불편할 수 있습니다. 여기서 스피너를 만든 다음, 아래의 마크업과 모션 감소 규칙을 추가하세요.

스피너를 접근성 있게 만드는 방법

  1. 1

    원 생성하기

    도구에서 크기, 두께, 색상, 속도를 설정한 뒤 CSS를 복사합니다.

  2. 2

    색 대비 확인하기

    밝은 회색 트랙과 페이지 배경 모두에서 확실히 눈에 띄는 호의 색을 고릅니다.

  3. 3

    상태 마크업 추가하기

    이 페이지에 나온 것처럼 스피너 요소에 role과 레이블을 넣습니다.

  4. 4

    모션 감소 규칙 추가하기

    생성된 CSS 아래에 아래의 미디어 쿼리를 붙여 넣습니다.

생성된 CSS가 다루는 범위와 다루지 않는 범위

도구가 제공하는 것은 시각적인 부분, 즉 테두리가 있는 원과 회전입니다. 요소가 비어 있는 시각 전용 로더는 보조 기술에게 의미가 없습니다. 접근성은 마크업과, 그 주위에 추가하는 CSS 규칙 하나로 완성됩니다.

상태를 알려 주는 마크업

<div class="loader" role="status" aria-label="결과를 불러오는 중"></div>

role="status"는 이 요소를 라이브 영역으로 표시합니다. 그래서 많은 화면 낭독기가 요소가 나타날 때 그 레이블을 읽어 줍니다. aria-label에는 “로딩 중” 같은 일반적인 단어 대신, 무엇을 불러오는지 적어야 합니다. 예를 들어 “결과를 불러오는 중”이나 “저장 중”입니다. 작업이 끝나면 요소를 제거하고 새 콘텐츠를 보여 주세요.

고리 옆에 보이는 텍스트를 함께 둘 수도 있습니다. 보이는 텍스트는 움직임을 잘 보지 못하는 사람을 포함해 모두에게 도움이 됩니다.

모션 감소 설정 존중하기

일부 방문자는 애니메이션을 줄이도록 사이트에 요청하는 시스템 설정을 켜 둡니다. 생성된 CSS 뒤에 미디어 쿼리를 두어 이 설정을 존중하세요.

@media (prefers-reduced-motion: reduce) {
  .loader {
    animation-duration: 3s;
  }
}

이 규칙은 회전을 없애는 대신 느리게 합니다. 그래서 빠른 움직임 없이도 로더가 살아 있는 것처럼 보입니다. 정적인 신호를 원한다면 animation: none;을 사용하고, 고리 옆에 “로딩 중”이라는 텍스트를 보여 주세요.

대비와 크기 체크리스트

확인 항목 목표
페이지 위의 호 분명히 보여야 하며, 가능하면 3:1 이상의 대비
회색 트랙 위의 호 호를 따라갈 수 있도록 뚜렷하게 구분됨
크기 방문자가 알아차려야 하는 요소는 최소 24px
속도 한 바퀴에 0.8~1.5초

주의 사항

  • 생성기는 트랙 색상(#eee)을 임의로 고릅니다. 페이지 배경과 비슷하면 붙여 넣은 CSS에서 수정하세요.
  • 속도 값이 너무 빠르면 고리가 깜빡입니다. 약 0.5초보다 짧은 값은 피하세요.
  • 긴 대기 시간에 스피너만 믿지 마세요. 무엇이 진행 중인지 텍스트로 알려 주세요.

빠르게 테스트하기

운영체제에서 모션 감소 옵션을 켜고 페이지를 다시 불러오세요. 고리가 더 느리게 돌아야 합니다. 그다음 키보드로 페이지를 탭 이동해서, 스피너가 방문자가 사용하던 컨트롤에서 포커스를 빼앗지 않는지 확인하세요. 마지막으로 화면 낭독기를 켜고 로딩 상태를 한 번 발생시켜, 요소가 나타날 때 레이블이 읽히는지, 그 뒤에 새 콘텐츠에 접근할 수 있는지 들어 보세요.

자주 묻는 질문

마크업을 추가한 경우에만 그렇습니다. 빈 요소는 아무 소리도 내지 않으므로 role=“status”와 구체적인 aria-label을 지정하세요.

방문자가 기기에서 애니메이션을 줄이도록 설정했을 때 일치하는 CSS 미디어 쿼리입니다. 이를 사용해 스피너를 느리게 하거나 멈출 수 있습니다.

둘 다 괜찮습니다. 느리게 하면 활동하는 느낌이 남고, “로딩 중” 같은 텍스트 메시지를 함께 보여 준다면 멈추는 것이 가장 안전합니다.

작업을 쉬운 말로 설명하세요. 예를 들어 “결과를 불러오는 중”이나 “변경 사항 저장 중”입니다. “스피너”처럼 모호한 레이블은 피하세요.

크기가 크고 대비가 강하면 더 잘 보이지만, 보조 기술이 읽는 텍스트 레이블을 대신하지는 못합니다.

관련 도구

보색 찾기

어떤 입력에 대해서도 보색을 찾습니다. HSL 반대 색, 분할 보색 쌍, 그리고 접근성 있는 조합 제안을 반환합니다.

Webpack 설정 생성기

순수 JavaScript, React, Vue용 webpack 5 webpack.config.js를 만드세요. TypeScript, Babel, CSS 또는 Sass, 이미지, HtmlWebpackPlugin, 개발 서버, npm install 명령까지 함께 제공합니다.

Protocol Buffers 디코더

hex, Base64, Base64URL, 텍스트 또는 파일의 Protobuf 와이어 형식 바이트를 브라우저에서 디코딩하고 정확한 필드 후보를 확인한 뒤 비공개 보고서로 내보냅니다.

XML 포매터

일관된 들여쓰기로 XML 문서를 정렬 출력하고, 정확한 줄 번호로 적격성 오류를 잡아냅니다.

XSD 검증기

XML 문서를 XSD 스키마에 대해 검증하고, 요소와 타입 불일치를 정확한 줄 번호와 함께 보고합니다.

색상 혼합기

두 HEX 색상을 2-20개의 균등한 색상 견본으로 섞습니다. 양 끝 색상을 포함해 각 중간 색상을 대문자 HEX 코드로 확인하세요.

이 도구는 다른 언어로도 제공됩니다

사용 가이드와 활용 사례