WordPress.org

Ready to get started?Download WordPress

Forums

Link Library
Accessible AJAX links display (7 posts)

  1. kReEsTaL
    Member
    Posted 2 years ago #

    Hi Jack !

    Thanks a lot for your plugin which I use on two of my websites. So far I'm pretty satisfied with the whole thing, it's working great !

    However I have an important suggestion to do : would it be possible to make the AJAX display accessible ?

    At the moment, when I check the AJAX option on, all my link categories are supposed to appear on my Link page. But there is a display:none attached to the link lists, and the tab links are href containing only "#".

    Which is a problem because, the links do not link anywhere if Javascript is disabled, and because only the first link list is visible.

    I'd suggest :

    • Make real links with anchors : give an ID to each link list, and set the href of the tab links as anchors leading to the appropriate link list ;
    • Display ALL link lists by default : when Javascript is enabled, you only display the link list attached to the current tab.

    That would be a great improvement !

    Many thanks in advance for considering.

    Marie

    http://wordpress.org/extend/plugins/link-library/

  2. Yannick Lefebvre
    Member
    Plugin Author

    Posted 2 years ago #

    Hi Marie,

    The AJAX display is working fine on my live site using the latest version of Link Library:

    http://yannickcorner.nayanna.biz/freeware-database-ajax-version/

    Could you give me a link to a page where you are trying to enable AJAX mode so that I could see what is happening. I am not fully understanding from your description of the issue.

    The whole point of the AJAX mode is to only show one category at a time, so I am not sure why you are asking me to show all categories.

  3. kReEsTaL
    Member
    Posted 2 years ago #

    Hi !

    Thanks for your quick reply.

    Let's take a simple example : your website.

    1. Deactivate Javascript and reload the page.
    2. Click on any anchor link in #linktable
    3. Here you are : you cannot access to the related links.

    This problem is caused by 3 things :

    • You use onClick attributes, which is a bad thing because as soon as Javascript is turned off, they don't work anymore ;
    • The regular target of these links prints : http://yannickcorner.nayanna.biz/freeware-database-ajax-version/#, however the hash doesn't rely on any active and valid anchor in your HTML document.
    • Each link list (.linklisttable) is hidden by default except the first one.

    All of these elements block your plugin's accessibilty.

    Fixing this is quite easy :)

    1. Make your plugin work without Javascript : it might sound stupid, but that's an important point in accessibility.
    2. Display *all* the links which the use chose to display on the page. Each link inside #linktable will have a *real* anchor, like this :
      <a onclick="showLinkCat('29', '3', 1);return false;" href="http://yannickcorner.nayanna.biz/freeware-database-ajax-version/#utility-links">Utilities</a>

      Note that after the hash, we tell the link to link to the #utility-links box, which we assume would contain all the links listed un der the Utilities category.

    3. When all this is working (pretty simple), just add your Javascript functions.

    Let me know if that's clearer, otherwise I'll send you an email in French :) I can help you to fix it, too.

  4. Yannick Lefebvre
    Member
    Plugin Author

    Posted 2 years ago #

    The AJAX mode is optional and is not the mode by default. If users want the safety of being sure that the page works even if visitors do not have javascript enabled, then they should not turn on that mode.

    Since the purpose of this specific mode is to render the page and be able to load in one category at a time without having to reload the whole page, I am not sure of the purpose of making the page work without javascript being enabled.

  5. kReEsTaL
    Member
    Posted 2 years ago #

    Yes, the AJAX mode is optional : however, there is no reason it shouldn't be accessible, too. Moreover when the required changes are small.

    Unobtrusive Javascript is considered as a best practice in the field of web development.

    Anyway, that's the difference that would make your great plugin a reference plugin :)

  6. Yannick Lefebvre
    Member
    Plugin Author

    Posted 2 years ago #

    I am finally getting time to loop back to this item. After re-reading through the thread, I am still not sure of the best solution. When you select to run your link library in AJAX mode, it only generates a single category at a time. it then performs an asynchronous query to load other categories dynamically. What you are saying about rendering all categories and jumping to them is essentially the way that Link Library works when you don't select the option to only show one category at a time.

    With the desire of only generating HTML content for one category at a time, do you know if there is way in PHP or HTML to provide two versions of the category selection items, so that one version could have the javascript calls and the other not have them?

    I saw that there is a <noscript> tag that exists to get content to display when javascript is disabled but the reverse script tab seems only to want to have javascript code in it, and not full HTML.

    Any ideas?

  7. kReEsTaL
    Member
    Posted 2 years ago #

    Hello Yannick,

    Thanks for looping back to this topic :-)

    I guess the simplest way is to show you some code.

    When I want to use AJAX to display the link categories and the links themselves without reloading the page, here is the generated code (you can see it here):

    <!-- Link Library Categories Output -->
    
    <SCRIPT LANGUAGE="JavaScript">
    var ajaxobject;
    function showLinkCat ( _incomingID, _settingsID, _pagenumber) {
    if (typeof(ajaxobject) != "undefined") { ajaxobject.abort(); }
    var map = {id : _incomingID, settings : _settingsID, linkresultpage: _pagenumber}
    	jQuery('#contentLoading').toggle();jQuery.get('http://www.lalunemauve.fr/wp-content/plugins/link-library/link-library-ajax.php', map, function(data){jQuery('#linklist1').replaceWith(data);jQuery('#contentLoading').toggle();});
    }
    </SCRIPT>
    
    <div id="linktable" class="linktable"><table width="100%">
    <tr>
    	<td><a href='#' onClick="showLinkCat('553', '1', 1);return false;" >Nos partenaires (3)</a>	</td>
    </tr>
    <tr>
    	<td><a href='#' onClick="showLinkCat('551', '1', 1);return false;" >Sites artistiques (2)</a>	</td>
    </tr>
    <tr>
    	<td><a href='#' onClick="showLinkCat('550', '1', 1);return false;" >Sites littéraires (2)</a>	</td>
    </tr>
    <tr>
    	<td><a href='#' onClick="showLinkCat('549', '1', 1);return false;" >Sites musicaux (1)</a>	</td>
    </tr>
    </table>
    </div>
    <div class='contentLoading' id='contentLoading' style='display: none;'><img src='http://www.lalunemauve.fr/wp-content/plugins/link-library/icons/Ajax-loader.gif' alt='Loading data, please wait...'></div>
    
    <!-- End of Link Library Categories Output -->
    
    <!-- Beginning of Link Library Output -->
    
    <div id='linklist1' class='linklist'>
    <div class='LinkLibraryCat553'><div class=""><div id="nos-partenaires"><div class="linklistcatname">Nos partenaires</div></div>
    	<ul>
    <li><a href="http://www.akiza.net/" id="link-9" class="track_this_link "  title="L'univers d'une petite poupée en noir et blanc.">Akiza</a>
    <a href="http://www.lalunemauve.fr/wp-admin/link.php?action=edit&link_id=9">(Éditer)</a></li>
    <li><a href="http://www.spleenarcana.com/" id="link-11" class="track_this_link "  title="Un musicien qui fait tout tout seul : jeu, enregistrement, mixage, promo…">Spleen Arcana</a>
    <a href="http://www.lalunemauve.fr/wp-admin/link.php?action=edit&link_id=11">(Éditer)</a></li>
    <li><a href="http://www.vampirisme.com/" id="link-12" class="track_this_link "  title="Webzine dédié à nos amis aux dents longues et au teint pâle.">Vampirisme</a>
    <a href="http://www.lalunemauve.fr/wp-admin/link.php?action=edit&link_id=12">(Éditer)</a></li>
    	</ul>
    </div></div><script type='text/javascript'>
    jQuery(document).ready(function()
    {
    jQuery('a.track_this_link').click(function() {
    linkid = this.id;
    linkid = linkid.substring(5);jQuery.post('http://www.lalunemauve.fr/wp-content/plugins/link-library/tracker.php', {id:linkid});
    return true;
    });
    });
    </script></div>
    
    <!-- End of Link Library Output -->

    If you disable Javascript in your browser, you cannot access to the link lists except to the featured one (#linklist1) which is already present on the page when it loads. You can try on my test page) : simply disable Javascript in your browser, and try clicking on the link category links. Nothing happens.

    I suggest that, instead of echoing href="#", you echo the real URL of the page where each link list will appear. This way :

    • If Javascript is on, the links are loaded on the same page with AJAX;
    • If Javascript is off, users and search engines can follow the links specified in each href of the #linktable element.

    Javascript should always be a UX enhancement, and shouldn't be a requisite for a webpage to work normally. Jeremy Keith, who you may have heard of, wrote a pretty simple and good article about this back in 2006 : Behavioral Separation. It will help you understand what I mean (because English isn't my mother tongue!).

    Which leads me to other problems I have with Link Library:

    1. You should call Link Library CSS and JS through the wp_enqueue_script and wp_enqueue_style WordPress hooks. Not only would it be cleaner and safer regarding WordPress performances, but this would allow anyone to manipulate them through functions.php files, for example. We don't all need Link Library CSS actually. In order to disable Link Library CSS, since it is not enqueued through the aforementioned hook, you have to comment the CSS call out from link-library/link-library.php. However it means you will have to do this everytime Link Library is updated… which is not very practical. It would be much easier if we could simply remove it through wp_deregister_style.
    2. Link Library creates a lot of HTML errors. You can see this on my test page validated by the W3C Validation service. These errors includes bad Javascript calls (replace <SCRIPT LANGUAGE="JavaScript"> by <script type="text/javascript">), image tags that are not correctly closed (any <img /> tag must be closed by the / symbol, at least in HTML Strict and XHTML), and onClick attributes should be removed because there are obsolete. You could replace onClick attribues by metadatas (in HTML5) or a cleaner Javascript output.
    3. The Dashboard genuinely works without Javascript. Amen to the WordPress team for that. However, on the Link Library admin panel, it is not possible to select differents libraries from the top dropdown menu on the wp-admin/admin.php?page=link-library-settingssets page. It's embarrassing because it's supposed to be just a form : a form must work with PHP and hasn't to rely on JS to work, otherwise it's really harmful to web accessibility.

    These are a few suggestions to improve Link Library's overall quality.

    Like I said, I really enjoy this plugin, which is complete and balances WordPress poor links functionality. You really did a great job! In my opinion, some of its weak points are very easy to correct (I can help!).

    I think Objective Best Practices for Plugin Development could be useful in this quest of upper quality for your plugin :-)

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic