Certain elements of the markup may not provide semantic meaning to the user. Either alternates for such elements need to be used to convey the intended context / information to the user or an alternate mechanism have to be provided.
A strike-off element <s> element is used to strike-off the content representing it is no more valid. Usually used to represent the cost of a product before discount or similar context, the information that is visually conveyed is not available for assistive technology users. In addition to the strike-off element either a screen reader only content or some other alternate need to be provided for the user. Marque element is another example where the intended information is not conveyed to assistive technology users.
In the case of <b> accessibility experts advice to use <strong>. Similarly in place of <i> use <em>. Validation of this semantics is not a simple solution. Both manual check and automation test has to be performed to identify the defects under this success criterian. Let us dig into the testing methods now.
Check 1: Validation of strike-off content
- Open the page in the browser.
- Check throughout the page for any content that is visually striken-off.
- Switch on the screen reader and read the same content.
- Check if any additional context is read aloud to inform that the content is no more valid.
- If the screen reader provides the additional context, this success criterian is passed, else failed.
Check 2: Validation for marque element
- Open the page on a browser.
- Run the automation tool aXe on the page.
- Check for any violation that says Marque is used.
- If such violation is identified by aXe it is an accessibility violation, else the success criterian is passed.
Check 3: Validation for bold and italic elements.
- Open the page in the browser.
- Right click and navigate to the wave extention.
- Navigate to structure option and activate it.
- In the resultant screen check if any of the content has either <b> and <i> elements are available.
- If such elements are available, it is an accessibility violation, else the success criteria is passed.
WCAG Success Criteria
- 1.3.1 Info & relationships (Level A)