WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: [EXTERNAL] Help troubleshooting some code

for

From: Mark Magennis
Date: Nov 19, 2020 6:31AM

Hi Lucy,

I would look at the CSS if I were you. I'm surprised to hear that you get the same results in both NVDA and Jaws because I was gong to suggest that it may be because NVDA reads block level elements (<div style="display: block";> or <div style="display: inline-block";>) as a single utterance when screen layout mode is enabled. Screen layout mode is enabled by default in NVDA and can be toggled by pressing NVDA+V, but most users do not turn it off or even know about it.

Here's an example bit of code that illustrates this and how to fix it without changing the HTML. If you load this code in Firefox and use NVDA to arrow through it you'll see a button and two pieces of text read twice. In one version the button and texts are concatenated together and in the other they are read separately. The only difference is the different CCS that's applied in each case. They both read exactly the same using Jaws though.

<html>
<head>
<meta charset="utf-8" />
<header><title>Test page - Block vs Flex</title></header>
<style>
@media(min-width:468px){
.container-1{display:inline-block;}
.container-2{display:flex;}
}
.container-1 div, .container-2 div{
border:1px #ccc solid;
padding:10px;
}
.element-1{display:inline-block;}
.element-2{display:inline-block;}
.element-3{display:inline-block;}
.element-4{
flex:2;
order:1;}
.element-5{
flex:2;
order:2;}
.element-6{
flex:2;
order:3;}
</style>
</head>
<body>

<h2>Block level layout</h2>
<div class="container-1">
<div class="element-1">
<button>Previous</button>
</div>
<div class="element-2">
<span>Some text</span>
</div>
<div class="element-3">
<button>Next</button>
</div>
</div>
<h2>Flex layout</h2>
<div class="container-2">
<div class="element-4">
<button>Previous</button>
</div>
<div class="element-5">
<span>Some text</span>
</div>
<div class="element-6">
<button>Next</button>
</div>
</div>
</body>
</html>


Regards,
Mark