Cách tạo các biểu mẫu web có thể truy cập

Feb 2, 2026

Cách

Các hình thức là một thành phần thiết yếu của Web vì họ kết nối người dùng với doanh nghiệp của bạn và giúp họ hoàn thành những gì họ đến trang web hoặc ứng dụng của bạn. Điều đó đang được nói, bạn muốn đảm bảo rằng tất cả người dùng của bạn đều có thể sử dụng các hình thức của bạn mà không cần phải chịu trải nghiệm khủng khiếp. Mục tiêu là làm cho các tương tác người dùng quan trọng này là không ma sát nhất có thể.

Mặc dù đúng là các hình thức xây dựng có thể là một nhiệm vụ khó khăn đôi khi, khiến chúng có thể truy cập vừa phải không phức tạp như bạn nghĩ (tốt người tạo ra trang web sẽ làm cho nó siêu đơn giản). Thường có những lý do được đưa ra xung quanh như 'Chúng tôi không có thời gian để lo lắng về khả năng truy cập' hoặc 'Chúng tôi sẽ có thể truy cập được sau đó'. Những lý do này thường (nếu không phải luôn luôn) không hợp lệ và bạn có thể giúp nhóm của mình thay đổi suy nghĩ này.

Tìm kiếm thêm lời khuyên? Chúng tôi đã có bạn được bảo vệ với các bài viết về các chủ đề từ web hosting đến lưu trữ đám mây .

13 phần mềm kiểm tra người dùng tốt nhất

Dưới đây là một số câu hỏi bạn nên xem xét khi xây dựng các hình thức:

Những khó khăn nào mà một người nào đó có thể bị suy giảm thị lực có thể sử dụng hình thức của tôi?
Người dùng có chỉ báo rõ ràng về dữ liệu nào được mong đợi cho đầu vào không?
Là hình thức dễ sử dụng - người dùng sẽ có thể hiểu được nó nhanh chóng?
Tôi có thể sử dụng bàn phím để hoàn thành biểu mẫu không?

Làm thế nào để tạo một mẫu đăng ký cơ bản

Tôi đã cung cấp cho bạn một số mã Starter để giúp bạn vượt lên trước. Tốt bắt đầu với điều này và cuối cùng Đến đây .

Tôi đã cung cấp cho bạn một số kiểu dáng và các yếu tố cơ bản sẽ tạo nên một hình thức đăng ký đơn giản nhưng chúng tôi có thể làm ở đây để làm cho hình thức này có thể sử dụng nhiều hơn. Với bất cứ thứ gì bạn tạo, sử dụng HTML ngữ nghĩa tốt sẽ giúp bạn một chặng đường dài.

Hãy bắt đầu bằng cách kết nối & lt; đầu vào & gt; các yếu tố để tương ứng của họ & lt; nhãn & gt; S. Chúng tôi làm điều này bằng cách cho & lt; đầu vào & gt; một id và sử dụng đó là thuộc tính cho & lt; nhãn & gt; . Chúng ta có thể sử dụng "tên" và "email" cho những thứ này và chúng tôi đã thực hiện hai điều:

Chúng tôi đã lập trình liên kết nhãn cho đầu vào. Lợi ích của việc này là nó sẽ đọc nhãn cho người dùng trình đọc màn hình nếu đầu vào đó được tập trung.
Bây giờ người dùng có thể nhấp vào nhãn và đầu vào tương ứng sẽ được tập trung, vì vậy người dùng hiện có kích thước mục tiêu lớn hơn.

Bây giờ tất cả các nhãn hiệu và nhãn của chúng tôi đều có dây, chúng tôi có thể xác định các loại đầu vào HTML. Chúng thực sự hữu ích và một cách siêu dễ dàng để đưa ra trải nghiệm người dùng tuyệt vời. Thêm kiểu Thuộc tính sẽ giúp người dùng tự động điền vào mẫu của bạn và cũng sẽ cung cấp một bàn phím phù hợp hơn cho người dùng di động. Đối với trường hợp sử dụng của chúng tôi, chúng tôi có thể làm Nhập = "Văn bản" Đối với đầu vào tên và Loại = "Email" cho đầu vào email.

