WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Masking H1

for

From: JP Jamous
Date: Nov 17, 2016 12:22PM

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?