Interface reflection: search, navigation and accessibility

01 · Preserve the reader's place

A supervisor may search for a technology, switch languages and then follow a project link. Losing a filter during translation, or linking to hidden content, interrupts reading even on a polished page. This reflection focuses on three questions: whether search state remains stable, navigation reaches visible content, and motion can be skipped.

02 · Separate display language from the search index

academic.js builds an index containing both English and Chinese descriptions at initialization. Switching language updates presentation without rebuilding the user's filters. Both the query and index use NFKC normalization and lowercase conversion. Every query term must match, and the result must also satisfy the selected category. Full-width English and mixed-language queries therefore remain searchable across language changes.

The simplified example below isolates the matching rule. It does not perform tokenization or semantic retrieval: continuous Chinese text is matched as a substring, and newly inserted projects would require an index update. This transparent rule suits a small static site, at the cost of limited retrieval coverage.

// Simplified teaching example: both languages share one index.
const normalize = text => text.normalize("NFKC").toLowerCase();
function matches(translations, query) {
  const index = normalize(translations.join(" "));
  const terms = normalize(query).trim().split(/\s+/u).filter(Boolean);
  return terms.every(term => index.includes(term));
}
const project = ["PyTorch sample-aligned predictions", "逐样本对齐预测"];
console.log(matches(project, "ＰｙＴｏｒｃｈ 预测")); // true
console.log(matches(project, "PyTorch 物流")); // false

03 · URLs, visible panels and focus serve different roles

The video gallery reads fragments such as #film-data to select a panel and responds to hashchange. Arrow keys, Home and End move both selection and keyboard focus. Only the selected tab participates in the normal Tab sequence, and a video pauses when its panel is hidden. Clearing search returns focus to the input so keyboard use can continue naturally.

These states are distinct: clicking a video tab currently does not update the URL, and selecting a panel through a direct link does not deliberately steal focus. Project reading routes clear incompatible filters, but this is not a complete restoration mechanism for arbitrary project fragments. Shareable state would need explicit history, Back-button and focus rules.

04 · Reading must not depend on animation

Content is present in the HTML by default. The script adds reveal states only after checking that scroll observation is available. With prefers-reduced-motion, it skips reveal hiding, while CSS removes displacement and reduces timing. If the preference changes while the page is open, previously hidden reveal items become visible. Videos use native controls without autoplay.

Tradeoff: restrained motion can communicate state changes, while reading, keyboard operation and access without JavaScript retain independent paths.

05 · Verify actions a reader can complete

Existing interaction tests cover mixed-language queries, focus after clearing search, video arrow keys, direct fragments and content without JavaScript. Review should follow action sequences: filter, switch language, then clear. Checking that a button exists is insufficient. The teaching snippet also exercises positive and negative matches, an empty query and full-width input.

06 · Questions still open

DOM tests can verify state but cannot establish the experience of real screen-reader users, video decoding or touch interaction. A next review should complete a keyboard-only reading route in a browser and check accessible names and state announcements with a screen reader. If the notebook grows, index updates and ranking can be evaluated before introducing a more complex framework.