Use Best Practices for HTML Markup
Use HTML tags to describe the meaning of content, rather than changing its appearance. For example, you should tag a section title with the appropriate heading level (such as <h3>) rather than making the text appear like a heading by applying visual elements such as bold text and a larger font size. Format list items into a list rather than using images of bullets or indents. Using HTML to describe your content’s meaning is valuable for learners who use screen readers, which, for example, can read through all headings of a specific level or announce the number of items in a list.
Use HTML heading levels in sequential order to represent the structure of a document. Well-structured headings help learners and screen reader users to navigate a page and efficiently find what they are looking for.
In your HTML and problem components, be sure to apply only heading levels 2 through 6 to your content. Because the components that you add are part of a complete page, and heading level 1 is already in use by other elements on the page, any text with a heading 1 style within an HTML or problem component can interfere with the functionality of tools such as screen readers.
Use HTML list elements to group related items and make content easier to skim and read. HTML offers three kinds of lists.
Unordered lists, where the order of items is not important. Each item is marked with a bullet.
Ordered lists, where the order of items is important. Each item is listed with a number.
Definition lists, where each item is represented using term and description pairs (like a dictionary).
Use table elements to format information that works best in a grid format, and include descriptive row and column headings. Tag row and column headers with the <th> element so screen readers can effectively describe the content in the table, and include the appropriate scope attribute on the <th> element.
1. HTML Markup Resources
Creating Semantic Structure provides guidance on reflecting the semantic structure of a web page in the underlying markup (WebAIM).
Creating Accessible Tables provides specific guidance on creating data tables with the appropriate semantic structure so that screen readers can correctly present the information (WebAIM).
FROGED