JS có thể tương tác với CSS không?

CSS và JavaScript không có cùng tầm quan trọng đối với khả năng truy cập ngay lập tức như HTML, nhưng chúng vẫn có thể trợ giúp hoặc làm hỏng khả năng truy cập, tùy thuộc vào cách chúng được sử dụng. Nói cách khác, điều quan trọng là bạn phải xem xét một số lời khuyên về phương pháp hay nhất để đảm bảo rằng việc sử dụng CSS và JavaScript của bạn không làm hỏng khả năng truy cập tài liệu của bạn

Hãy bắt đầu bằng cách xem CSS

Có thể sử dụng CSS để làm cho bất kỳ thành phần HTML nào trông giống bất kỳ thứ gì, nhưng điều này không có nghĩa là bạn nên. Như chúng tôi thường đề cập trong HTML của chúng tôi. Một cơ sở tốt cho bài viết về khả năng tiếp cận, bạn nên sử dụng yếu tố ngữ nghĩa thích hợp cho công việc, bất cứ khi nào có thể. Nếu không, nó có thể gây nhầm lẫn và các vấn đề về khả năng sử dụng cho mọi người, nhưng đặc biệt là người dùng khuyết tật. Việc sử dụng đúng ngữ nghĩa có liên quan nhiều đến kỳ vọng của người dùng — các yếu tố trông và hành xử theo những cách nhất định, tùy theo chức năng của chúng và những quy ước chung này được người dùng mong đợi

Ví dụ: người dùng trình đọc màn hình không thể điều hướng trang qua các thành phần tiêu đề nếu nhà phát triển không sử dụng các thành phần tiêu đề một cách thích hợp để đánh dấu nội dung. Tương tự như vậy, một tiêu đề sẽ mất mục đích trực quan nếu bạn tạo kiểu cho nó trông không giống một tiêu đề.

Tóm lại, bạn có thể cập nhật kiểu dáng của một tính năng trang để phù hợp với thiết kế của mình, nhưng đừng thay đổi nó quá nhiều đến mức nó không còn trông hoặc hoạt động như mong đợi. Các phần sau đây tóm tắt các tính năng chính của HTML để xem xét

Cấu trúc nội dung văn bản "chuẩn"

Tiêu đề, đoạn văn, danh sách — nội dung văn bản cốt lõi của trang của bạn

<h1>Headingh1>

<p>Paragraphp>

<ul>
  <li>My listli>
  <li>has two items.li>
ul>

Một số CSS điển hình có thể trông như thế này

h1 {
  font-size: 5rem;
}

p,
li {
  line-height: 1.5;
  font-size: 1.6rem;
}

Bạn nên

• Chọn kích thước phông chữ hợp lý, chiều cao dòng, khoảng cách giữa các chữ cái, v.v. để làm cho văn bản của bạn hợp lý, dễ đọc và thoải mái khi đọc
• Đảm bảo tiêu đề của bạn nổi bật so với văn bản nội dung, thường là to và đậm như kiểu dáng mặc định. Danh sách của bạn sẽ giống như danh sách
• Màu văn bản của bạn phải tương phản tốt với màu nền của bạn

Xem Nguyên tắc cơ bản về văn bản HTML và Văn bản tạo kiểu để biết thêm thông tin

Đoạn văn bản được nhấn mạnh

Đánh dấu nội tuyến tạo điểm nhấn cụ thể cho văn bản mà nó bao bọc

<p>The water is <em>very hotem>.p>

<p>
  Water droplets collecting on surfaces is called <strong>condensationstrong>.
p>

Bạn có thể muốn thêm một số màu đơn giản vào văn bản được nhấn mạnh của mình

strong,
em {
  color: #a60000;
}

Tuy nhiên, bạn sẽ hiếm khi cần tạo kiểu cho các phần tử nhấn mạnh theo bất kỳ cách quan trọng nào. Các quy ước tiêu chuẩn về văn bản in đậm và in nghiêng rất dễ nhận biết và việc thay đổi kiểu có thể gây nhầm lẫn. Để biết thêm về sự nhấn mạnh, xem

