Button-demo

Sist testet med Jaws 2023, 21.9.23

Norsk versjon av Jaws har ofte problemer med å oppdatere tekst som byttes ut på knapper eller andre kontroller. For eksempel kan Start byttes med Stopp og så videre. Nedenfor finnes noen varianter av Start/Stoppknapper med ulik koding. Trykk gjentatte ganger på knappene for å sjekke hvor godt Jaws (eller andre skjermlesere) oppdaterer det som vises.

Jeg har kun testet med Jaws, og ingen av metodene som kun benytter wai-aria er stabile. I praksis vil det ofte gå fint med en live-region likevel fordi endringen gjerne vises første gang. Ved gjentakende trykk på knappene vil imidlertid ikke Jaws henge med.

Tale fungerer bedre enn punkt (leselist). Vil du teste med andre skjermlesere for å finne ut hvor godt de fungerer bør du derfor også ha med leselist (ikke kun simulering av leselist i et vindu).

Fjernes knappen fra DOM for så å legges til igjen med ny tekst fungerer det med Jaws. Kanskje ikke akkurat det du skulle ønske, men det er i alle fall en måte å gjøre det på, hehe, og kanskje en nødløsning i heltspesielle tilfeller. Siden knappen fjernes fra DOM setter jeg fokus på knappen når den legges tilbake. Hvis ikke er det en viss sjanse for at skjermlesere mister fokus.

En annen løsning som fungerer, og takk til Audun Sørheim, ligger helt nederst. Det er rett og slett å bruke to knapper der den ene skjules med css.

Har du kommentarer er det supert om du sender en melding (utvid Dokumentdetaljer helt nederst på siden).

Disse oppdateringsproblemene ser kun ut til å gjelde norsk versjon av Jaws. Bytter jeg til engelsk språk fungerer Jaws like bra som andre skjermlesere: NVDA, Windows skjermleser, VoiceOver (har ikke prøvd andre).

Standard knapp med utbytting av tekstinnholdet

<button style="display: block; width: 75px" id="b1" onclick="toggleText('b1')">Start</button>

function toggleText(buttonId) {
  const button = document.getElementById(buttonId);
  if (button.innerHTML === "Start") {
    button.innerHTML = "Stopp";
  } else {
    button.innerHTML = "Start";
  }
}
           

Start

Jaws: Første endring vises i punkt og leses opp. Seinere endringer leses ikke og etter hvert henger heller ikke punkt med.

Polite

<button style="display: block; width: 75px" id="b2" onclick="toggleText('b2')" aria-live="polite">Start</button>

function toggleText(buttonId) {
  const button = document.getElementById(buttonId);
  if (button.innerHTML === "Start") {
    button.innerHTML = "Stopp";
  } else {
    button.innerHTML = "Start";
  }
}
                           

Start

Jaws: leses riktig, men etter hvert henger ikke punkt med.

Samme resultat hvis teksten ligger i en span som fjernes og legges til med ny tekst.

<button style="display: block; width: 75px" id="b2-2" onclick="toggleText4('s1')" aria-live="polite"><span id="s1">Start</span></button>

function toggleText4(spanID) {
  var spanElement = document.getElementById(spanID);
  var t = spanElement.textContent;
  var newSpan = document.createElement("span");
  if (t === "Start") { t = "Stopp"; } else { t = "Start"; }
  var buttonElement = spanElement.parentNode;
  buttonElement.removeChild(spanElement);
  newSpan.textContent = t;
  newSpan.id = spanID;
  buttonElement.appendChild(newSpan);
}
            

Start

Assertive

<button style="display: block; width: 75px" id="b3" onclick="toggleText('b3')" aria-live=" assertive">Start</button>

function toggleText(buttonId) {
  const button = document.getElementById(buttonId);
  if (button.innerHTML === "Start") {
    button.innerHTML = "Stopp";
  } else {
    button.innerHTML = "Start";
  }
}
                           

Start

Jaws: leses riktig, men etter hvert henger ikke punkt med.

Assertive-div

<div aria-live="assertive"><button style="display: block; width: 75px" id="b4" onclick="toggleText('b4')">Start</button></div>

function toggleText(buttonId) {
  const button = document.getElementById(buttonId);
  if (button.innerHTML === "Start") {
    button.innerHTML = "Stopp";
  } else {
    button.innerHTML = "Start";
  }
}
           

Leses riktig, men etter hvert henger ikke punkt med.

status

<p><span role="status" aria-atomic="false"><button style="display: block; width: 75px" id="b5">

function toggleText(buttonId) {
  const button = document.getElementById(buttonId);
  if (button.innerHTML === "Start") {
    button.innerHTML = "Stopp";
  } else {
    button.innerHTML = "Start";
  }
}
           

Start

Leses riktig, men etter hvert henger ikke punkt med. For at endringene skal leses må du sette aria-atomic="false" (veldig merkelig).

Polite div med dom-utbytting

<div id="buttonchange" aria-live=""polite"><button style="display: block; width: 75px" id="b6" onclick="toggleText2('b6', 'buttonchange')">Start</button></div>

function toggleText2(buttonId, divId) {
  const button = document.getElementById(buttonId);
  const div = document.getElementById(divId);
  var t;
  if (button.innerHTML === "Start") {
    t = "Stopp";
  } else {
    t = "Start";
  }
  if (button && div) {
    const newButton = document.createElement('button');
    div.removeChild(button);
    newButton.id = buttonId;
    newButton.innerHTML = t;
    newButton.onclick = function () { toggleText2(buttonId, divId); };
    newButton.style.display = "block";
    newButton.style.width = "75px";
    div.appendChild(newButton);
    newButton.focus();
  }
}
       

Leses og vises riktig i punkt.

To knapper med display: none

<button style="display: block; width: 75px" id="b7" onclick="toggleText3('b7','b8')">Start</button>
<button style="display: none; width: 75px" id="b8" onclick="toggleText3('b8','b7')">Stopp</button>

function toggleText3(hideId, showId) {
  document.getElementById(hideId).style.display = 'none';
  const showButton = document.getElementById(showId);
  showButton.style.display = 'block';
  showButton.focus();
}
            

Start Stopp

Leses og vises riktig i punkt.