شرح صفوف ومحتوى الفقرة
من أرقى ممارسات الوصول الشامل في CSS الحديثة ربط المظهر البصري للمكونات مباشرة بسمات حالة ARIA مثل button[aria-expanded="true"] وa[aria-current="page"]، وكذلك سمات البيانات الدلالية المخصصة مثل [data-status="verified"].
فعندما يعتمد التلوين والإظهار مباشرة على aria-expanded="true" بدلاً من صنف منفصل مثل .is-open، يستحيل أن يتغير شكل الزر على الشاشة مع نسيان تحديث حالته لقارئات الشاشة؛ وبذلك يشترك التصميم البصري وإمكانية الوصول في مصدر حقيقة واحد.
CSS
button[aria-expanded="true"] {
background-color: #6d44a8;
color: #ffffff;
}
.status-pill[data-state="online"] {
background-color: #ccfbf1;
color: #115e59;
}