Các từ viết tắt

Một phần tử cho phép viết tắt, từ viết tắt hoặc khởi tạo được liên kết với phần mở rộng của nó

<p>
  Web content is marked up using Hypertext Markup Language, or
  <abbr>HTMLabbr>.
p>

Một lần nữa, bạn có thể muốn tạo kiểu cho nó theo một số cách đơn giản

abbr {
  color: #a60000;
}

Quy ước về kiểu dáng được công nhận cho các từ viết tắt là gạch chân có dấu chấm và thật không khôn ngoan nếu đi chệch khỏi quy ước này một cách đáng kể. Để biết thêm về chữ viết tắt, xem

liên kết

Siêu liên kết — cách bạn đến những địa điểm mới trên web

<p>Visit the <a href="https://www.mozilla.org">Mozilla homepagea>.p>

Một số kiểu liên kết rất đơn giản được hiển thị bên dưới

a {
  color: #ff0000;
}

a:hover,
a:visited,
a:focus {
  color: #a60000;
  text-decoration: none;
}

a:active {
  color: #000000;
  background-color: #a60000;
}

Các quy ước liên kết tiêu chuẩn được gạch chân và có màu khác (mặc định. lam) ở trạng thái tiêu chuẩn, một biến thể màu khác khi liên kết đã được truy cập trước đó (mặc định. tím) và một màu khác khi liên kết được kích hoạt (mặc định. màu đỏ). Ngoài ra, con trỏ chuột thay đổi thành biểu tượng con trỏ khi liên kết được di chuột qua và liên kết sẽ được tô sáng khi được đặt tiêu điểm (e. g. thông qua tab) hoặc kích hoạt. Hình ảnh sau đây hiển thị phần tô sáng trong cả Firefox (đường viền chấm) và Chrome (đường viền màu xanh lam)

Bạn có thể sáng tạo với các kiểu liên kết, miễn là bạn tiếp tục cung cấp phản hồi cho người dùng khi họ tương tác với các liên kết. Điều gì đó chắc chắn sẽ xảy ra khi trạng thái thay đổi và bạn không nên loại bỏ con trỏ hoặc đường viền — cả hai đều là những công cụ trợ năng rất quan trọng đối với những người sử dụng điều khiển bàn phím

yếu tố hình thức

Các yếu tố cho phép người dùng nhập dữ liệu vào trang web

________số 8_______

Bạn có thể xem một số CSS ví dụ hay trong form-css của chúng tôi. ví dụ html (cũng xem trực tiếp)

Hầu hết CSS bạn sẽ viết cho các biểu mẫu sẽ dùng để định cỡ các phần tử, sắp xếp các nhãn và đầu vào, đồng thời làm cho chúng trông gọn gàng và ngăn nắp

Tuy nhiên, bạn không nên đi chệch quá nhiều so với các phần tử biểu mẫu phản hồi trực quan dự kiến ​​sẽ nhận được khi chúng được tập trung, về cơ bản giống như các liên kết (xem bên trên). Bạn có thể tạo kiểu cho các trạng thái tiêu điểm/di chuột của biểu mẫu để làm cho hành vi này nhất quán hơn trên các trình duyệt hoặc phù hợp hơn với thiết kế trang của bạn, nhưng đừng loại bỏ nó hoàn toàn — một lần nữa, mọi người dựa vào những manh mối này để giúp họ biết chuyện gì đang xảy ra

Những cái bàn

Bảng trình bày dữ liệu dạng bảng

Bạn có thể xem một ví dụ hay, đơn giản về HTML và CSS của bảng trong table-css của chúng tôi. ví dụ html (cũng xem trực tiếp)

Bảng CSS thường phục vụ để làm cho bảng phù hợp hơn với thiết kế của bạn và trông bớt xấu xí hơn. Bạn nên đảm bảo tiêu đề bảng nổi bật (thường sử dụng chữ in đậm) và sử dụng sọc vằn để làm cho các hàng khác nhau dễ phân tích cú pháp hơn

