동작을 알려 주는 버튼
볼 수 없는 사용자도 동작을 알 수 있도록 명확하게 이름을 지정하세요.
동작을 알려 주는 버튼은(는) CoddyKit의 무료 Web Accessibility Academy 강의입니다. 이것은 4개 중 3번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 Web Accessibility Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. Web Accessibility Academy 강의에는 총 4개의 강의가 포함되어 있습니다.
버튼에는 이름이 필요합니다
사용자가 무엇을 하는지 알아야 버튼을 유용하게 사용할 수 있습니다. 접근 가능한 이름은 사용자가 버튼을 누르기 전에 스크린 리더가 소리 내어 읽는 내용입니다.
텍스트가 이름이 됩니다
일반적인 버튼에서는 버튼 안에 보이는 텍스트가 접근 가능한 이름이 됩니다. 명확한 단어는 명확한 안내로 이어집니다.
<button>Save changes</button>동작을 말하기
저장, 삭제 또는 장바구니에 추가처럼 버튼이 수행하는 동작으로 버튼의 레이블을 지정하세요. 동사를 사용하면 사용자에게 정확히 어떤 일이 일어나는지 알려 줄 수 있습니다.
모호한 레이블 피하기
여러 버튼에 같은 표현이 사용되면 ‘OK’, ‘제출’ 또는 ‘이동’ 같은 레이블은 모호합니다. 각 버튼이 독립적으로 의미를 갖도록 구체적인 동작의 이름을 지정하세요.
아이콘만 있는 버튼의 문제
텍스트가 없는 아이콘 버튼에는 접근 가능한 이름이 없습니다. 스크린 리더가 단순히 버튼이라고만 말하면 사용자는 무엇을 해야 할지 추측해야 합니다. 🤔
<button><svg>...</svg></button>아이콘 버튼에 이름 지정하기
텍스트가 없는 버튼에는 aria-label로 이름을 지정하세요. 그러면 아이콘은 그대로 표시되면서도 보조 기술이 버튼의 동작을 알려 줍니다.
<button aria-label="Close dialog"><svg>...</svg></button>장식용 아이콘 숨기기
레이블이 이미 동작을 설명한다면 내부 아이콘에 aria-hidden을 지정하여 불필요한 내용으로 읽히지 않게 하세요.
<svg aria-hidden="true">...</svg>상태 변경 알리기
전환 버튼은 자신의 상태를 알려야 합니다. aria-pressed를 사용하면 스크린 리더가 켜져 있는지 꺼져 있는지 말해 줍니다.
<button aria-pressed="true">Mute</button>콘텐츠 펼치기
패널을 표시하거나 숨기는 버튼에는 aria-expanded를 지정하여 패널이 열려 있는지 접혀 있는지 사용자가 들을 수 있게 하세요.
<button aria-expanded="false">Details</button>짧고 정확한 레이블 유지하기
좋은 레이블은 짧으면서도 정확합니다. 버튼을 눌렀을 때 어떤 일이 일어나는지 정확히 약속하고, 예기치 않은 결과를 만들지 않습니다.
보이는 이름과 접근 가능한 이름 맞추기
버튼에 보이는 텍스트가 있다면 접근 가능한 이름 안에도 그 단어를 포함하세요. 그래야 음성 제어 사용자가 화면에 보이는 레이블을 말할 수 있습니다.
빠른 확인
아이콘만 있는 닫기 버튼에는 X만 표시됩니다. 접근 가능한 이름을 어떻게 지정할까요?
복습
모든 버튼에 동작에 따른 이름을 지정하고, 아이콘만 있는 버튼에는 레이블을 추가하며, aria 속성으로 상태를 노출하세요. 그러면 사용자는 버튼이 무엇을 하는지 언제나 알 수 있습니다. 👍
AI 튜터와 함께 HTML을(를) 배우세요 — 무료
브라우저에서 실제 코드를 작성하고 실행하며, 24/7 AI 튜터로부터 즉각적인 도움을 받고, 웹이나 앱에서 중단한 부분부터 계속 학습하세요.
- 코스
- 30
- 레슨
- 120
자주 묻는 질문
“동작을 알려 주는 버튼” 강의는 무료인가요?
네 — “동작을 알려 주는 버튼” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 Web Accessibility Academy 강의 전체를 잠금 해제할 수 있습니다. Web Accessibility Academy 강의에는 총 4개의 강의가 포함되어 있습니다.
“동작을 알려 주는 버튼”에서 뭘 배우나요?
볼 수 없는 사용자도 동작을 알 수 있도록 명확하게 이름을 지정하세요. 브라우저에서 직접 실행하는 실습 코드로 Web Accessibility Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.
Web Accessibility Academy을(를) 시작하는 데 경험이 필요한가요?
사전 경험은 필요하지 않습니다. CoddyKit의 Web Accessibility Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 3번째 강의입니다.
“동작을 알려 주는 버튼” 강의는 얼마나 걸리나요?
대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.
이 Web Accessibility Academy 강의에서 코드를 작성하고 실행할 수 있나요?
네. 모든 Web Accessibility Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.