액세스 가능한 웹 양식을 만드는 방법

Sep 17, 2025

어떻게

양식은 사용자를 비즈니스에 연결하고 사이트 또는 앱에 온 것을 수행 할 수 있도록 도움이되므로 웹의 필수 구성 요소입니다. 그 말이 말하면, 모든 사용자가 끔찍한 경험을 겪지 않고 양식을 사용할 수 있는지 확인하고 싶습니다. 목표는 이러한 핵심 사용자 상호 작용을 가능한 한 마찰없는 것으로 만드는 것입니다.

건물 양식이 때로는 어려운 일이 될 수 있지만, 적당히 접근 할 수있는 것은 생각할 수있는 것처럼 복잡하지는 않습니다 (좋은 웹 사이트 빌더 슈퍼 간단하게 만들 것입니다). '접근성에 대해 걱정할 시간이 없거나'우리는 나중에 액세스 할 수있게 할 시간이 없으므로 종종 변명이 던져집니다. 이러한 변명은 종종 (항상 그렇지 않은 경우) 유효하지 않으며 팀 이이 사고 방식을 변경하는 데 도움이 될 수 있습니다.

더 많은 조언을 찾고 계십니까? 우리는 주제에 대한 게시물로 덮여 있습니다 웹 호스팅 ...에 클라우드 스토리지 ...에

13 개의 사용자 테스트 소프트웨어의 최고의 조각

양식을 작성할 때 고려해야 할 몇 가지 질문이 있습니다.

시각 장애가있는 누군가가 내 양식을 사용하는 어려움은 무엇입니까?
사용자가 입력에 대해 예상되는 데이터가 명확한 표시가 있습니까?
사용하기 쉬운 양식입니다. 사용자는 사용자가 신속하게 이해할 수 있습니까?
양식을 작성하기 위해 키보드를 사용할 수 있습니까?

기본 가입 양식을 만드는 방법

나는 당신이 앞으로 나아갈 수 있도록 당신에게 어떤 스타터 코드를주었습니다. 잘 이걸 시작해 그리고 결국 이걸 해줘 ...에

나는 간단한 가입 양식을 구성 할 몇 가지 기본적인 스타일과 요소를 제공하지만이 양식을 더 사용할 수있게하기 위해 여기에서 할 수있는 것이 많습니다. 좋은 의미 론적 HTML을 사용하여 당신이 만드는 것과 함께 당신을 먼 길게 얻을 수 있습니다.

그를 연결하여 시작합시다 & lt; 입력 & gt; 각자의 요소 & lt; label & gt; 에스. 우리는 그를주는 것으로 이것을합니다 & lt; 입력 & gt; ID 및이를 사용하여 & lt; label & gt; ...에 우리는 "이름"과 "이메일"을 사용할 수 있으며 이미 두 가지를 완료했습니다.

우리는 프로그래밍 방식으로 레이블을 입력에 연결합니다. 이 혜택은 입력이 집중되면 화면 판독기 사용자에게 라벨을 읽을 것입니다.
사용자는 이제 레이블을 클릭 할 수 있으며 해당 입력이 집중되므로 사용자는 이제 사용자에게 큰 대상 크기가 있습니다.

이제 우리의 입력 및 레이블이 모두 유선되도록, 우리는 HTML 입력 유형을 정의 할 수 있습니다. 이것들은 정말 유용하고 탁월한 사용자 경험을 제공하는 슈퍼 쉽게 쉽게 이동할 수 있습니다. 그를 추가하십시오 유형 속성은 사용자가 양식을 자동으로 채우는 데 도움이되며 모바일 사용자에게보다 적합한 키보드를 제공합니다. 우리의 유스 케이스의 경우 우리는 할 수 있습니다 유형 = "텍스트" 이름 입력 및 유형 = "이메일" 이메일 입력의 경우.

