Skip to content

Determining Features of APG Slider Updates

Jump to bottom
Jon Gunderson edited this page Feb 2, 2021 · 3 revisions

APG Focus Group Meeting

Participants

  • Carolyn MacLeod, IBM
  • Patrick Lauke, Pacellio Group
  • Jon Gunderson, U. of Illinois

Date and Time

  • Monday, 1 February 2021
  • 10:00am Central Time (USA)

Update Slider Examples

Updated Slider Pull Requests and Discussion

Slider Update Design Issues

Touch support

  • Special warning labels in examples
  • Include touch issues in APG design pattern for slider and spin buttons
  • Remove slider examples that include additional controls (e.g. buttons or text input) to change value of ARIA slider in mobile apps
  • HTML example using range control with styling (e.g. current best practice)
    • Using the aria-valuetext
    • High contrast support using range
    • Option to use hidden range control

High contrast mode

  • Use of inline SVG images
  • Use of currentColor property
  • Rects and circles
  • Text value is next to the thumb

SVG Issues

  • Leave ARIA on SVG elements
  • Using aria-hidden on remaining SVG elements
  • Test with voice over macOS, iPadOS and iOS

Default slider rendering

  • Use of borders for rail
  • Thumb solid color
  • Size and shape of thumbs

Focus styling

  • Focus border around thumb
  • Focus border around entire slider

Use Pointer Events

Clone this wiki locally