6 bước để làm cho thiết kế web của bạn có thể truy cập được

Chúng ta đang sống trong một thế giới mà chúng ta ngày càng phụ thuộc vào Internet cho mọi việc chúng ta làm. Hãy nghĩ về nó: bạn đã tìm thấy công việc cuối cùng của mình ở đâu? Bạn đã ứng tuyển công việc đó như thế nào? Làm thế nào để bạn làm ngân hàng của bạn? Bạn mua sắm ở đâu? Làm thế nào để bạn giữ liên lạc với bạn bè và những người thân yêu của bạn?

Internet có thể là một nguồn tài nguyên luôn hiện hữu đối với hầu hết mọi người, nhưng đối với những người khuyết tật, kết nối không phải lúc nào cũng có sẵn. Có những chương trình và thiết bị giúp người khuyết tật có thể truy cập toàn bộ trang web của bạn, chẳng hạn như trình đọc màn hình, nhưng đây chỉ là một phần của giải pháp.

Phần khác của phương trình là thiết kế các trang web và ứng dụng theo cách giúp người khuyết tật có thể truy cập chúng, thông qua việc sử dụng các thiết bị hỗ trợ hoặc đơn giản là thông qua thiết kế chu đáo.

Tại sao khả năng truy cập trong thiết kế web lại quan trọng
–

Theo dữ liệu từ năm 2012, gần 1/5 người Mỹ sống với một dạng khuyết tật nào đó. Trên toàn thế giới, khoảng một tỷ người, hay 15 phần trăm dân số thế giới, sống với tình trạng khuyết tật.

Không phải tất cả các khuyết tật đều ngăn cản mọi người đọc màn hình và sử dụng internet. Ví dụ, những số liệu này bao gồm những cá nhân dựa vào xe tập đi và xe lăn. Nhưng các tình trạng khác, như khiếm thị, khó cầm nắm đồ vật, tự kỷ và điếc, chỉ cần kể tên một số, có thể hạn chế nghiêm trọng khả năng sử dụng máy tính hoặc điện thoại thông minh của một người mà không có chỗ ở.

Khả năng tiếp cận trong thiết kế web: ở một số nơi, đó là một gợi ý — ở những nơi khác, đó là luật
–

Nếu bạn đang ở Hoa Kỳ, có lẽ bạn đã quen thuộc với các tiêu chuẩn tuân thủ web nằm trong Đạo luật Người khuyết tật Hoa Kỳ (ADA). Rất nhiều quốc gia khác trên thế giới đã áp dụng các hướng dẫn tuân thủ tương tự, như Đạo luật phân biệt đối xử về người khuyết tật của Úc, Luật về khả năng tiếp cận của Braxin và Kế hoạch hành động eEurope của Liên minh Châu Âu.

Nhiều nguyên tắc có trong các luật và sáng kiến ​​này đến từ Nguyên tắc hỗ trợ truy cập nội dung web toàn cầu (WCAG), một tập hợp các nguyên tắc do World Wide Web Consortium (W3C) tạo ra và duy trì thông qua Sáng kiến ​​hỗ trợ truy cập web (WAI). Đủ từ viết tắt cho ya?

W3C được thành lập vào năm 1994 bởi Tim Berners-Lee, vâng, điều đó Tim Berners-Lee, với mục đích tạo ra các hướng dẫn và giao thức nhằm thúc đẩy sự phát triển bền vững và lâu dài của World Wide Web. Ngày nay, nó bao gồm hơn 400 tổ chức, nhiều tổ chức tham gia vào WAI. Phiên bản hướng dẫn gần đây nhất được xuất bản là WCAG 2.1, ra mắt vào năm 2018.

