Thuộc tính thay thế hoặc tiêu đề cho thẻ tôi

Tôi sử dụng phông chữ tuyệt vời và hiển thị phông chữ của họ như thế:

<i class="icon-lock"></i>

Điều này sẽ hiển thị một biểu tượng khóa nhỏ đẹp. Để người dùng biết chính xác điều đó có nghĩa là gì, tôi đã thử thêm các thuộc tính như tiêu đề và alt, nhưng vô hiệu.

Có thuộc tính nào tôi có thể sử dụng cho <i>thẻ thực thi cùng một tác vụ như alt cho hình ảnh và tiêu đề cho liên kết không?

Bạn có thể sử dụng titlethuộc tính trên một iphần tử, như bất kỳ phần tử nào, ví dụ:

<i class="icon-lock" title="This symbolizes your being locked inside"></i>

Liệu nó có giúp ích hay không là một vấn đề khó khăn hơn. Các trình duyệt thường hiển thị titlegiá trị thuộc tính dưới dạng “chú giải công cụ” khi di chuột qua, nhưng tại sao người dùng lại di chuột qua biểu tượng? Và các chú giải công cụ như vậy có khả năng sử dụng kém; cái gọi là chú giải công cụ CSS thường hoạt động tốt hơn.

Trình đọc màn hình có thể cung cấp cho người dùng quyền truy cập tùy chọn vào titlecác thuộc tính, nhưng tôi không chắc họ làm gì với các phần tử có nội dung trống.

Với sự tiên tiến của WAI-ARIA , khi sử dụng các biểu tượng phông chữ, bạn có thể nên sử dụng kết hợp những điều sau để cải thiện khả năng truy cập:

• Trình bày vai trò để loại bỏ ngữ nghĩa vai trò gốc tiềm ẩn của phần tử. Điều này đặc biệt quan trọng nếu bạn (ab) sử dụng một phần tử có ngữ nghĩa gốc để cung cấp các biểu tượng, vì đây là trường hợp trong ví dụ của bạn sử dụng phần tử i (theo thông số kỹ thuật, "đại diện cho một khoảng văn bản bằng giọng nói thay thế hoặc tâm trạng [...] " ).
• Một aria-nhãn để cung cấp một giá trị chuỗi nhãn yếu tố -hoặc- một HTML mẹ đẻ tiêu đề thuộc tính nếu bạn là OK với trình duyệt hiển thị một tooltip khi được quét.
• Một aria-ẩn thuộc tính để ẩn nội dung được tạo ra từ công nghệ hỗ trợ (như bạn đang sử dụng một họ phông chữ biểu tượng, có một nhân vật được tạo ra: trước khi về: sau). Theo thông số kỹ thuật:

Tác giả CÓ THỂ, một cách thận trọng, sử dụng aria-hidden để ẩn nội dung hiển thị rõ ràng khỏi các công nghệ hỗ trợ chỉ khi hành động ẩn nội dung này nhằm cải thiện trải nghiệm cho người dùng công nghệ hỗ trợ bằng cách xóa nội dung thừa hoặc không liên quan. Các tác giả sử dụng aria-hidden để ẩn nội dung hiển thị khỏi trình đọc màn hình PHẢI đảm bảo rằng ý nghĩa và chức năng giống hệt hoặc tương đương được hiển thị với các công nghệ hỗ trợ.

Tôi không biết trường hợp sử dụng chính xác của bạn, vì vậy tôi có quyền sử dụng trường hợp đơn giản hơn là cung cấp số điện thoại. Theo thứ tự ưu tiên giảm dần, tôi sẽ sử dụng:

<span aria-label="Our phone number">
  <span class="icon-phone" aria-hidden="true"></span>
  +33 7 1234576
</span>

(or any variation implying:
  - an `i` element with a `role` presentation attribute
    instead of the inner `span` element
  - a `title` attribute instead of an `aria-label` attribute)

<span class="icon-phone" 
  aria-label="Our phone number">+33 7 1234576</span>

(or any variation using `title` instead of `aria-label`)

<i class="icon-phone" role="presentation" 
  aria-label="Our phone number">+33 7 1234576</i>

(or any variation using `title` instead of `aria-label`)

Xin lưu ý rằng các thuộc tính aria-label và title phải mô tả nội dung của phần tử. Không phải là phần tử anh chị em tiếp theo. Vì vậy, tôi cảm thấy như giải pháp sau đây không phù hợp với các thông số kỹ thuật (ngay cả khi hầu hết các công cụ trợ năng thực sự sẽ có cùng hành vi có thể quan sát được như thể số điện thoại thực sự nằm trong spanphần tử):

<span class="icon-phone" 
  title="Our phone number"></span>+33 7 1234576

Bạn nên sử dụng <span>hoặc một cái gì đó dọc theo những dòng đó để thay thế. Bạn có thể sử dụng title=""thuộc tính để cung cấp một số văn bản khi di chuột, nếu đó là những gì bạn đang tìm kiếm. Đối với việc cung cấp khả năng truy cập cho trình đọc màn hình hoặc giá trị SEO, bạn có thể thêm CSS sau:

.icon-lock{
    text-indent:-99999px;
}

Và sau đó viết đánh dấu của bạn như vậy:

<span class="icon-lock">What I want the screen reader to say</span>

<i>thẻ dùng để đánh dấu văn bản. Bạn đang thay đổi ý nghĩa ngữ nghĩa của thẻ này thành một thứ gì đó không liên quan gì đến việc sử dụng chữ in nghiêng (và thậm chí cả thẻ in nghiêng cũng là một ý tưởng tồi). Bạn nên sử dụng một SPANthay thế.

Các phần tử in nghiêng không hỗ trợ altcác thuộc tính, IMGcác phần tử thì có. Nếu bạn muốn một ALTthuộc tính, hãy sử dụng một hình ảnh.

Tôi nghĩ rằng vai trò của các phông chữ hoạt động như hình ảnh nên được dành cho role = "img". Sau đó, điều này có thể được sử dụng với aria-label = "alt-text". Nó hoạt động nhờ thuật toán ARIA Accessible Name. Xem: Kỹ thuật Aria Sử dụng Vai trò Img .