Hình ảnh Bản đồ SEO và Khả năng truy cập


7

Câu hỏi của tôi trong ngày là về bản đồ hình ảnh và khả năng tiếp cận.

Bây giờ tôi hiểu rằng bất cứ khi nào bạn sử dụng thẻ alt trong thẻ img, bạn sẽ mô tả hình ảnh làm tăng trải nghiệm người dùng cho những người mù hoặc chỉ những người vừa vô hiệu hóa hình ảnh hiển thị vì một hoặc nhiều lý do.

Bây giờ logic này dường như không hoạt động với Bản đồ hình ảnh mà tôi sẽ trình bày một ví dụ.

<img alt="Image Map of Bits and Bobs" usemap="#imgmap" src="bits-and-bobs">
  <map name="imgmap">
    <area shape="poly" coords="" href="" alt="Spanner" title="Guitars Repairs"/>
    <area shape="poly" coords="" href="" alt="Dollar" title="Guitars for Sale"/>
    <area shape="poly" coords="" href="" alt="eLearning" title="Learning about Guitars"/>
    <area shape="poly" coords="" href="" alt="String" title="How to tune a Guitar"/>
  </map>

Đã xóa Href và Coords hợp lệ để xem dễ dàng hơn ...

Vì vậy, như bạn có thể thấy trong hình trên, tôi đang mô tả khu vực của hình ảnh chứ không phải là kết quả nếu họ nhấp vào hình ảnh. Vì vậy, câu hỏi của tôi rất đơn giản ....

Trong bản đồ hình ảnh có chứa các liên kết, bạn có mô tả kết quả liên kết chứ không mô tả hình ảnh ... Ví dụ: hình ảnh của chuỗi sử dụng chuỗi sẽ không cho biết đó là liên kết về cách điều chỉnh guitar, tuy nhiên thẻ tiêu đề thì có.


Tái bút Tôi chưa bao giờ phải sử dụng bản đồ hình ảnh trước đây, cá nhân tôi không thích em nhưng tôi đã được yêu cầu và trong tâm trí người dùng mù.
Simon Hayter

Câu trả lời:


6

Nói chung, nếu một liên kết chỉ chứa một hình ảnh, các altthuộc tính của hình ảnh đó nên không mô tả các hình ảnh nhưng mục tiêu liên kết .

Với bản đồ hình ảnh, nó giống nhau.

Các altthuộc tính của imgnguyên tố nên mô tả toàn bộ hình ảnh (như hình ảnh bản thân không được liên kết).

Các altthuộc tính của areanguyên tố nên mô tả mục đích của nó (như khu vực hình ảnh này được liên kết, do đó liên kết là quan trọng, chứ không phải hình ảnh).

Tham khảo: HTML5 (CR từ 2013-08-06): areaalt :

Nó [ các altthuộc tính ] quy định cụ thể nội dung của siêu liên kết. Giá trị của nó phải là văn bản, khi được trình bày với các văn bản được chỉ định cho các siêu liên kết khác của bản đồ hình ảnh và với văn bản thay thế của hình ảnh, nhưng không có hình ảnh, sẽ cung cấp cho người dùng cùng loại lựa chọn như siêu liên kết khi được sử dụng mà không có văn bản của nó nhưng với hình dạng của nó được áp dụng cho hình ảnh.

FWIW, kỹ thuật của WCAG H37 (thông tin, không quy tắc) có một ví dụ cho img- altbao gồm cả một hướng dẫn để chọn một khu vực:

Một hình ảnh trên một trang web mô tả sơ đồ tầng của một tòa nhà. Hình ảnh là một bản đồ hình ảnh với mỗi phòng một khu vực bản đồ tương tác. Văn bản thay thế là "Sơ đồ tầng của tòa nhà. Chọn một phòng để biết thêm thông tin về mục đích hoặc nội dung của phòng." Hướng dẫn "chọn phòng" chỉ ra rằng hình ảnh tương tác.

Cá nhân, tôi không chắc chắn về điều này. Tôi nghĩ rằng nếu cần một hướng dẫn như vậy, thì nó nên là một phần của văn bản prosa gần bản đồ hình ảnh.


Vì vậy, trong ví dụ của bạn, bạn nên sử dụng nội dung của các titlethuộc tính làm altnội dung (và có thể loại bỏ các titlethuộc tính để không lặp lại nội dung này).

Vì tôi không nhìn thấy hình ảnh của bạn, tôi chỉ có thể đoán ở đây, nhưng tôi cho rằng hình ảnh bao gồm 4 biểu tượng mà không có bất kỳ nhãn văn bản nào. Nếu vậy, hướng dẫn cho hình ảnh biểu tượng có thể áp dụng ở đây:

Một biểu tượng thường là một hình ảnh đơn giản đại diện cho một chương trình, hành động, tệp dữ liệu hoặc một khái niệm.

Trong trường hợp img- altkhông nên mô tả các biểu tượng (vẻ đẹp của) nhưng những gì chúng đại diện .

Nếu giả định của tôi là chính xác, thì đây dường như không phải là một ứng cử viên hoàn hảo cho bản đồ hình ảnh, nhưng, ồ, khách hàng .

Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookieChính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.