Avoid creating custom ordered lists using inline HTML numbers
no. 029
Make sure numbered lists are truly marked up using the OL element
An ordered list is a list of items following one another in a very specific order. In HTML, such lists are typically created using the OL element. Replacing standard HTML list numbers with images can be a great way to tie them into the overall design and make them more visually appealing, as long as these custom bulleted lists don’t break accessibility for assistive technology users.
To do this, simply make sure that whenever custom numbers are needed, that these numbers are integrated using the CSS list-style-image property rather than as part of the HTML. Do not create purely presentational lists using tables with multiple rows or paragraphs broken down by BR elements with images of numbers in front of each string of text. Use regular OL and LI elements, and override the default number presentation by using custom number images tied in through CSS instead. This will allow assistive technologies to convey the default semantics of the ordered list to the user, something a purely presentational list cannot naturally convey.
User Story
As a visually impaired user using assistive technology, [...]