docs(a11y): add a list of supported screen readers

- add screen reader field to issue template - update browser support table - update README.md - require AngularJS 1.7.2+ - remove out of date http://browserl.ist link and image since their site is down - link to screen reader support section on docs site - update docs site screenshot - add missing step to install Gulp v3 globally - update versions in examples to use 1.2.0 Fixes angular#11449
Akxe · Sep 14, 2020 · 8ce0813 · 8ce0813
1 parent f43ff63
commit 8ce0813
Show file tree

Hide file tree

Showing 3 changed files with 99 additions and 31 deletions.
diff --git a/.github/ISSUE_TEMPLATE.md b/.github/ISSUE_TEMPLATE.md
@@ -14,7 +14,7 @@ Please submit Angular Material and CDK questions
 [here](https://groups.google.com/forum/#!forum/angular-material2)
 and issues [here](https://github.com/angular/components/issues).
 -->
-## Bug, enhancement request, or proposal
+## Bug, Enhancement Request, or Proposal
 
 <!-- Please note that we are not accepting major feature requests, i.e. requests for new components, at this time. -->
 
@@ -45,6 +45,7 @@ and issues [here](https://github.com/angular/components/issues).
 - AngularJS Material: 1.
 - OS: 
 - Browsers: 
+- Screen Readers: 
 
 ### Add anything else we should know
 

diff --git a/README.md b/README.md
@@ -28,20 +28,20 @@ Quick Links:
 *  [Installing](#installing)
 
 
-Please note that using AngularJS Material requires the use of **[AngularJS](https://angularjs.org/)
-1.4.x** or higher.
+Please note that using the latest version of AngularJS Material requires the use of
+**[AngularJS](https://angularjs.org/) 1.7.2** or higher.
 
-AngularJS Material is targeted for the browser versions defined in the `browserslist` field
-of our [package.json](package.json). Below is a screenshot from 
-[browserl.ist](http://browserl.ist/?q=%3E+0.5%25%2C+last+2+versions%2C+Firefox+ESR%2C+not+ie+%3C%3D+10%2C+not+ie_mob+%3C%3D+10%2C+not+bb+%3C%3D+10%2C+not+op_mob+%3C%3D+12.1)
-that provides a visual representation of this configuration:
+AngularJS Material supports the browser versions defined in the `browserslist` field
+of our [package.json](package.json). Find out more on our
+[docs site](https://material.angularjs.org/latest/#browser-support).
 
-![AngularJS Material Browser Support](https://user-images.githubusercontent.com/3506071/50240047-c7e00780-0391-11e9-9241-6674a412ce94.png)
+AngularJS Material supports the screen reader versions listed
+[here](https://material.angularjs.org/latest/#screen-reader-support).
 
 ## <a name="demos"></a> Online Documentation and Demos
 
 <div style="border: 1px solid #ccc">
-  <img src="https://user-images.githubusercontent.com/3506071/39335179-ef92562e-497f-11e8-9f27-e23dc3a868f9.png" alt="AngularJS Material docs website" style="display:block;">
+  <img src="https://user-images.githubusercontent.com/3506071/93010488-11578980-f55b-11ea-9ea3-c4a7bffd20b9.png" style="display:block;">
 </div><br>
 
 - Visit [material.angularjs.org](https://material.angularjs.org/) online to review the API, see the
@@ -73,8 +73,8 @@ The minor builds (1.1.0, 1.2.0, 1.3.0) can contain breaking changes to CSS, APIs
 Our formal release of `minor` builds is much less frequent. The release process for `minor` builds is currently
 being re-evaluated.
 
-> For the purposes of AngularJS Material, you *could* think of the patch releases as being *minor* changes
-and the 'minor' releases as being *major* changes according to semver.
+> For the purposes of AngularJS Material, you *could* think of the patch releases as being *minor* changes,
+  and the 'minor' releases as being *major* changes according to semver.
 
 ## <a name="contributing"></a> Contributing
 
@@ -95,7 +95,7 @@ It is important to note that for each release, the [ChangeLog](CHANGELOG.md) is
 itemize all:
 
 - Bug Fixes
-- New Features
+- New Enhancements
 - Breaking Changes
 
 ## <a name="building"></a> Building
@@ -108,6 +108,12 @@ First install or update your local project's **npm** dependencies:
 npm install
 ```
 
+Install Gulp v3 globally:
+
+```bash
+npm install -g gulp@3
+```
+
 Then run the **gulp** tasks:
 
 ```bash
@@ -148,23 +154,22 @@ npm install http://github.com/angular/bower-material#master --save
 #### Other Dependency Managers
 
 Visit our [distribution repository](https://github.com/angular/bower-material/blob/master/README.md)
-for more details on how to install and use the AngularJS Material distribution
-files within your local project.
+for more details on how to install and use the AngularJS Material distribution files within your local
+project.
 
 #### CDN
 
 CDN versions of AngularJS Material are available.
 
-With the Google CDN, you will not need to download local copies of the distribution files. Instead
+With the Google CDN, you will not need to download local copies of the distribution files. Instead,
 simply reference the CDN urls to easily use those remote library files. This is especially useful
-when using online tools such as [CodePen](http://codepen.io/), [Plunker](http://plnkr.co/), or
-[JSFiddle](http://jsfiddle.net/).
+when using online tools such as [CodePen](http://codepen.io/) or [Plunker](http://plnkr.co/).
 
 ```html
   <head>
 
-    <!-- AngularJS Material CSS now available via Google CDN; version 1.1.21 used here -->
-   <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.21/angular-material.min.css">
+    <!-- AngularJS Material CSS now available via Google CDN; version 1.2.0 used here -->
+   <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/1.2.0/angular-material.min.css">
 
   </head>
   <body>
@@ -175,8 +180,8 @@ when using online tools such as [CodePen](http://codepen.io/), [Plunker](http://
     <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.0/angular-aria.min.js"></script>
     <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.0/angular-messages.min.js"></script>
 
-    <!-- AngularJS Material Javascript now available via Google CDN; version 1.1.21 used here -->
-    <script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.22/angular-material.min.js"></script>
+    <!-- AngularJS Material Javascript now available via Google CDN; version 1.2.0 used here -->
+    <script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.2.0/angular-material.min.js"></script>
   </body>
 ```
 
@@ -204,7 +209,8 @@ pull directly from our [distribution repository](https://github.com/angular/bowe
   </body>
 ```
 
-Once you have all the necessary assets installed, add `ngMaterial` and `ngMessages` as dependencies for your app:
+Once you have all the necessary assets installed, add `ngMaterial` and `ngMessages` as dependencies for your
+app:
 
 ```javascript
 angular.module('myApp', ['ngMaterial', 'ngMessages']);

diff --git a/docs/app/partials/home.tmpl.html b/docs/app/partials/home.tmpl.html
@@ -130,42 +130,103 @@ <h3>The following table provides a more detailed view:</h3>
       </tr>
       <tr>
         <td>
-          Safari
+          Safari macOS & iOS
         </td>
         <td>
           12.x<br>13.x
         </td>
       </tr>
       <tr>
         <td>
-          iOS
+          Firefox for Android<br/>UC
         </td>
         <td>
-          12.x<br>13.x
+          latest version
         </td>
       </tr>
       <tr>
         <td>
-          Firefox for Android<br/>UC
+          Samsung Internet
         </td>
         <td>
-          latest version
+          12.x
         </td>
       </tr>
       <tr>
         <td>
-          Samsung Internet
+          Opera for Android
         </td>
         <td>
-          10.x
+          Mini all
         </td>
       </tr>
+      </tbody>
+    </table>
+
+    <h2 class="md-headline">Screen Reader Support</h2>
+    <p>
+      AngularJS Material is built based on the
+      <a href="https://www.w3.org/TR/wai-aria-1.0/" target="_blank" rel="noopener"> WAI-ARIA 1.0 W3C Recommendation</a>.
+    </p>
+    <h3>
+      AngularJS Material supports the following screen readers:
+    </h3>
+    <table class="custom-table">
+      <tbody>
+      <tr>
+        <th>
+          Screen Reader
+        </th>
+        <th>
+          Supported Versions
+        </th>
+      </tr>
       <tr>
         <td>
-          Opera for Android
+          NVDA
         </td>
         <td>
-          Mini all
+          2019.x<br>2020.x
+        </td>
+      </tr>
+      <tr>
+        <td>
+          JAWS
+        </td>
+        <td>
+          2019.x<br>2020.x
+        </td>
+      </tr>
+      <tr>
+        <td>
+          Android Accessibility Suite
+        </td>
+        <td>
+          8.1.x<br>8.2.x
+        </td>
+      </tr>
+      <tr>
+        <td>
+          VoiceOver macOS
+        </td>
+        <td>
+          Mojave<br>Catalina
+        </td>
+      </tr>
+      <tr>
+        <td>
+          VoiceOver iOS
+        </td>
+        <td>
+          12.x<br>13.x
+        </td>
+      </tr>
+      <tr>
+        <td>
+          ChromeVox on Chrome OS
+        </td>
+        <td>
+          last 2 versions
         </td>
       </tr>
       </tbody>