Skip to content

13
votes

I'm trying to create a website that meets certain accessibility standards with tab clicks. The problem is I have a navigation menu on the left side of the screen and my users are request a "Skip to content" type link so they don't have to constantly cycle through multiple links to get to where the content is.

However, i'm using AngularJS in my web app, and if I use the standard skip to content functionality (example: http://accessibility.oit.ncsu.edu/training/accessibility-handbook/skip-to-main-content.html) it won't work. I'm already using anchors ( with #'s) for the angular code.

Is there any other way to implement this? I have a particular div tag that I would like the tab selection to go to. It should go to one of the elements inside the div.

2
jqueryangularjsaccessibilitytabindexwai
you can add button/link and on click just focus any element u want - whats the problem? - Petr Averyanov
The problem is that my "content" can be changed; since I'm using templates and ui-router. So I need it to goto the tab index of the element in the content - KVISH
You can 'mark' first element in content on each page with special directive/id/class. Or you can select all tabable elements on page and skip navigate buttons. Thats not that cool way but at least something. - Petr Averyanov

2 Answers

2
votes

I've used angular-scroll to good effect before. It's lightweight (8.5kB), easy to use, and even takes care of scrolling animations for you. It also meets accessibility standards, as the Tab key can be used to navigate just like a normal anchor tag.

Implement like this:

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>

Working CodePen for reference: http://codepen.io/Pangolin-/pen/dPQRZa

Happy hunting!

0
votes

I recently worked with $angularScroll and have some tips for you.

In your template:

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

In your controller:

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);
        }

    });

The reason I added the $timeout call is because when I tested it without it, the $scrollTo didn't seem to work. It seems that the call to $location.hash(hash) takes some small time to process, hence the 100 ms wait.

Hope it works.