> For the complete documentation index, see [llms.txt](https://douglasfugazi.gitbook.io/testing-web-accessibility/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://douglasfugazi.gitbook.io/testing-web-accessibility/introduccion/3.-semantic-structure.md).

# 3. Semantic structure

Structural, semantic HTML is the key starting point toward good accessibility practices. When a screen reader, or any sort of assistive device scans a web page, it gets information about the Document Object Model (DOM), or the HTML structure of the page. No styles or JavaScript will be read by a screen reader.

**Here are some accessibility guidelines related to semantic structure:**

* **Heading elements appear in a sequentially-descending order** Properly ordered headings that do not skip levels convey the semantic structure of the page, making it easier to navigate and understand when using assistive technologies. [Learn more](https://web.dev/heading-order/)
* **Lists contain only `<li>` elements and script supporting elements `(<script> and <template>)`** Screen readers have a specific way of announcing lists. Ensuring proper list structure aids screen reader output. [Learn more](https://web.dev/list/)
* **List items `<li>` are contained within `<ul>` or `<ol>` parent elements** Screen readers require list items (`<li>`) to be contained within a parent `<ul>` or `<ol>` to be announced properly. Learn more. [Learn more](https://web.dev/listitem/)
* **`<dl>`'s contain only properly-ordered `<dt>` and `<dd>` groups, `<script>`, `<template>` or `<div>` elements.** When definition lists are not properly marked up, screen readers may produce confusing or inaccurate output. [Learn more](https://web.dev/definition-list/)
* **Definition list items are wrapped in `<dl>` elements** Definition list items (`<dt>` and `<dd>`) must be wrapped in a parent `<dl>` element to ensure that screen readers can properly announce them. [Learn more](https://web.dev/dlitem/)
* **Cells in a `<table>` element that use the `[headers]` attribute refer to table cells within the same table.** Screen readers have features to make navigating tables easier. Ensuring `<td>` cells using the `[headers]` attribute only refer to other cells in the same table may improve the experience for screen reader users. [Learn more](https://web.dev/td-headers-attr/)
* **`<th>` elements and elements with `[role="columnheader"/"rowheader"]` have data cells they describe.** Screen readers have features to make navigating tables easier. Ensuring table headers always refer to some set of cells may improve the experience for screen reader users. [Learn more](https://web.dev/th-has-data-cells/)