Bài 10: HTML và CSS từ Zero đến Hero

  

1:   Cải thiện khả năng tiếp cận với ARIA

Người sử dụng web rất đa dạng, thông thường họ hay sử dụng mắt để đọc/xem nội dung, dùng chuột để tương tác với giao diện, chuyển mục, chuyển trang. Tuy nhiên, họ cũng có thể đang sử dụng phần mềm đọc web (screen reader), sử dụng bàn phím, ra lệnh bằng giọng nói thay vì dùng chuột.

Với một tài liệu HTML, con người có thể đọc mã là hiểu được ý nghĩa của chúng như là tiêu đề (title), đề mục (heading), danh sách, hình ảnh, tuy nhiên với các thiết bị hỗ trợ (assistive divice) thì không dễ, đặc biệt với các phần tử trung tính như div và span. Ngoài ra, với việc phát triển ứng dụng web dùng nhiều JavaScript và AJAX thì việc nhận biết ý nghĩa, trạng thái của các phần tử càng khó khăn hơn.

ARIA (Accessible Rich Internet Applications) là một bộ các thuộc tính, được sử dụng để hỗ trợ quá trình điều hướng, tương tác với trang web.

ARIA định nghĩa các chức năng (role), trạng thái (state) và thuộc tính (property) để lập trình viên có thể thêm vào các phần tử hoặc đoạn mã lập trình giúp mã nguồn giàu thông tin hơn.

Role

Thuộc tính role cho biết chức năng và mục đích của một phần tử, ví dụ: alert, button, dialog, slider và menubar.

Ví dụ, giả sử bạn dùng ul, li kết hợp với CSS để làm menu. Tuy nhiên, nếu chỉ nhìn vào mã nguồn thì rất khó nhận biết đó là menu. Để dễ dàng nhận ra đó là menu, bạn chỉ việc theeo thuộc tính role=”toolbar” vào mã nguồn như sau:

<ul id="tabs" role="toolbar">

          <li>A-G</li>

          <li>H-O</li>

          <li>P-T</li>

          <li>U-Z</li>

     </ul>

Ví dụ, cho biết div chứa một thông báo,

<div id="status" role="alert">You are no longer connected to the

          server.</div>

States và properties

ARIA cũng định nghĩa các states và properties để sử dụng trong các phần tử tương tác như các thành phần của form, các nội dung động. States và properties được nhận biết bằng thuộc tính với tiền tố là aria-, ví dụ: aria-disabled, aria-describedby.

2:    Các kí tự đặc biệt

Ở đây, kí tự đặc biệt được hiểu là những kí tự thuộc một trong hai loại sau:

- Một là những kí tự không có sẵn trong bảng mã ASCII, hiểu nôm na là không có sẵn trên bàn phím máy tính, muốn có nó thì phải dùng tổ hợp phím, hoặc như trong Microsoft Word thì dùng chức năng chèn kí tự đặc biệt (symbol). Do không nhập được vào mã nguồn, nên trình duyệt sẽ không thể xuất ra màn hình được. Ví dụ, kí hiệu bản quyền (copyright sign): ©.

- Hai là các kí tự trùng với từ khóa (keyword) của HTML, hiểu nôm na là trong khi người lập trình muốn xuất kí tự đó ra màn hình, nhưng trình duyệt lại hiểu là từ khóa nên nó sẽ biên dịch và thực thi từ khóa. Ví dụ, dấu bé: <.

Như vậy phải có cách nào đó để ghi được các kí tự này vào mã nguồn (tài liệu HTML), để sau đó trình duyệt sẽ hiển thị ra màn hình. Giải pháp HTML đưa ra là xem các kí tự đặc biệt đó là “thực thể” (entity) chứ không phải kí tự. Vì là thực thể nên phải có dấu hiệu nhận diện, để phân biệt với kí tự thông thường, dấu hiệu là bất kì thứ gì nằm giữa dấu “&” và dấu “;” thì được coi là thực thể.

Nghĩa là, các kí tự đặc biệt sẽ được viết dưới dạng các thực thể, mỗi kí tự đặc biệt luôn có hai cách viết, viết bằng số gọi là thực thể số (numeric entity); và viết bằng chữ gọi là thực thể chữ (named entity).

