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
Accessibility Improvements required #713
Comments
I'm starting by assigning this to @kevlardev, but I think that there are some easy fixes for @w00fz as well to get us started. |
Hey @marktaylor46, I took the liberty of editing your post and adding tasks to all the points that I can see being individual issues. |
@w00fz No problem at all - I'm glad that it's proving useful. :) |
Here is an update on the progress so far with the WAI-ARIA implementation, I have checked all the tasks finished. A couple are 90% done but require more research and testing. OutlinesI have fixed the buttons, they now present a nice aria-label for each action and includes the title of the Outline, so if you are over Duplicate, for instance, it will say: 'Duplicate Hydrogen Default - button'. ExtrasI am seeing the issue with the tabbing on the Extras tab. I was able to fix the focus but it does still require a first manual focusing on the dropdown that just opened, then tabbing will work. I also fixed the toggles on / off, those work too with spacebar like checkboxes. Settings TabI Fixed all the checkboxes meant to work for Overrides. They are all now properly named and they also reference the label of the field the override is meant to. Assignments TabAs for Extras and Settings Tab, the togglers for Assignments are also now fixed and properly labeled. |
…ow tabbable via keyboard. Load (in Layout) is now properly ARIA structured as tabs and acts as such (#713)
Extras ButtonExtras is now fully tabbable. When clicking on it, you can now tab between the Production/Development toggle as well as the Links for clearing cache or getting into Platform Settings. LayoutThis wasn't reported in the list, although the Load for Preset / Outlines is now fully ARIA ready, acts as proper Tabs, it's tabbable, keeps track of the expanded and allows to tabs between the links in it as expected. There is still a lot to do for the Layout unfortunately :) |
…e dropdown and any other dropdown more accessible (#713)
Theme Outlines Drop DownThis is now implemented using the aria |
Editable TitlesThis wasn't mentioned in the list of accessibility issues. It is now implemented. The pencil icon used to edit titles (Outlines titles, Particles titles, Menu Items titles, etc), are now tabbable, aria-labeled and keyboard interactive (space and enter)/ |
…w proper buttons. All tabbed modals (ie, Settings for Particles / Menu Items) are now proper ARIA tabs. (#713)
ModalAll modals are now accessible, once opened they gain focus and they tab stop. Also all Particle / BlockTabs within Modals (such as Particle / Block) are now properly ARIA compliant, meaning they are treated as tabs, they are navigable with proper |
The below are my comments from the latest nightly build I upgraded to on my test site as of Aug 19, 2015 (vdev-7b1fdb848). Using Windows 7, FireFox 40. Outlines
MenusAt the moment this appears to be the same, but I will address these in the Layout section below. About
Extras
Theme Outlines Drop Down
Styles Tab
Settings Tab
Layout Tab
Assignments TabSome nice updates have been made to this page. Global Filter field is defined for all users. Unselect and Select Menu items have been defined for all but pressing return or the space bar doesn’t make the change, while the mouse click works fine.
Hope these updates help to continue improving the Gantry 5 framework. |
Thank you, @Mediaversal. This is exactly the type of feedback that helps us create better solutions. You've inspired our team, and we appreciate this time and attention very much. Looking forward to hearing more! |
Hello @Mediaversal, thanks again for yet another great set of feedbacks. This is kind of all new for us and we are learning as we go, one thing we have been doing a lot is to add Regarding the checkboxes in the Styles and Settings, the idea of having the checkboxes coming before the field is intentional. You are supposed to be enabling an override before been able to change the value of the field so the flow would be: 1. Check the override checkbox 2. Press Tab 3. You are now in the field and you are allowed to make changes. Although what I do notice wrong with this flow is that if you haven't checked an override, you shouldn't be able to tab to the field but skip to the next override. I will be fixing this, as well as adding the section name for the text-to-speech. Also, like I did for Mark's first post, I'm going to also edit yours just to add checkboxes that we can separately mark as concluded since we are fixing all of this in batches. Thanks again for all your feedbacks and help! Question, I've been using ChromeVox, are you familiar with it? Is it a good and reliable extension you think? Seems like in the developers community is fairly common and has had good reviews. Otherwise do you know of other tools that could help us debugging and testing accessibility? |
Toggles on/offRegarding the toggles like Production / Development as well as toggles in Assignments. I had a typo in the code, that's why you weren't hearing any feedback from that. It is supposed to read the proper label and then tell you if it's checked or unchecked, like a regular checkbox does. |
Well @w00fz , I have not used ChromeVox. I will check it out sometime soon. I use a Windows based client called ZoomText (Magnifyer / Reader v 10.1.x) that works with most applications, such as Word, Excel, Photoshop, Dreamweaver, and of course web browsers, such as FireFox and IE. It utilizes both AppReader and ScreenReader technology, of which I primarily use the ScreenReader for implementing websites. This product is used by vision impaired persons like myself. One thing about ZT is it reads ALT tags for images as well as any text on the screen that is not embeded in an image. Jaws is the most popular one for Blind users. So, the red to green toggle switch doesn't audibly define the current state when I either click it with the left mouse button nor use hte space bar. In the case of the Dev / Prod in the Extras Menu drop down, the text obvioiusly changes. In the many other cases where this red / green toggle button is used the text at the left doesn't change (and nor should it), but the current state is not audble for blind users. So, no, these don't act like the check boxes, which do speak the current state (Checked vs. Unchecked). Makes sense to have the check boxes first, and also skip the field if the check box is unchecked. Thanks for your interest in developing for Accessibility. |
Another batch of updates: DropdownsI am happy to report back that the dropdowns have been highly improved for what concerns tab stopping. I noticed this was a big issue and that when tabbing between fields, arriving to a dropdown would sort of 'reset' the focus state making it impossible to continue to the next tab stop. This is now completely reworked and works much better. There are still accessibility issues that I am aware of, none of the dropdown items gets proper cue. I will be fixing this soon. About PageTab stop in this page has been improved. In this page as well as others where the second navigation does not appear (Assignments, Layout, Styles, etc..), you will not get a confusing tab stop for those elements that aren't in view. Extras and any other 'Popover'I'm also happy to report that I've added quite some logic to the popover. Tabbing away from it, for elements such as Extras and Load (in Layout Manager), will restore the tab stop to the original element and it doesn't go away anymore. This also fixes Reverse Tabbing that was reported as an issue. Save Assignments / Recompile CSS / Save StylesAll these buttons should be reachable via tab. |
OutlinesThe buttons should now have a hover response and all the buttons in the Modal are now properly accessible by |
Toastr (purple) notificationsI'm happy to let you know that all the notifications are now properly providing text-to-speech feedbacks. This means duplicating deleting outlines, saving, recompiling css, etc. will always properly assert their status. |
Pickers FieldsThe pickers fields buttons (Font picker, Image/File Picker, Icon Picker) they all have proper text-to-speech label now. On the other hand, their pop-up box (we usually call these modals / dialogs) still need a lot of work. We'll get there as well. |
@Mediaversal YAML files are actually meant to make editing files directly easier as their format is the same as you would use with pen and paper. But also YAML files rely on people seeing the structure, which may be hard for blind people as readers cannot give you an overall look. The good thing with YAML files is that they will solve issues that are present in all-visual presentation, e.g. layout manager. That said, I'm only looking for temporary solution here as implementing alternative way to layout manager may take some time to get in as we postponed multi-language particles feature to later release, which will likely share most of the code with alternative take on layout manager. |
Hey @Mediaversal, This implementation is purely based on my own research and by following the specs, unfortunately I think ChromeVox is not supporting combo boxes and so I was hoping you could give it a try and let me know. It should already be better than it was. 😄 Thank you. |
Override checkboxesThese checkboxes that previously were only announcing the field name, now tells the Section, Card, Field (ie, Particles Branding Content) Filters / SearchesAll the fields meant for Filtering (like in Assignments), are now properly labelled. |
Comments from nightly build build: vdev-1d3ea493e Please note: I have now installed ChromeVox. However, I still utilize ZoomText while running FireFox. I noticed there are some accessible pluses to ChromeVox, however that annoying beeb-tone is ridiculous, which would make me not want to use ChromeVox forever. So, below I will start to identify differences, which with some luck can be worked around. These may be browser differences. Since Chrome doesn’t work with ZoomText, and obviously ChromeVox doesn’t work with FireFox, I can’t speak to exactly where the issue would be related. Outlines
About
Extras
Theme Outlines Dropdown
Styles Tab
I will get back to the Settings and Assignments Tabs later. |
OutlinesI fixed the Add new Outlines and the System Outlines titles, they should now properly give feedback. Togglers (red / green buttons)It should work now with the space FirefoxI am noticing an issue in general with Tabbing with firefox, even though items have explicit DropdownsThe tabbing away in Firefox seems to be related to the above issue regarding File Picker, Icon Picker, Font Picker, Any Picker :)All of these still need some work, we haven't got there yet but once we have they should behave similarly to any other page with tabbing and enter/space. ChromeVoxRegarding ChromeVox, I only ever used tabs. The only place we do have arrows support is for the dropdowns so that you can navigate through the items up and down. WAI-ARIA vs ChromeVox vs ZoomTextAs I feared, it sounds like any screen reader is implementing only certain parts of the WAI-ARIA specifications. All we can really do here is to apply these rules and, hopefully, as soon as new specs get implemented in the tools, such as ZoomText and ChromeVox, you will be able to fully use them. Take the dropdowns for example. We are using a custom dropdown called Selectize which doesn't come with accessibility support. What I've been doing is to implement the missing support by applying the WAI-ARIA combobox role specification. While reading your feedbacks and then trying to replicate with ChromeVox, I can tell that ChromeVox is definitely implementing more specifications than ZoomText (I might be absolutely wrong here, though), but even then, some things just aren't supported at all, yet. Our hands are tied on this regards but we will continue to add ARIA support as much as possible and where we can. Your feedbacks have been invaluable and I can't thank you enough. Please continue reporting any issue you find and we'll do our best to implement all of it, where possible. Thank you! |
I also added more settings to change Section width in sidebar layout, which was impossible without using mouse before. It was part of larger change, so there are a few more options in that case. |
Comments from nightly build: vdev-2a7e46c19 Outlines
Extras
Outlines DropDown
Styles Tab
Settings Tab
Assignments Tab
Hope I don't wear out my welcome here! |
Not at all! I'm already starting to feel that you are part of our team, or our usability expert. We might soon need to make a cut on usability issues as we do have so many other issues (and missing features) to solve as well, but we still think that all of these proposals are something we should have, if possible. When 5.1.1 is out (due in few days), I recommend that we close this issue and just copy everything that is left into a new issue so we can take a look on these later. If there are some features that really should be in 5.1.1, please highlight them to us. And thanks again from all your help on making Gantry 5 a better platform! |
You are more than welcome @Mediaversal ! I just wanted to thank you for taking the time to contact and speak with the ZoomText support. I hope they get some new cool supported ARIA specs implemented! Sorry I haven't been more responsive in this issue, I've been working on other fixes here and there. But definitely keep up the good work, anything you want to add in here feel free, we will address the issues. Like originally said, some issues might be more tricky than others and require more time to get addressed. Also, I'm going to unchain this issue from any Milestone and leave it free so we can keep this issue as the main Accessibility one, for things to get reported or discussed. Then I'm going to create a new issue where i will just describe what's been fixed so far, just so we can tie to the 5.1.1 Milestone, all the accessibility work that's been done so far. Once again, thank you! |
Pulling over some input on improving the Menu system from this RT thread: http://www.rockettheme.com/forum/requests/260948-rt-menu-for-w3c a good mobile phone menu [out there currently is] 'responsive menue' by ADDDON Street - it's pricy, under developed, but it's one of the only solutions for blind users around... If it assists -
2.1 if I change the top level menu items from text seperator to article or similar - it reads out that menu item and allows me to activate it by pressing home. For example, activating the features menu item if it has an article linked to it. 2.2 the change from text seperator to an 'article' menu item does not allow me to read the submenu items still. |
Unfortunately we do not have accessibility testers and because of that we are fully dependent on users who are kind enough to report the issues they run into when using Gantry. @w00fz, is there anything we can do to improve the situation? |
I already answered to the thread about it. |
Further to #673 - an RT member "Wesley Derbyshire" has now been kind enough to check out the accessibility of Gantry 5 admin and has made a lot of comments about things that need to be addressed - at @w00fz request and suggestion I am now raising this ticket so that these can be investigated.
This information is very detailed and I quote below:
"I am going to speak about two levels of accessibility. One for the Vision Impaired communities, and the other for the Blind communities. I am vision impaired, and use ZoomText, a Windows based accessibility tool for low vision users. I am not experienced with Jaws, the most popular accessibility tool for blind users. However, I can say that to my understanding, the use of Tab Stops and Keyboard Shortcuts is paramount in access for the blind. I use keyboard shortcuts, but still mostly rely on the mouse for navigation.
I installed the latest nightly built of Gantry 5 (dev-ac1626521), and used the Hydrogen template for this test running on Joomla 3.4.3 using FireFox 40.
Outlines
When in the Edit mode for a given outline, this works fine for Vision Impaired, but the field labels are not readable when using tab stops assumed to be needed by the Blind.
Menus
I am skipping this section at the moment, as the basic accessibility issues are described in the Layouts part below.
About
This page and its various navigation elements seem to work fine for both vision impaired and blind persons.
Extras
I ignored the Platform Settings page at this time.
Theme Outlines Drop Down
Styles Tab
This page and its various navigation elements seem to work fine for both vision impaired and blind persons.
Settings Tab
Layout Tab
What works well for vision impaired admins is hovering over most elements activates the text-to-speech reader to call out the element name, along with the alias and width. The layout section names are spoken, along with all of the position, particle, and atom items in the left column.
The Apply, Save and Cancel buttons work fine for all. I know there are more nuances to these pop-up edit screens, such as adding images. But I am not going cover that at this time.
Back down to the main layer, the last thing I want to mention is dragging and dropping the various items.
As noted above this part of the page is not available to blind admins as far as I can tell. For the vision impaired, the items can be identified by hovering with a mouse, but as soon as they are selected and dragging begins, there is no audible indication about where they are being placed on the page. This is really an architecture issue from my perspective, one that works very well for the visually able. However, it would be great if there was another method to place the items on the page besides dragging, unless the Section Headers and Block Name can be identified via text-to-speech while dragging and preparing to drop. To that end, there is no audible cue to determine if the new item is being added to the left or right.
The small vertical bars don’t have a text-to-speech cue.
I think this is the most challenging part of the new Gantry design. It is a fantastic system that makes creating layouts so easy, but also severely restricts ease of access.
NOTE: I have no idea what double clicking a block element does on the layout page. Visually it disables the element, but there is no change in text-to-speech. When I click “Save Layout” it doesn’t delete them. And when I open the edit mode, it shows them as active. And if I reload the page, they just revert back to their standard non-shaded color.
Assignments Tab
The Hide Unassigned Checkbox works great for all. While the All Languages drop-down is usable for vision impaired, it may be usable for the blind as the Tab Stops work and the user can navigate down the list using arrows. However, I am uncertain, since with my accessibility tool the items weren’t spoken when using the arrow keys, only when rolling over with the mouse.
I hope this information is helpful in providing greater access for both the vision impaired and blind communities. Providing this information helped me to learn the new framework, along with discovering all the great new features that make it easier to create websites. You may attribute any of these comments to my name “Wesley Derbyshire”."
original RT topic is here http://www.rockettheme.com/forum/general-discussion/246086-accessibility-for-gantry-5?start=0#1226500
The text was updated successfully, but these errors were encountered: