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()"
@@ -23,20 +37,8 @@
   </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/radio/radio.html

@@ -10,17 +10,19 @@
          [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)">