Improve Management screen-reader accessibility. #11601

cjcenizal · 2017-05-04T17:13:56Z

Partially addresses #11520. Extracts some work from #11548.

Improve description of image generated by an Image URL scripted field.
Remove unnecessary title attribute from Create Index Pattern ISO week date link.
Add aria-label for Edit Index Pattern tabs.
Add aria-label for Edit Saved Objects tabs.

- Improve description of image generated by an Image URL scripted field. - Remove unnecessary title attribute from Create Index Pattern ISO week date link. - Add aria-label for Edit Index Pattern tabs. - Add aria-label for Edit Saved Objects tabs.

cjcenizal · 2017-05-04T18:10:13Z

...ins/kibana/public/management/sections/indices/create_index_pattern/create_index_pattern.html

@@ -76,7 +76,6 @@
                  class="kuiLink"
                  href="https://en.wikipedia.org/wiki/ISO_week_date"
                  target="_blank"
-                  title="Wikipedia: ISO Week Date"


We should never use title, and this element contains text so it's already accessible.

Out of curiosity: why is using title bad? Not as part of this PR but it might be good to include this guideline (with rationale) in our HTML style guide.

Never mind, I found your link in the issue for this PR: https://www.paciellogroup.com/blog/2012/01/html5-accessibility-chops-title-attribute-use-and-abuse/. I'm do think we should add this guideline to our HTML style guide (as part of a separate PR, if you prefer).

I noticed that the article is from January 2012, over 5 years ago. The main reason it suggests not using title is that not all browsers support it. I checked https://caniuse.com/#search=title and that seems to no longer be the case. Thoughts?

Never mind (again!) 😛. I misunderstood the article (and the W3C recommendation it links to). It's not so much that browsers don't support title, it's that its not very friendly on devices that don't have a keyboard or mouse (screenreaders, etc.). +1 for not using it and documenting it in our HTML style guide.

Haha ok I'll open a PR. Thanks man.

cjcenizal · 2017-05-04T18:10:42Z

...plugins/kibana/public/management/sections/indices/edit_index_pattern/edit_index_pattern.html

-          <span data-test-subj="tab-count-{{ editSection.index }}">
+          <span
+            data-test-subj="tab-count-{{ editSection.index }}"
+            aria-label="{{:: editSection.count + ' ' + editSection.title}}"


I tried to make this label a little more informative by including both the count and the title.

Silly question, but how do I get the aria-label to display?

