• 我们需要使用WordPress中的Additional CSS面板,使用Twenty Twenty-Two主题定制下面代码中的Aria标签“Open menu”

    <nav class=“has-text-color has-background-color is-responsive items-justized-left css-nav wp-block-navigation is-content-justication-left is-layout-fleft is-layut-flex wp-container-core-navigation-is-layout-1 wp-block-navigration-is-layout-flex”aria-label=“Header navigation”data-wp-interactive=“core/navigation”data-web-context=“{&quot;overlayOpenedBy”:[],&quot;类型:&quot;覆盖&quot;角色属性:&quot&quot&quot;ariaLabel&quot;:&quot;菜单}“><button aria-haspup=“dialog”aria-label=“Open menu”class=“wp-block-navigation__responsive-container-Open”data-wp-on–click=“actions.openMenuOnClick”data-web-on–keydown=“actions.handleMenuKeydown”><svg width=“24”height=“24〃xmlns=”http://www.w3.org/2000/svg“viewBox=”0 0 24 24“><path d=”M5 5v1.5h14V5H5zm0 7.8h14v-1.5H5v1.5zM5 19h14v-1.5 H5V19z“></path></svg></button>

    最近的一次尝试是将从Chrome Inspector Panel复制的以下代码添加到WordPress的Additional CSS面板中:

    .wp-block-navigation__responsive-container-open.wp-block导航__respensive-ccontainer-oopen.wp-block导航__sponsive-container-open{aria-label=“打开导航”;}

    这没有任何影响。
    任何帮助都将不胜感激。

查看10条回复-1条到10条(共10条)
  • 我们需要使用WordPress中的Additional CSS面板,使用Twenty Twenty-Two主题定制下面代码中的Aria标签“Open menu”

    我不是无障碍专家。但我的理解是阿里亚·拉贝尔是一个HTML属性。所以尝试通过CSS公司这将是一个不正确的-完全不符合标准。

    对于导航地标阿里亚·拉贝尔采用导航块的名称。因此,可以从站点编辑器轻松自定义。但我找不到任何关于如何定制阿里亚·拉贝尔对于按钮元素内部导航地标。

    也许这就是80/20规则之一:你愿意花多少时间来更改文本打开菜单打开导航? 我敢打赌,你可以在你的网站上做一百万件其他事情,以更好地服务于你的用户和你的业务/使命。

    螺纹起动器 海利亚索克

    (@haleyassoc)

    您好!@格比亚,
    感谢您的反馈。

    我们确实已经解决了一百万个其他无障碍修复。可以说,这是清单上最后一项放在最上面的樱桃。

    我们这里的“菜单”与“导航”的问题是,这个网站是针对一家家族餐厅的,所以“开放菜单”有一个非常具体的含义,并出现在导航的其他地方。

    我们将尝试按照您的建议更改导航块的名称,如果这不能解决问题,我们将继续尝试。

    乔治,

    几周来,我一直在尝试如何在不接触代码的情况下将ARIA标签添加到我的菜单项中。有插件吗?为什么这部分不是WP核心?谢谢您。

    参见图片:
    https://brado.net/wp-content/uploads/2024/04/aria-menu.png

    @克里斯菲克斯你的链接指向404。你介意分享一个链接到你想添加这些标签的网站吗?

    安妮·梅克,

    暂存站点位于:https://env-waleruse-dev.kinsta.cloud(英文)/

    我正在使用WordPress菜单https://tinyurl.com/2y8eo2h6

    @克里斯菲克斯,

    在我深入讨论之前:我想我看到的是Elementor+Astra,对吗?

    你想在哪里添加aria-lables,目的是什么?我之所以这么问,是因为在大多数情况下,aria-label是为了传达可见部分(在本例中,是指本例中的链接文本)没有传达的信息。

    克里斯·菲克斯

    (@chrisfeix)

    对的。我们未能通过可访问性测试,因为我们的导航缺少ARIA标签。我们在HIPAA和医疗保健领域工作,客户要求我们通过可访问性测试。Elementor允许我们将ARIA标签添加到除WordPress控制导航之外的所有内容中。

    乔治·阿皮亚

    (@gappiah)

    @克里斯菲克斯:

    这个主题是由使用Twenty Twenty-Two主题(这是一个块主题)和内置块编辑器的人创建的。该网站使用块编辑器的导航块,其中添加了ARIA标签“Open Menu”,但OP希望将其更改为“Open Navigation”,因为这是一个餐厅网站,其中“Menu”表示其他意思。

    但不知怎的,尽管你的问题完全不同,但还是决定继续关注这个主题:不同的主题和页面生成器,根本没有ARIA标签(而不是想更改标签),以及一个完全不同行业的网站!

    Elementor允许我们向所有内容添加ARIA标签,但WordPress控制导航。

    阿斯特拉是一个经典的主题。

    对于经典主题,您的主题应该负责将ARIA标签添加到导航菜单中。

    WordPress提供了容器_变量_标签参数(以及许多其他参数)wp_nav_菜单主题用于定义其菜单位置,主题的作者可以使用此参数或任何其他参数:https://developer.wordpress.org/reference/functions/wp_nav_menu开发人员.wp_nav_menu/

    我刚刚建立了一个新站点来测试这个:WordPress 6.5.2,只是Astra主题,没有安装插件。

    这是我的导航菜单<导航>元素,使用Astra主题的“主”菜单:

    <nav class=“站点导航ast-flex-grow-1导航辅助功能站点标题焦点项”id=“主站点导航桌面”aria label=“站点导航”itemtype=“https://schema.org/SiteNavigationElement网站导航元素“itemscope=”itemscope“>…</nav>

    如上所述,这些类清楚地告诉您这是来自Astra主题,并且明显有一个ARIA标签:aria-label=“站点导航”。您可以在此处亲自检查:https://heapcard.s3-tastewp.com/

    所以看起来你的主题做得很好。

    同时,这里是<导航>标题中站点导航菜单中的元素:

    <nav class=“elementor-nav-menu--main elementor.nav-menu__container elementor_nav-menu--layout-horizontal e--pointer-underline e--animation-fade”></导航>

    这里的类清楚地显示了这是来自Elementor插件的。这个插件应该负责添加ARIA标签。

    克里斯·费克斯

    (@chrisfeix)

    谢谢你,乔治。我不是有意篡改这篇文章的。事实上,你是这里唯一一个能回答我问题的人。

    我正在写一个插件来解决我的问题,这不是关于菜单切换,而是关于在各个菜单项上有一个ARIA标签。

    你们可以不理我,再次感谢。

    @克里斯菲克斯我知道你的导航作为一个整体需要一个标签,但不明白为什么这是针对菜单项本身。这不是咏叹调的归属,除非你只显示图标。因此,我的问题是。我很惊讶你把它当作旗帜。

查看10条回复-1条到10条(共10条)