Ngày xuất bản: 27 tháng 5 năm 2026
Chào mừng bạn đến với bản tin hằng tháng của Baseline. Vào tháng 4 năm 2026, một số chức năng CSS và tiện ích toán học chính xác mới được cung cấp, trong khi các phần tử ngữ nghĩa cấu trúc và các tiện ích bổ sung Web API khác được cung cấp rộng rãi, cùng với các sự kiện trong cộng đồng nhà phát triển.
Giá trị cơ sở và khả năng tiếp cận vào năm 2026
Xây dựng cho web có nghĩa là xây dựng một trải nghiệm mà mọi người đều có thể sử dụng, và một bài viết gần đây của A11y Up cho thấy rằng việc tính đến các nhu cầu về khả năng tiếp cận sẽ hiệu quả hơn khi nhà phát triển dựa vào các tiêu chuẩn web. Trong một thời gian, các kỹ sư đã cung cấp các giải pháp JavaScript tuỳ chỉnh và thường có dung lượng lớn để tạo lại các mẫu có thể truy cập hiện là một phần của nền tảng web. Đôi khi, những giải pháp riêng biệt này rất dễ bị lỗi, dễ gặp sự cố khi dùng công nghệ hỗ trợ và khó duy trì.
Bài viết này nhấn mạnh rằng khi các tính năng của nền tảng web đạt được khả năng tương tác trên nhiều trình duyệt, chúng sẽ giúp việc phát triển với khả năng hỗ trợ tiếp cận trở thành một nhiệm vụ hiệu quả hơn. Việc sử dụng các tính năng trên web để đạt được các mục tiêu chung và mẫu giao diện người dùng sẽ xử lý phần lớn công việc nặng nhọc, đồng thời cho phép trình đọc màn hình và các tiện ích điều hướng bằng bàn phím truy cập trực tiếp vào ngữ nghĩa phù hợp một cách mượt mà. Baseline đóng vai trò là hướng dẫn ở đây, báo hiệu thời điểm một tính năng web đủ hoàn thiện để đánh giá và sử dụng trong các dự án của bạn.
Các tính năng mới có trong Baseline
Các tính năng trong phần này được hỗ trợ kể từ tháng 4 năm 2026 trong bộ trình duyệt cốt lõi và hiện là Baseline mới ra mắt.
Hàm contrast-color() của CSS
Các công cụ giao diện động và thành phần có thể tuỳ chỉnh đã buộc nhà phát triển phải duy trì nhiều hệ thống màu để đáp ứng lựa chọn ưu tiên của người dùng về độ tương phản cao. Hàm contrast-color() của CSS hoàn toàn chuyển gánh nặng bảo trì đó sang trình duyệt. Bằng cách truyền màu đầu vào cơ bản vào hàm, công cụ sẽ đánh giá và trả về một màu bổ sung có độ tương phản cao, thường ánh xạ đến màu đen hoặc trắng tuỳ thuộc vào màu nào mang lại điểm số dễ đọc cao nhất.
.card-header {
background-color: var(--dynamic-bg-color);
/* Automatically resolves to the highest-contrast text color */
color: contrast-color(var(--dynamic-bg-color));
}
Điều này giúp bạn đáp ứng các tiêu chuẩn về khả năng đọc mà không cần giải pháp tuỳ chỉnh hoặc CSS khó duy trì. Mặc dù bạn vẫn nên chú ý đến các lựa chọn màu trung tính, nhưng chức năng này sẽ giảm CSS mẫu cần thiết để xử lý việc điều chỉnh cho người dùng này. Bạn có thể tìm hiểu thêm trên trang tham khảo MDN cho contrast-color().
Math.sumPrecise()
Việc tính tổng các chuỗi số bằng cách sử dụng các vòng lặp tiêu chuẩn hoặc các phương thức như Array.prototype.reduce() có thể dẫn đến mất độ chính xác của dấu phẩy động. Điều này có thể ảnh hưởng đến các phép tính tài chính quan trọng hoặc tổng số liệu đo từ xa.
Phương thức Math.sumPrecise() giải quyết vấn đề này. Hàm này chấp nhận một số có thể lặp lại và thực thi một quy trình an toàn về độ chính xác để cung cấp tổng chính xác. Hãy xem cơ chế trong tài liệu MDN về Math.sumPrecise().
Các tính năng cơ bản được cung cấp rộng rãi
Các tính năng sau đây đã được cung cấp rộng rãi trong Baseline, tức là hiện chúng tương thích và có thể sử dụng rộng rãi trong các dự án của bạn.
Phần tử <search>
Phần tử <search> HTML đóng vai trò là một trình bao bọc rõ ràng cho các chế độ kiểm soát biểu mẫu, cơ chế lọc và tiện ích gửi. Tất cả những thành phần này cùng nhau thể hiện trải nghiệm tìm kiếm trên một ứng dụng web.
<search>
<form action="/site-search">
<label for="query">Search documentation</label>
<input type="search" id="query" name="q">
<button>Go</button>
</form>
</search>
Bằng cách chuyển một phần tử chứa sang thẻ <search>, bạn sẽ mang lại lợi ích về khả năng hỗ trợ tiếp cận cho người dùng. Trình duyệt sẽ tự động chỉ định vai trò điểm đánh dấu ARIA ngầm định là search cho phần tử, giúp bạn không cần chỉ định role="search" trên phần tử <form>. Điều này giúp trình đọc màn hình xác định và giúp người dùng chuyển đến giao diện tìm kiếm. Đọc thông tin chi tiết về cách triển khai trên trang MDN cho phần tử <search>.
Quyền truy cập vào khoá công khai để xác thực web
Việc chuyển sang chế độ không cần mật khẩu bằng Web Authentication (WebAuthn) API hiện đã trở nên đơn giản hơn nhờ khả năng hỗ trợ rộng rãi cho các trình trích xuất thuộc tính trực tiếp trên giao diện AuthenticatorAttestationResponse. Với các phương thức như getPublicKey() và getPublicKeyAlgorithm(), trình duyệt sẽ trích xuất thông tin khoá công khai cho bạn mà không cần xử lý dữ liệu nhị phân thô. Tìm hiểu thêm về các thuộc tính này và cách sử dụng chúng trên trang MDN dành cho AuthenticatorAttestationResponse.
String.prototype.isWellFormed() và String.prototype.toWellFormed()
Các chuỗi JavaScript được mã hoá bằng UTF-16, giúp ánh xạ các ký tự phức tạp và biểu tượng cảm xúc thành các cặp Unicode. Nếu một chuỗi được phân đoạn mà không tính đến điều này, thì các nửa riêng biệt của một cặp thay thế (còn gọi là cặp thay thế đơn lẻ) sẽ vẫn còn, dẫn đến văn bản bị lỗi.
isWellFormed() cho phép nhà phát triển kiểm tra xem một chuỗi có chứa các ký tự thay thế riêng lẻ hay không và trả về một giá trị boolean. Nếu một chuỗi không xác thực được, bạn có thể gọi toWellFormed() để thay thế các ký tự thay thế không hợp lệ bằng ký tự thay thế Unicode tiêu chuẩn (U+FFFD). Điều này rất hữu ích trước khi gọi các hàm như encodeURI(). Hàm này sẽ gửi URIError khi gặp phải đầu vào bị lỗi. Tìm hiểu cách các phương thức này hoạt động trong tài liệu MDN cho String.prototype.isWellFormed().
Phản ánh thuộc tính ARIA
Việc cập nhật trạng thái hỗ trợ tiếp cận trên các phần tử tương tác đòi hỏi các chuyến khứ hồi thông qua các phương thức thuộc tính DOM tiêu chuẩn, chẳng hạn như element.setAttribute('aria-expanded', 'true'). Tính năng phản chiếu thuộc tính ARIA giúp đơn giản hoá việc này bằng cách phản chiếu các thuộc tính hỗ trợ tiếp cận dưới dạng thuộc tính đối tượng.
Giao diện Element phản ánh các thuộc tính ARIA trực tiếp đến các thuộc tính của thực thể như element.ariaExpanded, element.ariaChecked và element.ariaHidden. Điều này cho phép bạn sửa đổi các trạng thái hỗ trợ tiếp cận bằng cú pháp ký hiệu dấu chấm:
// Clean and readable state updates
toggleButton.ariaExpanded = toggleButton.ariaExpanded === "true" ? "false" : "true";
Việc coi các mục tiêu ARIA là thuộc tính JavaScript cho phép các khung giao diện người dùng và công cụ quản lý trạng thái điều phối các bối cảnh hỗ trợ một cách đáng tin cậy hơn, đồng thời giúp giữ cho các bối cảnh của trình đọc màn hình phù hợp với trạng thái thực tế của ứng dụng. Để xem danh sách đầy đủ các thuộc tính được phản ánh, hãy xem hướng dẫn của MDN về các thuộc tính của thực thể Element.
Vậy là xong
Hãy cho chúng tôi biết nếu chúng tôi bỏ lỡ bất kỳ thông tin nào liên quan đến Baseline. Chúng tôi sẽ đảm bảo thông tin đó được đưa vào một phiên bản trong tương lai! Nếu có thắc mắc hoặc muốn gửi ý kiến phản hồi về Baseline, bạn có thể gửi vấn đề trong công cụ theo dõi lỗi của chúng tôi.