use another way

Author: tinayuangao

src/lib/checkbox/checkbox.html

@@ -1,6 +1,20 @@
 <label [attr.for]="inputId" class="mat-checkbox-layout" #label>
   <div class="mat-checkbox-inner-container"
        [class.mat-checkbox-inner-container-no-side-margin]="!_hasLabel()">
+    <input #input
+           class="mat-checkbox-input cdk-visually-hidden" type="checkbox"
+           [id]="inputId"
+           [required]="required"
+           [checked]="checked"
+           [value]="value"
+           [disabled]="disabled"
+           [name]="name"
+           [tabIndex]="tabIndex"
+           [indeterminate]="indeterminate"
+           [attr.aria-label]="ariaLabel"
+           [attr.aria-labelledby]="ariaLabelledby"
+           (change)="_onInteractionEvent($event)"
+           (click)="_onInputClick($event)">
     <div md-ripple class="mat-checkbox-ripple"
          [mdRippleTrigger]="label"
          [mdRippleDisabled]="_isRippleDisabled()"
@@ -21,22 +35,9 @@
       <div class="mat-checkbox-mixedmark"></div>
     </div>
   </div>
-
   <span class="mat-checkbox-label" #labelWrapper>
+    <!-- Add an invisible span so JAWS can read the label -->
+    <span style="display:none">&nbsp;</span>
     <ng-content></ng-content>
   </span>
 </label>
-<input #input
-       class="mat-checkbox-input cdk-visually-hidden" type="checkbox"
-       [id]="inputId"
-       [required]="required"
-       [checked]="checked"
-       [value]="value"
-       [disabled]="disabled"
-       [name]="name"
-       [tabIndex]="tabIndex"
-       [indeterminate]="indeterminate"
-       [attr.aria-label]="ariaLabel"
-       [attr.aria-labelledby]="ariaLabelledby"
-       (change)="_onInteractionEvent($event)"
-       (click)="_onInputClick($event)">

src/lib/checkbox/checkbox.scss

@@ -418,6 +418,13 @@ $_mat-checkbox-mark-stroke-size: 2 / 15 * $mat-checkbox-size !default;
   }
 }
 
+.mat-checkbox-input {
+  // Move the input to the bottom and in the middle.
+  // Visual improvement to properly show browser popups when being required.
+  bottom: 0;
+  left: 50%;
+}
+
 .mat-checkbox-ripple {
   position: absolute;
   left: -$_mat-checkbox-ripple-size;

src/lib/radio/radio.html

@@ -10,17 +10,21 @@
          [mdRippleDisabled]="_isRippleDisabled()"
          [mdRippleCentered]="true"></div>
   </div>
+
+  <input #input class="mat-radio-input cdk-visually-hidden" type="radio"
+         [id]="inputId"
+         [checked]="checked"
+         [disabled]="disabled"
+         [name]="name"
+         [attr.aria-label]="ariaLabel"
+         [attr.aria-labelledby]="ariaLabelledby"
+         (change)="_onInputChange($event)"
+         (click)="_onInputClick($event)">
+
   <!-- The label content for radio control. -->
   <div class="mat-radio-label-content" [class.mat-radio-label-before]="labelPosition == 'before'">
+    <!-- Add an invisible span so JAWS can read the label -->
+    <span style="display:none">&nbsp;</span>
     <ng-content></ng-content>
   </div>
 </label>
-<input #input class="mat-radio-input cdk-visually-hidden" type="radio"
-       [id]="inputId"
-       [checked]="checked"
-       [disabled]="disabled"
-       [name]="name"
-       [attr.aria-label]="ariaLabel"
-       [attr.aria-labelledby]="ariaLabelledby"
-       (change)="_onInputChange($event)"
-       (click)="_onInputClick($event)">