Html – SPAN tag ignored by JAWS screen Reader

accessibilityhtmljaws-screen-reader

So I was able to get my page working just fine with the NDVA screen reader, however, when testing in JAWS, it tabs to the span, but doesn't read the text.

<span tabindex="0" title="whatever">whatever</span>

UPDATE:

What I am trying to achieve is a I have a few elements which expand/collapse certain sections of the site I'm building. These functional elements, however are not links.
Reponse to @discojoe (thanks for the response)
Adding a TABINDEX="0" attribute will insert the SPAN/DIV element into tabbing list in natural order (whereas by default, they're usually not added to the tabbing list). This allows screen readers to tab to that element, and is working just fine. Specifically, my problems is JAWS will just tab to that element, it just doesn't read it.
I agree, using TABINDEX="n" (where n > 0) is a bad thing which messes with the natural order of the tabbing list, and I am not doing that.
Also, you can use TABINDEX="-1" to remove an element from the tabbing list if it's placed in there by default (example an A or INPUT tag).
I have already tried using tags, however, when user hits enter on this link (to trigger the onclick event), it does something (not quite reloading, but kinda re-initializing) to the page which delays the animation associated with that element. I find that to be a bad experience to both normal and disabled users.
using the # tag in the A tag adds the hash tag to the page title in IE.
Additionally, using A tags makes the screen reader read out "LINK" before/after each element, and since they're not actually links, I feel this is negative impact on accessibility.

Best Answer

I would first want to know why you are using a span element and not a standard a href element? What is it you are wanting to achieve? It may help if you can provide more context\code.

I've just tried this and am getting the same issue; whilst I can arrow through the document and have a span read out to me, I cannot then tab to it and have it read out.

Using something instead like

<a href="#" onclick="javascript: return false;">Whatever</a>

works fine.

There are additional problems around using the tabindex attribute, specifally for keyboard users. On a page that users the tabindex attribute, the tab focus order will first of all go through all of the elements with tabindex specified, and then run through all the elements without it, in source code order.

A good general rule is to either use tabindex for all keyboard accessible elements, or for none of them, to get around this problem.

I realise in this case, you are likely using tabindex to just provide keyboard accessibility for this one item, so this issue may be irrelavant if you use the a href approach mentioned, but I wanted to mention it for completeness

2015 update: the flexbox approach

There are two other answers briefly mentioning flexbox; however, that was more than two years ago, and they don't provide any examples. The specification for flexbox has definitely settled now.

Note: Though CSS Flexible Boxes Layout specification is at the Candidate Recommendation stage, not all browsers have implemented it. WebKit implementation must be prefixed with -webkit-; Internet Explorer implements an old version of the spec, prefixed with -ms-; Opera 12.10 implements the latest version of the spec, unprefixed. See the compatibility table on each property for an up-to-date compatibility status.

(taken from https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes)

All major browsers and IE11+ support Flexbox. For IE 10 or older, you can use the FlexieJS shim.

To check current support you can also see here: http://caniuse.com/#feat=flexbox

Working example

With flexbox you can easily switch between any of your rows or columns either having fixed dimensions, content-sized dimensions or remaining-space dimensions. In my example I have set the header to snap to its content (as per the OPs question), I've added a footer to show how to add a fixed-height region and then set the content area to fill up the remaining space.

html,
body {
  height: 100%;
  margin: 0;
}

.box {
  display: flex;
  flex-flow: column;
  height: 100%;
}

.box .row {
  border: 1px dotted grey;
}

.box .row.header {
  flex: 0 1 auto;
  /* The above is shorthand for:
  flex-grow: 0,
  flex-shrink: 1,
  flex-basis: auto
  */
}

.box .row.content {
  flex: 1 1 auto;
}

.box .row.footer {
  flex: 0 1 40px;
}

<!-- Obviously, you could use HTML5 tags like `header`, `footer` and `section` -->

<div class="box">
  <div class="row header">
    <p><b>header</b>
      <br />
      <br />(sized to content)</p>
  </div>
  <div class="row content">
    <p>
      <b>content</b>
      (fills remaining space)
    </p>
  </div>
  <div class="row footer">
    <p><b>footer</b> (fixed height)</p>
  </div>
</div>

In the CSS above, the flex property shorthands the flex-grow, flex-shrink, and flex-basis properties to establish the flexibility of the flex items. Mozilla has a good introduction to the flexible boxes model.

Html – CSS fixed width in a span

In an ideal world you'd achieve this simply using the following css

<style type="text/css">

span {
  display: inline-block;
  width: 50px;
}

</style>

This works on all browsers apart from FF2 and below.

Firefox 2 and lower don't support this value. You can use -moz-inline-box, but be aware that it's not the same as inline-block, and it may not work as you expect in some situations.

Quote taken from quirksmode

Best Answer

Related Solutions

Html – Make a div fill the height of the remaining screen space

2015 update: the flexbox approach

Working example

Html – CSS fixed width in a span

Related Topic