用 Flexbox 复刻一个自适应布局，并确保可访问性（a11y）。

Recreate an adaptive layout with flexbox and ensure accessibility.

题目类型: 技术面试题

这是一道技术面试题，常见于澳洲IT公司面试中。

难度: medium

参考答案摘要

布局：用 display:flex 、 flex-wrap 、媒体查询（可选）与弹性尺寸实现断点适配；内容顺序与 DOM 顺序保持一致以利键盘与阅读器。a11y：语义化标签（header/nav/main/aside/footer）、可见焦点、对比度、响应式下触控目标尺寸、必要时 aria 属性补充语义。

本题提供 STAR 原则详细解答和技术解析，登录匠人学院学习中心即可查看完整答案。