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

• 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

• 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

• <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

• 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

• 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

• <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