Ẩn các icon inline SVG từ trình đọc màn hình.

Icon fonts đã được loại bỏ để ủng hộ công nghệ phù hợp hơn: SVG.

Có nhiều hướng dẫn và hướng dẫn mô tả các cách khác nhau để bạn có thể sử dụng các icon SVG, điều này thật tuyệt vời. Tuy nhiên, tôi thấy một vấn đề liên quan đến pop up, vì vậy tôi muốn chia sẻ một mẹo nhỏ về điều đó.

Có lẽ phần lớn, các bài viết giải thích cách sử dụng inline SVG cho các icon mô tả nhiều cách để đảm bảo rằng đồ họa SVG của bạn có văn bản thay thế. Điều đó có thể thích hợp, nhưng hầu hết thời gian, ít nhất là trong kinh nghiệm của tôi, bạn chỉ muốn một icon như một gợi ý trực quan bổ sung bên cạnh một số văn bản. Cũng giống như thêm hình ảnh qua thuộc tính CSS background. Và các icon thuộc loại đó sẽ không có bất kỳ văn bản thay thế nào vì người dùng trình đọc màn hình sẽ chỉ sao chép thông tin đã có sẵn trong văn bản thuần túy.

Nếu bạn sử dụng hình nền để chèn biểu tượng SVG, thì không có vấn đề gì. Trình đọc màn hình sẽ xử lý SVG giống như bất kỳ hình nền nào khác và bỏ qua nó. Tương tự như vậy nếu bạn sử dụng phần tử img với thuộc tính alt trống (alt = ""), SVG sẽ bị bỏ qua.

Cách ẩn các icon inline SVG từ trình đọc màn hình.

Vấn đề có liên quan đến việc sử dụng inline SVG, tức là phần tử svg. Tệp SVG có thể chứa tiêu đề phần tử có thể hoặc không thể được công bố bởi trình đọc màn hình (tùy thuộc vào kỹ thuật nhúng SVG, tên và phiên bản trình duyệt và tên và phiên bản trình đọc màn hình). Cho đến nay tôi đã không gặp phải tình huống mà tôi muốn có bất kỳ hành vi nào khác ngoài trình đọc màn hình hoàn toàn bỏ qua các biểu tượng (vì tất cả chúng đều đi kèm với văn bản).

Sau một chút thử nghiệm, tôi thấy rằng chỉ cần thêm aria-hidden = "true" vào phần tử svg để giải quyết được vấn đề. Vì vậy, đây là đánh dấu svg tôi sử dụng cho các biểu tượng chứa trong tệp SVG sprite:

<svg aria-hidden = "true">

<use xlink: href = "icons.svg # icon" />

</ svg>

Kết quả cuối cùng cho người dùng về cơ bản giống như sau:

<img src = "icon.svg" alt = "" />

Nhưng bạn có được lợi ích khi có thể ảnh hưởng đến các biểu tượng thông qua CSS và có tất cả các biểu tượng chứa trong một tệp để giảm yêu cầu HTTP (HTTP/2 cuối cùng sẽ ít liên quan hơn nhưng hiện tại vẫn có liên quan đến nhiều trang web). Bạn không muốn sử dụng một sprite? Chỉ cần thay thế phần tử sử dụng bằng mã SVG thích hợp.

Lưu ý rằng aria-hidden chỉ nên được sử dụng khi bạn thực sự muốn ẩn phần tử svg hoàn toàn khỏi trình đọc màn hình. Nếu bạn sử dụng SVG để nhúng một hình ảnh không chỉ là trang trí, bạn cần phải đảm bảo có một văn bản thay thế.