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

Accessibility on survey

XMLWordPrintable

    • MOODLE_34_STABLE
    • MOODLE_33_STABLE, MOODLE_34_STABLE
    • MDL-61129-fix-accessibility-on-tables-mod_survey_MASTER
    • Hide

      Prerequisites:

      • Have a course in the platform

      Instructions:

      • Log in as admin
      • Go to the course
      • Create a survey activity with 'survey type' as 'COLLES (Preferred and Actual)'
      • Inspect html structure of the page 
      • Search the tables 'Relevance', 'Reflective thinking', 'Interactivity', 'Tutor support', 'Peer support' and 'Interpretation'.

      Expected: All these tables should have <colgroup colspan="7"></colgroup> attribute before their tbody. Also, the th element that contains 'In this online unit ...'  should have a scope of 'colgroup' and not of 'col'.

       

      Show
      Prerequisites: Have a course in the platform Instructions: Log in as admin Go to the course Create a survey activity with 'survey type' as 'COLLES (Preferred and Actual)' Inspect html structure of the page  Search the tables 'Relevance', 'Reflective thinking', 'Interactivity', 'Tutor support', 'Peer support' and 'Interpretation'. Expected:  All these tables should have <colgroup colspan="7"></colgroup> attribute before their tbody. Also, the th element that contains 'In this online unit ...'  should have a scope of 'colgroup' and not of 'col'.  

      According to an audit made over Accessibility, violations exist over survey as follows:

      Affected modules: Survey Example

      • Ensure keyboard focus is indicated visually

      There is no indication of keyboard focus for each set of radio buttons. This can cause confusion for keyboard only users as they try to complete the survey, and are unsure which question/set of radio buttons keyboard focus is set to.

      Providing a visual indication of focus ensures that keyboard only users whom view the screen can determine exactly what action will occur based on what element has focus. This is particularly important for keyboard only users, as they cannot simply click to place focus or activate an element.

      Developers should ensure that well-defined visual indication of keyboard focus is provided for all actionable elements on a page.

      • Ensure headers and cells are properly associated

      The "In this online unit" column header, which spans multiple columns, is only given a scope attribute of "col" which states that it only spans one column. This is technically incorrect and can result in undefined behavior for screen-reader users.
      Every data cell in a complex data table must be properly associated with the column and row header cells that label it.

       
      <th scope="col" colspan="7">
      In this online unit...
      </th>

      • Revise the scope attribute to refer to "colgroup"
      • Add a <colgroup colspan="7"></colgroup> element just after the opening of the <table> element.

       
      <table class="surveytable" id="..." width="90%" cellspacing="1" cellpadding="4" border="0">
      <tbody>
      <colgroup colspan="7"></colgroup>
      <tr class="smalltext">
      <th scope="row">Responses</th>
      <th scope="col" class="hresponse">Not yet answered</th>
      ...
      </tr>
      <tr>
      <th scope="colgroup" colspan="7">In this online unit...</th>
      </tr>
      ...
      </table>

       

            guillalva06 Guillermo Leon Alvarez Salamanca
            rbecerrarodriguez Rafael Becerra
            Luca Bösch Luca Bösch
            David Monllaó David Monllaó
            Janelle Barcega Janelle Barcega
            Votes:
            2 Vote for this issue
            Watchers:
            5 Start watching this issue

              Created:
              Updated:
              Resolved:

                Estimated:
                Original Estimate - 0 minutes
                0m
                Remaining:
                Remaining Estimate - 0 minutes
                0m
                Logged:
                Time Spent - 1 hour
                1h

                  Error rendering 'clockify-timesheets-time-tracking-reports:timer-sidebar'. Please contact your Jira administrators.