Bài viết được dịch từ:
https://ishadeed.com/article/building-real-life-components/

Nội dung từ phải sang trái

Trong trường hợp bố cục là LTR (Từ trái sang phải) và nội dung tin nhắn bằng tiếng Ả Rập, hướng của nội dung tin nhắn phải là RTL (Từ phải sang trái).

Vì phần tử .card__content__start là một flex container, các item con sẽ tự động lật tùy thuộc vào direction của component hoặc phần tử gốc (root element). Điều này có thể được thêm một cách chủ động tùy thuộc vào ngôn ngữ nội dung. (Chú ý: css direction)

<div class="card__content">
  <div class="card__content__start" style="direction: rtl"></div>
  <div class="card__content__end"></div>
</div>

Lật component

Nếu người dùng chọn RTL (Từ phải sang trái) như tiếng Ả Rập cho toàn bộ giao diện người dùng, thì component sẽ được lật.

Vì flexbox được sử dụng để sắp xếp các mục, không cần thực hiện nhiều thao tác ngoại trừ việc lật margin.

/* LTR */
.card__content__end {
  margin-left: 12px;
}

/* LTR */
.card__content__end {
  margin-right: 12px;
}

Chi tiết về khả năng tiếp cận

Sử dụng bàn phím

Để xây dựng một sản phẩm hoạt động với hàng tỷ người dùng, nó phải hoàn toàn có thể truy cập được. Đối với component của bài viết này, tôi đã thử nghiệm trong Chrome và Firefox và nhận thấy các vấn đề sau:

• Các kiểu tiêu điểm hoạt động tốt trong Chrome, nhưng trong Firefox, không có manh mối trực quan nào về chúng.

• Menu tác vụ xuất hiện khi di chuột có thể đặt tiêu điểm trong Firefox và tôi không thể truy cập menu này bằng bàn phím trong Chrome.

Và để cung cấp cho bạn nhiều ngữ cảnh hơn, menu tác vụ sẽ xuất hiện khi di chuột. Tuy nhiên, là một người dùng bàn phím, tôi cũng mong đợi có thể truy cập nó qua bàn phím.

Rất tiếc, trong Chrome, tôi không thể truy cập menu tác vụ.

Danh sách cards

Trong danh sách card component, có một số role ARIA được sử dụng. Danh sách là ở dạng grid và nó chứa các hàng. Mỗi hàng có thể có một hoặc nhiều ô.

<div role="grid">
  <div role="row">
    <div role="gridcell">
      <a href="#">
        <!-- The component lives here -->
      </a>
    </div>
  </div>
  <div role="row">
    <div role="gridcell">
      <a href="#">
        <!-- The component lives here -->
      </a>
    </div>
  </div>
</div>

Nhiều hình đại diện

Đối với trò chuyện nhóm, có nhiều hình đại diện cho các chỉ số được nhìn thấy. Trong trường hợp này, các hình đại diện được sắp xếp dưới dạng các ô của một hàng bằng cách sử dụng role ARIA.

<div role="grid">
  <div role="row">
    <!-- 1st avatar -->
    <div role="cell"></div>
    <!-- 2nd avatar -->
    <div role="cell"></div>
  </div>
</div>

Đây là bản demo trên Codepen. Nó không bao gồm tất cả các biến thể. Tôi chỉ đang thử nghiệm mọi thứ.

Kết luận

Xây dựng web bằng HTML & CSS không phải là một công việc dễ dàng và cũng không khó. Điểm tôi muốn đưa ra trong bài viết này là component đơn giản nhất bao gồm rất nhiều công việc. Nhân tiện, tất cả các giải thích ở trên chỉ thảo luận về HTML & CSS. Còn JavaScript thì sao? Đó là một câu chuyện khác.