Semantic markup uses HTML elements according to their structural or interactive meaning. It gives screen readers a logical page layout and can improve search engine optimization. section 10.2.3
Apply semantic elements to structure content and express controls:
- Use one <h1> for the page title, then use <h2>, <h3>, and other headings for subtitles and navigable structure. section 10.2.3
- Organize layouts with <header>, <nav>, <main>, <article>, <section>, and <footer> instead of relying only on generic <div> elements. section 10.2.3
- Represent controls with meaningful <button>, <a>, and <form> elements, and group collections with <ul> or <ol> lists. section 10.2.3
- For visualizations, expose an accessible SVG with role="img", aria-labelledby, <title>, and <desc>, then provide a data table as an alternative. section 10.3
Accessible visualization structure
A cetacean visualization places its title and introduction in <header>, its chart areas in <main> and <section>, and sources in <footer>. Its SVG identifies itself as an image and describes the plotted data; a button switches to a labeled data table.
