在AngularJS中实现“屏幕阅读器跳转到主内容”的功能可以通过使用HTML的tabindex
属性和AngularJS的$anchorScroll
服务来实现。以下是一个示例代码:
在HTML模板中,添加一个按钮或链接元素,并设置tabindex
属性为-1来使其可聚焦:
在控制器中,注入$anchorScroll
服务,并创建一个函数来滚动到主内容区域:
app.controller('MainController', function($scope, $anchorScroll) {
$scope.scrollToMainContent = function() {
// 设置要滚动到的元素的ID或名称
var mainContentElementId = 'main-content';
// 使用$anchorScroll服务滚动到指定元素
$anchorScroll(mainContentElementId);
}
});
在主内容区域中,使用id
或name
属性来标记主内容元素:
这样当用户使用屏幕阅读器时,点击“跳转到主内容”按钮时,页面会滚动到主内容区域,并将焦点设置在主内容上,使用户可以立即开始阅读主要内容。