Slider example is missing an aria-label

[tinayuangao]

Bug, feature request, or proposal:

What is the expected behavior?

under slider link, each slider control should be labelled appropriately

What is the current behavior?

under slider link, each slider control is not labelled appropriately

What are the steps to reproduce?

1. Click on link 'Slider' 2. Navigate to red slider control and observe CVOX , VO & Jaws reads out as 'left right slider'. does not read the label for slider control as RED.

What is the use-case or motivation for changing an existing behavior?

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

Chromevox next (Chrome OS 62.0.3202.43 Official build dev 64 bit) , Voiceover (mac OS version: 10.12.6) , JAWS (18.0.4350)

Is there anything else we should know?

[mfairchild365]

What are the steps to reproduce?

1. Click on link 'Slider' 2. Navigate to red slider control and observe CVOX , VO & Jaws reads out as 'left > right slider'. does not read the label for slider control as RED.

Adding more details since I'm not exactly sure what "Click on link 'Slider' 2" is referencing.

The slider in the slider example showcases this issue and is missing a programmatic label.

The steps to reprodcue could be:

1. Using either of the following screen readers
   • NVDA 2018.4.1 + Firefox 64
   • VoiceOver for IOS (12.1.3) + Safari
2. Open the slider example
3. Navigate to the slider in the example.
   • In NVDA you can press the tab key until you reach the slider
   • In VoiceOver for iOS you can swipe right until you reach the slider
4. Observe that the purpose of the slider is not announced by the screen reader when the slider is focused.

Missing visual label

In the example, there is a heading right before the slider 'Result'. This could serve as a visual label for the slider, but does not describe the purpose of the control in a meaningful way. Therefore I consider the heading to be a heading and not a label for the control itself. It would be best for the example to showcase how a slider could have both a programatic and visual label.