แอตทริบิวต์ alt ภาพพื้นหลัง CSS

นี่คือสิ่งที่ฉันไม่เคยต้องรับมือมาก่อน ฉันจำเป็นต้องใช้แท็ก alt กับรูปภาพทั้งหมดในไซต์รวมถึงแท็กที่ใช้โดยแอตทริบิวต์ภาพพื้นหลัง CSS

ไม่มีคุณสมบัติ CSS แบบนี้เท่าที่ฉันรู้ดังนั้นวิธีที่ดีที่สุดในการดำเนินการนี้คืออะไร?

ภาพพื้นหลังสามารถนำเสนอข้อมูลได้! ในความเป็นจริงสิ่งนี้มักจะแนะนำให้ใช้เมื่อการนำเสนอไอคอนภาพมีขนาดกะทัดรัดและใช้งานง่ายกว่ารายการข้อความเบลอที่เทียบเท่ากัน การใช้สไปรต์รูปภาพใด ๆจะได้รับประโยชน์จากแนวทางนี้

เป็นเรื่องปกติที่ไอคอนรายชื่อโรงแรมจะแสดงสิ่งอำนวยความสะดวก ลองนึกภาพหน้าที่มีรายชื่อโรงแรม 50 แห่งและแต่ละโรงแรมมีสิ่งอำนวยความสะดวก 10 รายการ CSS Sprite จะเหมาะกับสิ่งนี้ - ประสบการณ์ผู้ใช้ที่ดีกว่าเพราะเร็วกว่า แต่คุณจะใช้แท็ก ALT สำหรับรูปภาพเหล่านี้ได้อย่างไร? เว็บไซต์ตัวอย่าง

คำตอบคือพวกเขาไม่ได้ใช้altข้อความเลย แต่ใช้titleแอตทริบิวต์บน div ที่มีอยู่แทน

HTML

<div class="hotwire-fitness" title="Fitness Centre"></div>

CSS

.hotwire-fitness {
    float: left;
    margin-right: 5px;
    background: url(/prostyle/images/new_amenities.png) -71px 0;
    width: 21px;
    height: 21px;
}

ตาม W3C (ดูลิงก์ด้านบน) แอตทริบิวต์ title มีจุดประสงค์เดียวกันกับแอตทริบิวต์ alt

หัวข้อ

ค่าของแอ็ตทริบิวต์ title อาจแสดงผลโดยตัวแทนผู้ใช้ได้หลายวิธี ตัวอย่างเช่นวิชวลเบราว์เซอร์มักแสดงชื่อเรื่องเป็น "เคล็ดลับเครื่องมือ" (ข้อความสั้น ๆ ที่ปรากฏขึ้นเมื่ออุปกรณ์ชี้ตำแหน่งหยุดอยู่เหนือวัตถุ) ตัวแทนผู้ใช้เสียงอาจพูดข้อมูลหัวเรื่องในบริบทที่คล้ายกัน ตัวอย่างเช่นการตั้งค่าแอตทริบิวต์บนลิงก์ช่วยให้ตัวแทนผู้ใช้ (แบบภาพและแบบไม่แสดงภาพ) บอกผู้ใช้เกี่ยวกับลักษณะของทรัพยากรที่เชื่อมโยง:

Alt

แอตทริบิวต์ alt ถูกกำหนดในชุดของแท็ก (ได้แก่ img พื้นที่และเป็นทางเลือกสำหรับอินพุตและแอพเพล็ต) เพื่อให้คุณสามารถจัดเตรียมข้อความที่เทียบเท่าสำหรับอ็อบเจ็กต์

การเทียบเท่าข้อความทำให้เกิดประโยชน์ต่อไปนี้แก่เว็บไซต์ของคุณและผู้เยี่ยมชมในสถานการณ์ทั่วไปดังต่อไปนี้:

