list-style - CSS | List-style size
Inanotableexception,Safariwillnotrecognizeanunorderedlistasalistintheaccessibilitytreeifhasalist-stylevalueofnone.Themoststraightforwardwaytoaddressthisistoaddanexplicitrole="list"tothe
- elementinthemarkup.Thiswillrestorethelistsemanticswithoutaffectingthedesign.CSS-onlyworkaroundsarealsoavailableforthosewhodonothaveaccesstothemarkup.Oneistoaddazero-widthspace[1]aspseudo-content[2]beforeeachlistitem:ul{list-style:none;}ulli::before{content:"200B";}Asecondapproachistoapplyaurlvaluetot...
In a notable exception, Safari will not recognize an unordered list as a list in the accessibility tree if has a list-style value of none.
The most straightforward way to address this is to add an explicit role="list" to the <ul> element in the markup. This will restore the list semantics without affecting the design.
CSS-only workarounds are also available for those who do not have access to the markup. One is to add a zero-width space[1] as pseudo-content[2] before each list item:
ul { list-style: none; } ul li::before { content: "200B"; }A second approach is to apply a url value to the list-style property:
nav ol, nav ul { list-style: none; } nav ol, nav ul { list-style: url("data:image/svg+xml,%3Csvg xmlns=http://www.w3.org/2000/svg/%3E"); }These CSS workarounds should be used only when the HTML solution is not available, and only after testing to ensure that they dont result in unexpected behaviors that may negatively impact us...