Bảng sau là cách viết một số kí tự đặc biệt bằng thực thể,

Kí tự	Mô tả	Thực thể chữ	Thực thể số
	Kí tự trắng đặc biệt, không bị ngắt (nbsp -nonbreaking space). Ví dụ, để luôn xuất chuỗi “không thể tách rời” thành một khối, nghĩa là cả chuỗi luôn nằm trên cùng một hàng, thì viết như sau: “không thể tách rời”	 	 
&	Dấu và (ampersand)	&	&
`	Dấu lược (apostrophe)	'	'
<	Dấu bé (less-than symbol)	&lt;	&#060;
>	Dấu lớn (greater-than symbol)	&gt;	&#062;
©	Kí hiệu bản quyền (copyright sign)	&copy;	&#169;
®	Nhãn hiệu đã đăng kí (registered trademark)	&reg;	&#174;
™	Nhãn hiệu	&trade;	&#8082;
£	Kí hiệu đồng Bảng Anh	&pound;	&#163;
¥	Kí hiệu đồng Yên Nhật	&yen;	&#165;
€	Kí hiệu đồng Euro	&euro;	&#8364;
– ­­	Dấu gạch ngang (en-dash): dấu gạch ngang có chiều dài bằng chữ “n”. Ví dụ, dùng để gạch đầu hàng, dấu trừ. Đừng nhầm với dấu gạch nối (hyphen) (-)	&ndash;	&#8211;
—	Dấu gạch đúp (em-dash): dấu gạch đúp có chiều dài bằng chữ “m”. Ví dụ, dùng để chú thích trong một câu.	&mdash;	&#8212;
‘	Dấu mở nháy đơn (left curly single quote)	&lsquo;	&#8216;
’	Dấu đóng nháy đơn (right curly single quote)	&rsquo;	&#8217;
“	Dấu mở nháy kép (left curly double quote)	&ldquo;	&#8220;
”	Dấu đóng nháy kép (right curly double quote)	&rdquo;	&#8221;
·	Dấu đầu dòng (bullet)	&bull;	&#8226;
…	Dấu chấm lửng (ngang), hay dấu ba chấm (horizontal ellipsis)	&hellip;	&#8230;

Exercise 5-3. The Black Goose News page (p109)

Phân biệt gạch nối (hyphen[1]), gạch ngang (ndash) và gạch đúp (mdash)[2]

Dấu gạch nối – Dấu gạch nối (hyphen) (-) là dấu ngắn nhất (so với dấu gạch ngang và gạch đúp), là một dấu trong từ – Được sử dụng để nối các từ, ví dụ: ki-lô-gam, mother-in-law, ex-friend – Dùng để viết ngày tháng năm, ví dụ: 11-4-2018 – Trên bàn phím, phím này nằm cạnh phím số 9 Dấu gạch ngang – Dấu gạch ngang (ndash) (–) là dấu dài hơn dấu gạch nối, là một dấu trong câu. Có chiều dài bằng chữ “n” – Làm dấu gạch đầu dòng khi liệt kê các mục – Viết dấu trừ trong toán học, ví dụ, 1 – 1 = 0 – Thể hiện sự liên kết, ví dụ: chuyến bay Đà Lạt – Sài gòn – Trong Microsoft Word, để chèn dấu này, vào Insert\Symbol\Special Characters\En Dash, hoặc bấm tổ hợp phím: Ctrl + dấu “-”(tại khu các phím số). Dấu gạch đúp – Dấu gạch đúp (mdash) (—) là dấu dài nhất (so với dấu gạch nối và dấu gạch ngang), có chiều dài bằng chữ “m”, trong một số trường hợp được dùng để thay thế vai trò của dấu phẩy (,), dấu ngoặc đơn (), dấu hai chấm (:) – Dùng để bổ sung thông tin cho ý đang trình bày, ví dụ: Bạn sẽ gặp tôi tại Hà nội—thủ đô của Việt Nam—vào ngày Thứ Hai được không? Để bàn tiếp về dự án—như tôi đã trình bày trong email.  – Trong Microsoft Word, để chèn dấu này, vào Insert\Symbol\Special Characters\Em Dash, hoặc bấm tổ hợp phím: Ctrl + Alt + dấu “-”(tại khu các phím số).