WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Masking H1

for

From: JP Jamous
Date: Nov 17, 2016 1:00PM

Checking it right now.

-----Original Message-----
From: WebAIM-Forum [mailto: <EMAIL REMOVED> ] On Behalf Of Beranek, Nicholas
Sent: Thursday, November 17, 2016 1:42 PM
To: WebAIM Discussion List < <EMAIL REMOVED> >
Subject: Re: [WebAIM] Masking H1

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.

-----Original Message-----
From: WebAIM-Forum [mailto: <EMAIL REMOVED> ] On Behalf Of Beranek, Nicholas
Sent: Thursday, November 17, 2016 12:00 PM
To: WebAIM Discussion List < <EMAIL REMOVED> >
Subject: Re: [WebAIM] Masking H1

Hey JP,

You have a few options:

1) Decrease the width of the container to force each word on a new line;
2) Or instead of using a <br />, wrap each word in a <span> and use display: block to ensure each word has its own line

Does that make sense? Tested with NVDA and Firefox and having each word wrapped in a <span> still reads out the string in its entirety versus "heading level 1 Good", "heading level 1 Morning", etc.

Nick Beranek
Capital One

-----Original Message-----
From: WebAIM-Forum [mailto: <EMAIL REMOVED> ] On Behalf Of JP Jamous
Sent: Thursday, November 17, 2016 12:53 PM
To: 'WebAIM Discussion List' < <EMAIL REMOVED> >
Subject: [WebAIM] Masking H1

Folks,



I have a H1 that is causing excessive readability with screen readers. Here is the mark up.



<h1>

Good

<br />

Morning

<br />

JP

</h1



If the user reads this while down-arrowing or swiping on an iPhone, each word is read separately followed or proceeded by Heading level 1.



I would like to be able to mask this. What would be the best approach?

The information contained in this e-mail is confidential and/or proprietary to Capital One and/or its affiliates and may only be used solely in performance of work or services for Capital One. The information transmitted herewith is intended only for use by the individual or entity to which it is addressed. If the reader of this message is not the intended recipient, you are hereby notified that any review, retransmission, dissemination, distribution, copying or other use of, or taking of any action in reliance upon this information is strictly prohibited. If you have received this communication in error, please contact the sender and delete the material from your computer.




The information contained in this e-mail is confidential and/or proprietary to Capital One and/or its affiliates and may only be used solely in performance of work or services for Capital One. The information transmitted herewith is intended only for use by the individual or entity to which it is addressed. If the reader of this message is not the intended recipient, you are hereby notified that any review, retransmission, dissemination, distribution, copying or other use of, or taking of any action in reliance upon this information is strictly prohibited. If you have received this communication in error, please contact the sender and delete the material from your computer.