WCAG 2.1 bao gồm tất cả các hướng dẫn mới nhất và các phương pháp hay nhất mà các nhà thiết kế web nên tuân theo để đảm bảo rằng các trang web của họ đều có thể truy cập được cho tất cả người dùng. Đó là một tài liệu dài, dày đặc được tạo thành từ rất nhiều biệt ngữ kỹ thuật. Thay vì ủ rũ trong hai tháng tới để đọc toàn bộ, hãy thiết kế trang web của bạn với các nguyên tắc về khả năng truy cập sau đây. Sau đó, yêu cầu một nhà phát triển kiểm tra mã của bạn để đưa thiết kế hướng đến khả năng tiếp cận của bạn tuân thủ đầy đủ.

Cung cấp thẻ alt cho hình ảnh của bạn
–

Thẻ Alt là những mô tả ngắn gọn về hình ảnh bạn sử dụng bị chôn vùi trong html của trang web. Hầu hết người dùng không bao giờ nhìn thấy những mô tả này, nhưng khách truy cập trang web sử dụng trình đọc màn hình dựa vào chúng để biết những gì trong hình ảnh trên trang web của bạn. Thẻ alt tốt là một mô tả ngắn, sáng tạo, mô tả chính xác hình ảnh mà nó được gắn vào.

Hãy nhìn vào hình ảnh bên trái. Đây là một ví dụ về thẻ alt tốt cho hình ảnh này: rminh họa thực tế về cá và ổ bánh mì trong giỏ.

Và đây là một thẻ alt không hoàn toàn tốt: bánh mì và cá

Thấy sự khác biệt?

Thẻ thay thế không chỉ mang lại lợi ích cho người dùng khiếm thị; chúng cũng vì lợi ích của bạn. Các thẻ alt được chế tạo tốt sẽ cải thiện SEO trang web của bạn, có nghĩa là lưu lượng truy cập trang web phù hợp hơn và cuối cùng, nhiều chuyển đổi hơn.

Giữ cho điều hướng của bạn có thể dự đoán được
–

Hệ thống điều hướng mà trang web của bạn sử dụng phải nhất quán trên các trang của nó. Điều này bao gồm các biểu tượng bạn sử dụng và cách khách truy cập đến các trang khác nhau trong trang web. Ví dụ: nếu trang chủ của bạn có thanh tiêu đề trên cùng với các menu thả xuống, thì mỗi trang khác của bạn cũng phải có cách sắp xếp này.

Tương tự, các biểu tượng bạn sử dụng trên trang web của mình cần phải nhất quán. Không có bộ thu điện thoại cho biểu tượng “liên hệ với chúng tôi” trên trang chủ của bạn, sau đó là biểu tượng điện thoại thông minh trên trang Giới thiệu của bạn. Nó khó hiểu và có thể gây khó khăn cho các chương trình trợ năng trong việc tìm ra cách sử dụng trang web của bạn. Bạn cũng nên tránh xa mọi loại điều hướng tự động và tự động phát nhạc và video.

Tại sao? Bởi vì chúng không chỉ gây khó chịu mà còn khó cho người dùng với trình đọc màn hình để xác định cách tạm dừng chúng. Và khi trình chiếu hoặc băng chuyền cuộn qua nội dung với tốc độ nhanh, người dùng có thể trở nên bối rối và thất vọng.

Tránh nội dung có thể gây ra phản ứng vật lý
–

Bạn còn nhớ tập phim về Pokemon khiến gần 700 đứa trẻ phải gấp rút đến bệnh viện vì nó gây ra cơn động kinh ở chúng? Đó là lý do tại sao bảng điều khiển trò chơi của bạn hiện có cảnh báo động kinh cảm quang. Một số người dễ bị co giật khi tiếp xúc với ánh đèn nhấp nháy nhanh và các kiểu chuyển động. Tránh những loại hoạt ảnh này trên trang web của bạn để giữ an toàn cho mọi người dùng.

Làm cho văn bản của bạn lớn, in đậm và có tổ chức
–

Làm cho trang web của bạn dễ dàng cho những người có tầm nhìn hạn chế nhìn thấy bằng cách làm cho văn bản của bạn lớn. Về cơ bản, hãy làm cho nó tương đương với một cuốn sách in khổ lớn. 16px thường là một kích thước tốt cho nội dung văn bản, với tiêu đề lớn hơn.

