Как сделать заголовок Reactjs доступным - PullRequest
Новая
       20

Как сделать заголовок Reactjs доступным

0 голосов
/ 27 августа 2018

Я использую топор в моих инструментах Chrome для разработчиков, чтобы найти разметку, которой не хватает, чтобы сделать мой сайт более доступным. Сейчас JAWS не может читать определенные страницы. Я делаю медленный прогресс, поскольку я смотрю на этот фрагмент кода здесь: 

return [
      <ul className="breadcrumb" key="breadcrumb" role="navigation">
        <li><a href={backHref} className="link-back" tabIndex={tabIndex}><span className="back-to-page">{backText}</span></a></li>
        <li><span>&bull;</span></li>
        <li><a href="https://example.com" target="_blank"  tabIndex={tabIndex}><span className="section-name">Guest Services</span></a></li>
      </ul>,
      <a href="/" className={`link-home ${logoHrefStatus}`} key="eatHere"  tabIndex={tabIndex}><span className="screen-reader-text">Eat Here</span></a>
    ];
  }

какой топор говорит, что этот элемент невидим для программ чтения с экрана и нуждается в атрибуте aria-label или aria-labeledby. Я пробовал исправить ниже: 

return [
      <ul role="tablist" className="breadcrumb" key="breadcrumb">
        <li role="presentation"><a href={backHref} role="tab" aria-selected="true" className="link-back" tabIndex={tabIndex}><span className="back-to-page">{backText}</span></a></li>
        <li><span>&bull;</span></li>
        <li><a href="https://example.com" target="_blank"  tabIndex={tabIndex}><span className="section-name">Guest Services</span></a></li>
      </ul>,
      <a href="/" className={`link-home ${logoHrefStatus}`} key="eatHere"  tabIndex={tabIndex}><span className="screen-reader-text">Eat Here</span></a>
    ];
  }

безрезультатно.

1 Ответ

0 голосов
/ 28 августа 2018

Я думаю, что это может быть так просто, как: 

<li><a href={backHref} aria-label="link-back" className="link-back" tabIndex={tabIndex}><span className="back-to-page">{backText}</span></a></li>

Дайте попробовать.

...