Danh sách kiểm tra khả năng truy cập web

Khả năng truy cập là thực tiễn đảm bảo các trang web có sẵn như nhau cho người khuyết tật để họ có quyền truy cập như nhau vào hàng hóa và dịch vụ mà các trang web cung cấp. Nó là một phần không thể thiếu trong thiết kế và phát triển web chuyên nghiệp.


Contents

Tại sao bạn nên quan tâm Khả năng tiếp cận?

Có nhiều lý do tại sao các nhà phát triển, nhà thiết kế và chủ nhân / khách hàng của họ nên đảm bảo rằng khả năng truy cập là một phần sớm và không thể thiếu trong quá trình phát triển web.

  • Ở nhiều vùng lãnh thổ, chẳng hạn như Hoa Kỳ, EU, Anh, Israel và Nhật Bản, đó là một yêu cầu pháp lý không phân biệt đối xử với mọi người do khuyết tật của họ. Ở Mỹ năm ngoái, 2.235 vụ kiện trang web ADA mới đã được đệ trình tại tòa án liên bang. Đó là một người mỗi giờ.
  • Các trang web có thể truy cập có xu hướng được mã hóa tốt hơn, mạnh mẽ hơn và xếp hạng tốt trên các công cụ tìm kiếm.
  • Các trang web có thể truy cập có xu hướng tiện dụng hơn cho khách không khuyết tật, dẫn đến sự hài lòng và chuyển đổi lớn hơn.
  • Các trang web không thể truy cập là xấu cho kinh doanh. Năm 2019, một Khảo sát của Anh thấy rằng hơn 4 triệu người đã từ bỏ một trang web bán lẻ vì những rào cản tiếp cận mà họ tìm thấy. Doanh nghiệp bị mất đó, ‘Click-Away Pound, là 17,1 tỷ bảng. Đó tỷ. Ở Anh một mình.
  • Nó kinh doanh xấu để tự nguyện từ chối khách hàng tiềm năng.

Các tiêu chuẩn chung và các vấn đề

May mắn thay, W3C (cơ quan sản xuất nhiều tiêu chuẩn mà web dựa vào) có một tiêu chuẩn về cách làm cho các trang web có thể truy cập được. Nó được gọi là Nguyên tắc truy cập nội dung web (WCAG). Có ba mức độ phù hợp (A, AA, AAA) với ’A, là mức độ tiếp cận thấp nhất. Tôi khuyên bạn nên nhắm đến cấp độ AA.

Thật không may, WCAG là một bài đọc dài, khô khan và rất kỹ thuật, vì vậy hãy để Lôi nhìn vào những gì bạn có thể làm tương đối dễ dàng và nhận được những tiếng nổ lớn nhất cho bạn. Đây là một danh sách kiểm tra mọi thứ bạn cần biết; Đây là một danh sách kiểm tra các lỗi phổ biến nhất và các lỗi mà người khuyết tật nói là các công cụ chặn chính của họ, với các đề xuất thiết thực để giải quyết các vấn đề. Tất cả các liên kết bên ngoài mở trong một tab mới.

Trong khảo sát Bảng nhấp chuột đi, người trả lời khuyết tật được hỏi các khối chính để họ hoàn thành giao dịch mua là gì. Dưới đây là các rào cản hàng đầu (nhiều câu trả lời đã được cho phép):

  1. Các trang đông người với quá nhiều nội dung – 66%
  2. xét nghiệm reCAPTCHA – 59%
  3. Mức độ dễ đọc (độ tương phản, bố cục văn bản) 56%
  4. Sự mất tập trung của hình ảnh và đồ họa chuyển động – 53%
  5. Thông tin liên kết kém – 59% (77% cho người dùng trình đọc màn hình)
  6. Mẫu điền 56%

Cách cải thiện khả năng truy cập trang web

Đầu tiên, lưu ý rằng không ai trong số 5 người hàng đầu là vấn đề kỹ thuật – họ là một lỗi thiết kế hoặc sao chép.

1) Quá nhiều nội dung

Tóm lại: chia văn bản thành các phần có tiêu đề và danh sách gạch đầu dòng. Sử dụng ngôn ngữ đơn giản.

Nó nổi tiếng rằng khi số lượng lựa chọn tăng lên, thì nỗ lực cần thiết để thu thập thông tin và đưa ra quyết định tốt. Nó cùng một nhóm với quá nhiều nội dung. Nó sớm trở nên áp đảo. Giảm nội dung xuống các yếu tố cần thiết là một nghề tốn thời gian; như Mark Twain (được cho là) ​​đã viết: Tôi đã không có thời gian để viết một lá thư ngắn, vì vậy tôi đã viết một lá thư dài thay thế.

