- Thẻ DOCTYPE là gì? Tại sao cần khai báo DOCTYPE?
DOCTYPE (Document Type Declaration) khai báo phiên bản HTML đang dùng và phải nằm ở dòng đầu tiên. HTML5 chỉ cần một dòng: Nó quyết định browser render ở standards mode hay quirks mode. Thiếu DOCTYPE → quirks mode, và khác biệt lớn nhất là…
- Cấu trúc cơ bản của một tài liệu HTML bao gồm những gì?
Một tài liệu HTML tối thiểu gồm bốn phần: - <!DOCTYPE html — bật standards mode. - <html — phần tử gốc; lang ảnh hưởng trực tiếp tới screen reader và Google Translate. - <head — metadata, không hiển thị: <title, <meta, <link, <script. -…
- Block-level element và Inline element khác nhau như thế nào trong HTML?
Khác nhau ở cách element tham gia vào dòng: block chiếm một dòng riêng, inline nằm cùng dòng với văn bản xung quanh. - Block (<div, <p, <h1): chiếm hết chiều rộng còn trống, luôn bắt đầu dòng mới, đặt được width/height. - Inline (<span,…
- HTML Attribute (thuộc tính) là gì? Cho ví dụ?
Attribute cung cấp thông tin bổ sung cho element, viết trong thẻ mở theo cú pháp name="value": Ba nhóm hay gặp: - Global — dùng được trên mọi thẻ: id, class, style, title, hidden, data-. - Riêng từng thẻ: href (a), src/alt (img), type/name (input).…
- Boolean attribute trong HTML là gì? Cho ví dụ?
Boolean attribute chỉ có hai trạng thái: có mặt = true, vắng mặt = false. Giá trị gán cho nó không được xét đến. Nhóm hay gặp: disabled, checked, selected, required, readonly, autofocus, hidden, multiple, defer, async. Muốn tắt thì phải gỡ hẳn attribute, không…
- Custom data attribute (data-*) trong HTML là gì?
data- cho phép gắn dữ liệu tuỳ ý lên element mà vẫn hợp lệ theo HTML spec (dùng attribute tự chế như userid="123" thì không). Dùng được cả trong CSS: Ứng dụng thực tế: gắn hook cho test (data-testid), truyền id xuống event delegation, đánh…
- Thuộc tính `id` và `class` khác nhau như thế nào?
id duy nhất trên toàn trang, class dùng lại thoải mái. id class --------- Số lần xuất hiện 1 nhiều Specificity (1,0,0) (0,1,0) Dùng cho anchor pricing, label[for], aria-labelledby style, nhóm element Vì specificity của id cao hơn class 10 lần bậc, style gắn vào…
- Semantic HTML là gì? Tại sao quan trọng?
Semantic HTML là dùng thẻ mô tả đúng vai trò nội dung thay vì <div/<span trung tính. Bốn lý do nó đáng giá: 1. Accessibility — screen reader nhảy thẳng tới landmark (main, nav, header); với <div thì không có gì để nhảy tới. 2.…
- Sự khác biệt giữa `<div>` và `<section>` là gì?
<div là container không mang nghĩa; <section là một khối nội dung có chủ đề riêng. Quy tắc quyết định: - Chỉ cần chỗ để gắn display:flex, padding, background → <div. - Khối này có tiêu đề riêng và có thể xuất hiện trong mục…
- `<article>` và `<section>` khác nhau thế nào?
<article là nội dung đứng riêng vẫn có nghĩa; <section là một phần trong mạch nội dung của trang. Phép thử: đem khối đó sang RSS feed hoặc site khác mà vẫn hiểu → <article. Cần trang gốc mới hiểu → <section. Hai thẻ lồng…
- `<header>`, `<footer>`, `<nav>`, `<main>`, `<aside>` dùng khi nào?
Năm thẻ landmark, mỗi thẻ trả lời một câu hỏi "khối này đóng vai gì trong trang": Thẻ Số lần / trang Screen reader --------- <main đúng 1 đích của "skip to content" <nav nhiều liệt kê trong danh sách landmark <header / <footer nhiều…
- `<figure>` và `<figcaption>` dùng để làm gì?
<figure gói nội dung minh hoạ tách được khỏi mạch văn (ảnh, biểu đồ, đoạn code, video); <figcaption là chú thích của nó, đặt ở đầu hoặc cuối. Điểm hay bị nhầm: figcaption không thay được alt. Ai đọc được Nói cái gì --------- alt…
- `<mark>`, `<strong>`, `<em>` khác nhau thế nào?
Cả ba đều mang ngữ nghĩa, khác nhau ở loại nhấn: Thẻ Nghĩa Mặc định --------- <strong mức độ quan trọng cao đậm <em nhấn trọng âm, đổi sắc thái câu nghiêng <mark liên quan tới ngữ cảnh hiện tại (từ khoá tìm kiếm) nền…
- Thẻ `<time>` được sử dụng để làm gì?
<time gắn một mốc thời gian máy đọc được vào phần chữ mà người đọc thấy. datetime phải theo ISO 8601. Nếu bỏ datetime thì phần text bên trong bắt buộc tự nó là chuỗi ngày hợp lệ. Dùng ở đâu: ngày đăng bài (Google…
- Semantic HTML ảnh hưởng SEO như thế nào?
Semantic HTML không phải yếu tố xếp hạng trực tiếp, nhưng ảnh hưởng gián tiếp qua ba đường: 1. Crawler hiểu đúng đâu là nội dung chính. <main/<article tách nội dung khỏi menu và sidebar, nên đoạn trích trong kết quả tìm kiếm lấy đúng…
- Khi nào dùng `<dl>`, `<dt>`, `<dd>`?
<dl là danh sách cặp khoá – giá trị hoặc thuật ngữ – định nghĩa. Phù hợp nhất cho: metadata bài viết, glossary, bảng thông số sản phẩm, FAQ (<dt là câu hỏi, <dd là câu trả lời). Khi cần một lớp bọc để style,…
- Thẻ `<details>` và `<summary>` hoạt động thế nào?
<details là accordion có sẵn trong browser, không cần JS. Lợi thế so với accordion tự viết: có sẵn bàn phím (Enter/Space), đúng vai trò cho screen reader, và nội dung bên trong vẫn được Ctrl+F tìm thấy — browser tự bung ra. Lưu ý:…
- HTML5 có những tính năng mới nào so với HTML4?
HTML5 (2014) thay đổi ba mảng lớn so với HTML4: 1. Ngữ nghĩa & media — thẻ landmark <header, <nav, <article, <section, <figure; <audio/<video chạy thẳng không cần Flash; <canvas và SVG inline. 2. API trình duyệt — localStorage/sessionStorage, IndexedDB, Geolocation, Web Worker, WebSocket, History…
- Canvas và SVG khác nhau thế nào?
Khác nhau ở cái browser giữ lại sau khi vẽ. - Canvas — bitmap. Bạn vẽ pixel bằng JS, vẽ xong browser không nhớ hình gì đã vẽ. - SVG — mỗi hình là một DOM node, có thể style bằng CSS, gắn event listener,…
- Progressive Web App (PWA) là gì?
PWA là web app dùng một nhóm API để đạt trải nghiệm gần app native: chạy offline, cài được lên màn hình chính, nhận push notification. Ba điều kiện bắt buộc: 1. HTTPS — Service Worker chỉ chạy trên secure context (localhost được miễn). 2.…
- History API dùng để làm gì?
- WebSocket khác HTTP thế nào?
- Intersection Observer API là gì?
- Web Components gồm những công nghệ nào?
- Method GET và POST khác nhau thế nào?
GET gắn dữ liệu vào URL, POST gửi trong body. GET POST --------- Vị trí dữ liệu query string request body Bookmark / share link được không Nằm trong lịch sử & log server có không Browser cache có không F5 sau khi gửi an…
- Các input types trong HTML5 có những gì?
Mỗi type đổi cả bàn phím trên mobile, UI của control và validation mặc định. Ba nhóm: - Chữ & số: text, password, email, number, tel, url, search. - Ngày giờ: date, time, datetime-local, month, week. - Tương tác & media: color, range, file, checkbox,…
- `<label>` element quan trọng thế nào?
<label nối phần chữ mô tả với control. Hai cách viết: Ba thứ có được ngay: 1. Click vào chữ = focus/tick input — vùng bấm rộng ra rất nhiều trên mobile, đặc biệt với checkbox nhỏ. 2. Screen reader đọc đúng tên field khi…
- `<select>` và `<datalist>` khác nhau thế nào?
<select giới hạn lựa chọn; <datalist chỉ gợi ý, người dùng vẫn gõ tự do. <select <datalist --------- Nhập giá trị ngoài danh sách không được Gõ để lọc không (chỉ nhảy theo chữ cái) có Giá trị gửi đi option.value đúng chuỗi đã gõ…
- `<fieldset>` và `<legend>` dùng để làm gì?
<fieldset nhóm các control liên quan, <legend là nhãn của cả nhóm. Hữu ích nhất là với nhóm radio/checkbox. Mỗi radio có label riêng ("Khi nhận hàng"), nhưng không có gì nói đang chọn cho câu hỏi nào. Screen reader đọc legend trước mỗi lựa…
- HTML5 form validation có những attribute nào?
Validation dựng sẵn chạy khi submit, không cần JS: Attribute Áp cho ------ required mọi control pattern text, tel, email, url, password, search min / max / step number, range, date/time minlength / maxlength các kiểu nhập chữ Style theo trạng thái bằng pseudo-class: Lưu…
- `readonly` và `disabled` khác nhau thế nào?
Khác biệt quyết định nằm ở giá trị có được gửi lên server hay không. readonly disabled --------- Sửa được không không Focus / tab tới được không Bôi đen, copy được không Gửi kèm form có không Giao diện mặc định như thường mờ…
- Enctype attribute có những giá trị nào?
enctype quyết định cách browser đóng gói dữ liệu form khi method="post". Giá trị Khi nào dùng Dạng body --------- application/x-www-form-urlencoded mặc định, dữ liệu chữ name=Dinh&age=30 multipart/form-data có file chia phần theo boundary text/plain debug thô, không encode Lưu ý: quên enctype="multipart/form-data" khi upload…
- Autocomplete attribute hoạt động thế nào?
autocomplete nói cho browser biết field này chứa loại dữ liệu gì, để gợi ý đúng thứ đã lưu. Đặt được ở cấp <form (áp cho cả form) hoặc từng input. autocomplete="off" chỉ nên dùng cho field thật sự dùng một lần. Lưu ý: đừng…
- Constraint Validation API là gì?
Constraint Validation API là mặt JavaScript của validation có sẵn — cho phép đọc trạng thái và đặt thông báo lỗi riêng. Các cờ trong validity: valueMissing, typeMismatch, patternMismatch, tooShort, tooLong, rangeUnderflow, rangeOverflow, stepMismatch, customError. Lưu ý: quên gọi setCustomValidity('') khi giá trị đã hợp…
- FormData API dùng để làm gì?
FormData thu thập dữ liệu form thành cặp khoá–giá trị, kể cả file, để gửi bằng JavaScript. Chuyển sang JSON khi API cần: Lưu ý 1: input không có name sẽ không xuất hiện trong FormData — kể cả khi có id và value. Lưu…
- `<input type='file'>` có những tính năng gì?
- Làm thế nào để tạo custom form validation?
- Làm sao tối ưu form cho mobile?
- Accessibility (a11y) là gì? Tại sao quan trọng?
Accessibility (a11y — 11 chữ cái giữa chữ a và y) là làm cho web dùng được với mọi người, gồm người khiếm thị, khiếm thính, hạn chế vận động và hạn chế nhận thức. Bốn lý do, xếp theo thứ tự interviewer muốn nghe:…
- ARIA là gì?
ARIA (Accessible Rich Internet Applications) là bộ attribute bổ sung ngữ nghĩa cho screen reader khi HTML gốc không diễn tả đủ. Ba nhóm: Quy tắc số 1 của ARIA: đừng dùng ARIA nếu HTML đã làm được. ARIA chỉ đổi cách screen reader mô…
- Alt text quan trọng thế nào?
alt mô tả ảnh cho screen reader, và hiện ra khi ảnh không tải được. Nội dung viết gì phụ thuộc vai trò của ảnh: Lỗi hay gặp, theo thứ tự phổ biến: - alt="IMG2043.jpg" — screen reader đọc nguyên tên file. - alt="hình ảnh…
- WCAG là gì? Có bao nhiêu cấp độ?
WCAG (Web Content Accessibility Guidelines) là bộ tiêu chí của W3C để đo mức độ truy cập được của nội dung web. Bốn nguyên tắc — POUR: Nghĩa Ví dụ tiêu chí --------- Perceivable nhận biết được alt cho ảnh, phụ đề video, tương phản…
- aria-label, aria-labelledby, aria-describedby khác nhau?
Cả ba đều cấp tên hoặc mô tả cho screen reader, khác nhau ở nguồn chữ và vai trò. Nguồn Vai trò Ưu tiên ------------ aria-labelledby id của element khác tên cao nhất aria-label chuỗi viết thẳng tên thua labelledby aria-describedby id của element khác…
- Keyboard navigation quan trọng thế nào?
Bàn phím là đường vào duy nhất với người hạn chế vận động, người dùng screen reader, và cả người dùng thành thạo muốn nhanh. Phím quy ước — làm sai là người dùng mắc kẹt: Phím Hành vi mong đợi ------ Tab / Shift+Tab…
- tabindex attribute hoạt động thế nào?
tabindex quyết định element có nằm trong thứ tự Tab hay không. Giá trị Vào tab order element.focus() --------- 0 có, theo thứ tự DOM được -1 không được 0 có, nhảy lên trước tất cả được Link, button, input, select, textarea đã focus được…
- Color contrast yêu cầu gì theo WCAG?
Tỉ lệ tương phản đo độ chênh sáng giữa màu chữ và màu nền, tính từ 1:1 (trùng nhau) tới 21:1 (đen trên trắng). Nội dung AA AAA --------- Chữ thường 4.5:1 7:1 Chữ lớn (≥18.66px, hoặc ≥14px in đậm) 3:1 4.5:1 Viền input, icon…
- aria-live dùng khi nào?
- Skip links là gì và tại sao cần?
- Focus management trong SPA quan trọng thế nào?
- Heading hierarchy (h1-h6) tại sao quan trọng?
- `defer` và `async` trên thẻ `<script>` khác nhau như thế nào?
Cả hai đều tải script song song với việc parse HTML nên không chặn render. Khác nhau ở thời điểm thực thi: - async: chạy ngay khi tải xong, có thể chen ngang lúc HTML còn đang parse. Thứ tự thực thi không đảm bảo…
- Web Storage API: `localStorage` và `sessionStorage` khác nhau ở đâu?
Cả hai là kho key-value cùng API (setItem, getItem, removeItem, clear), chỉ lưu chuỗi, dung lượng ~5–10MB, đồng bộ, gắn theo origin. Khác nhau ở vòng đời và phạm vi: - localStorage: tồn tại vô thời hạn đến khi xoá thủ công. Chia sẻ giữa…
- Phần tử `<dialog>`: `showModal()` khác `show()` / `close()` thế nào?
Phần tử <dialog mở được ở hai chế độ: - showModal() — mở dạng modal: đưa dialog lên top layer, có pseudo-element ::backdrop phủ nền, giữ focus trong dialog (focus trap), nhấn Esc để đóng, và phần nền trở nên inert (không tương tác được).…
- Vì sao mở link tab mới nên kèm `rel="noopener"` cùng `target="_blank"`?
Khi dùng target="blank", trang mới nhận được tham chiếu window.opener trỏ ngược về trang gốc. Trang đích (nhất là link ngoài không kiểm soát) có thể lợi dụng để window.opener.location = "trang-giả" — kỹ thuật reverse tabnabbing (đánh tráo tab cũ sang trang lừa đảo).…
- Vì sao một `div` gắn `onClick` không thay thế được `<button>`?
Vì onClick chỉ mang lại hành vi chuột. <button là phần tử tương tác dựng sẵn, kèm theo cả một tập hành vi mà div không có: - Focus được bằng bàn phím (nằm trong tab order tự nhiên). - Kích hoạt bằng Enter và…
- Có mấy cách liên kết `<label>` với input? Dùng `placeholder` thay label được không?
Hai cách liên kết chuẩn: Cách 1 được ưu tiên vì linh hoạt về layout và tương thích rộng hơn với trợ năng. Lưu ý for khớp với id, không phải name. Liên kết đúng cho ba lợi ích: screen reader đọc được nhãn khi…
- Viết `alt` cho ảnh thế nào là đúng? Khi nào để `alt=""`?
alt mô tả chức năng của ảnh trong ngữ cảnh, không phải mô tả pixel. Cùng một tấm ảnh có thể cần alt khác nhau ở hai trang khác nhau. Ba trường hợp chính: alt="" (rỗng, vẫn phải có thuộc tính) dùng cho ảnh thuần…
- First rule of ARIA là gì? Khi nào KHÔNG nên thêm `role`/thuộc tính ARIA?
Quy tắc số 1 của ARIA: nếu có phần tử HTML native mang sẵn ngữ nghĩa và hành vi bạn cần, hãy dùng phần tử đó thay vì gán role ARIA. ARIA chỉ đổi cách phần tử được mô tả trong accessibility tree — nó…
- Accessible name của một phần tử được tính từ đâu? Thứ tự ưu tiên thế nào?
Accessible name là chuỗi mà screen reader đọc lên để định danh phần tử (khác với role và state). Trình duyệt tính nó theo thuật toán accname, duyệt lần lượt và dừng ở nguồn đầu tiên có giá trị không rỗng: 1. aria-labelledby — trỏ…
- Form submit lỗi: làm sao để screen reader biết ô nào sai và sai gì?
Tô đỏ viền là tín hiệu chỉ dành cho mắt. Cần ba mảnh ghép: 1. Đánh dấu ô lỗi: aria-invalid="true" để screen reader đọc "không hợp lệ" khi focus vào ô. Bỏ về false/gỡ hẳn khi người dùng sửa xong. 2. Nối thông báo lỗi…
- Nội dung đổi động (toast, kết quả tìm kiếm, số lượng giỏ hàng) thông báo cho screen reader ra sao?
Dùng live region: một vùng DOM có aria-live, khi nội dung bên trong thay đổi thì screen reader tự đọc mà không cần chuyển focus. Chọn mức độ: - aria-live="polite" (hoặc role="status"): đợi người dùng ngừng thao tác rồi đọc. Dùng cho hầu hết trường…
- Mở và đóng modal thì phải xử lý focus thế nào cho đúng?
Bốn bước, thiếu bước nào cũng làm người dùng bàn phím lạc chỗ: 1. Nhớ phần tử đang focus trước khi mở (document.activeElement). 2. Chuyển focus vào trong modal ngay khi mở — vào phần tử tương tác đầu tiên, hoặc vào chính container (đặt…
- Tự viết dropdown menu thì cần hỗ trợ bàn phím những gì? Roving tabindex là gì?
Một dropdown chỉ nghe click là bỏ rơi toàn bộ người dùng bàn phím. Tập phím tối thiểu theo APG (menu button): - Enter / Space / ArrowDown trên nút: mở menu và focus item đầu. - ArrowDown / ArrowUp: di chuyển giữa các item…
- `prefers-reduced-motion` dùng thế nào cho đúng? Có phải tắt sạch mọi animation?
prefers-reduced-motion là media query phản ánh cài đặt "giảm chuyển động" ở hệ điều hành. Người bật nó thường bị rối loạn tiền đình: parallax, zoom lớn, phần tử bay ngang màn hình có thể gây chóng mặt, buồn nôn. "Reduced" không phải "none". Cách…
- Bạn kiểm tra accessibility của một trang bằng cách nào?
Kết hợp máy quét tự động với kiểm tra thủ công — công cụ tự động chỉ bắt được một phần lỗi (thiếu alt, contrast, thiếu label, id trùng), phần còn lại là logic mà máy không đánh giá được. Tự động: - axe DevTools…
- Tự viết component Tabs cho đúng chuẩn thì cần những gì?
- Focus trap tự viết hay hỏng ở đâu? `inert` và `aria-hidden` giải quyết được gì?
- Chuyển modal tự viết sang `<dialog>` thì được gì và vẫn phải tự làm gì?
- Có mấy cách ẩn nội dung? Cách nào ẩn khỏi mắt nhưng vẫn đọc được bằng screen reader?
- Designer đưa màu chữ xám nhạt fail contrast, bạn xử lý và giải thích thế nào? WCAG 2.2 còn tiêu chí nào hay bị bỏ sót?
- WCAG 1.4.1 Use of Color yêu cầu gì? Viền đỏ báo lỗi và biểu đồ phân biệt bằng màu sai ở đâu?
Tiêu chí 1.4.1 (mức A) nói màu không được là kênh duy nhất truyền tải thông tin, chỉ ra hành động hay phân biệt trạng thái. Đây là tiêu chí khác hẳn 1.4.3 Contrast: contrast đủ mà vẫn trượt 1.4.1 là chuyện bình thường. Ba…
- Zoom trình duyệt lên 400% thì layout vỡ và phải cuộn ngang. WCAG quy định thế nào (1.4.10, 1.4.4, 1.4.12)?
Ba tiêu chí khác nhau, hay bị gộp làm một: Tiêu chí Mức Yêu cầu --------- 1.4.10 Reflow AA Nội dung dùng được ở bề rộng 320 CSS px mà không phải cuộn theo cả hai chiều 1.4.4 Resize Text AA Phóng chữ tới 200%…
- Keyboard trap (2.1.2) là gì? Thứ tự Tab lệch so với thứ tự nhìn thấy có vi phạm 2.4.3 không?
2.1.2 No Keyboard Trap (mức A): nếu focus vào được một vùng bằng bàn phím thì cũng phải ra được bằng bàn phím, dùng phím thông thường (Tab, Shift+Tab, mũi tên). Nếu cần phím đặc biệt để thoát thì phải nói cho người dùng biết…
- Trang song ngữ Việt - Anh thì thuộc tính `lang` đặt ở đâu cho đúng 3.1.1 và 3.1.2?
Hai tiêu chí tách bạch: - 3.1.1 Language of Page (mức A): ngôn ngữ mặc định của trang phải khai báo sao cho máy đọc được — tức lang trên thẻ <html. - 3.1.2 Language of Parts (mức AA): mỗi đoạn nội dung thuộc ngôn…
- WCAG 1.3.1 Info and Relationships nói gì? Bảng dữ liệu và nhóm radio phải markup thế nào cho đạt?
1.3.1 (mức A) yêu cầu: quan hệ giữa các phần nội dung mà mắt nhìn ra được thì máy cũng phải đọc ra được. Mắt thấy "cột này là tiêu đề của hàng dưới", "bốn ô radio này thuộc chung một câu hỏi" — screen…
- Vì sao link "Xem thêm" bị chê khi audit WCAG 2.4.4? Link chỉ có icon thì xử lý ra sao?
2.4.4 Link Purpose (In Context) — mức A — yêu cầu đích đến của link phải suy ra được từ chữ trong link, hoặc từ ngữ cảnh chương trình đọc được (câu chứa nó, ô bảng, mục danh sách). Vấn đề của "Xem thêm" nằm…
- WCAG 3.2.1 và 3.2.2 coi thay đổi ngữ cảnh nào là bất ngờ? Chọn `<select>` xong tự submit có vi phạm không?
"Thay đổi ngữ cảnh" (change of context) theo WCAG là một trong bốn thứ: đổi user agent, đổi viewport, đổi focus, hoặc thay đổi nội dung làm đứt mạch trang. Đổi nội dung bình thường — mở accordion, lọc danh sách tại chỗ — không…
- Hợp đồng outsourcing với khách EU yêu cầu sản phẩm đạt WCAG 2.1 AA. Bạn triển khai và chứng minh conformance thế nào?
