รูปภาพของคุณอาจไม่ตกแต่ง

แอตทริบิวต์ alt ขององค์ประกอบ img สามารถ "เป็นโมฆะ" ซึ่งเป็นการตั้งค่าให้เป็นสตริงว่างแทนคำอธิบายข้อความ การยกเลิกคำอธิบาย alt หมายความว่าไม่มีข้อมูลระหว่างอัญประกาศเปิดและปิด หากมีพื้นที่ว่างจะไม่ถือเป็นโมฆะ:

  
<img alt="" src="/images/cat.jpg" />

  
<img alt=" " src="/images/dog.jpg" />

“ของตกแต่ง” หมายถึงอะไร?

การลบภาพแสดงว่าใช้เพื่อการตกแต่งเท่านั้น

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

การตกแต่งไม่ได้หมายความว่ารูปภาพมีเนื้อหาที่ถือเป็นการตกแต่ง

“

ตัวอย่างเช่น เว็บไซต์ที่ขายวอลเปเปอร์จะต้องมีคำอธิบายสำรองสำหรับตัวอย่างวอลเปเปอร์:

 <a href="/products/umbrella?variant=73849024783051"> <img alt="Small red and white illustrated umbrellas on a teal background." src="/images/73849024783051.png" /> </a>

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

 <figure role="figure" aria-label="View of Rotterdam, by Cornelis Boumeester. Date: about 1700–20. Accession Number: 2005.1057. In Dutch homes, tiles typically served utilitarian purposes, such as covering the walls of kitchens, utility rooms, passageways, and fireplace surrounds."> <img alt="A tile painting, composed of 33 Delft tiles forming a view of the port of Rotterdam. Set in a modern mahogany frame, with gilded inscription on bottom border." src="/collection/w0895/2005-1057.png" /> <figcaption> View of Rotterdam, by Cornelis Boumeester. Date: about 1700–20. Accession Number: 2005.1057. In Dutch homes, tiles typically served utilitarian purposes, such as covering the walls of kitchens, utility rooms, passageways, and fireplace surrounds. </figcaption> </figure>

ตรวจสอบให้แน่ใจว่าคำอธิบายอื่นของคุณมีเครื่องหมายวรรคตอนด้วย!

ทำไมคุณถึงต้องการสร้างภาพตกแต่ง?

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

เทคนิคเลย์เอาต์แบบเก่า

เทคนิคการพัฒนาเว็บในยุคแรกๆ อาศัยรูปภาพเพื่อช่วยรับประกันการ จัดวางที่สอดคล้อง กันในระบบปฏิบัติการ เบราว์เซอร์ และเวอร์ชันของเบราว์เซอร์ต่างๆ ตัวอย่างที่พบบ่อยที่สุดคือ spacer.gif ซึ่งเป็นพิกเซลโปร่งใสขนาด 1×1 ที่ถูกขยายเป็นขนาดต่างๆ เพื่อดันเนื้อหาเข้าที่

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

เทคนิคการออกแบบแบบเก่า

ก่อนที่จะมีคุณสมบัติ CSS เช่น box-shadow นักพัฒนาต้องใช้เทคนิคที่สับสไตล์การตกแต่งเพื่อให้ทำงานกับเนื้อหาที่มีความสูงหรือความกว้างไม่แน่นอน เทคนิคนี้เรียกว่าการปรับขนาด 9 ส่วน ซึ่งเป็นคำที่อ้างอิงถึงเนื้อหา 9 ส่วนที่คุณต้องสร้าง

เช่นเดียวกับภาพเว้นวรรค การสเกล 9 ส่วนใช้ภาพหลายภาพเพื่อสร้างเอฟเฟ็กต์ภาพที่ต้องการ และเช่นเดียวกับภาพเว้นวรรค วิธีเดียวที่จะ ขจัดความยุ่งเหยิงของ ภาพที่สร้างขึ้นเหล่านี้คือการทำเครื่องหมายว่าเป็นการตกแต่ง

ประกาศซ้ำซ้อน

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

ไอคอนเสริม

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

 <button type="button"> <img src="icon-print.svg" alt="" /> Print </button>

หากส่วนประกอบใช้เพียงไอคอน ควรใช้รูปภาพเพื่อสร้างชื่อที่สามารถเข้าถึงได้:

 <button type="button"> <img src="icon-print.svg" alt="Print." /> </button>

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

การใช้งานร่วมสมัย

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

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

วิธีอื่นในการแสดงภาพ

มีวิธีอื่นๆ สองสามวิธีในการแสดงรูปภาพบนเพจหรือมุมมอง สิ่งสำคัญคือต้องแน่ใจว่ามีคำอธิบายสำรองหากรูปภาพมี เนื้อหาที่มีความหมาย โดยไม่คำนึงถึงเทคนิคที่ใช้

องค์ประกอบ picture

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

องค์ประกอบ picture เป็นคอนเทนเนอร์สำหรับองค์ประกอบ source และ img ใช้แอตทริบิวต์ alt ขององค์ประกอบ img เพื่อให้คำอธิบายทางเลือกสำหรับองค์ประกอบ picture หลัก

 <a href="/product/9091866/color/3"> <picture> <source type="image/avif" /> <img alt="A black ankle-length boot with metal eyelets, yellow stitching, and a padded collar and tongue." src="9091866-3.png" /> </picture> </a>

ภาพพื้นหลัง

เราสามารถใช้ CSS เพื่อประกาศรูปภาพเป็นพื้นหลังบนองค์ประกอบ HTML ส่วนใหญ่มักจะใช้เพื่อเพิ่มความรู้สึกของพื้นผิวให้กับการออกแบบ

อย่างไรก็ตาม เทคนิคยอดนิยมอีกวิธีหนึ่งคือการใช้ background-image เพื่อวางภาพในลักษณะที่นักพัฒนาไม่สามารถควบคุม ขนาดของภาพที่ผู้ อื่นอัปโหลดได้ background-image รวมกับคุณสมบัติอื่นๆ เช่น background-size จะช่วยให้มั่นใจได้ว่าเนื้อหาที่มีขนาดที่ไม่รู้จักแสดงขึ้นโดยไม่ทำให้การออกแบบเสียหาย

ในสถานการณ์เช่นนี้ spacer.gif เพื่อนเก่าของเราอาจมีประโยชน์อีกครั้ง!

SVG แบบอินไลน์

สามารถแสดง SVG ได้โดยลิงก์ไปยังแอตทริบิวต์ src ในองค์ประกอบ img หรือโดยการวางโค้ด SVG ในบรรทัดในหน้าหรือมุมมอง

หากคุณกำลังใช้ SVG แบบอินไลน์ คุณต้องใช้องค์ประกอบ title (และอาจมี desc ) ของ SVG แทนแอตทริบิวต์ alt

 <svg role="img" aria-labelledby="icon-bookmark-desc" xmlns="https://www.w3.org/2000/svg" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <title>Bookmark.</title> <path d="M19 21l-7-5-7 5V5a2 2 0 012-2h10a2 2 0 012 2z"/> </svg>

ประสบการณ์เทียบเท่า

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

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

อ่านเพิ่มเติม เกี่ยวกับ SmashingMag:

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