Description: The attribute aria-label
is missing a value, and doesn’t have a default
<nav style="font-style:normal;font-weight:400;" class="o-hide-on-mobile has-normal-font-size items-justified-center no-wrap wp-block-navigation has-normal-font-size is-horizontal is-content-justification-center is-nowrap is-layout-flex wp-container-core-navigation-is-layout-1 wp-block-navigation-is-layout-flex has-classic-menu has-classic-menu-location--secondary" aria-label=""></nav>
While reviewing our site for accessibility issues, we noted the link text presented as the title of the article in the latest posts block does not allow heading level to be assigned. There does not appear to be a function to allow management of heading level for this information without custom code, which we do not allow our site creators to use to ensure consistency.
Heading tags for content that visually represents a heading help users navigate and understand the structure.
Does anyone have a solution or remediation that does not involve custom code, or insight into when/if this is already being addressed? I do not see any existing similar support posts.
]]>Browser: Chrome
Description:?When using a keyboard to navigate the focus state of the “Bookmark” link is too subtle to be accessible.
Steps to Reproduce:
Suggested Solution:?Add a focus state that includes an outline of the link. Removing “outline: none !important;” from the CSS might achieve this.
]]>A competing plugin recently added support for tooltips. Please consider adding tooltips settings to Spectra’s buttons, icons, headers, and maybe some other blocks where it makes sense.
https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/popover
]]>Whilst the paid version does much more, the free version of the plugin is an excellent place to start and get used to how the plugin works and how to action/interpret the results.
Brilliant work from a brilliant team with excellent support and helpful articles/tutorials to guide you along the way.
]]>Here’s the code I’m seeing.
<div class="wp-site-blocks">
<div class="wp-block-group is-layout-flow wp-block-group-is-layout-flow">
<div class="wp-block-cover is-light wp-container-content-10" style="padding-top:0;padding-right:0;padding-bottom:0;padding-left:0;min-height:100vh;aspect-ratio:unset;aspect-ratio:unset;"><span aria-hidden="true" class="wp-block-cover__background has-background-dim-0 has-background-dim"></span>
<img class="wp-block-cover__image-background" alt="" src="https://wp-themes.com/wp-content/themes/bute/assets/images/StockSnap_D49XR0MX5L.jpg" style="object-position:100% 100%" data-object-fit="cover" data-object-position="100% 100%">
<div class="wp-block-cover__inner-container is-layout-flow wp-block-cover-is-layout-flow">
<div class="wp-block-group is-vertical is-content-justification-stretch is-layout-flex wp-container-core-group-is-layout-5 wp-block-group-is-layout-flex" style="min-height:100vh">
<div class="wp-block-group has-global-padding is-layout-constrained wp-block-group-is-layout-constrained">
<div class="wp-block-group alignfull has-contrast-color has-text-color is-content-justification-space-between is-nowrap is-layout-flex wp-container-core-group-is-layout-2 wp-block-group-is-layout-flex" style="padding-top:var(--wp--preset--spacing--50);padding-right:var(--wp--preset--spacing--50);padding-bottom:var(--wp--preset--spacing--50);padding-left:var(--wp--preset--spacing--50)">
<h1 class="wp-block-site-title"><a target="_self" rel="home" aria-current="page">Bute</a></h1>
<div class="wp-block-group is-nowrap is-layout-flex wp-container-core-group-is-layout-1 wp-block-group-is-layout-flex">
<ul class="wp-block-social-links has-small-icon-size has-icon-color is-style-logos-only is-layout-flex wp-block-social-links-is-layout-flex">
<li class="wp-social-link wp-social-link-facebook has-contrast-color wp-block-social-link"><a class="wp-block-social-link-anchor"><svg width="24" height="24" viewBox="0 0 24 24" version="1.1" xmlns="https://www.w3.org/2000/svg" aria-hidden="true" focusable="false"><path d="M12 2C6.5 2 2 6.5 2 12c0 5 3.7 9.1 8.4 9.9v-7H7.9V12h2.5V9.8c0-2.5 1.5-3.9 3.8-3.9 1.1 0 2.2.2 2.2.2v2.5h-1.3c-1.2 0-1.6.8-1.6 1.6V12h2.8l-.4 2.9h-2.3v7C18.3 21.1 22 17 22 12c0-5.5-4.5-10-10-10z"></path></svg><span class="wp-block-social-link-label screen-reader-text">Facebook</span></a></li>
<li class="wp-social-link wp-social-link-instagram has-contrast-color wp-block-social-link"><a class="wp-block-social-link-anchor"><svg width="24" height="24" viewBox="0 0 24 24" version="1.1" xmlns="https://www.w3.org/2000/svg" aria-hidden="true" focusable="false"><path d="M12,4.622c2.403,0,2.688,0.009,3.637,0.052c0.877,0.04,1.354,0.187,1.671,0.31c0.42,0.163,0.72,0.358,1.035,0.673 c0.315,0.315,0.51,0.615,0.673,1.035c0.123,0.317,0.27,0.794,0.31,1.671c0.043,0.949,0.052,1.234,0.052,3.637 s-0.009,2.688-0.052,3.637c-0.04,0.877-0.187,1.354-0.31,1.671c-0.163,0.42-0.358,0.72-0.673,1.035 c-0.315,0.315-0.615,0.51-1.035,0.673c-0.317,0.123-0.794,0.27-1.671,0.31c-0.949,0.043-1.233,0.052-3.637,0.052 s-2.688-0.009-3.637-0.052c-0.877-0.04-1.354-0.187-1.671-0.31c-0.42-0.163-0.72-0.358-1.035-0.673 c-0.315-0.315-0.51-0.615-0.673-1.035c-0.123-0.317-0.27-0.794-0.31-1.671C4.631,14.688,4.622,14.403,4.622,12 s0.009-2.688,0.052-3.637c0.04-0.877,0.187-1.354,0.31-1.671c0.163-0.42,0.358-0.72,0.673-1.035 c0.315-0.315,0.615-0.51,1.035-0.673c0.317-0.123,0.794-0.27,1.671-0.31C9.312,4.631,9.597,4.622,12,4.622 M12,3 C9.556,3,9.249,3.01,8.289,3.054C7.331,3.098,6.677,3.25,6.105,3.472C5.513,3.702,5.011,4.01,4.511,4.511 c-0.5,0.5-0.808,1.002-1.038,1.594C3.25,6.677,3.098,7.331,3.054,8.289C3.01,9.249,3,9.556,3,12c0,2.444,0.01,2.751,0.054,3.711 c0.044,0.958,0.196,1.612,0.418,2.185c0.23,0.592,0.538,1.094,1.038,1.594c0.5,0.5,1.002,0.808,1.594,1.038 c0.572,0.222,1.227,0.375,2.185,0.418C9.249,20.99,9.556,21,12,21s2.751-0.01,3.711-0.054c0.958-0.044,1.612-0.196,2.185-0.418 c0.592-0.23,1.094-0.538,1.594-1.038c0.5-0.5,0.808-1.002,1.038-1.594c0.222-0.572,0.375-1.227,0.418-2.185 C20.99,14.751,21,14.444,21,12s-0.01-2.751-0.054-3.711c-0.044-0.958-0.196-1.612-0.418-2.185c-0.23-0.592-0.538-1.094-1.038-1.594 c-0.5-0.5-1.002-0.808-1.594-1.038c-0.572-0.222-1.227-0.375-2.185-0.418C14.751,3.01,14.444,3,12,3L12,3z M12,7.378 c-2.552,0-4.622,2.069-4.622,4.622S9.448,16.622,12,16.622s4.622-2.069,4.622-4.622S14.552,7.378,12,7.378z M12,15 c-1.657,0-3-1.343-3-3s1.343-3,3-3s3,1.343,3,3S13.657,15,12,15z M16.804,6.116c-0.596,0-1.08,0.484-1.08,1.08 s0.484,1.08,1.08,1.08c0.596,0,1.08-0.484,1.08-1.08S17.401,6.116,16.804,6.116z"></path></svg><span class="wp-block-social-link-label screen-reader-text">Instagram</span></a></li>
<li class="wp-social-link wp-social-link-tumblr has-contrast-color wp-block-social-link"><a class="wp-block-social-link-anchor"><svg width="24" height="24" viewBox="0 0 24 24" version="1.1" xmlns="https://www.w3.org/2000/svg" aria-hidden="true" focusable="false"><path d="M17.04 21.28h-3.28c-2.84 0-4.94-1.37-4.94-5.02v-5.67H6.08V7.5c2.93-.73 4.11-3.3 4.3-5.48h3.01v4.93h3.47v3.65H13.4v4.93c0 1.47.73 2.01 1.92 2.01h1.73v3.75z"></path></svg><span class="wp-block-social-link-label screen-reader-text">Tumblr</span></a></li>
</ul>
<nav class="has-xx-large-font-size is-responsive items-justified-center wp-block-navigation has-xx-large-font-size is-content-justification-center is-layout-flex wp-container-core-navigation-is-layout-1 wp-block-navigation-is-layout-flex" aria-label="" data-wp-interactive="core/navigation" data-wp-context="{"overlayOpenedBy":{"click":false,"hover":false,"focus":false},"type":"overlay","roleAttribute":"","ariaLabel":"Menu"}"><button aria-haspopup="dialog" aria-label="Open menu" class="wp-block-navigation__responsive-container-open always-shown" data-wp-on--click="actions.openMenuOnClick" data-wp-on--keydown="actions.handleMenuKeydown"><svg width="24" height="24" xmlns="https://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><rect x="4" y="7.5" width="16" height="1.5"></rect><rect x="4" y="15" width="16" height="1.5"></rect></svg></button>
<div class="wp-block-navigation__responsive-container hidden-by-default" style="" id="modal-2" data-wp-class--has-modal-open="state.isMenuOpen" data-wp-class--is-menu-open="state.isMenuOpen" data-wp-watch="callbacks.initMenu" data-wp-on--keydown="actions.handleMenuKeydown" data-wp-on--focusout="actions.handleMenuFocusout" tabindex="-1">
<div class="wp-block-navigation__responsive-close" tabindex="-1">
<div class="wp-block-navigation__responsive-dialog" data-wp-bind--aria-modal="state.ariaModal" data-wp-bind--aria-label="state.ariaLabel" data-wp-bind--role="state.roleAttribute">
<button aria-label="Close menu" class="wp-block-navigation__responsive-container-close" data-wp-on--click="actions.closeMenuOnClick"><svg xmlns="https://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" aria-hidden="true" focusable="false"><path d="M13 11.8l6.1-6.3-1-1-6.1 6.2-6.1-6.2-1 1 6.1 6.3-6.5 6.7 1 1 6.5-6.6 6.5 6.6 1-1z"></path></svg></button>
<div class="wp-block-navigation__responsive-container-content" data-wp-watch="callbacks.focusFirstElement" id="modal-2-content">
<ul class="wp-block-navigation__container has-xx-large-font-size is-responsive items-justified-center wp-block-navigation has-xx-large-font-size"><ul class="has-xx-large-font-size wp-block-page-list"><li class="wp-block-pages-list__item wp-block-navigation-item open-on-hover-click"><a class="wp-block-pages-list__item__link wp-block-navigation-item__content" >About</a></li><li data-wp-context="{ "submenuOpenedBy": { "click": false, "hover": false, "focus": false }, "type": "submenu" }" data-wp-interactive="core/navigation" data-wp-on--focusout="actions.handleMenuFocusout" data-wp-on--keydown="actions.handleMenuKeydown" data-wp-on--mouseenter="actions.openMenuOnHover" data-wp-on--mouseleave="actions.closeMenuOnHover" data-wp-watch="callbacks.initMenu" tabindex="-1" class="wp-block-pages-list__item has-child wp-block-navigation-item open-on-hover-click"><a class="wp-block-pages-list__item__link wp-block-navigation-item__content" >Parent Page</a><button data-wp-bind--aria-expanded="state.isMenuOpen" data-wp-on--click="actions.toggleMenuOnClick" aria-label="Parent Page submenu" class="wp-block-navigation__submenu-icon wp-block-navigation-submenu__toggle" aria-expanded="false"><svg xmlns="https://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12" fill="none" aria-hidden="true" focusable="false"><path d="M1.50002 4L6.00002 8L10.5 4" stroke-width="1.5"></path></svg></button><ul data-wp-on--focus="actions.openMenuOnFocus" class="wp-block-navigation__submenu-container"><li class="wp-block-pages-list__item wp-block-navigation-item open-on-hover-click "><a class="wp-block-pages-list__item__link wp-block-navigation-item__content" >Sub-page</a></li></ul></li></ul></ul>
</div>
</div>
</div>
</div></nav>
</div>
</div>
</div>
<div class="wp-block-group wp-container-content-7 has-global-padding is-layout-constrained wp-container-core-group-is-layout-4 wp-block-group-is-layout-constrained">
<h1 class="wp-block-heading has-text-align-center has-text-color has-xxxx-large-font-size" style="color:#dcbc06;font-style:normal;font-weight:800;line-height:0.8;text-transform:uppercase">Embark<br>on an<br>Adventure</h1>
<p class="has-text-align-center has-link-color wp-elements-2e56917d68df199dcc98dce01c1ee622" style="font-style:normal;font-weight:500"><a href="#" data-type="URL" data-id="#">Explore our insights</a>→ </p>
</div>
<div style="height:0px" aria-hidden="true" class="wp-block-spacer wp-container-content-8"></div>
</div>
</div>
</div>
</div>
</div>
]]>