Khi chọn bảng màu cho trang web của bạn, hãy đảm bảo rằng màu văn bản (nền trước) tương phản tốt với màu nền. Thiết kế của bạn có thể trông bắt mắt, nhưng sẽ không tốt nếu những người khiếm thị như mù màu không thể đọc được nội dung của bạn

Có một cách dễ dàng để kiểm tra xem độ tương phản của bạn có đủ lớn để không gây ra sự cố hay không. Có một số công cụ kiểm tra độ tương phản trực tuyến mà bạn có thể nhập màu nền trước và màu nền của mình vào để kiểm tra chúng. Ví dụ: Trình kiểm tra độ tương phản màu của WebAIM rất dễ sử dụng và cung cấp giải thích về những gì bạn cần để tuân thủ tiêu chí WCAG về độ tương phản màu

Ghi chú. Tỷ lệ tương phản cao cũng sẽ cho phép bất kỳ ai sử dụng điện thoại thông minh hoặc máy tính bảng có màn hình bóng đọc các trang tốt hơn khi ở trong môi trường sáng, chẳng hạn như ánh sáng mặt trời

Một mẹo khác là không chỉ dựa vào màu sắc cho các biển chỉ dẫn/thông tin, vì điều này sẽ không tốt cho những người không thể nhìn thấy màu sắc. Ví dụ: thay vì đánh dấu các trường biểu mẫu bắt buộc bằng màu đỏ, hãy đánh dấu chúng bằng dấu hoa thị và màu đỏ

