Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Seeing many blank aria-labelledby attributes in BASE #108

Closed
terracoda opened this issue Jun 11, 2018 · 6 comments
Closed

Seeing many blank aria-labelledby attributes in BASE #108

terracoda opened this issue Jun 11, 2018 · 6 comments
Assignees

Comments

@terracoda
Copy link
Contributor

@jessegreenberg, @zepumph, @mbarlow12, I am seeing blank aria-labelledby="" attributes on all elements in BASE. I'm not sure why these attributes have appeared en masse.

Are you guys working on something?
Is something in transition?
Perhaps, there is an open issue in another repo about this?

@terracoda
Copy link
Contributor Author

Screen shot from BASE on Master
screen shot 2018-06-11 at 10 30 08 am

@terracoda
Copy link
Contributor Author

Has anyone checked to see if null strings are allowed (valid code) for aria-labelledby?

@jessegreenberg
Copy link
Contributor

Hmm probably caused by changes in phetsims/scenery#701

@jessegreenberg
Copy link
Contributor

Thanks for catching this @terracoda, should be fixed in the above commit, those blank aria-labelledby attributes have been removed.

@terracoda
Copy link
Contributor Author

I am totally not up to speed on what you guys are implementing, but I am wondering if you considered options for creating an accessible name? Perhaps this is too high-level.

  • option 1: inner text of element, e.g.,
<button>My Button's Name</button>
  • option 2: using for attribute on a label element to associate an html label with html control element, e.g.,
<input id="radiobuttonIDREF" type="radio"><label for="radiobuttonIDREF">My Radio Button's Name</label>
  • option 3: using aria-label attribute to label an html element that does not have inner text, or label or other way to provide an accessible name, e.g.,
<input id="checkboxIDREF" type="checkbox" aria-label="My Checkbox's Name">
  • option 4: using aria-labelledby attribute to label an html element that can be associated with an element in the PDOM, like a heading element that would provide the elements name inner text, e.g.,
<section id="sectionIDREF" aria-labelledby="headingIDREF">
<h2 id="headingIDREF">My Section's Name</h2>
....
</section> 

Of course, examples are simplified, and I am not trying to imply an order of priority with these options. There may be diverse reasons (interaction preferences, pedagogical reasons, technical reasons, visual design) on which naming option to choose.

@terracoda terracoda reopened this Jun 11, 2018
@terracoda
Copy link
Contributor Author

Thanks @jessegreenberg, I'll close again as the issue has been resolved, but leave my comment.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

4 participants