User:Eeggert/Tutorials/SlidersAlt

From Education & Outreach

Part of New Tutorials work

Approach for an ARIA Gateway Tutorial with Slider Example

  • A conceptual introduction to ARIA, emphasizing the interoperability benefits of accurate, consistent, and up-to-date ARIA implementation, and with slider example(s) from WAI Authoring Practices, as well as a brief overview of other topics in the ARIA Authoring Guide.
  • Use this to bridge from WAI Tutorials to related tutorial-like material including code samples in in ARIA Authoring Practices
  • Technical review would be requested by ARIA WG and/or ARIA Authoring Practices Task Force

Eric: What is the purpose of the tutorial? Is it just an intro to ARIA, like the ARIA Authoring Practices, but written differently and reduced to one example (that is very simple)? I have a feeling that most of this should be covered by https://www.w3.org/WAI/intro/aria.php – which is too wordy and not very actionable – and the Authoring Practices Guide.

Status

  • This is a draft outline, subject to change, currently getting early review by EOWG. Input welcome.

Tutorial Overview: Slider tutorial

Eric: I propose reducing this tutorial to just sliders – there are some interesting aspects. The grand scheme of things information should go to the intro page or to a ARIA for developers overview page.

Sliders Concepts

  • What are sliders?
  • Why are they important?

Sliders Structure

  • HTML5 Slider
  • Custom Slider

Slider functionality

  • For the custom slider

Slider styling

  • Any best practices?

Inline comments on previous outline

WAI-ARIA Concepts and Development Example Outline

  • ARIA Concepts
    • What is ARIA: framework for identifying interactive features
    • ARIA Capabilities
    • ARIA Roles, States and Properties
    • Eric: Too basic/fundamental for a tutorial. People want actionable advice from the tutorial.
    • Introduction to WAI-ARIA Authoring Practices resource
      • Keyboard, Accordian, Alert, Breadcrumb, Checkbox, Combo Box, etc
    • How ARIA relates to WCAG 2.0
      • Eric: We try to make the tutorials independent from specific technical specification, with an holistic approach. I’m uneasy compartmentalizing ARIA this way.
  • Why this is Important
    • Making dynamic and interactive web content accessible
    • Important of consistent and accurate coding
    • Applicable to mobile as well as desktop
  • Related resources

WCAG 2.0 Using ARIA for development: Slider Examples from Authoring Practices

  • Why use ARIA for Sliders
  • Analysis of design tasks
  • Applying ARIA concepts
  • Using existing samples
  • Customizing sample code
  • Building from scratch

Eric: That sounds like a tutorial right there - use existing examples (vendor neutrality) and customizing sample code – if you know how to build from scratch, you’ll likely also know how to make changes in an accessible way.

Decision tree: selecting ARIA development resources

  • (Evaluate whether this page is necessary)
  • Techniques @@@@
  • Authoring practices @@@@
  • UI Components Library @@@@
  • Contributing ARIA development resources

Tips and tricks for ARIA development

  • (Evaluate whether this page is necessary)

Notes and Issues

  • Map to gaps in ARIA support space and avoid redundancy

Eric: I don’t think we have reliable support information. Also I’d like to avoid any timely information that could change with the next browser update, making our resources outdated quickly.

Change log

  • Added approach, status, notes & issues, change log

Support

Retrieved from "https://www.w3.org/WAI/EO/wiki/index.php?title=User:Eeggert/Tutorials/SlidersAlt&oldid=18986"