• ปัจจุบันเว็บเบราว์เซอร์มีให้บริการในหลากหลายแพลตฟอร์มที่มีความสามารถแตกต่างกันมาก บางภาพไม่สามารถแสดงภาพได้เลยหรือมีเพียงชุดภาพที่ จำกัด บางส่วนสามารถกำหนดค่าให้ไม่โหลดภาพได้ หากโค้ดของคุณมีแอตทริบิวต์ alt ที่กำหนดไว้ในรูปภาพเบราว์เซอร์เหล่านี้ส่วนใหญ่จะแสดงคำอธิบายที่คุณให้ไว้แทนรูปภาพ
• ผู้เยี่ยมชมของคุณบางคนไม่สามารถมองเห็นภาพไม่ว่าจะเป็นคนตาบอดตาบอดสีสายตาต่ำ แอตทริบิวต์ alt เป็นประโยชน์อย่างยิ่งสำหรับผู้ที่สามารถวางใจได้ว่ามีอะไรอยู่ในหน้าเว็บของคุณ
• บ็อตของเครื่องมือค้นหาอยู่ในสองประเภทข้างต้น: หากคุณต้องการให้เว็บไซต์ของคุณได้รับการจัดทำดัชนีและสมควรใช้แอตทริบิวต์ alt เพื่อให้แน่ใจว่าจะไม่พลาดส่วนสำคัญของหน้าเว็บของคุณ

ในบทความYahoo Developer Network ( ลิงก์ที่เก็บถาวร ) แนะนำว่าหากคุณต้องใช้ภาพพื้นหลังแทนองค์ประกอบ img และแอตทริบิวต์ alt ให้ใช้แอตทริบิวต์ ARIA ดังนี้:

<div role="img" aria-label="adorable puppy playing on the grass">
  ...
</div>

กรณีการใช้งานในบทความอธิบายถึงวิธีที่ Flickr เลือกใช้ภาพพื้นหลังเนื่องจากประสิทธิภาพได้รับการปรับปรุงอย่างมากบนอุปกรณ์เคลื่อนที่

ฉันคิดว่าคุณควรอ่านโพสต์นี้โดย Christian Heilmann เขาอธิบายว่าภาพพื้นหลังมีไว้เพื่อความสวยงามเท่านั้นและไม่ควรใช้ในการนำเสนอข้อมูลดังนั้นจึงได้รับการยกเว้นจากกฎที่ว่าภาพทุกภาพควรมีข้อความอื่น

ข้อความที่ตัดตอนมา (เน้นของฉัน):

ภาพพื้นหลัง CSS ซึ่งโดยมีความหมายเดียวของค่าความงาม - เนื้อหาไม่ได้ภาพของเอกสารเอง หากคุณต้องการใส่รูปภาพในหน้าที่มีความหมายให้ใช้องค์ประกอบ IMG และให้ข้อความแสดงแทนในแอตทริบิวต์ alt

ฉันเห็นด้วยกับเขา

ดังที่กล่าวไว้ในคำตอบอื่น ๆ ไม่มีแอตทริบิวต์ alt (รองรับ) สำหรับแท็ก div สำหรับแท็ก img เท่านั้น

คำถามที่แท้จริงคือทำไมคุณต้องเพิ่มแอตทริบิวต์ alt ให้กับภาพพื้นหลังทั้งหมดสำหรับไซต์? จากคำตอบนี้จะช่วยให้คุณตัดสินใจได้ว่าจะใช้แนวทางใดในแนวทางของคุณ

Visual / Textual:หากคุณเพียงแค่พยายามเพิ่มข้อความถอยกลับสำหรับผู้ใช้หากไม่สามารถโหลดรูปภาพได้ให้ใช้แอตทริบิวต์ title เบราว์เซอร์ส่วนใหญ่จะให้คำแนะนำเครื่องมือภาพ (กล่องข้อความ) เมื่อผู้ใช้วางเมาส์เหนือรูปภาพและหากรูปภาพไม่ได้โหลดไม่ว่าด้วยเหตุผลใดก็ตามมันจะทำงานเหมือนกับแอตทริบิวต์ alt ที่นำเสนอข้อความเมื่อรูปภาพล้มเหลว เทคนิคนี้ยังคงช่วยให้ไซต์สามารถเพิ่มความเร็วในการโหลดได้โดยการตั้งค่ารูปภาพเป็นพื้นหลัง

