перейти к содержанию

Я пытаюсь создать веб-сайт, который соответствует определенным стандартам доступности с помощью вкладок. Проблема в том, что у меня есть меню навигации в левой части экрана, и мои пользователи запрашивают ссылку типа «Перейти к содержимому», поэтому им не нужно постоянно переключаться между несколькими ссылками, чтобы добраться до содержимого.

Однако я использую AngularJS в своем веб-приложении, и если я использую стандартную функцию перехода к содержимому (пример: http://accessibility.oit.ncsu.edu/training/accessibility-handbook/skip-to-main-content.html) не будет Работа. Я уже использую якоря (с #) для углового кода.

Есть ли другой способ реализовать это? У меня есть определенный тег div, к которому я хотел бы перейти для выбора вкладки. Он должен перейти к одному из элементов внутри div.


jquery angularjs accessibility tabindex wai
person KVISH    schedule 18.04.2015    source источник
comment
вы можете добавить кнопку/ссылку и при нажатии просто сфокусировать любой элемент, который вы хотите - в чем проблема?   -  person Petr Averyanov    schedule 18.04.2015
comment
Проблема в том, что мой контент может быть изменен; так как я использую шаблоны и ui-router. Так что мне нужно, чтобы перейти к индексу вкладки элемента в содержании   -  person KVISH    schedule 18.04.2015
comment
Вы можете «пометить» первый элемент контента на каждой странице специальной директивой/идентификатором/классом. Или вы можете выбрать все табличные элементы на странице и пропустить кнопки навигации. Это не такой крутой способ, но хоть что-то.   -  person Petr Averyanov    schedule 18.04.2015

Ответы (2)


arrow_upward
2
arrow_downward

Раньше я успешно использовал angular-scroll. Он легкий (8,5 КБ), прост в использовании и даже позаботится об анимации прокрутки за вас. Он также соответствует стандартам доступности, так как клавишу Tab можно использовать для навигации, как обычный тег привязки.

Реализовать так:

JS

angular
.module('app', ['duScroll'])
.controller('MainCtrl', function ($scope, $document) {
  //Controller logic here
}

HTML

<a href="#nav-one" du-smooth-scroll duration="1500">Navigation Link</a>

<!-- further down the page -->

<div id="nav-one">
  Content goes here.
</div>

Рабочий CodePen для справки: http://codepen.io/Pangolin-/pen/dPQRZa

Хорошей охоты!

person Pangolin    schedule 18.04.2015
comment
Проблема в том, что я использую angular ui-router. Поэтому, когда пользователь нажимает на ссылки, он не обновляет всю страницу. и у него есть # для загрузки контента с других страниц на текущую главную страницу с помощью шаблона. Это не сработает там, так как мне нужно перейти к содержимому. - person KVISH; 18.04.2015
comment
Это не выбор контента. Мне нужно, чтобы выбрать. Если пользователь перемещается с помощью клавиши табуляции и нажимает клавишу ввода, ему необходимо перейти к содержимому и увидеть, что оно выбрано. - person KVISH; 18.04.2015
comment
Не похоже, что angular-scroll фактически устанавливает focus< /a> это то, что нужно для навигации с помощью клавиатуры. - person steveax; 18.04.2015

arrow_upward
0
arrow_downward

Недавно я работал с $angularScroll и могу дать вам несколько советов.

В вашем шаблоне:

<a href="javascript:void(0)" ng-click="scrollTo('hello-scroll')">Go</a>
...
<div id="hello-scroll">Hello Scroll!</div>

В вашем контроллере:

angular
   .module('someModule', [])
   .controller('scrollCtrl', function($scope, $timeout, $timeout, $anchorScroll) {

        /**
         * @name    scrollTo
         * @desc    Anchor scrolling within page using $anchorScroll
         * @param   {String}   hash - Element ID.
         * @return  void
         */
        $scope.scrollTo = function(hash) {
           $location.hash(hash);
           $timeout(function() {
              $anchorScroll();
            }, 100);
        }

    });

Причина, по которой я добавил вызов $timeout, заключается в том, что когда я тестировал его без него, $scrollTo не работал. Кажется, что вызов $location.hash(hash) требует небольшого времени для обработки, поэтому ожидание составляет 100 мс.

Надеюсь, что это работает.

person Carlos Perea    schedule 18.04.2015