또한 사용자가 우리가 기대하는 어떤 유형의 데이터 (및 형식화)에 대해 좋은 생각을 원합니다. 여기 꽤 분명하지만 항상 그렇지는 않습니다. 일반적으로 볼 수있는 레이블과 예상 된 입력을 전달하는 자리 표시 자를 제공하는 것은 일반적으로 좋은 방법입니다. 이것은 그를 사용하지 않는 것을 의미합니다 자리 표시 자 속성은 사용자가 타이핑을 시작하면 레이블이 보이지 않는 입력을위한 시각적 레이블입니다. 이것은 많은 개발자들에게 인기있는 관행이었고 정말로 한 번 그리고 모두를 위해 잠자리에 들여야합니다. 우리는 이메일을 위해 이름과 "[email protected]"과 "ex. [email protected]"의 자리 표시자를 자리 표시 자에게 줄 수 있습니다.

이제 우리는 초점을 맞출 수 있습니다 상태 스타일링. 포커스 상태의 기본 스타일은 브라우저간에 다르므로 기본 스타일링이 더 많은 사용자에게 친숙해질 수 있도록 향상 될 수 있습니다. 여기에서는 여기에서 입력을 두껍고 단추와 일치시키는 컬러 윤곽을 갖도록 원합니다.

웹 사이트를보다 액세스 할 수있는 14 개의 쉬운 방법

입력 선택기에 초점 스타일을 추가하십시오

마지막으로 버튼 요소에 초점 스타일을 추가해야합니다. 이것은 종종 간과되지만 키보드 전용 사용자가 어디에 있는지 알 수 있습니다. 우리는 이것을 추가해야합니다 & amp; :: Moz-Focus-inner. 비트 Firefox에서 일부 기본 스타일을 제거하려면 (미래의 사용을 위해 스 니펫을 저장하고 싶을 수 있습니다).

그런 식으로 우리는 당신이 자랑스럽게하고 개선 할 수있는 기본 가입 양식을 가지고 있습니다. 우리는 좋은 의미를 사용했기 때문에 양식은 키보드만으로 액세스 할 수 있습니다 (탭 및 스페이스 바 / Enter 키를 사용해보십시오). 버튼에 사용 된 색상은 WCAG (웹 컨텐츠 액세스 가능성 지침)에 대한 AAA 표준을 충족하는 11.51의 색 비율입니다. 우리는 Visual 사용자 및 화면 판독기 사용자 모두에 대한 레이블을 제공하고 키보드를 사용하여 스타일로 된 포커스 상태를 제공했습니다. 마지막으로 글꼴이 설정됩니다 18px. 신체에서. 이것은 우리의 형식을 훨씬 더 읽을 수있게 만듭니다 (14px 이상으로 유지해야합니다).

민주성을 염두에두고 설계하고 건물을 구축하면 연습이 필요하지만 더 나은 개발자가 될 수 있으며 웹을 더 나은 곳으로 만드는 데 도움이됩니다.

generate, the award winning conference for web designers, returns to NYC on April 24-25! Click the image to book a ticket — 웹 디자이너를위한 수상 경력이있는 컨퍼런스, 4 월 24 일부터 25 일까지 NYC로 돌아갑니다! 티켓을 예약하려면 이미지를 클릭하십시오

이 기사는 원래 316 호에서 출판되었습니다 그물 웹 디자이너 및 개발자를위한 세계 최고의 잡지. 여기 문제를 구입하십시오 또는 여기를 구독하십시오 ...에

관련 기사:

이 무료 도구로 접근성을 수정할 수 있습니다
2019 년 개발자를위한 50 개의 멋진 새로운 도구
디자인이 얼마나 액세스 할 수 있습니까?

액세스 가능한 웹 양식을 만드는 방법

기본 가입 양식을 만드는 방법

입력 선택기에 초점 스타일을 추가하십시오

어떻게 - 가장 인기있는 기사

현지 개발 환경을 설정하는 방법

WEBVR 시작하기

친 화성 디자이너 : 펜 도구를 사용하는 방법

터미네이터 라인이란 무엇입니까?

Photoshop에서 공상 공시 게임 설정 페인트

Zbrush의 Darth Vader 모델

영화를위한 세계를 만드는 방법

조각 및 페인트 변위지도를 결합하는 방법

카테고리