โปรแกรมอ่านหน้าจอ:ตัวเลือกกลางถนนซึ่งแตกต่างกันไปเนื่องจากในทางเทคนิคการเก็บภาพของคุณไว้เป็นพื้นหลังและการใช้วิธีการใช้แอตทริบิวต์หัวเรื่องควรทำงานตามคำแนะนำข้างต้น"ตัวแทนผู้ใช้เสียงอาจพูดข้อมูลชื่อเรื่องในบริบทที่คล้ายคลึงกัน" อย่างไรก็ตามไม่รับประกันว่าจะได้ผลในทุกกรณีรวมถึงผู้อ่านบางคนอาจเพิกเฉยต่อสิ่งเหล่านี้ทั้งหมดด้วยกัน หากคุณเลือกแนวทางนี้คุณสามารถลองเพิ่มป้ายกำกับ aria เพื่อช่วยให้โปรแกรมอ่านหน้าจอเลือกสิ่งเหล่านี้ได้

SEO / เครื่องมือค้นหา:นี่คือสิ่งที่ยิ่งใหญ่ถ้าคุณเป็นเหมือนฉันคุณเพิ่มภาพพื้นหลังของคุณทั้งหมดก็ดี จากนั้นหลายเดือนต่อมาลูกค้า (หรืออาจจะเป็นตัวคุณเอง) ก็รู้ว่าคุณกำลังพลาดทอง SEO ที่สำคัญโดยไม่มี alt สำหรับรูปภาพของคุณ โปรดทราบว่าแอตทริบิวต์ title ไม่มีน้ำหนักใด ๆ ในเครื่องมือค้นหาจากการวิจัยของฉันและตามที่กล่าวไว้ในบทความที่นี่: https://www.searchenginejournal.com/how-to-use-link-title-attribute-correctly /. ดังนั้นหากคุณมีเป้าหมายในการทำ SEO คุณจะต้องมีแท็ก img ที่มีแอตทริบิวต์ alt วิธีหนึ่งที่เป็นไปได้คือการโหลดรูปภาพจริงขนาดเล็กมากบนไซต์ด้วยคุณสมบัติ alt ซึ่งจะช่วยให้คุณได้รับ SEO ทั้งหมดและไม่ต้องปรับ CSS ที่มีอยู่ใหม่ อย่างไรก็ตามสิ่งนี้อาจทำให้ต้องใช้เวลาในการโหลดเพิ่มขึ้นโดยขึ้นอยู่กับขนาดและ Google จะดูเส้นทางของรูปภาพเมื่อจัดทำดัชนี ในระยะสั้นหากคุณกำลังไปเส้นทางนี้เพียงแค่ยอมรับสิ่งที่ต้องทำและใส่ภาพจริงแทนการใช้พื้นหลัง

ความเชื่อทั่วไปคือคุณไม่ควรใช้ภาพพื้นหลังสำหรับสิ่งที่มีค่าความหมายที่มีความหมายดังนั้นจึงไม่มีวิธีที่เหมาะสมในการจัดเก็บข้อมูล alt กับภาพเหล่านั้น คำถามสำคัญคือคุณจะทำอะไรกับข้อมูล alt นั้น? คุณต้องการให้แสดงหรือไม่หากรูปภาพไม่โหลด คุณต้องการมันสำหรับฟังก์ชันทางโปรแกรมบางอย่างในหน้านี้หรือไม่? คุณสามารถจัดเก็บข้อมูลได้ตามอำเภอใจโดยใช้คุณสมบัติ css ที่ไม่มีความหมาย (อาจทำให้เกิดข้อผิดพลาด?) หรือโดยการเพิ่มรูปภาพที่ซ่อนอยู่ซึ่งมีรูปภาพและแท็ก alt จากนั้นเมื่อคุณต้องการภาพพื้นหลังคุณสามารถเปรียบเทียบรูปภาพได้ เส้นทางแล้วจัดการข้อมูลตามที่คุณต้องการโดยใช้สคริปต์ที่กำหนดเองเพื่อจำลองสิ่งที่คุณต้องการ ไม่มีวิธีใดที่ฉันรู้ว่าจะทำให้เบราว์เซอร์จัดการแอตทริบิวต์ alt สำหรับภาพพื้นหลังโดยอัตโนมัติได้

