Semantic Requirements include all HTML elements that influence organization and structure to your content. Included elements and features are headers, resizable text, page titles, and lists.
Headers visually and structurally organize the webpage. Headers should be arranged from the level of importance from most important to least significant using header levels (H1 – H6). Not only should headers be organized structurally they should also be organized visually. Each heading level should have different text styles; usually font size helps distinguish between different header levels. For example, a heading level one (<H1>) would have the font size of 18, heading level two (<H2>) would have the font size of 16, and so forth. Using color to distinguish between different header levels is allowed, as long that it is not the only text style used.
Text should be resizable up to 200% without having content truncated or lose its functionality.
Page titles should be descriptive and should introduce the context of the webpage.
All list elements must be coded using HTML. A list requires a list tags (<li>) to be a proper HTML list. Adding bullet points or numbers in front of your lists does not pragmatically make it a list. For example, regular text with numbers next to it (e.g., 1. Milk 2. Eggs 3. Cereal) will not be considered a list unless it has the <li> tag.
There are two types of lists: unordered lists and numbered lists.
- Unordered lists <ul> usually consist of bullet points.
- Ordered lists <ol> are organized in descending order with the use of 1, 2, 3 or a, b, c.
Why is semantic structure important?
- Headers visually and structurally organize the webpage. Having a correct heading structure allows assistive technology users to navigate via headers and helps them go directly to the content that is most relevant to their search.
- A descriptive title allows all users to know the purpose of the webpage they are visiting.
- Proper text resizing increase readability of your page. If done incorrectly, it can overlap elements on the page and cause accessibility issues.
- Although visual users will be able to identify lists, if a list is not coded with the <li> tag, assistive technology users will not be aware of the list items.