Thẻ HTML img: thuộc tính tiêu đề so với thuộc tính alt?

Tôi đang duyệt Amazon và tôi nhận thấy rằng khi tìm kiếm " 1TB " nếu bạn di con trỏ chuột qua hình ảnh xếp hạng sao, bạn chỉ thấy điểm nếu sử dụng IE. Nếu bạn đang sử dụng trình duyệt khác thì điểm số sẽ không hiển thị.

Xếp hạng 3,8 và 4,2 đều hiển thị là 4 sao. Tất nhiên, tỷ lệ 3,8 sao so với 4,2 sao (76% so với 84% điểm) có thể tạo ra sự khác biệt!

Điều này là do cách hiển thị altvăn bản tiêu chuẩn chỉ khi người dùng tắt đồ họa hoặc khi trình duyệt "đọc ra" (ví dụ: trình duyệt dành cho người dùng bị khiếm thị). Tuy nhiên, IE hiển thị nó khi di chuột.

Vì vậy, tôi nghĩ nếu Amazon hiển thị nó bất kể trình duyệt của người dùng, thì titlenên được sử dụng thêm vào alt. Bạn có đồng ý không?

Tôi sẽ đi cho cả hai. Tiêu đề sẽ hiển thị chú giải công cụ đẹp trong tất cả các trình duyệt và alt sẽ đưa ra mô tả khi duyệt trong trình duyệt không có hình ảnh.

Điều đó nói rằng, tôi muốn xem một số thống kê về số lượng "người lướt sóng" ngoài kia đến "cửa hàng" để duyệt hàng hóa thực sự đã tắt hình ảnh hoặc đang sử dụng trình duyệt không hỗ trợ hình ảnh. Tôi nghĩ rằng những ngày mà 90% dân số đang sử dụng modem 28k để kết nối với InterWeb đã qua đi.

Chúng được sử dụng cho những thứ khác nhau. Các altthuộc tính được sử dụng thay vì của hình ảnh. Nếu hình ảnh không thể được hiển thị và trong trình đọc màn hình.

Các titlethuộc tính được hiển thị cùng với hình ảnh, điển hình như một tooltip di chuột.

Một không nên được sử dụng "thay thế" cho cái kia. Mỗi thứ nên được sử dụng đúng cách , để làm những việc mà chúng được thiết kế để làm.

alt và title dành cho những thứ khác nhau, như đã được đề cập. Mặc dù thuộc tính title sẽ cung cấp chú giải công cụ, nhưng alt cũng là một thuộc tính quan trọng, vì nó chỉ định văn bản sẽ được hiển thị nếu không thể hiển thị hình ảnh. (Và trong một số trình duyệt, chẳng hạn như firefox, bạn cũng sẽ thấy văn bản này trong khi tải hình ảnh)

Một điểm khác mà tôi cảm thấy nên được thực hiện là thuộc tính alt là bắt buộc để xác thực dưới dạng tài liệu XHTML, trong khi thuộc tính title chỉ là một "tùy chọn bổ sung", như nó vốn có.

Đó là bởi vì chúng phục vụ cho các mục đích khác nhau và cả hai không nên chỉ được sử dụng thay thế nhau.

"Alt" dành cho những gì các bạn đã nói, vì vậy bạn có thể xem nội dung của hình ảnh là gì nếu hình ảnh không thể hiển thị (vì bất kỳ lý do gì), nó cũng cho phép người khiếm thị hiểu hình ảnh đó nói về cái gì.

Thuộc tính "tiêu đề" là thuộc tính chính xác để hiển thị chú giải công cụ với tiêu đề cho hình ảnh.

Theo ý kiến ​​của tôi, văn bản thay thế nên luôn mô tả những gì hiển thị trong hình ảnh, đối với trường hợp hình ảnh không được hiển thị.

alt = text [CS] Đối với tác nhân người dùng không thể hiển thị hình ảnh, biểu mẫu hoặc ứng dụng, thuộc tính này chỉ định văn bản thay thế. Ngôn ngữ của văn bản thay thế được chỉ định bởi thuộc tính lang.

w3.org

Tôi tin rằng alt là bắt buộc để tuân thủ XHTML nghiêm ngặt.

Như những người khác đã lưu ý, tiêu đề dành cho chú giải công cụ (rất tốt để có), alt là khả năng truy cập. Không có gì sai khi sử dụng cả hai, nhưng alt phải luôn ở đó.