Có nhiều trường hợp thiết kế trực quan sẽ yêu cầu không phải tất cả nội dung được hiển thị cùng một lúc. Ví dụ: trong ví dụ về hộp thông tin theo tab của chúng tôi (xem mã nguồn), chúng tôi có ba bảng thông tin, nhưng chúng tôi đang đặt chúng chồng lên nhau và cung cấp các tab có thể được nhấp để hiển thị từng bảng (nó cũng có thể truy cập được bằng bàn phím — bạn

Người dùng trình đọc màn hình không quan tâm đến bất kỳ vấn đề nào trong số này — họ hài lòng với nội dung miễn là thứ tự nguồn hợp lý và họ có thể hiểu được tất cả. Định vị tuyệt đối (như được sử dụng trong ví dụ này) thường được coi là một trong những cơ chế ẩn nội dung tốt nhất để tạo hiệu ứng hình ảnh vì nó không ngăn trình đọc màn hình tiếp cận vị trí đó

Mặt khác, bạn không nên sử dụng

h1 {
  font-size: 5rem;
}

p,
li {
  line-height: 1.5;
  font-size: 1.6rem;
}

h1 {
  font-size: 5rem;
}

p,
li {
  line-height: 1.5;
  font-size: 1.6rem;
}

h1 {
  font-size: 5rem;
}

p,
li {
  line-height: 1.5;
  font-size: 1.6rem;
}

Ghi chú. Nội dung ẩn Chỉ dành cho Người dùng Trình đọc màn hình có nhiều chi tiết hữu ích hơn xung quanh chủ đề này

Chẳng hạn, người dùng có thể ghi đè kiểu của bạn bằng kiểu tùy chỉnh của riêng họ

• Xem Cách sử dụng biểu định kiểu tùy chỉnh (CSS) với Firefox của Sarah Maddox để biết hướng dẫn hữu ích về cách thực hiện việc này theo cách thủ công trong Firefox và Cách sử dụng biểu định kiểu tùy chỉnh (CSS) với Internet Explorer của Adrian Gordon để biết hướng dẫn IE tương đương
• Có lẽ dễ dàng hơn để làm điều đó bằng cách sử dụng tiện ích mở rộng. Ví dụ: tiện ích mở rộng Stylus có sẵn cho Firefox, với Style tương đương với Chrome

Người dùng có thể làm điều này vì nhiều lý do. Người dùng khiếm thị có thể muốn làm cho văn bản lớn hơn trên tất cả các trang web họ truy cập hoặc người dùng bị thiếu màu nghiêm trọng có thể muốn đặt tất cả các trang web bằng màu tương phản cao để họ dễ nhìn thấy. Bất kể nhu cầu là gì, bạn nên cảm thấy thoải mái với điều này và làm cho thiết kế của bạn đủ linh hoạt để những thay đổi đó sẽ hoạt động trong thiết kế của bạn. Ví dụ: bạn có thể muốn đảm bảo khu vực nội dung chính của mình có thể xử lý văn bản lớn hơn (có thể nó sẽ bắt đầu cuộn để cho phép nhìn thấy tất cả) và sẽ không chỉ ẩn nó hoặc ngắt hoàn toàn

JavaScript cũng có thể phá vỡ khả năng truy cập, tùy thuộc vào cách nó được sử dụng

JavaScript hiện đại là một ngôn ngữ mạnh mẽ và ngày nay chúng ta có thể làm được rất nhiều điều với nó, từ cập nhật giao diện người dùng và nội dung đơn giản cho đến các trò chơi 2D và 3D chính thức. Không có quy tắc nào nói rằng tất cả mọi người phải truy cập được 100% vào tất cả nội dung — bạn chỉ cần làm những gì có thể và làm cho ứng dụng của bạn dễ truy cập nhất có thể

Nội dung và chức năng đơn giản được cho là dễ truy cập — ví dụ: văn bản, hình ảnh, bảng biểu, biểu mẫu và nút ấn kích hoạt các chức năng. Như chúng ta đã xem trong HTML của mình. Một cơ sở tốt cho bài viết về khả năng tiếp cận, các cân nhắc chính là

• ngữ nghĩa tốt. Sử dụng đúng yếu tố cho đúng công việc. Ví dụ: đảm bảo bạn sử dụng tiêu đề và đoạn văn cũng như các yếu tố

  h1 {
    font-size: 5rem;
  }
  
  p,
  li {
    line-height: 1.5;
    font-size: 1.6rem;
  }
  

  8 và

  h1 {
    font-size: 5rem;
  }
  
  p,
  li {
    line-height: 1.5;
    font-size: 1.6rem;
  }
  

  9
• Đảm bảo nội dung có sẵn dưới dạng văn bản, trực tiếp dưới dạng nội dung văn bản, nhãn văn bản phù hợp cho các thành phần biểu mẫu hoặc , e. g. văn bản thay thế cho hình ảnh

Chúng tôi cũng đã xem xét một ví dụ về cách sử dụng JavaScript để xây dựng chức năng khi nó bị thiếu — xem. Điều này không lý tưởng — thực sự bạn chỉ nên sử dụng đúng yếu tố cho đúng công việc — nhưng nó cho thấy rằng có thể xảy ra trong các tình huống vì lý do nào đó bạn không thể kiểm soát đánh dấu được sử dụng. Một cách khác để cải thiện khả năng truy cập cho các tiện ích hỗ trợ JavaScript phi ngữ nghĩa là sử dụng WAI-ARIA để cung cấp thêm ngữ nghĩa cho người dùng trình đọc màn hình. Bài viết tiếp theo cũng sẽ đề cập chi tiết đến vấn đề này

Chức năng phức tạp như trò chơi 3D không dễ truy cập — trò chơi 3D phức tạp được tạo bằng WebGL sẽ được hiển thị trên phần tử

<p>The water is <em>very hotem>.p>

<p>
  Water droplets collecting on surfaces is called <strong>condensationstrong>.
p>

Vấn đề thường xảy ra khi mọi người dựa vào JavaScript quá nhiều. Đôi khi, bạn sẽ thấy một trang web có mọi thứ được thực hiện bằng JavaScript — HTML được tạo bởi JavaScript, CSS được tạo bởi JavaScript, v.v. Điều này có tất cả các loại khả năng truy cập và các vấn đề khác liên quan đến nó, vì vậy không nên

Cùng với việc sử dụng đúng yếu tố cho đúng công việc, bạn cũng nên đảm bảo rằng bạn đang sử dụng đúng công nghệ cho đúng công việc. Hãy suy nghĩ cẩn thận về việc liệu bạn có cần hộp thông tin 3D bóng bẩy được hỗ trợ bởi JavaScript đó hay liệu văn bản cũ đơn thuần sẽ làm được điều đó. Hãy suy nghĩ cẩn thận về việc liệu bạn có cần một tiện ích biểu mẫu phi tiêu chuẩn phức tạp hay liệu một kiểu nhập văn bản có phù hợp hay không. Và không tạo tất cả nội dung HTML của bạn bằng JavaScript nếu có thể

Bạn nên ghi nhớ JavaScript không phô trương khi tạo nội dung của mình. Ý tưởng về JavaScript không phô trương là nó nên được sử dụng bất cứ khi nào có thể để nâng cao chức năng, chứ không phải xây dựng nó hoàn toàn — các chức năng cơ bản lý tưởng nhất sẽ hoạt động mà không cần JavaScript, mặc dù đây không phải lúc nào cũng là một tùy chọn được đánh giá cao. Nhưng một lần nữa, một phần lớn của nó đang sử dụng chức năng trình duyệt tích hợp nếu có thể

Ví dụ điển hình về việc sử dụng JavaScript không phô trương bao gồm

• Cung cấp xác thực biểu mẫu phía máy khách, cảnh báo nhanh chóng cho người dùng về các vấn đề với mục nhập biểu mẫu của họ mà không cần phải đợi máy chủ kiểm tra dữ liệu. Nếu không có, biểu mẫu sẽ vẫn hoạt động nhưng quá trình xác thực có thể chậm hơn
• Cung cấp các điều khiển tùy chỉnh cho các

  <p>The water is <em>very hotem>.p>
  
  <p>
    Water droplets collecting on surfaces is called <strong>condensationstrong>.
  p>
  

  1 HTML mà người dùng chỉ dùng bàn phím có thể truy cập được, cùng với liên kết trực tiếp tới video có thể được sử dụng để truy cập video đó nếu không có JavaScript (các điều khiển trình duyệt

  <p>The water is <em>very hotem>.p>
  
  <p>
    Water droplets collecting on surfaces is called <strong>condensationstrong>.
  p>
  

  1 mặc định không thể truy cập được bằng bàn phím trong hầu hết các trình duyệt)

Ví dụ: chúng tôi đã viết một ví dụ xác thực biểu mẫu phía máy khách nhanh và bẩn — xem xác thực biểu mẫu. html (cũng xem bản demo trực tiếp). Ở đây bạn sẽ thấy một biểu mẫu đơn giản;

Loại xác thực biểu mẫu này không phô trương — bạn vẫn có thể sử dụng biểu mẫu hoàn toàn bình thường mà không cần có JavaScript và bất kỳ triển khai biểu mẫu hợp lý nào cũng sẽ có xác thực phía máy chủ hoạt động, vì quá dễ dàng để người dùng độc hại bỏ qua phía máy khách . Xác thực phía máy khách vẫn thực sự hữu ích để báo cáo lỗi — người dùng có thể biết về các lỗi mà họ mắc phải ngay lập tức, thay vì phải đợi một lượt đến máy chủ và tải lại trang. Đây là một lợi thế khả năng sử dụng nhất định

Ghi chú. Xác thực phía máy chủ chưa được triển khai trong bản trình diễn đơn giản này

Chúng tôi cũng đã làm cho việc xác thực biểu mẫu này trở nên khá dễ tiếp cận. Chúng tôi đã sử dụng các phần tử

<p>The water is <em>very hotem>.p>

<p>
  Water droplets collecting on surfaces is called <strong>condensationstrong>.
p>

<label for="name">Enter your name:label>
<input type="text" name="name" id="name" />

Chúng tôi chỉ thực hiện xác thực khi biểu mẫu được gửi — điều này là để chúng tôi không cập nhật giao diện người dùng quá thường xuyên và có khả năng gây nhầm lẫn cho người dùng trình đọc màn hình (và có thể là những người khác)

h1 {
  font-size: 5rem;
}

p,
li {
  line-height: 1.5;
  font-size: 1.6rem;
}

Ghi chú. Trong ví dụ này, chúng tôi đang ẩn và hiển thị hộp thông báo lỗi bằng cách sử dụng định vị tuyệt đối thay vì một phương pháp khác như khả năng hiển thị hoặc hiển thị, bởi vì nó không cản trở trình đọc màn hình có thể đọc nội dung từ hộp đó

Việc xác thực dạng thực sẽ phức tạp hơn nhiều so với điều này — bạn muốn kiểm tra xem tên đã nhập có thực sự giống tên không, tuổi đã nhập thực sự là một số và có thực không (e. g. không âm và ít hơn 4 chữ số). Ở đây chúng ta vừa thực hiện một kiểm tra đơn giản để đảm bảo rằng một giá trị đã được điền vào từng trường đầu vào (

<p>The water is <em>very hotem>.p>

<p>
  Water droplets collecting on surfaces is called <strong>condensationstrong>.
p>

Khi xác thực đã được thực hiện, nếu các bài kiểm tra vượt qua thì biểu mẫu sẽ được gửi. Nếu có lỗi (

<p>The water is <em>very hotem>.p>

<p>
  Water droplets collecting on surfaces is called <strong>condensationstrong>.
p>

<p>The water is <em>very hotem>.p>

<p>
  Water droplets collecting on surfaces is called <strong>condensationstrong>.
p>

Đối với mỗi đầu vào không có giá trị được điền khi biểu mẫu được gửi, chúng tôi tạo một mục danh sách có liên kết và chèn nó vào

<p>The water is <em>very hotem>.p>

<p>
  Water droplets collecting on surfaces is called <strong>condensationstrong>.
p>

h1 {
  font-size: 5rem;
}

p,
li {
  line-height: 1.5;
  font-size: 1.6rem;
}

Mỗi liên kết phục vụ một mục đích kép — nó cho bạn biết lỗi là gì, ngoài ra bạn có thể nhấp vào/kích hoạt liên kết đó để chuyển thẳng đến phần tử đầu vào được đề cập và sửa mục nhập của bạn

Ghi chú. Phần

<p>The water is <em>very hotem>.p>

<p>
  Water droplets collecting on surfaces is called <strong>condensationstrong>.
p>

<p>The water is <em>very hotem>.p>

<p>
  Water droplets collecting on surfaces is called <strong>condensationstrong>.
p>

<p>The water is <em>very hotem>.p>

<p>
  Water droplets collecting on surfaces is called <strong>condensationstrong>.
p>

<p>The water is <em>very hotem>.p>

<p>
  Water droplets collecting on surfaces is called <strong>condensationstrong>.
p>

Ngoài ra,

strong,
em {
  color: #a60000;
}

Lưu ý cuối cùng, chúng tôi đã sử dụng một số thuộc tính WAI-ARIA trong bản trình diễn của mình để giúp giải quyết các vấn đề về khả năng truy cập do các khu vực nội dung liên tục cập nhật mà không cần tải lại trang (trình đọc màn hình sẽ không nhận hoặc cảnh báo người dùng về điều này theo mặc định)

h1 {
  font-size: 5rem;
}

p,
li {
  line-height: 1.5;
  font-size: 1.6rem;
}

Chúng tôi sẽ giải thích các thuộc tính này trong bài viết tiếp theo, bao gồm WAI-ARIA chi tiết hơn

Ghi chú. Một số bạn có thể sẽ nghĩ về thực tế là các biểu mẫu HTML có các cơ chế xác thực tích hợp sẵn như các thuộc tính

strong,
em {
  color: #a60000;
}

strong,
em {
  color: #a60000;
}

strong,
em {
  color: #a60000;
}

strong,
em {
  color: #a60000;
}

strong,
em {
  color: #a60000;
}

strong,
em {
  color: #a60000;
}

Ghi chú. Phục hồi lỗi và xác thực biểu mẫu có thể sử dụng và có thể truy cập của WebAIM cung cấp thêm một số thông tin hữu ích về xác thực biểu mẫu có thể truy cập

Có những điều khác cần lưu ý khi triển khai JavaScript và suy nghĩ về khả năng truy cập. Chúng tôi sẽ thêm nhiều hơn khi chúng tôi tìm thấy chúng

sự kiện dành riêng cho chuột

Như bạn đã biết, hầu hết các tương tác của người dùng được triển khai trong JavaScript phía máy khách bằng cách sử dụng trình xử lý sự kiện, cho phép chúng tôi chạy các chức năng để phản hồi lại các sự kiện nhất định xảy ra. Một số sự kiện có thể có vấn đề về khả năng tiếp cận. Ví dụ chính mà bạn sẽ bắt gặp là các sự kiện dành riêng cho chuột như mouseover, mouseout, dblclick, v.v. Chức năng chạy theo các sự kiện này sẽ không thể truy cập được bằng các cơ chế khác, chẳng hạn như điều khiển bàn phím

Để giảm thiểu những sự cố như vậy, bạn nên nhân đôi các sự kiện này với các sự kiện tương tự có thể được kích hoạt bằng các phương tiện khác (cái gọi là trình xử lý sự kiện độc lập với thiết bị) — tiêu điểm và làm mờ sẽ cung cấp khả năng truy cập cho người dùng bàn phím

Hãy xem một ví dụ nổi bật khi điều này có thể hữu ích. Có thể chúng tôi muốn cung cấp hình ảnh thu nhỏ hiển thị phiên bản lớn hơn của hình ảnh khi được di chuột qua hoặc tập trung vào (giống như bạn thấy trên danh mục sản phẩm thương mại điện tử. )

Chúng tôi đã tạo một ví dụ rất đơn giản mà bạn có thể tìm thấy tại sự kiện chuột và bàn phím. html (xem thêm mã nguồn). Mã có hai chức năng hiển thị và ẩn hình ảnh được phóng to;

h1 {
  font-size: 5rem;
}

p,
li {
  line-height: 1.5;
  font-size: 1.6rem;
}

Hai dòng đầu tiên chạy các chức năng khi con trỏ chuột di chuyển qua và dừng di chuột qua hình thu nhỏ, tương ứng. Tuy nhiên, điều này sẽ không cho phép chúng tôi truy cập chế độ xem được phóng to bằng bàn phím — để cho phép điều đó, chúng tôi đã bao gồm hai dòng cuối cùng, chạy các chức năng khi hình ảnh được lấy nét và làm mờ (khi tiêu điểm dừng lại). Điều này có thể được thực hiện bằng cách tab trên hình ảnh, bởi vì chúng tôi đã bao gồm

<p>
  Web content is marked up using Hypertext Markup Language, or
  <abbr>HTMLabbr>.
p>

Sự kiện nhấp chuột rất thú vị — nghe có vẻ phụ thuộc vào chuột, nhưng hầu hết các trình duyệt sẽ kích hoạt trình xử lý sự kiện onclick sau khi nhấn Enter/Return trên một liên kết hoặc thành phần biểu mẫu có tiêu điểm hoặc khi một thành phần như vậy được gõ trên thiết bị màn hình cảm ứng. Tuy nhiên, tính năng này không hoạt động theo mặc định khi bạn cho phép một sự kiện không có tiêu điểm mặc định lấy tiêu điểm bằng cách sử dụng tabindex — trong những trường hợp như vậy, bạn cần phát hiện cụ thể thời điểm chính xác phím đó được nhấn (xem )

Bạn đã đọc đến cuối bài viết này, nhưng liệu bạn có nhớ được thông tin quan trọng nhất không? . Khả năng truy cập CSS và JavaScript

Chúng tôi hy vọng bài viết này đã cung cấp cho bạn nhiều chi tiết và hiểu biết về các vấn đề về khả năng truy cập xung quanh việc sử dụng CSS và JavaScript trên các trang web