ARTICLE AD BOX
I have a question regarding HTML/CSS and accessibility. I hope you can help me, as my knowledge is limited.
The client has different sections, 1.A and 1.B, that load on the same page but in different <div> elements. Therefore, it's not a typical list; rather, they're trying to create a coherent structure. I don't know why they don't actually use <h> tags, for example, but I'm told that's the correct approach.
Their code, as an example, looks like this.
<div> <ol start="1" style="list-style-type: decimal;" type="A"> <li lang="en"><strong>A. Item 1</strong> at the post.</li> </ol> </div> <div> <ol start="1" style="list-style-type: decimal;" type="A"> <li lang="en"><strong>B. Item 2</strong> at the post.</li> </ol> </div>First, I'm not clear on why they use Decimal in the style if they then use Type="A".
But the point is, I don't think that way, from an accessibility standpoint, the listener will perceive it as points 1.A, 1.B, etc., but rather as the entire point 1, without distinction.
My code would be as follows:
<div> <ol rol="list" style="list-style-type: decimal;" start="1"> <li style=""> <ol rol="list" style="list-style-type: upper-alpha; padding-left: 2rem;" start="1"> <li lang="en"><strong>Item 1</strong> at the post.</li> </ol> </li> </ol> </div> <div> <ol rol="list" style="list-style-type: decimal;" start="1"> <li style=""> <ol rol="list" style="list-style-type: upper-alpha; padding-left: 2rem;" start="2"> <li lang="en"><strong>Item 2</strong> at the post.</li> </ol> </li> </ol> </div>Am I correct, or is the structure provided by the client the most appropriate? When I test Chrome to read the content, it appears identical, and in both cases, for example with the WAVE plugin, it seems to indicate that both structures are correct.
Thank you.
