添加' aria-labels'在WordPress导航菜单中锚定链接

时间:2017-07-26 18:37:24

标签: wordpress accessibility wai-aria

我需要在WordPress网站的每个菜单(和子菜单)项目中添加自定义咏叹调标签。它正在运行自定义主题。

我希望aria-labels包含这样的页面标题:

aria-label ="页面标题"

所以最后导航菜单结构中的每个LI看起来都是这样的:

<li id="id_name" class="class_names"><a href="http://linktothepage.com/page" aria-label="TITLE OF MY PAGE">TITLE OF MY PAGE</a></li>

最有效的方法是什么? 过滤器? 还有别的吗?

2 个答案:

答案 0 :(得分:2)

# implementation of univariate linear regression import numpy as np def cost_function(hypothesis, y, m): return (1 / (2 * m)) * ((hypothesis - y) ** 2).sum() def hypothesis(X, theta): return X.dot(theta) def gradient_descent(X, y, theta, m, alpha): for i in range(1500): temp1 = theta[0][0] - alpha * (1 / m) * (hypothesis(X, theta) - y).sum() temp2 = theta[1][0] - alpha * (1 / m) * ((hypothesis(X, theta) - y) * X[:, 1]).sum() theta[0][0] = temp1 theta[1][0] = temp2 return theta if __name__ == '__main__': data = np.loadtxt('data.txt', delimiter=',') y = data[:, 1] m = y.size X = np.ones(shape=(m, 2)) X[:, 1] = data[:, 0] theta = np.zeros(shape=(2, 1)) alpha = 0.01 print(gradient_descent(X, y, theta, m, alpha)) 标记中必须有title属性,那么你真的不需要<a> attr。所有屏幕阅读器都会自动读取标签的标题。

如果你没有将内容作为干净的文字而是更多的HTML代码,则可能需要

aria-label

当您点击任何链接时,您必须添加attr aria-label

所以最终的结果是:

aria-selected="true"

如果页面加载的导航菜单项是所选项目,则:

<li id="id_name" class="class_names">
    <a href="http://linktothepage.com/page" title="TITLE OF MY PAGE">TITLE OF MY PAGE</a>
</li>

答案 1 :(得分:1)

这个问题很老了,但我自己在寻找答案时发现了它,我想我会回答,以防其他人来到这里。

就我而言,我想为有子项的菜单项添加 aria-labels,因为在使用 VoiceOver 测试我的菜单时,我注意到需要更清晰的链接才能打开下面的菜单。

Walker_Nav_Menu 类中有一个过滤器,用于处理菜单项的属性 nav_menu_link_attributes。 (这是在 wp-includes/class-walker-nav-menu.php 中)您可以使用它来编辑要添加到链接的属性数组。

如果链接 (a) 只是“#”并且 (b) 有子项,我的目标是简单地在链接名称的末尾添加“菜单”一词。这对我有用,YMMV:

/* @see jcdesign_label_menu_items() */
add_filter( 'nav_menu_link_attributes', 'jcdesign_label_menu_items', 10, 4 );

/**
 * Filter nav menu items
 *
 * @param array $atts {
 *     The HTML attributes applied to the menu item's `<a>` element, empty strings are ignored.
 *
 *     @type string $title        Title attribute.
 *     @type string $target       Target attribute.
 *     @type string $rel          The rel attribute.
 *     @type string $href         The href attribute.
 *     @type string $aria_current The aria-current attribute.
 * }
 * @param WP_Post  $item  The current menu item.
 * @param stdClass $args  An object of wp_nav_menu() arguments.
 * @param int      $depth Depth of menu item. Used for padding.
 *
 * @see Walker_Nav_Menu
 *
 * @return array
 */
function jcdesign_label_menu_items( $atts, $item, $args, $depth ) {
    
    $empty_href   = ( ! isset( $atts[ 'href' ] ) || $atts[ 'href' ] === '#' || $atts[ 'href' ] === '' );
    $has_children = ( is_array( $item->classes ) && in_array( 'menu-item-has-children', $item->classes ) );
    
    // If href is essentially empty, and the item has children,
    // add an aria label noting that this is a menu
    if ( $empty_href && $has_children ) {
        $atts[ 'aria-label' ] = strip_tags( $item->title ) . ' Menu';
    }
    
    return $atts;
}

我没有使用 $args$depth 参数,所以我可以不使用它们,但是将它们放在适当的位置意味着我知道如果我再次使用此代码我可以使用它们.