Gần đây tôi đã xuất bản một bài báo về tạo hiệu ứng phông chữ biến đổi với sự trợ giúp của thư viện Javascript Splitting. js. Một số người đã hỏi về ý nghĩa trợ năng của điều này, vì vậy, trong bài viết này, chúng ta sẽ xem xét lý do tại sao việc tách một chuỗi văn bản có thể gây ra vấn đề từ quan điểm về khả năng truy cập và chúng ta có thể làm gì để đảm bảo rằng việc tách chuỗi văn bản đó là
tách. tóm tắt js
Giả sử bạn có một từ, một tiêu đề, một đoạn văn hoặc một câu và bạn muốn thay đổi kiểu trên cơ sở từng chữ cái. Con đường mà sự chia cắt. js hoạt động là nó bao bọc từng ký tự [bao gồm cả ký tự khoảng trắng] trong thẻ
O
h
H
e
l
l
o
T
h
e
r
e
Bản trình diễn Codepen sau đây chứa một ví dụ về Tách. js đang hoạt động, sử dụng các thuộc tính tùy chỉnh trong CSS để tính giá trị màu cho mỗi chữ cái. Trong bài viết này, tôi sẽ mô tả các kỹ thuật tôi đã sử dụng để làm cho nó có thể truy cập được
Xem văn bản có thể truy cập Pen Splitting JS với các thuộc tính ARIA của Michelle Barker [@michellebarker] trên CodePenTại sao tách văn bản lại là mối quan tâm về khả năng tiếp cận?
Một số người bị mù, cận thị hoặc thấy việc đọc trên web khó khăn hoặc có vấn đề vì những lý do khác nhau có thể sử dụng phần mềm trình đọc màn hình để hỗ trợ họ điều hướng và khám phá một trang web. Trình đọc màn hình tự động thông báo nội dung của trang web cho người dùng. Để hiểu rõ hơn về trải nghiệm của một người khi sử dụng trình đọc màn hình, tôi khuyên bạn nên xem Cách Người dùng Trình đọc Màn hình Truy cập Web, hội thảo trên web về khả năng truy cập từ Tạp chí Smashing
Đây là một lý do tại sao HTML ngữ nghĩa đặc biệt quan trọng. không phải ai cũng truy cập các trang web của chúng tôi một cách trực quan, vì vậy, việc sử dụng các phần tử HTML phù hợp cho đúng mục đích giúp điều hướng trang và tìm nội dung có liên quan dễ dàng hơn nhiều
Chúng tôi có thể muốn tách một chuỗi văn bản cho mục đích trình bày, nhưng việc thay đổi đánh dấu trong [ví dụ] một tiêu đề có thể ảnh hưởng đến cách trình đọc màn hình diễn giải văn bản và đọc lại cho người dùng. Hãy xem xét đánh dấu sau – một thẻ tiêu đề
O
h
H
e
l
l
o
T
h
e
r
e
Oh hello thereBây giờ chúng ta hãy xem tiêu đề tương tự được chia thành các
O
h
H
e
l
l
o
T
h
e
r
e
O
h
H
e
l
l
o
T
h
e
r
e
Với mỗi ký tự được bọc trong một thẻ riêng lẻ, một số trình đọc màn hình sẽ không giải thích từng từ mà thay vào đó thông báo từng chữ cái riêng lẻ. Đây sẽ không phải là một trải nghiệm hữu ích cho ai đó điều hướng trang bằng trình đọc màn hình
Hành vi này không nhất quán giữa các trình đọc màn hình. Ban đầu, tôi đã thử nghiệm tính năng này với VoiceOver trên Safari, không có vấn đề gì khi đọc văn bản như dự kiến. Tuy nhiên, những người khác bỏ qua các ngắt từ và đọc nội dung dưới dạng một từ dài.
Làm cho nó có thể truy cập được với WAI-ARIA
May mắn thay, những lo ngại về khả năng tiếp cận này không có nghĩa là chúng tôi không thể sử dụng các thư viện thú vị như Splitting. js. Chúng tôi chỉ cần nỗ lực hơn một chút để đảm bảo mọi người đều có thể truy cập văn bản của chúng tôi
WAI-ARIA cung cấp cho chúng tôi các thuộc tính để xác định cách các yếu tố nên được trình bày cho các công nghệ hỗ trợ. Mặc dù nó được thiết kế để giúp làm cho các trang web dễ truy cập hơn nhưng nó không thể thay thế cho HTML ngữ nghĩa. Nó nên được sử dụng khi một mình HTML ngữ nghĩa là không đủ
aria-nhãn
Trong trường hợp tiêu đề ví dụ của chúng tôi, chúng tôi có thể cung cấp nhãn văn bản có thể truy cập cho trình đọc màn hình bằng thuộc tính
O
h
H
e
l
l
o
T
h
e
r
e
O
h
H
e
l
l
o
T
h
e
r
e
Chỉ sử dụng
O
h
H
e
l
l
o
T
h
e
r
e
O
h
H
e
l
l
o
T
h
e
r
e
aria-ẩn
O
h
H
e
l
l
o
T
h
e
r
e
O
h
H
e
l
l
o
T
h
e
r
e
O
h
H
e
l
l
o
T
h
e
r
e
Hoặc, nếu điều này cảm thấy hơi tẻ nhạt, chúng tôi có thể chọn nhóm tất cả trẻ em trong một khoảng khác và thay vào đó thêm
O
h
H
e
l
l
o
T
h
e
r
e
O
h
H
e
l
l
o
T
h
e
r
e
Sử dụng Javascript để thêm thuộc tính ARIA
Nếu chúng ta đang sử dụng Spitting. js để tạo các phần tử con đó, chúng ta có thể thêm
O
h
H
e
l
l
o
T
h
e
r
e
O
h
H
e
l
l
o
T
h
e
r
e
O
h
H
e
l
l
o
T
h
e
r
e
O
h
H
e
l
l
o
T
h
e
r
e
O
h
H
e
l
l
o
T
h
e
r
e
O
h
H
e
l
l
o
T
h
e
r
e
O
h
H
e
l
l
o
T
h
e
r
e
Điều này sẽ dẫn đến một cấu trúc HTML giống như thế này
O
h
H
e
l
l
o
T
h
e
r
e
Người dùng chỉ nghe thấy nội dung của thuộc tính
O
h
H
e
l
l
o
T
h
e
r
e
Sẽ thật tuyệt nếu Tách. js có thể làm điều này theo mặc định, mặc dù có rất nhiều cân nhắc khác nhau cần tính đến đối với các loại văn bản khác nhau. Hiện tại có một sự cố mở trên Github để thêm các tính năng trợ năng
Cảm ơn Andy Bell đã đăng giải pháp trợ năng này trong nguồn cấp dữ liệu twitter của tôi sau khi tôi xuất bản bài đăng gốc