Uploaded image for project: 'Fluid Infusion'
  1. Fluid Infusion
  2. FLUID-5994

Keyboard accessibility demo has errors in its use of aria-selected and role=listitem

    XMLWordPrintable

Details

    • Bug
    • Status: Closed
    • Blocker
    • Resolution: Fixed
    • None
    • 2.0
    • None
    • Chrome 53.0.2785.143 m (Windows 10)

    Description

      http://build.fluidproject.org/infusion/demos/keyboard-a11y/
      Ran the demo through the new validator (https://validator.w3.org/nu/) and a couple types of issues were shown.

      Error: Attribute aria-selected not allowed on element img at this point.
      From line 99, column 21; to line 99, column 214
      <li><img class="demo-image-thumbImg selectable" src="images/RedApple.jpg" alt="red apple" id="fluid-id-44w2berk-42" aria-selected="false" role="listitem" aria-controls="image-preview" tabindex="-1"></li>↩
      Attributes for element img:
      Global attributes
      alt - Replacement text for use when images are not available
      src - Address of the resource
      srcset - Images to use in different situations (e.g., high-resolution displays, small monitors, etc)
      sizes - Image sizes between breakpoints
      crossorigin - How the element handles crossorigin requests
      usemap - Name of image map to use
      ismap - Whether the image is a server-side image map
      width - Horizontal dimension
      height - Vertical dimension
      longdesc - A url that provides a link to an expanded description of the image, defined in [html-longdesc]

      Error: An element with role=listitem must be contained in, or owned by, an element with role=list or role=group.
      From line 97, column 21; to line 97, column 217
      <li><img class="demo-image-thumbImg selectable" src="images/Mangosteen.jpg" alt="mangosteen" id="fluid-id-44w2berk-40" aria-selected="false" role="listitem" aria-controls="image-preview" tabindex="-1"></li>↩

      Attachments

        Issue Links

          Activity

            People

              aharnum Alan Harnum
              David123 David
              Votes:
              0 Vote for this issue
              Watchers:
              3 Start watching this issue

              Dates

                Created:
                Updated:
                Resolved: