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

[4.0] Assignment menu function not accessible to blind users #23911

Open
zwiastunsw opened this issue Feb 15, 2019 · 12 comments
Open

[4.0] Assignment menu function not accessible to blind users #23911

zwiastunsw opened this issue Feb 15, 2019 · 12 comments

Comments

@zwiastunsw
Copy link
Contributor

The user of the screen reader gets access to almost all implemented operating possibilities, but they are not understandable.

  1. The "Menu selection" label is not announced by the screen reader.

  2. A widget to select / expand menu tree is not accessible because
    a. Does not have an accessible name (headings or label)
    b. “Select” & “Expand” labels are not announced by the screen reader
    c. “All”, “None” options are links instead of buttons.
    d. “All link” & “None link” messages announced by the screen reader are incomprehensible to the blind person.
    select-expand_0
    select-expand

  3. The names of the menus in which the user is to select are not announced by the screen reader.
    image

  4. Aliases next to menu item names are unnecessary. They do not provide new information, but they cause information noise, confusion, etc.
    image

  5. Accessibility errors in the context menu:
    a. Nonconsecutive level heading used. The menu contains an <h5> tag directly following an <h3> (“Sub-items”). In order to maintain a consistent outline of the page for assistive technologies, reduce the gap in the heading level by upgrading this tag to an <h3> or <h2> or see paragraph b. below.
    image

b. The names of items in the context menu are unclear. They should rather be: “Select sub-items”, “Deselect sub-items”, “Expand sub-items”, “Collapse subitem”. In this case the heading H5 (Sub-items) is not needed.
c. When you select or deselect from the context menu, all items in the level are always selected, not just the selected item. Blind screen reader user does not see or hear it.
d. Icons next to the names of items in the context menu are unnecessary.

  1. Search field not accessible
    There is a search box on the Assignment Menu tab. The field does not have an accessible label. In addition, it is not keyboard focusable, because it has been excluded from the tabulation order using the tabindex="-1" attribute.
@zwiastunsw zwiastunsw changed the title [4.0][a11y] Assignement menu function not accessible to blind users [4.0][a11y] Assignment menu function not accessible to blind users Feb 15, 2019
@dgrammatiko
Copy link
Contributor

dgrammatiko commented Feb 16, 2019

@zwiastunsw if you can come up with an HTML markup I'll do the js part...

PS nevermind here is the correct HTML markup:

			<div class="card-header">
				<span class="small"><?php echo Text::_('JSELECT'); ?>:
					<button id="treeCheckAll" class="btn btn-link" type="button"><?php echo Text::_('JALL'); ?></button>,
					<button id="treeUncheckAll" class="btn btn-link" type="button"><?php echo Text::_('JNONE'); ?></button>
				</span>
				<span class="width-20">|</span>
				<span class="small"><?php echo Text::_('COM_MODULES_EXPAND'); ?>:
					<button id="treeExpandAll" class="btn btn-link" type="button"><?php echo Text::_('JALL'); ?></button>,
					<button id="treeCollapseAll" class="btn btn-link" type="button"><?php echo Text::_('JNONE'); ?></button>
				</span>
				<input type="text" id="treeselectfilter" name="treeselectfilter" class="form-control search-query float-right" size="16"
					autocomplete="off" placeholder="<?php echo Text::_('JSEARCH_FILTER'); ?>" aria-invalid="false" tabindex="-1">
			</div>

Goes to administrator/components/com_modules/tmpl/module/edit_assignment.php lines 40-52

@zwiastunsw
Copy link
Contributor Author

@dgrammatiko : Do you want to improve only the switch?
Your code seems to be correct, but I think you first need to rebuild the code responsible for selecting a menu item to define the switch's operations well.

@dgrammatiko
Copy link
Contributor

@zwiastunsw ok define the HTML here and I'll do the coding part

@ghost ghost added the J4 Issue label Apr 4, 2019
@ghost ghost changed the title [4.0][a11y] Assignment menu function not accessible to blind users [4.0] [a11y] Assignment menu function not accessible to blind users Apr 4, 2019
@ghost ghost added the a11y Accessibility label Apr 4, 2019
@ghost ghost changed the title [4.0] [a11y] Assignment menu function not accessible to blind users [4.0] Assignment menu function not accessible to blind users Apr 19, 2019
brianteeman added a commit to brianteeman/joomla-cms that referenced this issue Jan 25, 2020
This PR addresses some of the issues for joomla#23911

Specifically numbers
2, 4, 6

There are others that need to be addressed relating to the actual lists themselves but I a not sure if the list is even remotely accessible so wish to tackle that in a deperate issue
@joomla-cms-bot joomla-cms-bot removed the a11y Accessibility label Apr 17, 2020
@jwaisner
Copy link
Member

@chmst is this something you can look into for Accessibility?


This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/23911.

@zwiastunsw
Copy link
Contributor Author

@jwaisner: Yes, this page component needs to be rebuilt because it has many accessibility bariers. You can improve particular elements (for ex. select button and expand button), but in my opinion it is better to build it from scratch.

@brianteeman
Copy link
Contributor

simply not true but keep repeating it and magically someone will read your mind to decide what the
problem is and how it can be fixed to satisfy you. until then i guess this will be left as it is because no one will waste their time - I know I wont be making the same mistake again. Writing code and just getting a fail without any explanation or even suggestion taught me my lesson.

@zwiastunsw
Copy link
Contributor Author

If you have nothing to say, you better not say anything. You could finally learn that.

@brianteeman
Copy link
Contributor

Words are cheap. Actions have real value.

@jwaisner
Copy link
Member

Alright, enough. This can be worked we just need someone with the knowledge/time to do so.


This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/23911.

@chmst
Copy link
Contributor

chmst commented Apr 17, 2020

I'll re-activate the PRs tomorrow and see what happens. I am highly interested in a accessible backend.

@hans2103
Copy link
Contributor

This issue describes 6 issues:

[x] 1 => solved in #28726
[x] 2 => solved in #28726
[ ] 3 =>
[x] 4 => solved in #28944
[ ] 5 =>
[x] 6 => solved in #28726

@brianteeman
Copy link
Contributor

issue 2 was not solved #28726 (comment)

@Hackwar Hackwar added the bug label Feb 19, 2023
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

8 participants