aria-hidden属性値をtoggle

HTML

<p id="mask-switch">
  <input type="button" id="all-open" value="ALL OPEN">
  <input type="button" id="all-close" value="ALL CLOSE">
</p>

<h3>神経系とは</h3>
<p>神経系とは、中枢では<span class="mask" aria-hidden="true">脳と脊髄</span>、末梢では<span class="mask" aria-hidden="true">運動</span>神経・<span class="mask" aria-hidden="true">感覚</span>神経・<span class="mask" aria-hidden="true">自律</span>神経という神経組織からなる。</p>

<ul>
 <li><a href="https://teratail.com/questions/72634">JavaScript - Google chromeでjsの関数書き換えができない(72634)｜teratail</a></li>
</ul>

CSS

.mask {
  color: black;
  background-color: white;
  cursor: pointer;
}

.mask[aria-hidden="true"] {
  color: black;
  background-color: black;
}

JavaScript

'use strict';
document.querySelectorAll('.mask').forEach(function (element) {
  element.addEventListener('click', function (event) {
    var element = event.target;

    element.setAttribute('aria-hidden', element.getAttribute('aria-hidden') === 'true' ? 'false' : 'true');
  }, false);
});

document.getElementById('mask-switch').addEventListener('click', function handleClick (event) {
  var input = event.target, ariaHidden;

  switch (input.id) {
    case 'all-open':
      ariaHidden = 'false';
      break;
    case 'all-close':
      ariaHidden = 'true';
      break;
  }

  if (ariaHidden) {
    for (var elements = document.querySelectorAll('.mask'), i = 0, len = elements.length; i < len; ++i) {
      elements[i].setAttribute('aria-hidden', ariaHidden);
    }
  }
}, false);