It's only accessible to screen-readers, so you'll have to use a screen reader to read it aloud to you. I'm on OS X so I'm just using the Voice Over app which ships with it. I think for Windows, NVDA is really popular (and it's free). Here's a guide on how to use it.

cjcenizal · 2017-05-04T18:11:33Z

src/core_plugins/kibana/public/management/sections/objects/_objects.html

          ng-click="changeTab(service)"
        >
          {{ service.title }}
-          <small>
-          ({{service.data.length}}<span ng-show="service.total > service.data.length"> of {{service.total}}</span>)
+          <small aria-label="{{:: service.data.length + ' of ' + service.total + ' ' + service.title }}">


To make this fully make sense, I combined the visible number of services, the total, and the kind of service.

cjcenizal · 2017-05-04T18:13:19Z

src/ui/public/stringify/types/url.js

@@ -93,7 +93,7 @@ export function stringifyUrl(Private) {

      switch (this.param('type')) {
        case 'img':
-          return '<img src="' + url + '" alt="' + label + '" title="' + label + '">';
+          return `<img src="${url}" alt="A dynamically-specified image located at ${label}">`;


The original title was just the URL, which doesn't describe the image contents at all. Unfortunately, because this image is dynamically defined and AFAIK we don't support description metadata, the best we can do is to just tell screen readers about where this image came from.

alt="A dynamically-specified image located at ${label}"

Are you sure label is the field that you want to display here? If I add a field formatter to the field, and specify a label, then all of the alt values are going to be identical. Did you want this to be url?

Good catch! Thanks man.

ycombinator

LGTM

BigFunger · 2017-05-09T14:57:16Z

src/ui/public/stringify/types/url.js

@@ -93,7 +93,7 @@ export function stringifyUrl(Private) {

      switch (this.param('type')) {
        case 'img':
-          return '<img src="' + url + '" alt="' + label + '" title="' + label + '">';
+          return `<img src="${url}" alt="A dynamically-specified image located at ${label}">`;


alt="A dynamically-specified image located at ${label}"

Are you sure label is the field that you want to display here? If I add a field formatter to the field, and specify a label, then all of the alt values are going to be identical. Did you want this to be url?

cjcenizal · 2017-05-09T16:18:08Z

@BigFunger Could you take another look and let me know if this makes sense?

BigFunger · 2017-05-10T15:16:04Z

LGTM

* Improve Management screen-reader accessibility: - Improve description of image generated by an Image URL scripted field. Allow formatted label to be presented in lieu of default alt attribute. - Remove unnecessary title attribute from Create Index Pattern ISO week date link. - Add aria-label for Edit Index Pattern tabs. - Add aria-label for Edit Saved Objects tabs.

cjcenizal commented May 4, 2017

View reviewed changes

cjcenizal requested review from ycombinator and BigFunger May 4, 2017 18:13

cjcenizal added Team:Platform-Design Team Label for Kibana Design Team. Support the Analyze group of plugins. :Management v5.5.0 v6.0.0 labels May 4, 2017

ycombinator approved these changes May 6, 2017

View reviewed changes

cjcenizal mentioned this pull request May 8, 2017

Add title and tooltip accessibility information to HTML style guide. #11655

Merged

BigFunger suggested changes May 9, 2017

View reviewed changes

Allow formatted label to be presented in lieu of default alt attribute.

f8da8b1

BigFunger approved these changes May 10, 2017

View reviewed changes

cjcenizal merged commit e64ae62 into elastic:master May 10, 2017

cjcenizal deleted the 11520/improvement/management-screen-reader-accessibility branch May 10, 2017 15:23

cjcenizal mentioned this pull request May 10, 2017

[5.x] Improve Management screen-reader accessibility. (#11601) #11696

Merged

cjcenizal added the Project:Accessibility label May 22, 2017

jimgoodwin added the release_note:enhancement label Jun 26, 2017

snyk-bot mentioned this pull request Dec 29, 2020

[Snyk] Security upgrade webpack from 4.44.2 to 5.0.0 larrycameron80/kibana#66

Open

larrycameron80 mentioned this pull request Mar 15, 2021

[Snyk] Security upgrade webpack from 4.46.0 to 5.0.0 larrycameron80/kibana#75

Open

larrycameron80 mentioned this pull request Nov 4, 2022

[Snyk] Security upgrade webpack from 4.46.0 to 5.0.0 larrycameron80/kibana#141

Open

82ndAirborneDiv mentioned this pull request Nov 5, 2022

[Snyk] Fix for 1 vulnerabilities 82ndAirborneDiv/kibana#34

Open

xhad mentioned this pull request Nov 5, 2022

[Snyk] Fix for 1 vulnerabilities xhad/scc#73

Open

xhad mentioned this pull request Dec 25, 2022

[Snyk] Fix for 1 vulnerabilities xhad/scc#75

Open

larrycameron80 mentioned this pull request Dec 25, 2022

[Snyk] Security upgrade webpack from 4.46.0 to 5.0.0 larrycameron80/kibana#149

Open

82ndAirborneDiv mentioned this pull request Dec 26, 2022

[Snyk] Fix for 1 vulnerabilities 82ndAirborneDiv/kibana#36

Open

larrycameron80 mentioned this pull request Jan 10, 2023

[Snyk] Fix for 1 vulnerabilities larrycameron80/kibana#152

Open

82ndAirborneDiv mentioned this pull request Nov 28, 2023

[Snyk] Fix for 9 vulnerabilities 82ndAirborneDiv/kibana#41

Open

xhad mentioned this pull request May 13, 2024

[Snyk] Fix for 2 vulnerabilities xhad/scc#85

Open

82ndAirborneDiv mentioned this pull request May 14, 2024

[Snyk] Fix for 2 vulnerabilities 82ndAirborneDiv/kibana#47

Open

larrycameron80 mentioned this pull request May 14, 2024

[Snyk] Security upgrade webpack from 4.47.0 to 5.0.0 larrycameron80/kibana#208

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Improve Management screen-reader accessibility. #11601

Improve Management screen-reader accessibility. #11601

cjcenizal commented May 4, 2017

cjcenizal May 4, 2017

ycombinator May 6, 2017

ycombinator May 6, 2017

ycombinator May 6, 2017

ycombinator May 6, 2017

cjcenizal May 8, 2017

cjcenizal May 4, 2017

BigFunger May 9, 2017

cjcenizal May 9, 2017

cjcenizal May 4, 2017

cjcenizal May 4, 2017

BigFunger May 9, 2017

cjcenizal May 9, 2017

ycombinator left a comment

BigFunger May 9, 2017

cjcenizal commented May 9, 2017

BigFunger commented May 10, 2017

Improve Management screen-reader accessibility. #11601

Improve Management screen-reader accessibility. #11601

Conversation

cjcenizal commented May 4, 2017

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

ycombinator left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

cjcenizal commented May 9, 2017

BigFunger commented May 10, 2017