วิธีคลาสสิกในการบรรลุเป้าหมายนี้คือการใส่ข้อความลงใน div และใช้เทคนิคการแทนที่รูปภาพ

<div class"ir background-image">Your alt text</div>

ด้วยภาพพื้นหลังเป็นคลาสที่คุณกำหนดภาพพื้นหลังและ ir อาจเป็นคลาสการเปลี่ยนภาพ HTML5boilerplates ด้านล่าง:

/* ==========================================================================
   Helper classes
   ========================================================================== */

/*
 * Image replacement
 */

.ir {
    background-color: transparent;
    border: 0;
    overflow: hidden;
    /* IE 6/7 fallback */
    *text-indent: -9999px;
}

.ir:before {
    content: "";
    display: block;
    width: 0;
    height: 150%;
}

บทความนี้จาก W3C จะบอกคุณว่าพวกเขาคิดว่าคุณควรทำอะไร https://www.w3.org/WAI/GL/wiki/ARIATechnique_usingImgRole_with_aria-label_forCSS-backgroundImage

และมีตัวอย่างที่นี่ http://mars.dequecloud.com/demo/ImgRole.htm

ในระหว่างที่

<a href="http://www.facebook.com">
 <span class="fb_logo" role="img" aria-label="Connect via Facebook">
 </span>
</a>

อย่างไรก็ตามหากเช่นในตัวอย่างข้างต้นองค์ประกอบที่มีภาพพื้นหลังเป็นเพียงคอนเทนเนอร์ว่างฉันชอบที่จะใส่ข้อความลงไปในนั้นและซ่อนโดยใช้ CSS ตรงที่คุณแสดงภาพแทน:

<a href="http://www.facebook.com"><span class="fb_logo">
  Connect via Facebook
</span></a>

.fb_logo {
  height: 37px; width: 37px;
  background-image: url('../gfx/logo-facebook.svg');
  color:transparent; overflow:hidden; /* hide the text */
}

นี่คือวิธีแก้ปัญหาประเภทนี้ของฉัน:

สร้างคลาสใหม่ใน CSS และวางตำแหน่งปิดหน้าจอ จากนั้นใส่ข้อความแสดงแทนของคุณใน HTML ก่อนคุณสมบัติที่เรียกภาพพื้นหลังของคุณ สามารถแท็ก, H1, H2, pฯลฯ

CSS

<style type="text/css">
  .offleft {
    margin-left: -9000px;
    position: absolute;
  }
</style>

HTML

<h1 class="offleft">put your alt text here</h1>
<div class or id that calls your bg image>  </div>

มันไม่ชัดเจนสำหรับฉันว่าคุณต้องการอะไร

หากคุณต้องการให้คุณสมบัติ CSS แสดงค่าแอตทริบิวต์ alt คุณอาจกำลังมองหาฟังก์ชันแอตทริบิวต์ CSSเช่น:

IMG:before { content: attr(alt) }

หากคุณต้องการใส่แอตทริบิวต์ alt บนภาพพื้นหลังแสดงว่า ... แปลกเพราะแอตทริบิวต์ alt เป็นแอตทริบิวต์ HTML ในขณะที่ภาพพื้นหลังเป็นคุณสมบัติ CSS หากคุณต้องการใช้แอตทริบิวต์ HTML alt ฉันคิดว่าคุณต้องการองค์ประกอบ HTML ที่เกี่ยวข้องเพื่อใส่เข้าไป

เหตุใดคุณจึง "ต้องใช้แท็กแสดงแทนบนภาพพื้นหลัง": นี่เป็นเหตุผลทางความหมายหรือด้วยเหตุผลที่เป็นภาพ (ถ้าเป็นเช่นนั้นจะมีผลอย่างไรหรือเหตุผลใด)

คุณสามารถทำได้โดยการใส่altแท็กในdivคือรูปภาพของคุณจะปรากฏขึ้น

ตัวอย่าง:

<div id="yourImage" alt="nameOfImage"></div>