Open aksenovaa opened 1 year ago
benjaminkott
commented
1 year ago I am not sure about this issue, while i get your point, it is no problem from A11y perspective according to our consultant - i am in favor keeping it as is, to avoid people being confused. As soon as we would remove the link, we could break styling and minutes after release we get reports that links are broken.
aksenovaa
commented
1 year ago Yes, I've looked through the a11y manuals, in particular https://w3c.github.io/aria/ https://a11y-style-guide.com/style-guide/section-navigation.html https://tink.uk/using-the-aria-current-attribute/ https://yale-a11y.gitlab.io/ui-component-library/navs# https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-disabled
For example, for the current page in subnavigation: li class="... current" Add aria-current="page" to the link that points to the current page. This will tell assistive technology (AT) devices that the focused link is pointing to the current page. And add aria-disabled="true" (indicates that the element upon which it is set and all of its focusable descendants are meant to be in the disabled state. This declaration will inform people using assistive technologies, such as screen readers, that such elements are not meant to be editable or otherwise operable) So, to keep the current page as a link, but at the same time unavailable to navigate, you need to add more css in theme.scss:
[aria-disabled="true"] {
pointer-events: none;
cursor: default;
}
.../Resources/Private/Partials/Page/Navigation/Subnavigation.html
<html xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers" xmlns:bk2k="http://typo3.org/ns/BK2K/BootstrapPackage/ViewHelpers" data-namespace-typo3-fluid="true">
<f:if condition="{subnavigation}">
<!--TYPO3SEARCH_end-->
<nav aria-label="{f:translate(key: 'sub-navigation.label', extensionName: 'bootstrap_package')}" class="frame frame-type-subnavigation frame-background-none frame-no-backgroundimage frame-space-before-none frame-space-after-none">
<div class="frame-container">
<div class="frame-inner">
<f:render section="SubnavigationItem" arguments="{menu: subnavigation, theme: theme}" />
</div>
</div>
</nav>
<!--TYPO3SEARCH_begin-->
</f:if>
<f:comment><!--Additing CURRENT menu item not accessible--></f:comment>
<f:section name="SubnavigationItem">
<f:if condition="{menu}">
<ul class="subnav-nav">
<f:for each="{menu}" as="item">
<f:if condition="{item.spacer}">
<f:then>
<li class="subnav-divider"></li>
</f:then>
<f:else>
<li class="subnav-item{f:if(condition: item.active, then:' active')}{f:if(condition: item.current, then:' current')}">
<a href="{item.link}" id="subnav-item-{item.data.uid}" class="subnav-link"{f:if(condition: '{item.target}', then: ' target="{item.target}"')}{f:if(condition: '{item.target} == "_blank"', then: ' rel="noopener noreferrer"')} title="{item.title}" {f:if(condition: item.current, then:' aria-current="page" aria-disabled="true"')}>
<f:if condition="{item.icon}">
<span class="subnav-link-icon">
<bk2k:icon icon="{item.icon}" width="{theme.subnavigation.icon.width}" height="{theme.subnavigation.icon.height}" />
</span>
</f:if>
<span class="subnav-link-text">{item.title}<f:if condition="{item.current}"> <span class="visually-hidden">({f:translate(key: 'navigation.link.screenreader.current', extensionName: 'bootstrap_package')})</span></f:if></span>
</a>
<f:if condition="{item.children}">
<f:render section="SubnavigationItem" arguments="{menu: item.children, theme: theme}" />
</f:if>
</li>
</f:else>
</f:if>
</f:for>
</ul>
</f:if>
</f:section>
</html>
Breadcrumb with microdata embedded in HTML .../Resources/Private/Partials/Page/Navigation/Breadcrumb.html:
<f:if condition="{theme.breadcrumb.enable}">
<f:if condition="{breadcrumb}">
<schema:breadcrumb breadcrumb="{breadcrumb}"/>
<nav class="breadcrumb-section" aria-label="{f:translate(key: 'breadcrumb.label', extensionName: 'bootstrap_package')}">
<div class="container">
<p class="visually-hidden" id="breadcrumb">{f:translate(key: 'breadcrumb', extensionName: 'bootstrap_package')}</p>
<ol class="breadcrumb" itemscope itemtype="https://schema.org/BreadcrumbList">
<f:for each="{breadcrumb}" as="item" iteration="iterator">
<f:variable name="isCurrent" value="0" />
<f:if condition="{item.current} && {breadcrumbExtendedValue} == '' && {iterator.isLast}">
<f:variable name="isCurrent" value="1" />
</f:if>
<li class="breadcrumb-item{f:if(condition: isCurrent, then: ' active')}"{f:if(condition: isCurrent, then: ' aria-current="page" aria-disabled="true"')} itemscope itemprop="itemListElement" itemtype="https://schema.org/ListItem">
<a class="breadcrumb-link{f:if(condition: isCurrent, then: ' breadcrumb-link-current')}" id="bc{iterator.index}" href="{item.link}"{f:if(condition: '{item.target}', then: ' target="{item.target}"')}{f:if(condition: '{item.target} == "_blank"', then: ' rel="noopener noreferrer"')} title="{item.title}" itemprop="item">
<f:render section="BreadcrumbTitle" arguments="{item: item, theme: theme}" />
<meta itemprop="position" content="{iterator.index}">
</a>
</li>
</f:for>
<f:if condition="{breadcrumbExtendedValue}">
<li class="breadcrumb-item active" aria-current="page" itemscope itemprop="itemListElement" itemtype="https://schema.org/ListItem">
<a class="breadcrumb-link breadcrumb-link-current" id="bc2" itemprop="item">
<span class="breadcrumb-link-title">
<span class="breadcrumb-text" itemprop="name">{breadcrumbExtendedValue -> f:format.raw()}</span>
</span>
<meta itemprop="position" content="2">
</a>
</li>
</f:if>
</ol>
</div>
</nav>
</f:if>
</f:if>
<f:section name="BreadcrumbTitle">
<span class="breadcrumb-link-title">
<f:if condition="{theme.breadcrumb.icon.enable} && {item.icon}">
<span class="breadcrumb-icon">
<bk2k:icon icon="{item.icon}" height="{theme.breadcrumb.icon.height}" width="{theme.breadcrumb.icon.width}" />
</span>
</f:if>
<span class="breadcrumb-text" itemprop="name">{item.title -> f:format.raw()}</span>
</span>
</f:section>
For Logo .../Resources/Private/Partials/Page/Header/Logo.html
<html xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers" data-namespace-typo3-fluid="true">
<f:variable name="isCurrent" value="false" />
<f:variable name="isDisabled" value="false" />
<f:if condition="{data.uid}=={rootPage}">
<f:variable name="isCurrent" value="page" />
<f:variable name="isDisabled" value="true" />
</f:if>
<f:link.page pageUid="{rootPage}"
class="navbar-brand navbar-brand-{f:if(condition: logo.normal, then: 'image', else: 'text')}"
title="{settings.logo.linktitle}"
additionalAttributes="{itemscope:'', itemtype:'https://schema.org/ImageObject', itemid:'{f:uri.page(pageUid:rootPage,absolute:1)}#logo', aria-current:'{isCurrent}', aria-disabled:'{isDisabled}'}">
<f:if condition="{logo.normal}">
<f:then>
<img class="navbar-brand-logo-normal"
itemprop="image url"
src="{f:uri.image(image: logo.normal)}"
alt="{logoAlt}"
height="{settings.logo.height}"
width="{settings.logo.width}">
<f:if condition="{logo.inverted}">
<img class="navbar-brand-logo-inverted" src="{f:uri.image(image: logo.inverted)}" alt="{logoAlt}" height="{settings.logo.height}" width="{settings.logo.width}">
</f:if>
</f:then>
<f:else>
<span>{siteTitle}</span>
</f:else>
</f:if>
<meta itemprop="name" content="{logoAlt}"/>
</f:link.page>
</html>
The current menu item should not be a link Now the current page in the menu is displayed as a link. But it is a cyclic link and in my opinion it is a mistake. In Subnavigation Partial I maid it like this: