NộI Dung
- Tóm tắt ban đầu là gì?
- Bạn đã bắt đầu dự án như thế nào?
- Bạn đã tiếp cận việc tạo mẫu như thế nào?
- Nói chuyện với chúng tôi về màu sắc. Bạn đã chọn bảng màu của mình như thế nào?
- Còn về kiểu chữ - bạn đã đưa ra quyết định thông minh nào ở đây chưa?
- Có thể có một trang web vừa có thể truy cập vừa đẹp không?
- Trang web đáp ứng. Bạn có thấy điều này là gánh nặng hay giải thoát?
- Bạn đã quản lý nhu cầu thay đổi quy mô của trang web bên trong cửa sổ trình duyệt như thế nào?
- Bạn đã sử dụng và triển khai những công nghệ hỗ trợ nào?
- Một lời khuyên duy nhất mà bạn sẽ đưa ra cho các nhà thiết kế web đang tìm cách làm cho các trang web của họ dễ truy cập hơn là gì?
RNIB là tổ chức từ thiện hàng đầu cung cấp thông tin và hỗ trợ cho gần hai triệu người ở Vương quốc Anh bị mất thị lực. Cơ quan kỹ thuật số Precedent đã thắng thầu để tạo một trang web mới cho tổ chức từ thiện. Nhóm đã sử dụng phương pháp tiếp cận 'hình thức theo chức năng' để tạo ra một trang web được sắp xếp hợp lý, dễ tiếp cận, phục vụ cho những người dùng có mức độ khiếm thị khác nhau.Chúng tôi đã nói chuyện với nhóm để tìm hiểu cách họ đã làm điều đó ...
Tóm tắt ban đầu là gì?
Adam Elleston: Để thiết kế và xây dựng một trang web đáp ứng trong Drupal cung cấp các tiêu chuẩn cao nhất về khả năng truy cập, cho phép RNIB cung cấp nhiều dịch vụ trực tuyến hơn và trải nghiệm trực tuyến tốt hơn.
Benn Pearson: Một trong những thách thức chính của chúng tôi là chúng tôi cần áp dụng và đạt được các tiêu chuẩn lướt web phù hợp của RNIB: sử dụng các yếu tố tốt nhất của WCAG qua ba cấp độ (A, AA và AAA), đồng thời giải quyết các vấn đề khác liên quan đến khả năng truy cập để duyệt web. Chúng tôi rất vui mừng vì điều này, vì nó mang lại cơ hội để vượt qua ranh giới của thiết kế web đáp ứng để cải thiện trải nghiệm web cho những người bị khiếm thị.
Bạn đã bắt đầu dự án như thế nào?
Ed Richards: Phần lớn khách truy cập trang web có các mức độ khó khăn khác nhau liên quan đến thị giác, vì vậy trong các giai đoạn chiến lược và trải nghiệm người dùng của dự án, chúng tôi đã làm việc với cố vấn khả năng tiếp cận Léonie Watson. Điều này cho phép chúng tôi hình thành các yêu cầu, các câu lệnh kiểm tra và triển khai đào tạo.
BP: Có được cái nhìn sâu sắc về cách người dùng tương tác với trang web là điểm khởi đầu quan trọng. Điều này cho phép chúng tôi nhanh chóng xác định các vấn đề cụ thể về khả năng tiếp cận và từ đó chúng tôi đưa ra các ý tưởng và giải pháp khả thi. Chúng tôi thấy các video trên YouTube của nhà phê bình phim mù Tommy Edison là một nguồn tài nguyên tuyệt vời.
Bạn đã tiếp cận việc tạo mẫu như thế nào?
ER: Khi chúng tôi đã hình thành phương pháp tiếp cận mô-đun, chúng tôi có thể tạo nguyên mẫu trên giấy cho tất cả các mô-đun. Việc xếp chồng các mô-đun làm cho nó thực sự hiệu quả và thậm chí còn cho phép chúng tôi tạo nguyên mẫu trên giấy cho các chế độ xem di động, máy tính bảng và máy tính để bàn, đưa vào cách chúng tôi làm việc trong Photoshop bằng cách tạo ra tất cả các mô-đun dưới dạng Smart Objects.
BP: Sau đó, chúng tôi tạo ra một nguyên mẫu tương tác. Ban đầu, chúng tôi sử dụng điều này để kiểm tra các mô-đun đáp ứng, nhưng sau đó nó được sử dụng như một hướng dẫn kiểu tương tác để kiểm tra khả năng truy cập. Cuối cùng nó đã trở thành một tham chiếu cho tích hợp Drupal.
AE: Hướng dẫn kiểu tương tác hoạt động thực sự hiệu quả trong quá trình tích hợp Drupal, vì nó cho phép chúng tôi nhanh chóng triển khai và thử nghiệm các ý tưởng bên ngoài Drupal. Đây cũng là một tài liệu tham khảo tốt để giữ cho HTML nhất quán và làm sạch HTML của Drupal.
Nói chuyện với chúng tôi về màu sắc. Bạn đã chọn bảng màu của mình như thế nào?
ER: Để có khả năng tiếp cận tối ưu, bạn phải có màu sắc tương phản - nhưng chúng tôi không muốn sao chép trang web cũ, nơi đã sử dụng màu đồng nhất ở khắp mọi nơi. Chúng tôi đã sản xuất một bảng màu từ màu thương hiệu và sử dụng các công cụ tương phản màu để đáp ứng tỷ lệ tương phản WCAG.
Còn về kiểu chữ - bạn đã đưa ra quyết định thông minh nào ở đây chưa?
BP: Kiểu chữ là một phần của sự thay đổi lớn hơn trong việc xây dựng thương hiệu của RNIB bởi The Good Agency, nhưng việc đảm bảo chúng tôi nằm trong công thức tỷ lệ tương phản màu WCAG là rất quan trọng. Tất cả đều được thiết kế theo công thức toán học và định hướng chiều cao đường cơ sở của chúng tôi, tạo thành nhịp điệu dọc của kiểu chữ.
Có thể có một trang web vừa có thể truy cập vừa đẹp không?
ER: Chắc chắn rồi. Thiết kế tinh gọn mà chúng tôi đạt được cùng với khả năng sử dụng liền mạch là minh chứng cho điều đó.
BP: Màu sắc thương hiệu, kiểu chữ và nhịp điệu dọc đều đã được cân nhắc, thử nghiệm và tính toán cẩn thận. Tôi nghĩ rằng phương pháp tiếp cận 'hình thức tuân theo chức năng' này có thể dẫn đến các trang web đẹp từ trong ra ngoài.
Trang web đáp ứng. Bạn có thấy điều này là gánh nặng hay giải thoát?
BP: Nó có thể phức tạp, nhưng tôi đam mê cách tiếp cận đáp ứng có thể đưa trải nghiệm người dùng lên một cấp độ khác. Trong trường hợp này, điều quan trọng là tạo ra một trang web trực quan, hợp lý và liền mạch để sử dụng. Trong quá trình phát triển, những thứ như ngăn chặn tiêu điểm tab trên điều hướng ngoài canvas là một công việc bổ sung nhỏ, nhưng khả năng phản hồi là rất quan trọng đối với những thứ như duy trì kích thước văn bản đọc tối ưu và phóng to trang. Thêm vào đó, đó là một chút thú vị.
Bạn đã quản lý nhu cầu thay đổi quy mô của trang web bên trong cửa sổ trình duyệt như thế nào?
BP: Tính năng thu phóng trang hoạt động thực sự tốt trên các trang web đáp ứng, vì vậy điều này đã hữu ích. Trang trông tuyệt vời với 250% ở chế độ xem máy tính bảng và vẫn nhất quán khi nó di chuyển qua các chế độ xem đáp ứng lên đến 500% ở chế độ xem trên thiết bị di động.
Bạn đã sử dụng và triển khai những công nghệ hỗ trợ nào?
BP: Hỗn hợp thực sự giúp ích cho quy trình làm việc trong quá trình sản xuất nguyên mẫu và hướng dẫn phong cách tương tác. Sử dụng điều này cùng với các phương pháp BEM và SMACSS đã giúp hình thành cấu trúc và giữ cho mã có thể bảo trì được. Thư viện mixin Sass nội bộ của chúng tôi được sử dụng để đảm bảo mọi thứ được thêm vào đều có thể truy cập được.
AE: Chúng tôi đã sử dụng quy trình Git và làm việc trên một tính năng và phát hành quy trình làm việc, dựa trên câu chuyện của người dùng và chạy nước rút. Chúng tôi cũng đã sử dụng Jenkins và Drush để tự động hóa các bản phát hành và triển khai nhanh chóng và đáng tin cậy.
Một lời khuyên duy nhất mà bạn sẽ đưa ra cho các nhà thiết kế web đang tìm cách làm cho các trang web của họ dễ truy cập hơn là gì?
BP: Khi bạn đã có cấu trúc ngữ nghĩa HTML, không có bất kỳ CSS hoặc JS nào, trang của bạn sẽ có thể truy cập được, vì vậy chỉ cần kiểm tra tất cả kiểu bạn thêm vào. Một cách để làm điều này là thêm WAI-ARIA, nhưng đừng lạm dụng nó vì nó sẽ cung cấp cho người dùng quá nhiều thông tin, đặc biệt là khi kết hợp với HTML5.
AE: Thử nghiệm trong trình đọc màn hình chỉ sử dụng bàn phím - chỉ cần lướt qua trang web để xem nó hoạt động thực sự hữu ích như thế nào.
ER: Bản chất không rõ ràng của khả năng truy cập có nghĩa là thử nghiệm người dùng là rất quan trọng. Hiểu cách người dùng tương tác với trang RNIB và xây dựng giải pháp là chìa khóa cho kết quả liền mạch mà chúng tôi đã đạt được.
Bài báo này ban đầu xuất hiện trên tạp chí net số 256.