Cuốn sách gần đây Viết là thiết kế đề nghị

Mọi người muốn có thể đọc lướt các khối văn bản dài, bất kể hình ảnh hay âm thanh, vì vậy, nó cực kỳ quan trọng để cấu trúc văn bản dài của bạn với các tiêu đề, đoạn văn ngắn và các thực tiễn tốt nhất về thiết kế nội dung khác.

Vì thế:

  • Chỉ có một

    trên một trang.

  • Sử dụng các tiêu đề phụ một cách tự do; nó phá vỡ một văn bản dành cho người dùng có tầm nhìn, trong khi người dùng các công nghệ hỗ trợ như trình đọc màn hình có thể sử dụng phím tắt để nhảy giữa các tiêu đề hoặc lấy bản đồ tinh thần của nội dung từ cấu trúc tiêu đề.
  • Don lồng bỏ qua một mức tiêu đề. Ví dụ: nếu bạn sử dụng một

    , hãy chắc chắn rằng nó đi trước một

    .

  • Sử dụng danh sách dấu đầu dòng (như thế này!) Được đánh dấu chính xác trong HTML như
      ,
    • . Trình đọc màn hình sẽ thông báo Danh sách 10 món ăn (và cho phép người dùng nhảy qua chúng).

    Sử dụng tiếng Anh đơn giản

    Ngân hàng Monzo Giọng điệu của chúng tôi giải thích tầm quan trọng của ngôn ngữ đơn giản:

    Năm 2010, luật sư Hoa Kỳ Sean Flammer đã thực hiện một thí nghiệm. Anh ta yêu cầu 800 thẩm phán tòa án mạch bên cạnh một cuộc tranh luận ‘pháp lý truyền thống, hoặc một trong những gì anh ta gọi là’ tiếng Anh đơn giản.

    Các thẩm phán cực kỳ thích phiên bản tiếng Anh đơn giản (66% đến 34%), và sở thích đó được tổ chức bất kể tuổi tác hay lý lịch của họ.

    Ghi chú rực lửa (PDF) của phiên bản tiếng Anh đơn giản:

    Nó ngắn hơn gần một trang, vì vậy nó rõ ràng loại bỏ các câu và từ không cần thiết. Câu của nó trung bình 17,8 từ, trái ngược với 25,2 từ.

    Ông kết luận:

    Bây giờ chúng tôi có 25 năm nghiên cứu thực nghiệm dẫn đến một kết luận không thể chối cãi: nếu bạn muốn làm hài lòng và thuyết phục người đọc của bạn, hãy viết bằng tiếng Anh.

    2) ReCAPTCHA

    Tóm lại: donith làm cho người dùng của bạn nhảy qua các vòng có khả năng không thể để tiết kiệm thời gian của nhà phát triển.

    Những người được hỏi thường nói về một người già Phiên bản ReCAPTCHA:

    các phiên bản reCAPTCHA với văn bản lung lay mà bạn phải nhập lại

    Tôi vật lộn với các hình ảnh và phải gõ các số hoặc chữ cái. Trong loại mà tôi phải nhấp vào hình ảnh nào có cửa hàng hoặc bất cứ điều gì, tôi luôn bỏ lỡ một số hoặc bị lẫn lộn và sử dụng hết năng lượng

    Kiểu chữ lung lay của reCAPTCHA hiện không được dùng nữa. Nó rất phổ biến hơn khi thấy một hóa thân mới hơn có tên là Không No CAPTCHA reCAPTCHA, (còn được gọi là HồiTôi không phải là một robot Checkbox) yêu cầu người dùng kiểm tra một hộp xác nhận họ không phải là rô bốt và sử dụng bí mật để ghi điểm người dùng. Nếu họ vượt qua, không cần tương tác thêm. Tuy nhiên, nếu họ thất bại, một thử thách tiếp theo sẽ được hiển thị:

    Ảnh chụp màn hình một phần của hình ảnh xác thực yêu cầu người dùng nhấp vào tất cả các hình vuông hiển thị cam

    Hãy nhớ rằng loại CAPTCHA yêu cầu người dùng nhấp vào tất cả các ô vuông bằng (giả sử) một dấu hiệu đường phố không nhất thiết phải là quốc tế. Như Terence Eden viết, CAPTCHA không có gì chứng minh bạn là con người – họ chứng minh bạn là người Mỹ.

    Hình thức reCAPTCHA dễ tiếp cận nhất là reCAPTCHA v3 không yêu cầu tương tác người dùng, nhưng cần bạn thực hiện nhiều công việc hơn để xử lý các lượt truy cập không vượt qua bài kiểm tra:

    Đó là API JavaScript thuần trả lại điểm số, cung cấp cho bạn khả năng thực hiện hành động trong ngữ cảnh của trang web của bạn: ví dụ: yêu cầu các yếu tố xác thực bổ sung, gửi bài đăng tới kiểm duyệt hoặc điều chỉnh các bot có thể làm mất nội dung.

    3) Tính dễ đọc kém

    Tóm lại: đảm bảo văn bản có độ tương phản đầy đủ, có thể đọc được và không hợp lý.

    • Đảm bảo độ tương phản đầy đủ. Một trong những công cụ chặn truy cập phổ biến nhất trên web là độ tương phản kém giữa văn bản và nền. Các nguyên tắc của W3C yêu cầu tỷ lệ tương phản ít nhất 4,5: 1, ngoại trừ văn bản quy mô lớn và hình ảnh của văn bản quy mô lớn phải có tỷ lệ tương phản ít nhất là 3: 1 (logo và văn bản trực tiếp được miễn trừ). Có nhiều tiện ích có thể đo tỷ lệ tương phản cho bạn; Sở thích cá nhân của tôi là Ada Rose Cannon Cannon xuất sắc phụ tùng tương phản, đó là một bookmarklet trình duyệt hữu ích làm nổi bật các khu vực không đủ độ tương phản trên trang của bạn.
    • Don Phòng có các tiêu đề vốn. Có bằng chứng cho thấy chúng khó đọc hơn vì chữ in hoa đều có cùng chiều cao, vì vậy chúng ta có thể nhận ra hình dạng của các từ phổ biến. Ngoài ra, một số trình đọc màn hình sẽ đánh vần các nhóm chữ in hoa như thể chúng là chữ viết tắt (như BBC, DOJ, v.v.). Nếu bạn phải có tất cả các tiêu đề viết hoa, hãy viết chúng trong trường hợp bình thường trong HTML của bạn và chuyển đổi chúng bằng CSS chuyển đổi văn bản: chữ hoa.
    • Văn bản bên trái. (Đối với các trang bằng các ngôn ngữ từ phải sang trái như tiếng Ả Rập hoặc tiếng Do Thái, văn bản căn lề phải.) Don sắt biện minh cho nó, vì điều này làm cho những người mắc chứng khó đọc khó đọc hơn. Các Hiệp hội Dyslexia Hiệp hội phong cách Anh Hướng dẫn cũng gợi ý

      Sử dụng phông chữ sans serif, chẳng hạn như Arial và Comic Sans, vì các chữ cái có thể xuất hiện ít hơn. Các lựa chọn thay thế bao gồm Verdana, Tahoma, Century Gothic, Trebuchet, Calibri, Open Sans.

    4) Đánh lạc hướng hình ảnh và đồ họa

    Tóm lại: cho phép người dùng dừng bất kỳ chuyển động nào; tôn trọng cài đặt hệ điều hành của họ; video tự động phát don don.

    Một người trả lời khảo sát Pound Click-Away đã viết,

    Các trang web tôi từng sử dụng với một số vấn đề nhỏ hiện đang trở thành một vấn đề vì chúng hiện đang tiếp tục di chuyển quảng cáo và liên tục tải thêm quảng cáo khi bạn mua sắm.

    Cấp độ cơ bản nhất của WCAG yêu cầu Phần mềm Đối với mọi thông tin di chuyển, nhấp nháy hoặc cuộn mà (1) bắt đầu tự động, (2) kéo dài hơn năm giây và (3) được trình bày song song với nội dung khác, có một cơ chế cho Người dùng tạm dừng, dừng hoặc ẩn nó trừ khi chuyển động, nhấp nháy hoặc cuộn là một phần của hoạt động trong đó cần thiết.

    Mất tập trung là một phiền toái – đặc biệt đối với những người bị ADHD hoặc suy giảm nhận thức khác. Nhưng chuyển động và nhấp nháy cũng có thể gây co giật, do đó, hướng dẫn WCAG yêu cầu nội dung không được flash quá 3 lần trong bất kỳ khoảng thời gian 1 giây nào.

    Tôn trọng sự lựa chọn của người dùng cho hoạt hình

    Tất cả các hệ điều hành chính cho phép người dùng thể hiện sở thích giảm chuyển động trên màn hình có lẽ vì họ bị rối loạn phổ tiền đình do chuyển động. Trang web của bạn có thể phát hiện xem người dùng đã thực hiện việc này với CSS chưa thích chuyển động giảm truy vấn phương tiện truyền thông.

    Ở đây, chúng tôi chỉ cho phép một nút hoạt hình nếu người dùng không bày tỏ sở thích:

    @media (thích-giảm-chuyển động: không ưu tiên) {
    cái nút {
    / * `rung khung hình chính được định nghĩa ở nơi khác * /
    hình ảnh động: rung 0,3s tuyến tính vô hạn cả hai;
    }
    }

    Nếu bạn đang tìm cách trang bị thêm một trang web có nhiều quy tắc hoạt hình, thì những điều sau đây có thể dừng tất cả các hoạt hình CSS đã khai báo trước đó:

    @media (thích-giảm-chuyển động: giảm) {
    *,
    *::trước,
    *::sau {
    thời lượng hoạt hình: 0,001s! quan trọng;
    thời gian chuyển tiếp: 0,001s! quan trọng;
    }
    }

    Về vấn đề tôn trọng các tùy chọn hệ điều hành của người dùng, bạn có thể muốn xem xét thiết kế trang web của bạn cho chế độ tối.

    5) Thông tin liên kết kém

    Tóm lại: làm cho các liên kết có thể nhận dạng, với văn bản liên kết duy nhất. Cảnh báo người dùng nếu một liên kết sẽ mở một tab mới hoặc một tệp.

    Một trong những nguyên nhân chính của các liên kết kém thường là sao chép kém. Hầu hết các trình đọc màn hình cho phép người dùng nhanh chóng xem danh sách các liên kết trên một trang (trong trình đọc màn hình thương mại được sử dụng nhiều nhất, JAWS, phím tắt là Ins + F7; trong phần trình đọc màn hình NVDA miễn phí, cùng một phím tắt sẽ hiển thị Danh sách thành phần liệt kê các liên kết, tiêu đề và cột mốc của trang).

    Tuy nhiên, nếu mọi liên kết đều có văn bản nói rằng Nhấp vào đây, hoặc Đọc thêm, không có gì khác để phân biệt chúng, điều này là vô ích. Cách dễ nhất để giải quyết điều này chỉ đơn giản là viết văn bản liên kết duy nhất, nhưng nếu điều đó có thể, bạn có thể vượt quá văn bản liên kết cho công nghệ hỗ trợ bằng cách sử dụng thuộc tính nhãn aria duy nhất trên mỗi liên kết.

    Đây là một ví dụ điển hình từ Trang web Joomla:

    Trang web Joomla, hiển thị hai câu chuyện khác nhau, mỗi câu chuyện giống hệt nhau

    Văn bản liên kết có thể nhìn thấy chỉ đơn giản là đọc nhiều hơn, nhưng Joomla sử dụng Joomla nhãn aria các thuộc tính để làm cho mỗi công nghệ độc đáo hỗ trợ:

    Đọc thêm
    
    Đọc thêm

    Bởi vì nhãn aria văn bản sẽ được sử dụng thay cho văn bản liên kết bởi các công nghệ hỗ trợ, W3C khuyên bạn nên bắt đầu văn bản được sử dụng trong nhãn aria với văn bản được sử dụng trong liên kết vì điều này sẽ cho phép giao tiếp nhất quán giữa người dùng..

    Ghi chú: Một số lời khuyên tồi mà tôi vẫn thấy trên các trang web cũ là thêm văn bản giải thích về các liên kết bằng cách sử dụng tiêu đề thuộc tính:

    Đọc thêm>

    Don Patrick làm điều này. Các tiêu đề isn tiếp xúc với hầu hết các trình đọc màn hình (các nhà phát triển đã sử dụng để nhồi nhét nó với các từ khóa cho mục đích SEO SEO, vì vậy các nhà cung cấp trình đọc màn hình đã tắt nó theo mặc định) và các trình duyệt trình bày các thuộc tính tiêu đề dưới dạng ‘tooltips, chỉ có sẵn cho người dùng chuột khi di chuột.

    Liên kết sẽ giống như liên kết

    Theo mặc định, các trình duyệt gạch chân các liên kết. Tốt nhất không nên thay đổi điều này, nhưng nếu bạn thua cuộc trong bãi đậu xe với nhà thiết kế về điều này, văn bản liên kết phải có tỷ lệ tương phản 3: 1 so với văn bản không liên kết xung quanh và nên đưa ra một số ‘nhà thiết kế không màu Ví dụ, họ là một liên kết khi di chuột hoặc tập trung, ví dụ:

    a: hover, a: tập trung {text-trang trí: gạch chân;}

    Kiểu lấy nét làm cho liên kết bị gạch chân khi người dùng không sử dụng chuột tập trung vào liên kết đó từ bàn phím, bút stylus hoặc giọng nói. Nói chung, bất cứ khi nào một cái gì đó trên một trang có kiểu di chuột, nó cũng nên được đặt theo kiểu tiêu điểm.

    Nhà thiết kế không màu, (trong trường hợp của chúng tôi, phần gạch chân) đảm bảo rằng khách truy cập có thị lực kém hoặc mù màu sẽ thấy sự thay đổi khi di chuột hoặc tiêu điểm. (Trình đọc màn hình tự động thông báo Link Link trước khi văn bản liên kết.)

    Nói với mọi người nếu liên kết mở một tab / trang mới

    Nó có thể gây nhầm lẫn cho khách truy cập nếu kích hoạt một liên kết mở một tab mới hoặc một cửa sổ mới, đặc biệt nếu chỉ một số liên kết trên một trang làm điều này (ví dụ: chỉ các liên kết bên ngoài mở một tab mới). Nếu bạn phải làm điều này, bạn nên thông báo cho người dùng trong văn bản liên kết hoặc sử dụng phương pháp nhãn aria ở trên.

    Nói với mọi người nếu liên kết là một tập tin

    Nếu một liên kết đến một tệp (ví dụ: PDF hoặc video), hãy nói với người dùng trong văn bản liên kết. Don giới giấu nó trong nhãn aria, vì điều này có thể hữu ích cho nhiều người dùng có thể nhìn thấy (ví dụ, một số điện thoại di động có thể mở tệp .docx). Nếu đó là một tệp lớn, hãy xem xét cảnh báo cho người dùng về kích thước gần đúng; họ có thể không muốn tải xuống một tệp video lớn qua 3G.

    Bạn cũng có thể sử dụng Tải xuống thuộc tính, khiến trình duyệt mở đối thoại tải xuống tệp gốc của hệ điều hành. Đặt tất cả những thứ này lại với nhau, mã sẽ trông như thế này:

    Báo cáo thường niên (PDF, 240 MB)

    6) Một lỗi thiết kế khác: Xóa vòng lấy nét

    Tóm lại: đảm bảo người dùng bàn phím luôn có thể thấy nơi họ đang tập trung.

    Chúng tôi đề cập đến :tiêu điểm phong cách trước. Chúng là một chỉ số trực quan vô giá cho những người có thể sử dụng chuột vì bất kỳ lý do gì: có lẽ họ có chỉ số RSI, hoặc Parkinson, hoặc bệnh đa xơ cứng. Theo mặc định, trình duyệt hiển thị vòng lấy nét trên phần tử hiện đang tập trung. Tại đây, liên kết Trang chủ trên trang cá nhân của tôi, tập trung vào trình duyệt Chromium:

    Ảnh chụp màn hình vòng lấy nét mặc định của Chromium xung quanh một liên kết (cũng là một hình ảnh)

    Tuy nhiên, một số người cho rằng điều này gây khó chịu về mặt thẩm mỹ khi họ sử dụng chuột và tắt nó bằng CSS, do đó khiến trang web không thể truy cập được đối với người dùng bàn phím.

    Nhập một tiêu chuẩn mới, được tiên phong bởi Firefox, được gọi là : tập trung nhìn thấy. Điều này sẽ áp dụng vòng lấy nét cho một thành phần nếu nó được bàn phím hoặc thiết bị trỏ chuột không chạm tới nhưng không hiển thị gì cho người dùng chuột. Vì nó chỉ hỗ trợ trong Firefox (tại thời điểm viết bài), Patrick Lauke gợi ý CSS sau đây để chơi độc đáo với tất cả các trình duyệt:

    nút: tập trung {/ * một số kiểu lấy nét nút thú vị * /}
    nút: tiêu điểm: không (: tiêu điểm-nhìn thấy) {
    / * hoàn tác tất cả các kiểu nút tập trung ở trên
    nếu nút có tiêu điểm nhưng trình duyệt sẽ không bình thường
    hiển thị các kiểu lấy nét mặc định * /
    }
    nút: tiêu điểm có thể nhìn thấy {/ * một số thậm chí * nhiều hơn * kiểu lấy nét nút thú vị * /}

    7) Điền vào mẫu

    Tóm lại: thiết kế các trường mẫu trông giống như các trường mẫu, mỗi trường được liên kết với một nhãn. Don lồng vô hiệu hóa tự động điền.

    Do tầm quan trọng quan trọng của các biểu mẫu đối với các trang web Thương mại điện tử, điều đó làm tôi ngạc nhiên về số lượng biểu mẫu không thể truy cập mà tôi thấy. Thường thì điều này là do các trình duyệt cũ đã không cho phép nhiều cách tạo kiểu cho các phần tử biểu mẫu, vì vậy các nhà phát triển đã làm giả chúng bằng các phần tử HTML khác. Trình duyệt hiện đại cho phép hộp kiểm hấp dẫn, nút radio, tùy chọn thành phần và hộp tổ hợp, điều khiển tự động hoàn thành có thể truy cập và hơn thế nữa.

    Tự động điền là bạn của bạn

    Cho phép trình duyệt tự động điền vào biểu mẫu yêu cầu khách truy cập thực hiện ít hơn, vì vậy họ có nhiều khả năng hoàn thành biểu mẫu và đăng ký / mua sản phẩm của bạn. Tự động điền trên trình duyệt: Lặn sâu là một bài viết tuyệt vời của eBay về điều này (và họ nên biết).

    Ngoài ra, tự động hoàn thành là kỹ thuật đủ duy nhất hiện tại để đạt được sự tuân thủ của AA với Tiêu chí thành công 1.3.5: Xác định mục đích đầu vào.

    Tạo trường biểu mẫu trông giống như trường biểu mẫu

    Theo mặc định, trình duyệt hiển thị các trường nhập mẫu dưới dạng hộp. Bằng mọi cách, hãy tạo kiểu cho chúng bằng lề, phần đệm và đường viền, nhưng giữ chúng dưới dạng hộp. Nhiều nhà thiết kế đã theo mẫu Google Thiết kế Vật liệu trước năm 2017 bằng cách sử dụng một dòng duy nhất cho người dùng để nhập văn bản:

    Đầu vào thiết kế vật liệu cũ, với đường chân trời thay vì hộp hình chữ nhật

    Tuy nhiên, Google nhận thấy rằng dòng bên dưới các trường văn bản cũ không rõ ràng đối với một số người dùng, thường bị nhầm lẫn với một bộ chia và thay đổi thiết kế. Trong một kiểm tra khả năng sử dụng với 600 người tham gia, họ phát hiện ra rằng

    Các trường văn bản kèm theo hình chữ nhật (hình hộp) hoạt động tốt hơn so với các trường có khả năng chi trả dòng Ngày nay, các trường văn bản mới này xuất hiện trên các sản phẩm của Google từ các trang đăng nhập tài khoản đến các biểu mẫu của Google.

    Nếu bạn đang xem xét áp dụng thư viện UI Thiết kế Vật liệu đầy đủ của Google, hãy đọc Ngừng sử dụng các trường văn bản Thiết kế Vật liệu! bởi Matsuko Friedland để xem liệu nó có đáp ứng nhu cầu của bạn không.

    Dán nhãn tất cả các trường mẫu

    Tất cả các trường mẫu (nhập văn bản, hộp kiểm, nút radio, thanh trượt, v.v.) cần phải được dán nhãn. Cách tốt nhất để làm điều này là sử dụng HTML ; như WCAG nói, các điều khiển HTML tiêu chuẩn đã đáp ứng tiêu chí thành công này khi được sử dụng theo thông số kỹ thuật.

    Ở đây, một bản demo tôi làm bằng một trường biểu mẫu không ghi nhãn so với trường biểu mẫu có nhãn. Chúng trông giống hệt nhau, nhưng cái trên cùng không có nhãn phù hợp, trong khi cái thứ hai thì có. Nhấp vào nhãn văn bản ở dưới cùng và bạn sẽ thấy nó tập trung vào đầu vào được liên kết.

    giả so với nhãn thật

    Điều này làm cho việc tập trung đầu vào dễ dàng hơn nhiều đối với người gặp khó khăn điều khiển động cơ – hoặc có thể cho bạn, cố gắng kiểm tra một hộp kiểm nhỏ trên màn hình nhỏ trên một chuyến tàu gập ghềnh. Nó cũng rất quan trọng đối với người dùng trình đọc màn hình, những người sẽ tab thông qua các trường trong một biểu mẫu (theo mặc định, chỉ các liên kết và trường biểu mẫu có thể tập trung bằng cách lập bảng); khi họ tab vào trường nhập, trình đọc màn hình sẽ thông báo nội dung của nhãn được liên kết.

    Mã cho điều này là đơn giản. Trường đầu vào được cung cấp một ID duy nhất và nhãn được liên kết với nó bằng cách sử dụng cho thuộc tính:

    
    

    Nhãn ẩn

    Đôi khi, bạn có thể không muốn một nhãn hiển thị. Hoặc nhà thiết kế không phạm, và bạn không muốn một cuộc chiến khác trong bãi đậu xe. Dù sao, đây là một ví dụ khi một nhãn hiệu nói Tìm kiếm Tìm kiếm trước khi nhập liệu cảm thấy như quá mức cần thiết.

    Trường nhập liệu, với nút có nhãn 'tìm kiếm' sau đó

    Chúng tôi có thể liên kết trường nhập liệu với văn bản Tìm kiếm trực tuyến, đó là nội dung của nút gửi bằng cách sử dụng aria-labellingby:

    
    

    Chúng ta có thể đã sử dụng nhãn aria (mà chúng ta đã gặp trước đó khi nói về các liên kết):


    Nhưng nó luôn luôn tốt hơn để thích văn bản hiển thị trên một trang bởi vì điều đó sẽ được dịch nếu trang đó được chạy thông qua một công cụ dịch thuật, trong khi đó, văn bản được ẩn trong các thuộc tính HTML đã giành được. (Hat-tip cho Adrian Roselli cho mẹo này, từ bài viết tuyệt vời của anh ấy Ưu tiên của tôi về phương pháp ghi nhãn kiểm soát.)

    Lỗi phổ biến nhất trên hàng triệu trang chủ

    Chúng tôi đã xem xét các rào cản hàng đầu đối với các trang web thương mại điện tử được báo cáo bởi người dùng với một số hình thức suy yếu. Bây giờ, hãy để Lôi nhìn vào một tập hợp các trang web rộng hơn nhiều Các trang chủ cho 1.000.000 trang web hàng đầu, tự động phân tích bởi WebAIM vào tháng 8 năm 2019. 98% các trang được phân tích có ít nhất một lỗi. Các lỗi phổ biến nhất là

    1. Văn bản tương phản thấp (86,1%)
    2. Thiếu văn bản thay thế cho hình ảnh (67,9%)
    3. Liên kết trống (58,9%)
    4. Thiếu nhãn đầu vào mẫu (53,2%)
    5. Thiếu ngôn ngữ tài liệu (30,5%)

    Chúng tôi đã xử lý với độ tương phản thấp, liên kết và hình thức đầu vào ở trên. Bây giờ, hãy để chúng tôi xem xét cách chúng ta có thể tránh các lỗi rất phổ biến khác.

    8) Cung cấp các lựa chọn thay thế văn bản cho tất cả hình ảnh, video và âm thanh

    Tóm lại: bất kỳ thông tin nào được truyền đạt qua hình ảnh hoặc video phải có văn bản tương đương.

    Mỗi phải có văn bản thay thế (văn bản alt alt văn bản) có thể được truyền đạt tới khách truy cập bị khiếm thị hoặc những người có băng thông thấp / gói dữ liệu đắt tiền đã tắt hình ảnh trong trình duyệt của họ. Điều này bao gồm hình ảnh của văn bản.

    Dưới đây là các quy tắc cơ bản:

    • Nếu hình ảnh hoàn toàn là trang trí, nó phải có văn bản thay thế trống: alt = "". (Nhưng dù sao hình ảnh trang trí hoàn toàn có lẽ nên có trong CSS.)
    • Nếu một hình ảnh được mô tả trong văn bản cơ thể thì nó phải có văn bản thay thế trống (alt = ""), để tránh sự lặp lại. Nhưng hãy cẩn thận nếu nó HỎI trong một
      – xem Bạn thấy thế nào? để biết thêm.
    • Nếu một hình ảnh là nội dung duy nhất của một liên kết (ví dụ: logo của tổ chức của bạn có thể được nhấp để đi đến trang chủ) thì văn bản thay thế sẽ mô tả đích đến của liên kết. Ví dụ, alt = "trang chủ".
    • Don Quảng sử dụng phông chữ biểu tượng; họ có thể thực sự xấu cho những người mắc chứng khó đọc. Nếu bạn sử dụng chúng, chuyển đổi chúng thành SVG.

    Văn bản thay thế video và âm thanh

    Đừng quên rằng nội dung âm thanh cần văn bản thay thế cho những người khiếm thính. Điều đó có nghĩa là bản sao của podcast và phụ đề trên video. Và, một lần nữa: phương tiện tự động phát don don.

    9) Thêm ngôn ngữ tài liệu phù hợp

    Tóm lại: hãy cho công nghệ trợ giúp biết ngôn ngữ mà văn bản của bạn đang ở.

    30% trang chủ don hiến tuyên bố ngôn ngữ họ viết bằng tiếng Anh, điều này có thể khiến họ bối rối cho người dùng trình đọc màn hình. Điều này rất quan trọng vì ví dụ từ từ Six Six thẳng được phát âm rất khác nhau nếu câu đó bằng tiếng Anh hoặc tiếng Pháp, ví dụ.

    Thật dễ dàng để giải quyết vấn đề này bằng cách thêm thuộc tính lang vào thành phần HTML của bạn:

    Các en en en nói với một trình đọc màn hình (hoặc phần mềm dịch) rằng trang này bằng tiếng Anh. Cúp es là người Tây Ban Nha, người Pháp là người Pháp, vân vân. Đối với hầu hết các ngôn ngữ, thẻ ngôn ngữ khá dễ xác định. W3C có một hướng dẫn để Chọn thẻ ngôn ngữ.

    Nếu trang chứa nội dung bằng ngôn ngữ không phải là ngôn ngữ được khai báo chính, hãy thêm thuộc tính ngôn ngữ vào thành phần bao quanh nội dung đó. Ví dụ: trong một trang được tuyên bố là tiếng Anh:

    Nếu bạn muốn trò chuyện matador, trong một số mát mẻ cabana
    Và gặp senoritas bằng điểm số, Espana por ủng hộ

    10) Giúp khách truy cập nội dung của bạn

    Tóm lại: sử dụng các yếu tố mang tính bước ngoặt HTML để giúp người dùng công nghệ hỗ trợ hiểu và điều hướng nội dung của bạn.

    Khi một khách truy cập quan sát đến trang của bạn, họ có thể dễ dàng quét nó để hiểu vị trí điều hướng và nơi nội dung chính bắt đầu. Một người dùng trình đọc màn hình có thể làm được điều này. Tuy nhiên, HTML5 cung cấp cho chúng tôi một số thẻ mới để đánh dấu các khu vực này và các công nghệ hỗ trợ có các phím tắt có thể bỏ qua (hoặc bỏ qua) các mốc như tiêu đề, chân trang, dẫn đường và như thế.

    Ở đây, một video dài sáu phút tôi đã thực hiện với Léonie Watson, một nhà phát triển web và người dùng trình đọc màn hình, về cách cô ấy sử dụng trình đọc màn hình của mình để kiểm tra các ngữ nghĩa này để điều hướng trang web cá nhân của tôi:

    • Bao bọc nội dung chính của bạn, nghĩa là, nội dung đó là tiêu đề, điều hướng chính hoặc chân trang, trong một
      thành phần. Trong hầu hết các trường hợp, chỉ nên có một
      trên một trang. Tất cả các trình duyệt (IE9 +) cho phép bạn tạo kiểu cho nó và các công nghệ hỗ trợ biết phải làm gì với nó.
    • Gói tiêu đề của bạn (logo thương hiệu, dây đeo, tiêu đề của trang) trong một
      thành phần.
    • Gói chân trang của bạn (nội dung pháp lý, chi tiết liên hệ, thông báo bản quyền, v.v.) trong một
    • Đánh dấu điều hướng chính của bạn bằng cách sử dụng
        bọc trong một thành phần. Điều này có thể được lồng bên trong
        nếu điều đó phù hợp với thiết kế trực quan của trang.
      • Quảng cáo và nội dung không thiết yếu nên được gói trong một
      • Nếu bạn có nhiều sản phẩm / video / mục tin tức / bài đăng trên một trang, hãy bọc từng sản phẩm trong một
        thành phần.

      Trong nó khảo sát người dùng màn hình đọc, WebAIM nhận thấy rằng 26% người dùng trình đọc màn hình thường xuyên hoặc luôn sử dụng các mốc này khi điều hướng một trang.

      Ngoài ra, gói các phần nội dung rời rạc trong

      giúp Apple Apple WatchOS hiển thị nội dung tối ưu. Xem bài viết của tôi Giá trị thực tế của HTML ngữ nghĩa để biết thêm về điều này.

      11) Sử dụng HTML đúng cách

      Tóm lại: hiểu ngữ nghĩa và hành vi mặc định của các yếu tố HTML; sử dụng đúng yếu tố cho nội dung của bạn.

      Một chủ đề phổ biến trong bài viết này đã được sử dụng các yếu tố HTML chính xác. Sử dụng một nhãn có một hành vi trình duyệt tích hợp tập trung vào trường đầu vào liên quan của nó; sử dụng

      thích hơn

      bởi vì nó cho phép người dùng trình đọc màn hình chuyển thẳng đến nội dung quan trọng trong khi hoàn toàn không gây khó chịu cho những người không sử dụng trình đọc màn hình.

      Một ví dụ khác là sử dụng một

      Like this post? Please share to your friends:
Adblock
detector
map