freeCodeCamp/curriculum/challenges/russian/01-responsive-web-design/applied-accessibility/make-links-navigatable-with...

4.2 KiB
Raw Blame History

id title challengeType videoUrl localeTitle
587d7790367417b2b2512aaf Make Links Navigatable with HTML Access Keys 0 Сделать ссылки навигационными с ключами доступа к HTML

Description

HTML предлагает атрибут accesskey для указания сочетания клавиш для активации или приведения фокуса к элементу. Это может сделать навигацию более эффективной для пользователей только для клавиатуры. HTML5 позволяет использовать этот атрибут для любого элемента, но особенно полезен, когда он используется с интерактивными. Сюда входят ссылки, кнопки и элементы управления формой. Вот пример: <button accesskey="b">Important Button</button>

Instructions

Camper Cat хочет, чтобы ссылки вокруг двух названий статей в блогах имели быстрые клавиши, чтобы пользователи сайта могли быстро перейти к полной истории. Добавьте атрибут accesskey к обоим ссылкам и установите первый для «g» (для Гарфилда), а второй - «c» (для Chuck Norris).

Tests

tests:
  - text: Ваш код должен добавить атрибут <code>accesskey</code> к тегу <code>a</code> с <code>id</code> «first».
    testString: 'assert($("#first").attr("accesskey"), "Your code should add an <code>accesskey</code> attribute to the <code>a</code> tag with the <code>id</code> of "first".");'
  - text: Ваш код должен добавить атрибут <code>accesskey</code> к тегу <code>a</code> с <code>id</code> «второй».
    testString: 'assert($("#second").attr("accesskey"), "Your code should add an <code>accesskey</code> attribute to the <code>a</code> tag with the <code>id</code> of "second".");'
  - text: 'Ваш код должен установить атрибут <code>accesskey</code> в теге <code>a</code> с <code>id</code> «first» до «g». Обратите внимание, что дело имеет значение.'
    testString: 'assert($("#first").attr("accesskey") == "g", "Your code should set the <code>accesskey</code> attribute on the <code>a</code> tag with the <code>id</code> of "first" to "g". Note that case matters.");'
  - text: 'Ваш код должен установить атрибут <code>accesskey</code> в теге <code>a</code> с <code>id</code> «second» до «c». Обратите внимание, что дело имеет значение.'
    testString: 'assert($("#second").attr("accesskey") == "c", "Your code should set the <code>accesskey</code> attribute on the <code>a</code> tag with the <code>id</code> of "second" to "c". Note that case matters.");'

Challenge Seed

<body>
  <header>
    <h1>Deep Thoughts with Master Camper Cat</h1>
  </header>
  <article>


    <h2><a id="first" href="">The Garfield Files: Lasagna as Training Fuel?</a></h2>


    <p>The internet is littered with varying opinions on nutritional paradigms, from catnip paleo to hairball cleanses. But let's turn our attention to an often overlooked fitness fuel, and examine the protein-carb-NOM trifecta that is lasagna...</p>
  </article>
  <article>


    <h2><a id="second" href="">Is Chuck Norris a Cat Person?</a></h2>


    <p>Chuck Norris is widely regarded as the premier martial artist on the planet, and it's a complete coincidence anyone who disagrees with this fact mysteriously disappears soon after. But the real question is, is he a cat person?...</p>
  </article>
  <footer>&copy; 2018 Camper Cat</footer>
</body>

Solution

// solution required