I need to truncate the amount of characters that is returned from the title of each product but the file where this change needs to be applied has a set of double brackets wrapped around the specific element that needs truncating (see code)
<div class="boost-pfs-filter-product-bottom">
<a href="[[itemUrl]]" class="boost-pfs-filter-product-item-title">
<h4 class="cl-product-card-name">[[itemTitle]]</h4>
</a>
<div class="cl-product-card-price">[[itemPrice]]</div>
<button class="quick-add-btn" [[quickAddAttr]] onclick='window.blubolt.quickadd.open("[[productHandle]]", {"stockMap": "{}" })'>
[[quickAddText]]
</button>
</div>
The element that needs truncating is [[itemTitle]] on line 3, but i am not sure how to go about this as the double square brackets is causing issues. Any ideas what is needed to be done here? If any more info is needed feel free to ask
This should work:
<div class="boost-pfs-filter-product-bottom">
<a href="[[itemUrl]]" class="boost-pfs-filter-product-item-title">
<h4 class="cl-product-card-name" aria-label="[[itemTitle]]" title="[[itemTitle]]">[[itemTitle | truncate: 20]]</h4>
</a>
<div class="cl-product-card-price">[[itemPrice]]</div>
<button class="quick-add-btn" [[quickAddAttr]] onclick='window.blubolt.quickadd.open("[[productHandle]]", {"stockMap": "{}" })' aria-label="[[quickAddText]] [[itemTitle]]">
[[quickAddText]]
</button>
</div>
Anything with a pipe | inside a variable will apply a filter, in this case the truncate filter. Filters are functions available in the Liquid language that allow transforming the variable value.
In my example, please note also
aria-label is still including the full title because it will render the very important heading and link outline more helpful for people with disabilities. CSS truncation would render this unnecessary.
title also includes the full title, which gives mouse users a way to expand the title by hovering on it.
aria-label for the button is helpful for screen reader users who navigate by means of tab. Otherwise, all Quick Add buttons have the same accessible name.
Related
I have a button which opens a calendar modal, I know calendars are bad for accessibility but my client insists on it. This is the code that opens that calendar modal.
<div class="col-sm-6 hidden-xs text-right calendar-cta">
<a type="button" onclick="openNav()" href="#" class="btn-primary">Calendar view</a>
</div>
I then have a close button on the model, which is where the accessibility error is being produced. The x is showing up as 'Text not included in an ARIA landmark'. What am I doing wrong? What do I need to add in order for this to stop producing the accessibility error. Any help would be hugely appreciated.
<div id="myNav" class="overlay" role="menu">
<a class="closebtn" tabindex="-1" role="menuitem" aria-label="close calendar view">×</a>
<div class="overlay-content"> </div>
</div>
This is more of a warning than an error. It's not required under WCAG, although it is best-practice, and you should try to do it if you can.
It is a best practice to include ALL content on the page in landmarks, so that screen reader users who rely on them to navigate from section to section do not lose track of content.
https://www.w3.org/WAI/WCAG22/Techniques/aria/ARIA11
You should ideally be using HTML semantic sectioning elements, like: <main>, <nav>, <aside>, <header>, <footer>, etc. This warning is saying that all rendered content should be in some sort of containing element that has an ARIA role associated with it.
There's a great chart that maps all of the HTML 5 semantic elements to their implied ARIA roles.
I'd also recommend changing your a.closebtn to a button element and removing tabindex="-1". Since you're not navigating to a different location, but rather doing something that causes a change to the UI, I think that a button is a more appropriate choice. The tabindex attribute isn't necessary and only serves to prevent receiving focus by manually tabbing.
The direct and the short answers to the questions:
What is wrong here is that aria-label does not contain the visible text and it is a concrete WCAG failure under 2.5.3 Label in Name. Why and how it fails is explained under Failure due to the accessible name not containing the visible label text
Two quick and dirty solutions:
Write "close calendar view" instead of "x" if possible and remove the aria-label attribute
Hide the "x" sign from ARIA by putting it inside <span aria-hidden="true">x</a>. The one and only thing the screen reader will read will be "link close calendar view".
The "Text not included in an ARIA landmark" may still show up, it is a false positive when it is hidden from ARIA.
However, the above fix will fix only 2.5.3, but there are more important issues here.
I wonder
Why the role="button" was assigned to an anchor element to make a button, when there is the button element readily available and no link to anywhere was intended.
From Bootstrap:
When using button classes on elements that are used to trigger
in-page functionality (like collapsing content), rather than linking
to new pages or sections within the current page, these links should
be given a role="button" to appropriately convey their purpose to
assistive technologies such as screen readers.
What tabindex="-1" does there. It will remove the button from the tab order and the keyboard user will not be able to reach or operate it. It causes a concrete 2.1.1 Keyboard failure.
Why closing the calendar view button has a role="menuitem". Is there a menu there?
Moreover, the usage of the "x" character as the only visible accessible name of a button is a 1.3.3 Sensory Characteristics failure. It is an assumption that all users know "x" denotes "close". Just like not everyone understands an asterisk denotes "required fields", ">" sign means "next", or 3 bars on top of each other is now a menu called "hamburger menu". These should all have some textual explanation. Aria label makes the explanation for the screen reader users but some sighted users may still fail to understand what is meant there.
Alternative code, not including how the btn-close works: (Close button Bootstrap v. 5.0)
(Please note that Bootstrap does not address the 1.3.3 criterion explained above, that is why I included a tooltip in my suggestion.)
<div class="col-sm-6 hidden-xs text-right calendar-cta">
<button type="button" class="btn-primary" onclick="openNav()">Calendar view</button>
</div>
<div id="myNav" class="overlay">
<button type="button" class="btn-close" aria-label="Close calendar view" title="Close"></button>
<div class="overlay-content"> </div>
</div>
I am trying to implement the notification component that will show the list of the items and will be opened by clicking on the notification icon on the fixed navigation bar on the top. I don't think it's a menu bar. Because the menu provides the actions that can be performed and it can also have a sub-menu.
https://www.w3.org/TR/wai-aria-practices/#menu
Can anyone let me know what should be the aria-role of such kind of components?
Below is the code sample. I will open the template dynamically by clicking on the notification icon button:-
<button aria-label="notifications">
<mat-icon class="mr-md">notifications</mat-icon>
</button>
<!-- Notification template -->
<div class="notifications__item">
Notifications
<li *ngFor="let notification of notifications" class="notifications__item">
<mat-icon class="notifications__icon material-icons-round">
{{ notification.icon }}
</mat-icon>
<div class="notifications__content">
<div [ngClass]="{ 'notifications__warn': notification?.type }">
<span>{{ notification.title }}</span>
</div>
<div>{{ notification.description }}</div>
</div>
<small class="notifications__caption">
{{ notification.duration }}
</small>
</li>
</div>
There are still a lot of things to consider that your example doesn't cover, so this isn't a complete answer, it is just pointing you to the relevant WAI-ARIA depending on what route you take.
The button
The first thing to consider is the button. You need to tell screen reader users what state it is currently in. For this we use aria-expanded to indicate whether the item it controls is currently opened or closed. (aria-expanded="true" for open, aria-expanded="false" for closed.)
At the same time we want to indicate what item this button controls (as the notification list isn't 'owned' by the element - for example if it was an <li> with a nested <ul> in a menu then the list would be 'owned' by it).
For this we would use aria-controls or aria-owns and point it to the ID of the element it controls. For the difference between them see this stack overflow post as a good explanation, in this example I would say it is aria-controls but yet again depends on your implementation and positioning in the DOM.
With regards to the button itself and where it sits in your menu, this is still considered navigation so it should sit within your <nav> element. However if this sits outside of your navigation along with say a 'help' and 'account' section you may consider those items part of a toolbar. (yet again I would say it doesn't apply here but something to look at)
Also it doesn't appear to be applicable here but if you include any links etc. within the 'popup' / modal that shows the notification list (i.e. a 'view all notifications' link), you should consider aria-haspopup="true"
The notification list
Right so we have a button pointed to the container (don't forget to give the container the relevant ID for aria-owns or aria-controls). Next what about the container itself?
Well in this example it appears that the container should be treated like a modal.
So for this reason you need to consider:-
trapping focus in the modal,
close with Escape,
returning focus to the button that activated it on close,
providing a close button that is accessible by keyboard,
a title for the modal (even if it is visually hidden)
What I would recommend is add some of the accessibility features above, try it with a screen reader and keyboard and see if it is easy to use. Once you have decided on your pattern ask some more questions on specific use case issues as the above is general guidance.
A few things to consider based on your markup
Additional things to consider from your example:-
use aria-hidden="true" on your icons, they don't add anything for screen readers (assuming your notification.title is descriptive).
For the notification title consider making it a relevant heading (<h2> - <h6> depending on position in document.
Don't forget to add some visually-hidden text that describes the warning level (I can see you have some form of colouring / distinction in [ngClass]="{ 'notifications__warn': notification?.type }" - expose the same info to screen readers.)
You currently have a <li> within a <div> - maybe change the outer <div> into an <ul> so it is semantically correct (<div class="notifications__item"> into <ul class="notifications__item">)
I hope the above is useful to set you on the right track, a lot to read but after reading the linked articles you should be able to make a better decision on what pattern you are using (as I didn't even mention making this a sub item within your menu) and can then ask some more questions on specific details you don't yet understand.
final thoughts / tips
test with a screen reader - this is the biggest tip I can give on working out how WAI-ARIA works and interacts with things.
Also if you are ever in doubt as to whether a WAI-ARIA attributre is applicable it is better to not include it.
Incorrect use or WAI-ARIA is actually worse than not including it at all so make sure you understand when to use an attribute reasonably well before implementing it. If I am ever unsure (as it still happens to me!) I tend to look at 2 or 3 examples of it in use and see if my pattern fits the examples I looked at.
I have this bit of code:
<div class="kt-portlet__head">
<div class="kt-portlet__head">
<div class="kt-portlet__head-label">
<span class="kt-portlet__head-icon">
<i class="la la-user"></i>
</span>
<h3 class="kt-portlet__head-title">
Edit User
</h3>
</div>
</div>
</div>
The content changes across the project, ie, everything within the div with the class kt-portlet__head-label
I need to remove the duplicate wrapper div (i.e, you will see there are two div tags with class kt-portlet__head).
To my knowledge:
I cannot do a search and replace because searching for just the two open wrapper tags and replacing with one will leave two div close tags instead of one.
I cannot do a search and replace on the whole thing because the content changes as stipulated above
I can use 'code wrap/unwrap' on an open document - but this is manual and i might as well just delete the two lines individually.
Isn't there a way to do a kind of 'code unwrap' + search and replace to get this achieved?
I have an element roughly like this:
<a class="parent" tabindex="0">
<span class="info">One line of data.</span>
<span class="info">Another line of data.</span>
<button class="action">Click here to do stuff.</button>
</a>
Because of reasons, I have a link that takes users to a certain page, and inside that link is a button that does something related to the link, but functionally different. When I tab over the parent link with a screen reader, it reads the text of everything inside - both info spans and the button, which is not the behavior I'm looking for. What I want to happen is:
If a user tabs to the parent link, it reads off the contents of the two info spans, but not the button, as this would mislead users about what the link does.
If a user tabs specifically to the button, the contents of the button is read off.
I tried assembling a custom aria-label for the parent link to do what I want, but it proved to be very difficult because some of the content I want to be read is interpolated HTML, which doesn't go very easily into an English string. Is there an easier way of doing what I want to do?
The first Google search result for "html links" says (paraphrased) that to create a bookmark / section inside a webpage, we've to do this:
<a id='section-2'>Section 2</a>
so that we can link to it like this:
<a href='page.php#section-2' >Click</a>
But why the site is recommending using anchor tag around "Section 2"? -When it can be done using span:
<span id='section-2'>Section 2</span>
Are there compatibility issues? Because the first search result for "creating bookmarks within a webpage" also says to surround the heading with anchor tag:
<p><a name="title">Title</p>
Though this particular example is incorrect for various other reasons.
I've a supplementary question:
Why to surround the heading with the container when it can be done simply like this:
<span id='section-2'></span>Section 2
Does it matter?
<span id='section-2'>Sec</span>tion 2
<a href='page.php#section-2' >Click</a>
There is no point. W3schools is unreliable, just don’t use it, and you will avoid confusion and wrong information; see http://w3fools.com
In the old days, the only way to set a destination anchor within a page was to use <a name=...>...</a> element (at the text level). Later, the id attribute was added and is now supported by all browsers in use, so you can make any element a destination anchor simply by attaching an id attribute to it. E.g., to make it possible to link to a heading like <h2>Section 2</h3>, you could make it just <h2 id=section-2>Section 2</h2>. No need for an artificial extra element.
Using <span id='section-2'></span>Section 2, though formally correct, is not a good idea. You win nothing by using it, as opposite to the more logical markup. And if you e.g. later want to style (highlight) the element to which the user has “jumped” into with a link, using the :target pseudo-class, you will find yourself in an awkward position: the pseudo-class would let you style just the empty content of the span.
Regarding the question in the title, there is no reason to make the top of a page an destination anchror, with <a id='top'>Top of page</a> or otherwise. First, you can refer to the start of the page using just href=# since by URL specifications, # denotes the start of the current resource. Second, “Back to top” links are basically useless or worse: every browser has a simple command for going to the start of the page, and an explicit “Back to top” link can be confusing: back to top of what?
In the early days of html an anchor element was the only way to do this, but just because you can now do it with other element types doesn't mean you should: using an anchor for this purpose is semantically correct because it makes it clear to anybody reading or maintaining your markup that the element is intended as a navigation target. (Noting that there will often be many elements on the page that have an id but are not navigation targets.)
"Why to surround the heading with the container when it can be done simply like this:
<span id='section-2'></span>Section 2
Because if you put the text of your heading inside an element you can style it and/or easily mess with it from JavaScript. Indeed, if it is a heading you may want to put it in an <h1>, <h2>, etc. tag rather than a <span>.