Thuộc tính ALT dành cho người dùng khiếm thị sử dụng trình đọc màn hình. Nếu thiếu ALT trong BẤT KỲ thẻ hình ảnh nào, toàn bộ url của hình ảnh sẽ được đọc. Nếu hình ảnh là một phần của thiết kế của trang web, chúng vẫn phải có ALT nhưng chúng có thể để trống để url không phải được đọc cho mọi phần của trang web.

Thuộc tính ALT

Các altthuộc tính được định nghĩa trong một tập hợp các thẻ (cụ thể là, img, areavà tùy chọn cho inputvà applet) để cho phép bạn cung cấp tương đương văn bản cho các đối tượng.

Văn bản tương đương mang lại những lợi ích sau cho trang web của bạn và khách truy cập trang web trong các trường hợp phổ biến sau:

• ngày nay, các trình duyệt Web có sẵn trên rất nhiều nền tảng với các dung lượng rất khác nhau; một số không thể hiển thị hình ảnh hoàn toàn hoặc chỉ có một số loại hình ảnh bị hạn chế; một số có thể được cấu hình để không tải hình ảnh. Nếu mã của bạn có thuộc tính alt được đặt trong hình ảnh của nó, hầu hết các trình duyệt này sẽ hiển thị mô tả bạn đã cung cấp thay vì hình ảnh
• một số khách truy cập của bạn không thể nhìn thấy hình ảnh, có thể là mù, mù màu, thị lực thấp; thuộc tính alt giúp ích rất nhiều cho những người có thể dựa vào nó để có ý tưởng tốt về nội dung trên trang của bạn
• bot công cụ tìm kiếm thuộc hai loại trên: nếu bạn muốn trang web của mình được lập chỉ mục tốt như nó xứng đáng, hãy sử dụng thuộc tính alt để đảm bảo rằng chúng sẽ không bỏ lỡ các phần quan trọng trên trang của bạn.

Thuộc tính Tiêu đề

Mục tiêu của kỹ thuật này là cung cấp trợ giúp nhạy cảm theo ngữ cảnh cho người dùng khi họ nhập dữ liệu vào biểu mẫu bằng cách cung cấp thông tin trợ giúp trong một titlethuộc tính. Trợ giúp có thể bao gồm thông tin định dạng hoặc ví dụ về đầu vào.

Ví dụ 1: Menu kéo xuống giới hạn phạm vi tìm kiếm
Biểu mẫu tìm kiếm sử dụng menu kéo xuống để giới hạn phạm vi tìm kiếm. Menu kéo xuống nằm ngay cạnh trường văn bản được sử dụng để nhập cụm từ tìm kiếm. Mối quan hệ giữa trường tìm kiếm và menu kéo xuống rõ ràng đối với người dùng có thể nhìn thấy thiết kế trực quan, không có chỗ cho nhãn hiển thị. Các titlethuộc tính được sử dụng để xác định các selecttrình đơn. Các titlethuộc tính có thể được nói bởi trình đọc màn hình hoặc hiển thị như một mẹo công cụ cho người sử dụng kính lúp màn hình.

<label for="searchTerm">Search for:</label>
<input id="searchTerm" type="text" size="30" value="" name="searchTerm">
<select title="Search in" id="scope">
    ...
</select> 

Ví dụ 2: Các trường nhập cho một số điện thoại
Một trang Web chứa các điều khiển để nhập số điện thoại ở Hoa Kỳ, với ba trường cho mã vùng, trao đổi và bốn chữ số cuối cùng.

<fieldset>
    <legend>Phone number</legend>
    <input id="areaCode" name="areaCode" title="Area Code" type="text" size="3" value="" >
    <input id="exchange" name="exchange" title="First three digits of phone number" type="text" size="3" value="" >
    <input id="lastDigits" name="lastDigits" title="Last four digits of phone number" type="text" size="4" value="" >
</fieldset> 

Ví dụ 3: Chức năng tìm kiếm Một trang Web chứa một trường văn bản nơi người dùng có thể nhập các cụm từ tìm kiếm và một nút có nhãn "Tìm kiếm" để thực hiện tìm kiếm. Các titlethuộc tính được sử dụng để xác định các điều khiển biểu mẫu và nút được bố trí ngay sau trường văn bản để nó là rõ ràng đối với người dùng rằng các lĩnh vực văn bản là nơi mà các thuật ngữ tìm kiếm nên được nhập vào.

<input type="text" title="Type search term here"/> <input type="submit" value="Search"/>

