เผยแพร่: 27 พฤษภาคม 2026
ยินดีต้อนรับสู่สรุปรายเดือนของ Baseline ในเดือนเมษายน 2026 ความสามารถของ CSS และยูทิลิตีคณิตศาสตร์ที่แม่นยำบางอย่างพร้อมใช้งานแล้ว ในขณะที่องค์ประกอบเชิงความหมายเชิงโครงสร้างและการเพิ่ม Web API อื่นๆ พร้อมใช้งานอย่างแพร่หลาย รวมถึงกิจกรรมในชุมชนนักพัฒนาแอป
เกณฑ์พื้นฐานและการช่วยเหลือพิเศษในปี 2026
การสร้างเว็บไซต์หมายถึงการสร้างประสบการณ์ที่ทุกคนใช้ได้ และบทความล่าสุดจาก A11y Up ได้ชี้ให้เห็นว่าการคำนึงถึงความต้องการด้านการช่วยเหลือพิเศษจะมีประสิทธิภาพมากขึ้นเมื่อนักพัฒนาซอฟต์แวร์ใช้มาตรฐานเว็บ เป็นเวลานานแล้วที่วิศวกรได้ส่งโซลูชัน JavaScript ที่กำหนดเองและมักจะมีขนาดใหญ่เพื่อสร้างรูปแบบที่เข้าถึงได้ขึ้นมาใหม่ ซึ่งตอนนี้เป็นส่วนหนึ่งของแพลตฟอร์มเว็บแล้ว โซลูชันที่กำหนดเองเหล่านี้บางครั้งก็ไม่เสถียร มีแนวโน้มที่จะใช้งานไม่ได้ภายใต้เทคโนโลยีความช่วยเหลือพิเศษ และดูแลรักษายาก
บทความนี้เน้นย้ำว่าเมื่อฟีเจอร์ของแพลตฟอร์มเว็บมีความสามารถในการทำงานร่วมกันได้ในเบราว์เซอร์ต่างๆ การพัฒนาโดยคำนึงถึงการช่วยเหลือพิเศษก็จะเป็นงานที่มีประสิทธิภาพมากขึ้น การใช้ฟีเจอร์ของเว็บเพื่อให้บรรลุเป้าหมายทั่วไปและรูปแบบอินเทอร์เฟซผู้ใช้จะช่วยลดภาระหนักๆ ได้มาก โดยจะแสดงความหมายที่ถูกต้องต่อโปรแกรมอ่านหน้าจอและยูทิลิตีการนำทางด้วยแป้นพิมพ์ได้อย่างราบรื่น Baseline ทำหน้าที่เป็นไกด์ที่นี่ โดยส่งสัญญาณเมื่อฟีเจอร์บนเว็บพร้อมใช้งานและประเมินเพื่อใช้ในโปรเจ็กต์ของคุณ
ฟีเจอร์ Baseline ที่พร้อมใช้งานใหม่
ฟีเจอร์ในส่วนนี้ได้รับการรองรับตั้งแต่เดือนเมษายน 2026 ในชุดเบราว์เซอร์หลัก และตอนนี้พร้อมใช้งานเป็น Baseline ใหม่แล้ว
ฟังก์ชัน contrast-color() ของ CSS
เครื่องมือธีมแบบไดนามิกและคอมโพเนนต์ที่ปรับแต่งได้ทำให้นักพัฒนาแอปต้องดูแลรักษาระบบสีหลายระบบเพื่อรองรับค่ากำหนดของผู้ใช้สำหรับคอนทราสต์สูง ฟังก์ชัน CSS contrast-color() จะเปลี่ยนภาระด้านการบำรุงรักษานั้นไปที่เบราว์เซอร์ทั้งหมด เมื่อส่งสีอินพุตพื้นฐานไปยังฟังก์ชัน เครื่องมือจะประเมินและแสดงผลสีเสริมที่มีคอนทราสต์สูง โดยปกติจะแมปกับสีดำหรือสีขาว ขึ้นอยู่กับสีที่ให้คะแนนความสามารถในการอ่านสูงสุด
.card-header {
background-color: var(--dynamic-bg-color);
/* Automatically resolves to the highest-contrast text color */
color: contrast-color(var(--dynamic-bg-color));
}
ซึ่งช่วยให้คุณปฏิบัติตามมาตรฐานการเข้าถึงเพื่อให้อ่านง่ายได้โดยไม่ต้องใช้โซลูชันที่กำหนดเองหรือ CSS ที่ดูแลรักษายาก แม้ว่าคุณจะยังคงต้องคอยดูตัวเลือกสีระดับกลาง แต่ฟังก์ชันนี้จะช่วยลด CSS ที่ซ้ำซ้อนซึ่งจำเป็นต่อการจัดการการปรับให้ผู้ใช้เข้าถึงได้นี้ ดูข้อมูลเพิ่มเติมได้ในหน้าอ้างอิง MDN สำหรับ contrast-color()
Math.sumPrecise()
การบวกลำดับตัวเลขโดยใช้ลูปมาตรฐานหรือวิธีการต่างๆ เช่น Array.prototype.reduce() อาจทำให้ความแม่นยำของจุดลอยตัวลดลง ซึ่งอาจส่งผลต่อการคำนวณทางการเงินที่สำคัญหรือยอดรวมการวัดและส่งข้อมูล
วิธี Math.sumPrecise() ช่วยแก้ปัญหานี้ได้ โดยจะรับตัวเลขที่วนซ้ำได้และเรียกใช้กิจวัตรที่ปลอดภัยต่อความแม่นยำเพื่อให้ได้ผลรวมที่ถูกต้อง ดูรายละเอียดกลไกการทำงานได้ในเอกสารประกอบ MDN สำหรับ Math.sumPrecise()
ฟีเจอร์ Baseline ที่พร้อมใช้งานในวงกว้าง
ฟีเจอร์ต่อไปนี้พร้อมใช้งานใน Baseline อย่างแพร่หลาย ซึ่งหมายความว่าตอนนี้ฟีเจอร์เหล่านี้เข้ากันได้และใช้งานได้ในโปรเจ็กต์ของคุณ
องค์ประกอบ <search>
องค์ประกอบ <search> ของ HTML ทำหน้าที่เป็น Wrapper ที่ชัดเจนสำหรับการควบคุมแบบฟอร์ม กลไกการกรอง และยูทิลิตีการส่ง ซึ่งรวมกันเป็นประสบการณ์การค้นหาในเว็บแอปพลิเคชัน
<search>
<form action="/site-search">
<label for="query">Search documentation</label>
<input type="search" id="query" name="q">
<button>Go</button>
</form>
</search>
การเปลี่ยนองค์ประกอบที่ประกอบด้วยแท็ก <search> จะช่วยให้ผู้ใช้ได้รับประโยชน์ด้านการช่วยเหลือพิเศษ เบราว์เซอร์จะกำหนดบทบาท ARIA Landmark โดยนัยเป็น search ให้กับองค์ประกอบโดยอัตโนมัติ จึงไม่จำเป็นต้องระบุ role="search" ในองค์ประกอบ <form> ซึ่งจะช่วยให้โปรแกรมอ่านหน้าจอระบุและช่วยผู้ใช้ไปยังอินเทอร์เฟซการค้นหาได้ อ่านรายละเอียดการใช้งานในหน้า MDN สำหรับองค์ประกอบ <search>
การเข้าถึงคีย์สาธารณะของการตรวจสอบสิทธิ์ผ่านเว็บ
การเปลี่ยนไปใช้แบบไม่มีรหัสผ่านด้วย Web Authentication (WebAuthn) API ตอนนี้มีความซับซ้อนน้อยลงแล้ว เนื่องจากมีการรองรับตัวแยกพร็อพเพอร์ตี้โดยตรงในอินเทอร์เฟซ AuthenticatorAttestationResponse อย่างกว้างขวาง ด้วยวิธีต่างๆ เช่น getPublicKey() และ getPublicKeyAlgorithm() เบราว์เซอร์จะดึงรายละเอียดคีย์สาธารณะให้คุณโดยไม่ต้องทำงานกับข้อมูลไบนารีดิบ ดูข้อมูลเพิ่มเติมเกี่ยวกับพร็อพเพอร์ตี้เหล่านี้และวิธีใช้ในหน้า MDN สำหรับ AuthenticatorAttestationResponse
String.prototype.isWellFormed() และ String.prototype.toWellFormed()
สตริง JavaScript เข้ารหัสแบบ UTF-16 ซึ่งจะแมปอักขระที่ซับซ้อนและอีโมจิในคู่ Unicode หากตัดสตริงโดยไม่คำนึงถึงเรื่องนี้ ครึ่งหนึ่งของคู่แทนที่ที่แยกออกมา (เรียกว่าคู่แทนที่โดดเดี่ยว) จะยังคงอยู่ ส่งผลให้ข้อความมีรูปแบบไม่ถูกต้อง
isWellFormed() ช่วยให้นักพัฒนาแอปตรวจสอบว่าสตริงมีตัวแทนโดดเดี่ยวหรือไม่ และแสดงผลบูลีน หากสตริงไม่ผ่านการตรวจสอบ คุณสามารถเรียก toWellFormed() เพื่อแทนที่คู่ทดแทนที่ไม่ถูกต้องด้วยอักขระแทนที่ Unicode มาตรฐาน (U+FFFD) ซึ่งจะเป็นประโยชน์ก่อนเรียกฟังก์ชันต่างๆ เช่น encodeURI() ซึ่งจะแสดง URIError เมื่อพบอินพุตที่มีรูปแบบไม่ถูกต้อง ดูวิธีการทำงานของเมธอดเหล่านี้ได้ในเอกสารประกอบ MDN สำหรับ String.prototype.isWellFormed()
การสะท้อนแอตทริบิวต์ ARIA
การอัปเดตสถานะการช่วยเหลือพิเศษในองค์ประกอบแบบอินเทอร์แอกทีฟต้องมีการส่งคำขอไปกลับผ่านเมธอดแอตทริบิวต์ DOM มาตรฐาน เช่น element.setAttribute('aria-expanded', 'true') การสะท้อนแอตทริบิวต์ ARIA ช่วยให้กระบวนการนี้ง่ายขึ้นด้วยการจำลองพร็อพเพอร์ตี้การช่วยเหลือพิเศษเป็นพร็อพเพอร์ตี้ออบเจ็กต์
อินเทอร์เฟซ Element จะแสดงแอตทริบิวต์ ARIA โดยตรงไปยังพร็อพเพอร์ตี้อินสแตนซ์ เช่น element.ariaExpanded, element.ariaChecked และ element.ariaHidden ซึ่งช่วยให้คุณแก้ไขสถานะการช่วยเหลือพิเศษได้โดยใช้ไวยากรณ์แบบ Dot Notation ดังนี้
// Clean and readable state updates
toggleButton.ariaExpanded = toggleButton.ariaExpanded === "true" ? "false" : "true";
การถือว่าเป้าหมาย ARIA เป็นพร็อพเพอร์ตี้ JavaScript ช่วยให้เฟรมเวิร์ก UI และเครื่องมือการจัดการสถานะประสานงานบริบทการช่วยเหลือได้อย่างน่าเชื่อถือมากขึ้น และช่วยให้บริบทโปรแกรมอ่านหน้าจอสอดคล้องกับสถานะแอปพลิเคชันจริง ดูรายการพร็อพเพอร์ตี้ที่แสดงทั้งหมดได้ที่คู่มือ MDN เกี่ยวกับElementพร็อพเพอร์ตี้ของอินสแตนซ์
จบแล้ว
โปรดแจ้งให้เราทราบหากเราพลาดข้อมูลใดๆ ที่เกี่ยวข้องกับ Baseline และเราจะตรวจสอบว่าข้อมูลดังกล่าวได้รับการบันทึกไว้ในฉบับต่อๆ ไป หากมีข้อสงสัยหรือต้องการแสดงความคิดเห็นเกี่ยวกับ Baseline โปรดแจ้งปัญหาในเครื่องมือติดตามปัญหา