-
AuthorPosts
-
March 11, 2021 at 5:16 pm #1287507
Hello– how do you add an Aria Label to a Post Slider?
Thank you!
March 15, 2021 at 6:24 am #1288164Hi lle-it,
You’ll need to tweak postslider.php to do this, here are the steps to do it properly:
1. (skip this step if you have a child theme) Download and use a child theme. You can download and find instructions on how to use it here: https://kriesi.at/documentation/enfold/child-theme/
2. Follow the steps provided in: https://kriesi.at/documentation/enfold/intro-to-layout-builder/#add-elements-to-alb
3. Copy wp-content > themes > enfold > config-templatebuilder > avia-shortcodes > postslider folder to wp-content > themes > enfold-child > shortcodes folder.
4. Edit postslider.php in the child theme
Hope this helps and let us know if you need further assistance.Best regards,
NikkoMarch 15, 2021 at 3:41 pm #1288319Thank you– I have followed all of these steps and am now able to edit postslider.php in my Child Theme. What do I need to add to this in order to add field of “Aria label” so that postsliders on our page are able to be labeled with Aria text?
March 16, 2021 at 1:02 pm #1288502Hi lle-it,
Can you tell us what are the Aria text you’d like to put in the image, post title, content, etc? then we’ll try to post here the codes you’ll need to replace.
Best regards,
NikkoMarch 17, 2021 at 4:57 pm #1288755For instance, on this page: https://www.lle.rochester.edu/index.php/news/
There are 6 different post sliders, and our Accessibility checker is indicating that each postslider should be labeled with Aria text. I just want to indicate the purpose of each postslider.
March 19, 2021 at 3:23 pm #1289202Hi lle-it,
I see then the instruction I posted above may not be a convenient solution.
Using javascript maybe the best in this case, can you try to add to the Custom CSS Class of each one-half column a common class name for example mycolumn
Also should the post slider’s aria text attribute be like this?aria-label="Special Release"
Best regards,
NikkoMarch 22, 2021 at 2:25 pm #1289630Hi Nikko,
Yes, that is correct– the aria-label should be just as you have written.
I have added a custom class to each of the postsliders called “mycolumn” as you suggested. What do I do next.
Thank you so much for your help.
March 22, 2021 at 9:14 pm #1289714Along the same lines, I have buttons that need aria labels as well- – how do I add aria labels to buttons?
March 24, 2021 at 12:55 pm #1290090Hi lle-it,
I apologize for this but please do these steps again (code is provided):
1. (skip this step if you have a child theme) Download and use a child theme. You can download and find instructions on how to use it here: https://kriesi.at/documentation/enfold/child-theme/
2. Follow the steps provided in: https://kriesi.at/documentation/enfold/intro-to-layout-builder/#add-elements-to-alb
3. Copy wp-content > themes > enfold > config-templatebuilder > avia-shortcodes > postslider folder to wp-content > themes > enfold-child > shortcodes folder.
4. Edit postslider.php in the child theme and replace with this code: https://pastebin.com/9MUGjAwbOnce done, edit the Post Slider and it should have Aria Label Text in the backend which should reflect on the Post Slider.
Best regards,
NikkoMarch 24, 2021 at 1:15 pm #1290100Hi lle-it,
For the buttons it’s similar step with Post Slider but different files to copy (you can skip step 1 & 2):
1. (skip this step if you have a child theme) Download and use a child theme. You can download and find instructions on how to use it here: https://kriesi.at/documentation/enfold/child-theme/
2. Follow the steps provided in: https://kriesi.at/documentation/enfold/intro-to-layout-builder/#add-elements-to-alb
3. Copy wp-content > themes > enfold > config-templatebuilder > avia-shortcodes > buttons folder to wp-content > themes > enfold-child > buttons folder.
4. Edit buttons.php in the child theme and replace with this code: https://pastebin.com/7BKhNmiTOnce done, edit the Button and it should have Aria Label Text in the backend.
Hope this helps.Best regards,
NikkoMarch 24, 2021 at 8:22 pm #1290226Hi Nikko,
Thank you. Unfortunately following those steps causes any page with a layerslider to show this warning:
Fatal error: Uncaught Error: Call to undefined function Avia_Element_Templates() in /var/www/lle/wp-content/themes/enfold-child/shortcodes/postslider/postslider.php:462 Stack trace: #0 /var/www/lle/wp-content/themes/enfold/config-templatebuilder/avia-template-builder/php/shortcode-template.class.php(1042): avia_sc_postslider->shortcode_handler(Array, ”, ‘av_postslider’, Array) #1 /var/www/lle/wp-includes/shortcodes.php(343): aviaShortcodeTemplate->shortcode_handler_prepare(Array, ”, ‘av_postslider’) #2 [internal function]: do_shortcode_tag(Array) #3 /var/www/lle/wp-includes/shortcodes.php(218): preg_replace_callback(‘/\\[(\\[?)(av_pos…’, ‘do_shortcode_ta…’, ‘\n[av_textblock …’) #4 /var/www/lle/wp-content/themes/enfold/config-templatebuilder/avia-template-builder/php/shortcode-helper.class.php(484): do_shortcode(‘\n[av_textblock …’) #5 /var/www/lle/wp-content/themes/enfold/config-templatebuilder/avia-shortcodes/columns.php(1282): ShortcodeHelper::avia_remove_autop(‘\n[av_textblock …’, true) #6 /var/www/lle/wp-c in /var/www/lle/wp-content/themes/enfold-child/shortcodes/postslider/postslider.php on line 462
There has been a critical error on this website.This is similar to an error that I get when trying to fix the error I am experiencing with Enfold wherein the date displays on some, but not all posts in a postslider. Unfortunately our security policy will not allow me to grant you direct access. Could we use Zoom or Teams to help resolve this? Or do you have another suggestion?
Thank you!
March 25, 2021 at 2:14 am #1290250Hi lle-it,
I have actually tested the code on my local server (with WP debug turned on) before posting it and didn’t have issues, I checked just now with a layerslider but it does not show as well.
For the meantime, can you tell us what PHP version you’re using? also Enfold and WordPress version? so we can try to reproduce the issue.
As for giving us access, would it be possible if it on a staging site? if yes, then please setup a staging site for us.
Here’s a simple tutorial you can follow: https://themeisle.com/blog/wordpress-staging-site/Best regards,
NikkoApril 2, 2021 at 8:09 pm #1292026Hi Nikko,
Thank you! We have updated the theme in our development server and these items both work!
A follow-up question: It turns out that adding the aria-label to the slider element did not satisfy the Accessibility issue, because the slider is displaying <article>s and screen readers are looking for the <article> to have an aria label. How do I label the posts (<article> being pulled into the post slider with aria-labels?
And two more content elements that I need to add aria-labels to: full-width submenus and icon boxes.Thank you!
April 5, 2021 at 6:15 pm #1292585Hi lle-it,
You’re welcome :)
Please edit postslider.php in line 681 (the code I gave):$output .= "<div {$el_id} {$data} class='avia-content-slider avia-content-{$type}-active avia-content-slider" . avia_post_slider::$slide . " avia-content-slider-{$total} {$class} {$av_display_classes}' $markup {$aria_label}>"; // tweaked
replace it with:
$output .= "<div {$el_id} {$data} class='avia-content-slider avia-content-{$type}-active avia-content-slider" . avia_post_slider::$slide . " avia-content-slider-{$total} {$class} {$av_display_classes}' $markup>";
Then go to line 799:
$output .= "<article class='slide-entry flex_column {$style} {$post_class} {$grid} {$extraClass} {$thumb_class} post-format-{$post_format}' $markup>";
replace it with:
$output .= "<article class='slide-entry flex_column {$style} {$post_class} {$grid} {$extraClass} {$thumb_class} post-format-{$post_format}' $markup {$aria_label}>";
Hope this helps :)
Best regards,
NikkoApril 6, 2021 at 2:30 pm #1292787Thank you, again, Nikko!
So that solved the problem of the <article> labels in postsliders on this page: https://www.lle.rochester.edu/index.php/news/
But the problem persists on other pages, like this one: https://www.lle.rochester.edu/index.php/publications-2/
That second page also contains postsliders, but this fix did not solve the article label for this page– do you know why, or what I can do to fix that so that all postsliders containing articles are appropriately labeled?Also, how do I achieve this for icon boxes and icon lists?
Thanks!
April 8, 2021 at 7:20 am #1293190Hi lle-it,
Can you give us a screenshot of the settings of those Post Sliders that didn’t work?
As for icon boxes and icon lists, we’ll try to make one and post it here.Best regards,
NikkoApril 8, 2021 at 4:32 pm #1293320Hi Nikko,
I apologize, it is my error. It works on PostSliders– thank you. I need the same function for posts displayed in a “Blog Posts” Content Element.
Thank you.
April 10, 2021 at 3:47 pm #1293638Hi lle-it,
Please do the steps for Iconbox:
1. Copy wp-content > themes > enfold > config-templatebuilder > avia-shortcodes > iconbox folder to wp-content > themes > enfold-child > shortcodes folder.
2. Edit iconbox.php in the child theme and replace with this code: https://pastebin.com/JEzyyP7gPlease do the steps for Iconlist:
1. Copy wp-content > themes > enfold > config-templatebuilder > avia-shortcodes > iconlist folder to wp-content > themes > enfold-child > shortcodes folder.
2. Edit iconlist.php in the child theme and replace with this code: https://pastebin.com/AyLabJydBest regards,
NikkoApril 10, 2021 at 3:51 pm #1293639Hi lle-it,
As for Blog Posts, what Blog Style are you using?
Best regards,
NikkoApril 12, 2021 at 3:04 pm #1293955Thank you, Nikko!
Iconbox works great, no issues. For “Iconlist”– following your instructions added an “aria-label” element in the Developer settings, which is great, but, it still leaves me with the same issue that occurred with the Post Slider– adding the aria-label to the Icon List element did not satisfy the Accessibility issue, because the Icon List is displaying <article>s and screen readers are looking for the <article> to have an aria label. How do I label the items in the Icon List (<article>s in the Icon list with aria-labels?
For the “Bog Post” element, under “Styling” I have set up: (this page: https://www.lle.rochester.edu/index.php/homepage/past-quick-shots/)
Blog Grid Columns: 4
Preview Image Size: Choose the preview image size manually
Select custom preview image size: Medium (300×300)Thank you!
April 16, 2021 at 5:37 am #1294680Hi lle-it,
You’re welcome and I apologize for the delayed response.
Please replace the content for wp-content > themes > enfold > config-templatebuilder > avia-shortcodes > iconlist > iconlist.php with this code: https://pastebin.com/ttcyF03t
Go to each list item, then scroll below List Item Icon you should find Aria Label Text where you can place your aria label.
I’ll follow up on the post slider issue.Best regards,
Nikko -
AuthorPosts
- You must be logged in to reply to this topic.