[A11y] TFM table differentiate versions for screen readers (#9463)

NuGet · Apr 11, 2023 · 0efa986 · 0efa986
1 parent 1028137
commit 0efa986
Showing 1 changed file with 8 additions and 3 deletions.
diff --git a/src/NuGetGallery/Views/Packages/_SupportedFrameworksTable.cshtml b/src/NuGetGallery/Views/Packages/_SupportedFrameworksTable.cshtml
@@ -3,7 +3,10 @@
     <thead>
         <tr>
             <th scope="col" class="framework-table-title"><b>Product</b></th>
-            <th scope="col" class="framework-table-title"><b>Versions</b></th>
+            <th scope="col" class="framework-table-title">
+                <b aria-hidden="true" >Versions</b>
+                <span class="sr-only">Compatible and additional computed target framework versions.</span>
+            </th>
         </tr>
     </thead>
     <tbody>
@@ -21,11 +24,13 @@
                         {
                             if (frameworkVersion.IsComputed)
                             {
-                                <span class="framework-badge-computed framework-table-margin">@frameworkVersion.Framework.GetShortFolderName()</span>
+                                <span aria-hidden="true" class="framework-badge-computed framework-table-margin">@frameworkVersion.Framework.GetShortFolderName()</span>
+                                <span class="sr-only">@frameworkVersion.Framework.GetShortFolderName() was computed.&nbsp;</span>
                             }
                             else
                             {
-                                <span class="framework-badge-asset framework-table-margin">@frameworkVersion.Framework.GetShortFolderName()</span>
+                                <span aria-hidden="true" class="framework-badge-asset framework-table-margin">@frameworkVersion.Framework.GetShortFolderName()</span>
+                                <span class="sr-only">@frameworkVersion.Framework.GetShortFolderName() is compatible.&nbsp;</span>
                             }
                         }
                     </td>