Uploaded image for project: 'Sakai'
  1. Sakai
  2. SAK-21797

Accessibility: The "Type of Site" Heading on the Login Page Site Browser Tool is misleading to low-vison/ blind users. It should be changed into a legend for the radio button set.

    XMLWordPrintable

    Details

    • 2.9 Status:
      Resolved

      Description

      Although valid HTML, the "Type of Site" heading (level 4) should instead be a coded as legend for the radio control buttons set. This issue occurs on the search form page of the Login Page Site Browser Tool. No comparable heading level 4 differentiates the rest of the form that doesn't relate to the "Type of Site". This will mislead low-vision / blind users as to the purpose of some page content. Adding a fieldset and legend element would provide more context and information to users about the radio button set and help to differentiate it from the other form content.

      An example of a common radio button set:

      <h4>Type of Site:</h4>
      <div class="checkbox indnt1">
      <input id="siteType1" type="radio" value="course" name="siteType">
      <label style="text-transform: capitalize" for="siteType1">course</label>
      </div>
      <div class="indnt3">
      <label for="selectTerm">Academic Term:</label>
      <select id="selectTerm" name="selectTerm">
      </div>
      <div class="checkbox indnt1">
      <input id="siteType2" type="radio" value="project" name="siteType">
      <label style="text-transform: capitalize" for="siteType2">project</label>
      </div>
      <div class="checkbox indnt1">
      <input id="siteTypeAny" type="radio" checked="checked" value="Any" name="siteType">
      <label for="siteTypeAny">Any</label>
      </div>

      POSSIBLE SOLUTION:

      The fieldset/legend technique is well supported. The legend ties the label and radio button their "purpose" so that each option is understandable (e.g., "Type of Site: Course radio button not check"). Screen reading software accessible text also needs to be added to the "Academic Term" select element informing users that it is related to the "Course" radio button option.

      <fieldset>
      <legend>Type of Site:</legend>
      <div class="checkbox indnt1">
      <input id="siteType1" type="radio" value="course" name="siteType">
      <label style="text-transform: capitalize" for="siteType1">course</label>
      </div>
      <div class="indnt3">
      <label for="selectTerm">Academic Term<span class="skip"> for course</span>:</label>
      <select id="selectTerm" name="selectTerm">
      </div>
      <div class="checkbox indnt1">
      <input id="siteType2" type="radio" value="project" name="siteType">
      <label style="text-transform: capitalize" for="siteType2">project</label>
      </div>
      <div class="checkbox indnt1">
      <input id="siteTypeAny" type="radio" checked="checked" value="Any" name="siteType">
      <label for="siteTypeAny">Any</label>
      </div>
      </fieldset>

      CSS styles can be created to remove the fieldset border and to visually style the legend element.

        Gliffy Diagrams

          Zeplin

            Attachments

              Issue Links

                Activity

                  People

                  Assignee:
                  steve.swinsburg Steve Swinsburg
                  Reporter:
                  viatorvoice Joe Humbert
                  Votes:
                  0 Vote for this issue
                  Watchers:
                  3 Start watching this issue

                    Dates

                    Created:
                    Updated:
                    Resolved:

                      Git Integration