Uploaded image for project: 'Moodle'
  1. Moodle
  2. MDL-60168

content order issue theme related



    • Improvement
    • Status: Open
    • Minor
    • Resolution: Unresolved
    • 3.3.2
    • None
    • Accessibility, Themes
    • None


      I've seen an html order error similar to MDL-17730 :

      On the frontpage of your moodle platform, using the bootstrapbase theme (or a chlid using the same layout files), use the <tab> key of your keyboard and look at the focus order.

      The content in the middle of the page will be selected before the blocks that are in the left zone of the page.

      This is an accessibility related issue. If I understood well, the screen readers are sensible to the order of the html in a page; and in this case since we read from left to right, the blocks should be selected before the main content.

      The fix for it is quite simple :

      diff --git a/theme/bootstrapbase/layout/columns2.php b/theme/bootstrapbase/layout/columns2.php
      index 577dcbd..4243b40 100644
      --- a/theme/bootstrapbase/layout/columns2.php
      +++ b/theme/bootstrapbase/layout/columns2.php
      @@ -60,6 +60,7 @@ echo $OUTPUT->doctype() ?>
       <div id="page" class="container-fluid">
           <?php echo $OUTPUT->full_header(); ?>
           <div id="page-content" class="row-fluid">
      +       <?php echo $OUTPUT->blocks('side-pre', $sidepre); ?>
               <section id="region-main" class="<?php echo $regionmain; ?>">
                   echo $OUTPUT->course_content_header();
      @@ -67,7 +68,6 @@ echo $OUTPUT->doctype() ?>
                   echo $OUTPUT->course_content_footer();
      -        <?php echo $OUTPUT->blocks('side-pre', $sidepre); ?>
           <footer id="page-footer">

      I guess there is also the possibility to improve that code using the right_to_left() function that checks what the users should be able to focus first.

      This fix is located on the file layout/columns2.php, but the idea may be used elsewhere to improve screen reader's readability.

      (During the testing time of this issue creation, I've also seen that the nav.navbar-inner have a strange focus order, but I don't have the fix right now -> it will be for another issue)

      Was the focus order designed that way ?

      Have a nice day,




            Unassigned Unassigned
            tazoeur Guillaume Latour
            Huong Nguyen, Bas Brands, Mathew May
            0 Vote for this issue
            2 Start watching this issue