Có nhiều điều để làm cho văn bản của bạn dễ đọc hơn là làm cho nó lớn. Sử dụng phông chữ dễ đọc và dễ đọc cho người dùng mắc chứng khó đọc. Bộ Y tế và Dịch vụ Nhân sinh Hoa Kỳ đề xuất Times New Roman, Arial, Helvetica, Tahoma, Calibri và Verdana là các phông chữ có thể truy cập được. Bạn có thể sử dụng nó một cách an toàn bằng cách chọn một trong số này hoặc tìm một phông chữ khác phù hợp với tất cả khách truy cập trang web của bạn. Phông chữ dễ đọc nhất là phông chữ:

• Không có serifs
• Có độ rộng cố định giữa các chữ cái
• Sử dụng các chữ cái in đậm

Văn bản của bạn cũng nên được sắp xếp theo cách dễ đọc, hợp lý. Ngắt văn bản thành các phần nhỏ hơn được chia theo tiêu đề và tiêu đề phụ. Điều này không chỉ làm cho văn bản của bạn trông gọn gàng hơn mà còn giúp trình đọc màn hình giải mã cho người dùng của họ dễ dàng hơn.

Cuối cùng, văn bản của bạn phải có độ tương phản cao so với nền của nó. Văn bản có màu quá giống với màu nền của nó rất khó đọc đối với nhiều người dùng máy tính, đặc biệt là những người dùng bị mù màu. Sử dụng một công cụ trực tuyến như Công cụ kiểm tra độ tương phản để xem phông chữ và màu nền đã lên kế hoạch của bạn hoạt động cùng nhau như thế nào.

Làm cho nó hoạt động chỉ với bàn phím (và không có bàn phím)
–

Một số người dùng không thể cầm chuột hoặc giữ tay ổn định trên bàn di chuột của máy tính xách tay. Những người dùng này dựa vào bàn phím của họ để điều hướng các trang web, vì vậy, hãy làm cho bàn phím của bạn có thể sử dụng được cho họ bằng cách xây dựng nó theo cách làm cho nó hoạt động đầy đủ chỉ với một bàn phím.

Cũng có những người dùng không thể sử dụng bàn phím và dựa vào các phương tiện khác để điều hướng trang web, chẳng hạn như các chương trình nhận dạng giọng nói và di chuyển đầu. Trang web của bạn cũng phải tương thích với các loại chương trình này, bởi vì không có chúng, những người không sử dụng tay sẽ không thể sử dụng trang web của bạn.

Kiểm tra mã của bạn (hoặc tự làm)
–

Không phát hành trang web của bạn ra toàn thế giới cho đến khi bạn đã có tất cả mã của mình được kiểm tra bởi một nhà phát triển có năng lực, người đã quen thuộc với các phương pháp hay nhất về khả năng truy cập web mới nhất. Ngoài ra, bạn có thể sử dụng một công cụ kiểm tra như công cụ WAVE của Google Chrome, công cụ này sẽ tìm thấy các điểm trong mã của bạn mà bạn đang thiếu các tính năng trợ năng chính. Sẽ không bao giờ phiền khi có một nhà phát triển con người xem xét mã của bạn sau khi bạn chạy nó thông qua một công cụ như WAVE để đảm bảo rằng không có gì bị bỏ sót hoặc bị đưa ra khỏi ngữ cảnh.

Giúp mọi người có thể sử dụng trang web của bạn
–

Hãy nhớ lý do bạn đưa ra những lựa chọn thiết kế này: để loại bỏ bất kỳ rào cản nào có thể khiến mọi người không sử dụng trang web của bạn. Chắc chắn, bạn cũng muốn tuân thủ luật pháp và tránh tạo ra tình huống bạn phải chịu trách nhiệm về thiệt hại do phân biệt đối xử của người dùng, nhưng hãy luôn nhớ lý do cho các nguyên tắc bạn phải tuân thủ: Khi trang web của bạn được thiết kế với tất cả người dùng cần trong tâm trí, không ai bị bỏ rơi.