Ví dụ 4: Một bảng dữ liệu của các điều khiển biểu mẫu
Một bảng dữ liệu của các điều khiển biểu mẫu cần phải kết hợp mỗi điều khiển với tiêu đề cột và hàng cho ô đó. Không có tiêu đề (hoặc LABEL ngoài màn hình), người dùng không nhìn thấy khó có thể tạm dừng và thẩm vấn các giá trị tiêu đề hàng / cột tương ứng bằng cách sử dụng công nghệ hỗ trợ của họ trong khi duyệt qua biểu mẫu.

Ví dụ, một biểu mẫu khảo sát có bốn tiêu đề cột ở hàng đầu tiên: Câu hỏi, Đồng ý, Không quyết định, Không đồng ý. Mỗi hàng sau chứa một câu hỏi và một nút radio trong mỗi ô tương ứng với lựa chọn trả lời trong ba cột. Thuộc tính tiêu đề cho mọi nút radio là sự kết hợp giữa lựa chọn câu trả lời (tiêu đề cột) và văn bản của câu hỏi (tiêu đề hàng) với dấu gạch ngang hoặc dấu hai chấm làm dấu phân cách.

Yếu tố Img

Các thuộc tính được phép đề cập tại MDN .

• alt
• crossorigin
• decoding
• height
• importance (api thử nghiệm)
• intrinsicsize (api thử nghiệm)
• ismap
• referrerpolicy (api thử nghiệm)
• src
• srcset
• width
• usemap

Như bạn có thể thấy titlethuộc tính không được phép bên trong imgphần tử. Tôi sẽ sử dụng altthuộc tính và nếu yêu cầu, tôi sẽ sử dụng CSS (Ví dụ: lớp giả :hover) thay vì titlethuộc tính.

Không, tôi nghĩ altlà tốt hơn vì mục đích của thuộc tính đó là cung cấp văn bản "thay thế" trong trường hợp không thể xem hình ảnh (cho dù hình ảnh bị thiếu hoặc bản thân trình duyệt không có khả năng hiển thị hình ảnh đó).

MVCFutures cho ASP.NET MVC đã quyết định làm cả hai. Trên thực tế, nếu bạn cung cấp 'alt', nó sẽ tự động tạo một 'tiêu đề' có cùng giá trị cho bạn.

Tôi không có mã nguồn để sử dụng nhưng một tìm kiếm nhanh trên google đã cho ra một trường hợp thử nghiệm cho nó!

    [TestMethod]
    public void ImageWithAltValueInObjectDictionaryRendersImageWithAltAndTitleTag() {
        HtmlHelper html = TestHelper.GetHtmlHelper(new ViewDataDictionary());
        string imageResult = html.Image("/system/web/mvc.jpg", new { alt = "this is an alt value" });
        Assert.AreEqual("<img alt=\"this is an alt value\" src=\"/system/web/mvc.jpg\" title=\"this is an alt value\" />", imageResult);
    }

Bạn không nên sử dụng thuộc tính title cho phần tử img. Lý do đằng sau điều này khá đơn giản:

Thông tin phụ đề có lẽ là thông tin quan trọng nên có sẵn cho tất cả người dùng theo mặc định. Nếu vậy, hãy trình bày nội dung này dưới dạng văn bản bên cạnh hình ảnh.

Nguồn: http://blog.paciellogroup.com/2010/11/using-the-html-title-attribute/

HTML 5.1 bao gồm lời khuyên chung về việc sử dụng thuộc tính title:

Việc dựa vào thuộc tính title hiện không được khuyến khích vì nhiều tác nhân người dùng không hiển thị thuộc tính theo cách có thể truy cập được như yêu cầu của thông số kỹ thuật này (ví dụ: yêu cầu thiết bị trỏ như chuột để tạo chú giải công cụ cho đỉnh, loại trừ người dùng chỉ sử dụng bàn phím và người dùng chỉ cảm ứng, chẳng hạn như bất kỳ ai có điện thoại hoặc máy tính bảng hiện đại).

Nguồn: http://www.w3.org/html/wg/drafts/html/master/dom.html#the-title-attribute

Khi nói đến khả năng tiếp cận và các trình đọc màn hình khác nhau:

• Jaws 10-11: bị tắt theo mặc định
• Window-Eyes 7.02: được bật theo mặc định
• NVDA: không được hỗ trợ (không có tùy chọn hỗ trợ)
• VoiceOver: không được hỗ trợ (không có tùy chọn hỗ trợ)

Do đó, như Denis Boudreau đã nói một cách đầy đủ: rõ ràng không phải là một phương pháp được khuyến khích .