Tagged: screen reader
-
AuthorPosts
-
October 14, 2018 at 3:52 pm #1021228
Hi,
I am working on a website with strict accessibility requirements and I believe there is no skip navigation button with the Enfold Theme? Can you confirm if there is an easy way to add this into the theme?
Thanks!
GarrettOctober 14, 2018 at 6:19 pm #1021254Hey ddandreo,
Sorry I had not heard of this term before so I read about it here from what I understand, you are looking to add a button that links to the main content, since the main content can begin with different Enfold elements depending if you are using a column or a color section, or if it’s a standard post using a text block, each page or post would or could be different.
But you could add a uniform ID to the content area for each page and the ID could be added manually to each page. The buttons could be created using shortcodes and added to each page.
Am I on the right track?
Do you know where you would want your button on each page, and what it would look like?
Would you like us to show you how to add these ID’s to your pages & posts?Best regards,
MikeOctober 25, 2018 at 3:46 pm #1026375i have added this but somehow, navigation still takes precedence.
any idea why?if you tab the skip navi appears and if you follow the link the next tab should be in content.
thanks,
COctober 25, 2018 at 5:20 pm #1026430I think adding a link to #main should skip the navigation?
October 25, 2018 at 6:39 pm #1026473Hi,
I did some more research and found this plugin have you tried this?Best regards,
MikeOctober 25, 2018 at 11:22 pm #1026589October 26, 2018 at 1:47 pm #1026786Hi,
#cezarneaga I thought you might find the plugin helpful,
It says:Enable skip links with WebKit support by adding JavaScript support to move keyboard focus.
How about something like this, add the ID “main_content” to the first element of content, such as after your slider.
Then try adding this code to the end of your functions.php file in Appearance > Editor:function custom_screen_reader_script(){ ?> <script> jQuery(window).load(function(){ jQuery( '<div><a href="#main_content" class="screen-reader-shortcut">Skip to main content</a></div>' ).insertBefore( '#top' ); }); </script> <?php } add_action('wp_footer', 'custom_screen_reader_script');
and add this code in the General Styling > Quick CSS field:
a:focus { color: white !important; background-color: red !important; text-decoration: none !important; }
The css will highlight each link as you tab though, and the injected link will be the second link on the page before the navigation menu. I was hoping to hide the link if it was not in keyboard focus with this css:
:NOT(a.screen-reader-shortcut:focus) { visibility: hidden !important; }
but it doesn’t work, perhaps it’s not needed?
Best regards,
MikeOctober 27, 2018 at 2:24 pm #1027021maybe i am thick :)
i already have the inserted as well as the css.
the problem is that after skipping to content the next tab still goes to header navi.October 27, 2018 at 3:46 pm #1027058Hi,
Sorry, your links in your post are not working for me, but I worked on this some more and finally got it working very good :)
Still add the ID “main_content” to the first element of content, such as after your slider on each page. To enable the custom ID and class for elements go to Enfold Theme Options > Layout Builder > Show element options for developers
Then use this function instead:function custom_screen_reader_script(){ ?> <script> jQuery(window).load(function(){ jQuery( '<div id="skipnav"><p class="skipnav"><a href="#main_content">Skip to Content (Press Enter)</a></p></div>' ).insertBefore( '#top' ); }); </script> <?php } add_action('wp_footer', 'custom_screen_reader_script');
and this css instead:
.skipnav {position: absolute; display: none; text-align: left; margin: 0; padding: 0} /*For all, including Opera. Display:none used to switch off the skip links for Opera users (it's redundant, Opera has excellent keyboard navigation)*/ * html .skipnav {display: block} /*Switch on for IE6 and below*/ *+html .skipnav {display: block} /*Switch on for IE7*/ :root .skipnav {display: block} /*Switch on for Moz, FF and Safari*/ .skipnav p {margin: 5px 0 0 0; padding: 0; position: absolute; font-size: 2em} .skipnav a {width: 26em; display:block; color: #fff; background: #333; text-decoration: none; padding: 5px; position: absolute; left: -1000em; top: 0; font-weight: bold} .skipnav a:visited {color: #fff} .skipnav a:focus, .skipnav a:active {z-index: 999; min-width: 250px; top: -.1em; left: 0; border: solid #777 2px; color: #fff; background: #333 !important} /*Note IE bug that requires use of :active to mimic effect of :focus*/ .skipnav a:hover {cursor: default}
expected results on the second press of the tab key, (WP admin menu has control of the first tab key press, if you are logged in)
adding some color to links that are in focus while tabbing might also be helpfula:focus { color: white !important; background-color: red !important; text-decoration: none !important; }
adjust to suit.
I tested this solution, and I was able to continue to tab down the page without ending up in the main menu.
Best regards,
MikeJune 22, 2020 at 4:00 pm #1224617I’m having the same issue. Did this ever get solved?
June 23, 2020 at 1:43 pm #1224869Hi,
I assume that the solution above worked because we didn’t get any feedback. I tested this again and it seems to work fine.
Please link to your page so we can see what you have so far.Best regards,
MikeJune 23, 2020 at 3:13 pm #1224891Mike,
I’ve included a link to the site in the private content area.This site is what I modeled the skip link setup after:
https://knowbility.org/blog/2019/skip-links/I’ve included the following link directly after the opening body tag:
<a href="#maincontent" class="jsf-button jsf-skip-link">Skip to main content</a>
I have CSS applied to hide the link until on focus (after tabbing from address bar).
I’ve tried different targets (the div, a dedicated anchor) and adding tabindex=’-1′ with no success.
June 24, 2020 at 12:32 pm #1225157Hi,
Thanks for the links, on your page you are targeting#maincontent
but this is an anchor before your main body, not a “DIV”. Try targeting#main
instead.Best regards,
MikeJune 24, 2020 at 2:59 pm #1225238Mike,
I targeted the DIV originally with no success. I set it back to target #main so you can see.
Mitch
June 25, 2020 at 1:42 pm #1225488Hi,
Please include an admin login so I can try to test somethings.
So I assume you want this it work on each page, but will your pages have a title and breadcrumbs container like your example page?
I ask because the title container is the first div inside of #main and the second div is typically #av_section_1 unless you manually change it, so using #av_section_1 should get you past the title and breadcrumbs container.
I’m also thinking that we could add focus to your script like this:$("#main").focus();
or$("#main>div").focus();
or perhaps add a tabindex as you talked about earlier.Best regards,
MikeJune 25, 2020 at 8:34 pm #1225651Hello,
Here is a good example of how it should behave without having to add any JavaScript:
https://www.davidmacd.com/test/skipnav-tabindex.htmlThe only way I can get the tab order correct is to do the following:
1) Target an anchor tag with a name attribute and tabindex set:
<a id="maincontent" name="maincontent" tabindex="-1"></a>
2) Add some jQuery (as suggested) to set the input focus, not just the visual focus.
$(document).ready(function () { $(".jsf-skip-link").click(function(){ $("#maincontent").focus(); }); });
Targeting the #av_section_1 div with the above did not work.
Where can I inject my anchor to have it below the breadcrumb section?Thank you.
Mitch
- This reply was modified 4 years, 3 months ago by Mitchell Adams.
June 27, 2020 at 1:42 pm #1226048June 27, 2020 at 3:29 pm #1226061Mike,
Thanks but that doesn’t really help. Is the markup in the functions-enfold.php file in the avia_title function?
Mitch
June 27, 2020 at 8:03 pm #1226110Hi,
Sorry, I am talking about this anchor link you are adding,<a id="maincontent" name="maincontent" tabindex="-1"></a>
I thought you were adding it with a script.
So I tested this script that adds the skip link, the skip anchor link, and sets the focus after the click:function custom_skip_link_script(){ ?> <script> (function ($) { $(document).ready(function () { $( '<div><a href="#skip2content" class="jsf-button jsf-skip-link">Skip 2 main content</a></div>' ).insertBefore( '#top' ); $('<a id="skip2content" name="maincontent" tabindex="-1"></a>').insertAfter( '.title_container' ); $(".jsf-skip-link").click(function(){ $("#skip2content").focus(); }); }); })(jQuery); </script> <?php } add_action('wp_footer', 'custom_skip_link_script');
I changed the ID just so there would not be a clash, try removing your other scripts and test this one.
With this, the next tab is going to the inline link in the content.Best regards,
MikeJune 27, 2020 at 11:12 pm #1226144Thank you Mike. I had to modify the header.php file anyway due to other non-accessible issues in the base enfold theme.
I just added the .insertAfter portion of the script to my existing script and will move on…
Thanks again.
Mitch
June 28, 2020 at 2:56 am #1226160Hi,
Glad we could help, unless there is anything else we can help with on this issue, shall we close this then?Best regards,
MikeJune 28, 2020 at 2:33 pm #1226214Mike,
There is a growing need to have a WCAG accessible base theme. If you could pass on the need for a skip link and this thread https://kriesi.at/support/topic/wcag-2-1-level-aa-and-landmarks/ to the developers, I would appreciate it. The base theme is already almost there. Just a handful of changes needed….
Yes. Please go ahead an close this thread.
Thanks again,
Mitch
June 28, 2020 at 6:09 pm #1226230Hi,
Glad we were able to help, and a feature request has been submitted, we will close this now. Thank you for using Enfold.For your information, you can take a look at Enfold documentation here
For any other questions or issues, feel free to start new threads in the Enfold forum and we will gladly try to help you :)Best regards,
Mike -
AuthorPosts
- The topic ‘Accessibility – Skip Navigation’ is closed to new replies.