Add titles and labels to HTML tables #792
Conversation
| @@ -18,8 +18,8 @@ | |||
|
|
|||
| <h2 id="@LocalizedStrings.CompatibilityPageTitle" tabindex="0">@LocalizedStrings.CompatibilityPageTitle</h2> | |||
| <div id="summary-compat-byassembly"> | |||
| <h3 class="compat-subheader">@LocalizedStrings.PerAssemblyOverview</h3> | |||
| <table> | |||
| <h3 class="compat-subheader" id="compat-byassembly-subheader">@LocalizedStrings.PerAssemblyOverview</h3> | |||
There was a problem hiding this comment.
With this change, will @LocalizedStrings.PerAssemblyOverview be read two times, one as h3 and one as table. Also per https://www.accessibility-developer-guide.com/examples/sensible-aria-usage/label-labelledby/, aria-label and aria-labelledby has some undesirable side effects. What if remove
, and add caption with @LocalizedStrings.PerAssemblyOverview as value to the table?
There was a problem hiding this comment.
<caption> works but Narrator reads it twice in Edge, once in Firefox. I agree it's preferable semantically, so I'll push a commit labeling the tables with <caption>.
src/lib/Microsoft.Fx.Portability.Reports.Html/Views/_BreakingChangesReport.cshtml
Outdated
Show resolved
Hide resolved
src/lib/Microsoft.Fx.Portability.Reports.Html/Views/_PortabilityReport.cshtml
Outdated
Show resolved
Hide resolved
| @@ -114,7 +114,7 @@ | |||
| var usedUnresolvedAssembly = Model.GetUnresolvedAssemblies(assembly); | |||
| if (usedUnresolvedAssembly.Count > 0) | |||
| { | |||
| <table> | |||
| <table aria-labelledby="@assembly.SourceAssembly"> | |||
There was a problem hiding this comment.
Looks like this table is for missing assemblies. What if instead of adding aria-labelledby="@assembly.SourceAssembly", adding a caption with value of @LocalizedStrings.MissingAssemblies? Certainly, that could seems duplicated with the table header of LocalizedStrings.MissingAssemblies .
This gives each table in the HTML report a title or aria label, so screen readers have a name to announce them by.