# Accessible Multilingual Interface and Composite Controls LLMS index: [llms.txt](/frontend-book/llms.txt) --- # Practical 02 - Accessible Multilingual Interface and Composite Controls Related: [Chapter 2](/frontend-book/book/chapter_02_semantic_html_accessibility_internationalization_and_the_dom/) · [Lecture slides](/frontend-book/slides/02-semantic-html-accessibility-dom/) ## Objective Build a resilient, fully accessible public-service portal that demonstrates the platform relationship between semantic HTML, the accessibility tree, internationalization, and live DOM event handling. You will establish a native selection baseline first using standard HTML controls, prove that the interface is completely operable via keyboard with explicit labeling and validation, handle mixed English and Kurdish/Arabic directional text, and implement delegated DOM events. As an optional extension, you will implement an accessible composite widget (a custom multi-select listbox) with roving `tabindex`. ## Prerequisites and setup You need basic HTML, CSS, JavaScript, and a browser with developer and accessibility inspection tools (e.g. Chrome/Firefox Accessibility Tree inspection panel). Serve the exercise locally using any local static HTTP server (e.g., `python -m http.server 8000` or `npx serve .`): Create this folder structure: ```text chapter-02-semantics/ ├── index.html ├── styles.css └── app.js ``` Ensure your stylesheet includes a distinct, high-contrast `:focus-visible` outline. Keep third-party UI libraries or CSS frameworks out of the project; all behaviors and styles must be native. ## Stage 1 - Establish semantic landmarks and native selection baseline Construct the core portal page containing: * A `
` with site title and a `