Screen readers cannot read output

[davidmerfield]

Screen readers stumble on something like <span>a</span>t, reading it as 'A T' instead of 'at'.

This makes the optical margin alignment and hanging punctuation output unusable for people using screen readers.

We should be able to solve this using:

<p aria-label="at"><span>a</span>t</p>

[davidmerfield]

Google translate also screws up

[davidmerfield]

I've now disabled the optical margin alignment feature by default. It breaks too many things.

[danielhaim1]

I need to think this through and do some research, from both web accessibility and search optimization.

One solution that was discussed is the possibility of adding an aria-label to the parent element that's being converted -- but that's too risky (and may require a major version bump that will break some sites).

• If user has set .post-typeset to a <div> element that already contains aria-label it may break things.
• I suppose we can wrap the element with another span that contains the aria-label, but I also need to double check that this is the best approach.

I'll be investigating this in the coming days.

[AndrewKvalheim]

Would it work to just wrap the whole word instead?

<span class="pull-A">At</span> the beginning

[davidmerfield]

@AndrewKvalheim Brilliant! I can't think of a good reason that would not work