Chúng tôi cũng muốn người dùng của chúng tôi có một ý tưởng tốt về loại dữ liệu nào (và định dạng của nó) mà chúng tôi mong đợi từ họ. Ở đây nó khá rõ ràng nhưng đó không phải lúc nào cũng là trường hợp. Nó nói chung là thực hành tốt để cung cấp một nhãn luôn có thể xem được và một trình giữ chỗ truyền đạt đầu vào dự kiến. Điều này có nghĩa là không sử dụng giữ chỗ Thuộc tính như một nhãn trực quan cho các đầu vào nơi nhãn không thể xem được khi người dùng bắt đầu gõ. Đây là một thực hành phổ biến cho rất nhiều nhà phát triển và thực sự cần phải được đặt lên giường một lần và mãi mãi. Chúng ta có thể cung cấp cho một trình giữ chỗ của "người yêu cũ. Jane Doe" cho tên và "ex. [email protected]" cho email.

Bây giờ chúng ta có thể đi làm về trọng tâm tiểu bang kiểu dáng. Kiểu dáng mặc định của trạng thái lấy nét là khác nhau giữa các trình duyệt và chúng ta có thể cải thiện bất cứ kiểu dáng mặc định nào có thể để làm cho nó thân thiện với người dùng hơn. Trong trường hợp của chúng tôi ở đây, chúng tôi muốn các đầu vào có một đường viền dày, màu phù hợp với nút.

14 cách dễ dàng để làm cho trang web của bạn dễ tiếp cận hơn

Thêm kiểu lấy nét vào bộ chọn nhập

Cuối cùng, chúng ta cần thêm một số kiểu tập trung xung quanh phần tử nút. Điều này thường bị bỏ qua nhưng thực sự có thể giúp người dùng chỉ có bàn phím biết họ đang ở đâu. Chúng ta cần thêm cái này & amp; :: Moz-Focus-Innner Bit để thoát khỏi một số kiểu dáng mặc định trong Firefox (bạn có thể muốn lưu đoạn trích đó để sử dụng trong tương lai).

Cứ như vậy, chúng tôi có một hình thức đăng ký cơ bản, bạn có thể tự hào và cải thiện. Bởi vì chúng tôi đã sử dụng ngữ nghĩa tốt, biểu mẫu chỉ có thể truy cập được thông qua bàn phím (thử sử dụng tab và phím cách / phím enter). Màu sắc được sử dụng cho nút là tỷ lệ màu là 11,51, đáp ứng các tiêu chuẩn AAA cho WCAG (Nguyên tắc truy cập nội dung web). Chúng tôi đã cung cấp nhãn cho cả người dùng trực quan và người dùng đọc màn hình, cũng như trạng thái tập trung theo kiểu theo kiểu cho bạn bè sử dụng bàn phím của chúng tôi. Cuối cùng, lưu ý rằng phông chữ được đặt thành 18px. trong cơ thể. Điều này làm cho hình thức của chúng tôi có thể đọc được nhiều hơn nhiều (bạn nên cố gắng ở trên 14px).

Thiết kế và xây dựng với khả năng tiếp cận trong tâm trí cần thực hành nhưng bạn sẽ là một nhà phát triển tốt hơn cho nó và giúp làm cho Web trở thành một nơi tốt hơn.

generate, the award winning conference for web designers, returns to NYC on April 24-25! Click the image to book a ticket — Tạo, hội nghị giành giải thưởng cho các nhà thiết kế web, trở về NYC vào ngày 24-25 tháng 4! Nhấp vào hình ảnh để đặt vé

Bài viết này ban đầu được xuất bản trong số phát hành 316 của mạng lưới , Tạp chí bán chạy nhất thế giới cho các nhà thiết kế và nhà phát triển web. MUA ĐĂNG KÝ 316 TẠI ĐÂY hoặc là Đăng ký tại đây .

Những bài viết liên quan:

Khắc phục khả năng truy cập thất bại với công cụ miễn phí này
50 công cụ mới tuyệt vời cho các nhà phát triển năm 2019
Thiết kế của bạn có thể truy cập như thế nào?

Cách tạo các biểu mẫu web có thể truy cập

Làm thế nào để tạo một mẫu đăng ký cơ bản

Thêm kiểu lấy nét vào bộ chọn nhập

Cách - Các bài báo phổ biến nhất

Hướng dẫn Adobe Fresco: Tạo một bức chân dung trong ứng dụng Vẽ tranh

Chụp ảnh chân dung: Làm thế nào để chụp chân dung hoàn hảo

Cách sử dụng các lớp thông minh trong Photoshop

Tạo hình ảnh đa phơi sáng với Adobe CC

Giữ kiểm soát phiên bản hoàn hảo với Tóm tắt

Tạo hình minh họa đơn giản cho Web

Cách tạo nhân vật 3D cách điệu cho các trò chơi

Tạo một nhân vật với chủ nghĩa hiện thực cách điệu

Thể loại