Finding the Answers on Question page is not as easy as it could be when using a screen reader.
One of the most important tasks when using StackExchange sites, is reading the first few Answers. When using a screen reader, the best and most common way of navigating a page is typically to browse heading elements. Unfortunately, Answers have no headings associated with them, nor any other suitable markup, so it's pretty hard to eg. jump to the first or the second Answer.
I suggest adding an invisible-to-regular-users heading on top of each Answer, say <h6>Answer 1 (score 6, accepted answer)</h6>
. The element should probably be right before the post-text
div, so that moving on to the Answer text is easy (by advancing to the next element).
The choice of 6th level heading would make sense because some screen readers allow jumping directly to headings of given level, and there probably are no other <h6>
elements. A semantically more correct choice would be <h3>
, which would still be useful enough for screen reader navigation, as there appears to be only two such elements before Answers.
http://webaim.org/techniques/css/invisiblecontent/ has information about how to hide an element for sighted users but not for screen readers.
This suggestion is based on working hands-on with a blind programmer, who has experience with many screen readers and a braille display.
Edit: related discussion in https://meta.stackexchange.com/a/193262/267154