Accessible List with Hidden bullets
Some screen readers such as VoiceOver don't recognize list mark-up when the bullets are removed with list-style-type:none.
When a design calls for visually hiding the browser's default list bullets you can hide them by using a negative left margin and overflow:hidden as seen in the example below.
- list item 1
- list item 2
- list item 3
- list item 4
- list item 5
- list item 6
- list item 7
- Works with iOS 11.2 and VoiceOver
- Works with JAWS 2018 and IE 11
- Works with JAWS 2018 and Chrome 63
- Works with NVDA 2016.3 and Firefox 56