WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Masking H1

for

From: Beranek, Nicholas
Date: Nov 17, 2016 12:42PM

You could get creative, though, and use display: table instead of display: block. You may find this a little better in terms of layout.

Example: h1 span { display: table; }
<h1><span>Good</span> <span>Morning</span> <span>JP</span></h1>

Here's an article from CSS-Tricks about this topic. The author goes through a few options and then settles on display: table.

https://css-tricks.com/injecting-line-break/

Nick

--
Nick Beranek
Digital Accessibility Team


On 11/17/16, 2:22 PM, "WebAIM-Forum on behalf of JP Jamous" < <EMAIL REMOVED> on behalf of <EMAIL REMOVED> > wrote:

Thank you Nick.

1. may not be a solution as it would screw up the visual output.
2. It would work, but as suggested by Arron, VO especially on small view would continue to read it as separate ones.

Personally, I am cool with #2, because as far as VO is concerned, Apple needs to put some serious work. I am not testing with iOS 10 or any of its minor updates as they are still failing the ARIA bugs that Paul, on here, filed with them. I have no clue why VO needs to read each DOM element separate especially Spans and other ones that are used for special symbols or layout purposes.