Accessibility Improvements required

[marktaylor46]

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

• [x] The summary page has the following issues: for vision impaired hovering over the edit and duplicate buttons do not provide text to speech. On the other hand, for blind users, these buttons speak the links when using the tab button to navigate to the button. But, the links are cryptic and don’t define which outline the administrator is editing. Likewise, the tab stop skips over the outline label names. 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

• [x] For the vision impaired, text to speech works fine on the drop down menu except, the on / off button apparently is not defined. For a blind admin, while they can tab to Extras, press enter and get the drop down menu, they can’t navigate using tab or use the arrow keys to any of the elements / links.

I ignored the Platform Settings page at this time.

Theme Outlines Drop Down

• [x] This works fine with text-to-speech for vision impaired. However, I found no method to use the keyboard to tab or arrow up/down the list and listen for selection, making this object inaccessible for Blind persons.

  Styles Tab

This page and its various navigation elements seem to work fine for both vision impaired and blind persons.

Settings Tab

• [x] This page mostly works for vision impaired persons, as the text-to-speech hover specifies the element But, when I place the cursor inside a field each field apparently is labeled as “Unnamed Edit Box.” Likewise the same is true for all the Check Boxes, which are all unnamed. As described above, switches like the Branding toggle switch has no text-to-speech element. Since there is no labeling on the fields and checkboxes, when using the tab stop to navigate the page, a blind person would have no knowledge of which element is which to make changes. None of the information in blue or yellow backgrounds, along with section headings are part of tab stops, but are readable when reading the entire page with a text-to-speech reader.

  Layout Tab

• [ ] When it comes to use by blind admins, there is no mechanism for tab stopping within the template Layout Editor, except the Template name, Styles, Layout, etc…and tabbing through to the Load, Clear, and Save Changes buttons. Nor do the Undo / Redo buttons indicate that they are inactive. Thus all of the Positions in the left column and Sections and their related particles are skipped by the tab stops. So a mouse is required to use these elements.
• [ ] For vision impaired users.the immediate issue that took me over an hour to solve, and is undocumented in the tutorials I read, is how to delete the various elements. I tried clicking on the item and pressing the delete key. I tried dragging them to the left column, and a number of other things. Finally, by chance I discovered that a red circle with a “X” appeared at the top of the page. Since I magnify the screen by 5 times, I didn’t initially notice this.
• [x] While I don’t exactly deem it as important, the purple status box at the lower right is not helpful either as the text-to-speech reader didn’t know it was there, and it was often off screen.

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.

• [ ] However, the Tool icon to edit the properties is not identified for a text-to-speech reader.
• [ ] I just discovered the Equalize Blocks check box, which doesn’t activate text-to-speech when hovering over the check box. Nor is an audible indication provided when clicking the checkbox that Equalizes the Blocks.
• [ ] Likewise, there is no audible indication of the green block width adjustment bar, nor any indication of the percent that the blocks are currently changed to, unless the vision impaired admin moves the mouse and hovers over the percentage number. On the other hand, the block width can be adjusted in the edit mode for the given item.
• [x] Speaking of the pop-up edit mode. This is somewhat usable for a blind admin, however, without knowing Jaws, I am not sure how they would access this, since the tab first went to the inactive layer. The only way I could get the Tab Stops to work on the pop- was to first click on the Pop-Up layer. Once in the pop-up edit window, the Tab Stops worked well, other than the check boxes are all defined as “Unnamed Check Box”
• [x] I couldn’t Tab and press enter to change from the Particle to Block tab in edit mode. I could only click on one of the Tabs to select it.
• [ ] The The Tag Attributes suffer from the same problem described above, these work well for vision impaired admins, abut there seems to be no means to navigate down the list with arrows (or tabs) for a blind user.

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

• [x] This page has similar issues as described above. It pretty much works for vision impaired persons, although once again there is no text-to-speech label for the on / off toggle switches.
• [x] For blind users, the Global Filter is defined, but the Select and Unselect Menu Items are skipped by the Tab Stop, and while there is a tooltip, no text-to-speech is audible when rolling over with the mouse.

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.

• [x] The assignments are totally skipped by the Tab Stops thus inaccessible for blind admins, and the toggle switches have no cue for text-to-speech for the vision impaired.

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

[mahagr]

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.

[w00fz]

Hey @marktaylor46, I took the liberty of editing your post and adding tasks to all the points that I can see being individual issues. This will allow us to easily check/complete a task anytime it gets fixed, until we cover them all.

[marktaylor46]

@w00fz No problem at all - I'm glad that it's proving useful. :)

[w00fz]

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.

Outlines

I 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'.

Extras

I 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 Tab

I 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. Also the switchers/togglers that were unusable via keyboard and not tabbable, now act like checkboxes and reference the title of the card.

Assignments Tab

As for Extras and Settings Tab, the togglers for Assignments are also now fixed and properly labeled. Same goes for Select All and Unselect All, they will now properly tab stop and read the label. Every Menu Item in Assignments has now a tab stop on the toggler with properly labeled identification.

[w00fz]

Extras Button

Extras 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.

Layout

This 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 :)

[w00fz]

Theme Outlines Drop Down

This is now implemented using the aria aria-selected="true" option and by treating the fancy selectize dropdowns as real select fields. I believe I went the right way based on my research, although I think the tool I'm using for testing is not supporting the aria-selected. Would be nice if this could be tested by someone else!

[w00fz]

Editable Titles

This 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)/

[w00fz]

Modal

All modals are now accessible, once opened they gain focus and they tab stop. Also all Cancel / Close fake-links are now proper buttons so they can be tab-stopped and selected.

Particle / Block

Tabs within Modals (such as Particle / Block) are now properly ARIA compliant, meaning they are treated as tabs, they are navigable with proper aria-expanded attributes and space key hooked up to select a different tab.

[Mediaversal]

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

• [x] This page has been dramatically improved, especially for blind users, as the various buttons now have understandable spoken text. I also confirmed that tabbing to these elemetns and pressing enter takes the user to the “edit” or “duplicate” page. However, for vision impaired users hovering over these buttons with a mouse doesn’t yield a text-to-speech cue, even though the tooltip becomes visible. Yet, if I press the left mouse button, I receive the text-to-speech label of the button. Since I can click and to determine the button, and drag off before releasing the left click, I can audibly identify the specific button. But, a hover response would be better.
• [x] Taking action: for a blind user, after they duplicate a theme, there is no audible cue. I did notice that the purple box in the lower left displays what I assume is a completion notice after duplicating.
• [x] Also, while a blind user can get to the Delete pop-up, and use the tab key to go between Confirm and Cancel, no action occurs when pressing Enter to Delete, however doing the same for Cancel works fine.

Menus

At the moment this appears to be the same, but I will address these in the Layout section below.

About

• [x] It appears that the Tab Stops go nowhere after “Extras” and don’t arrive at “Back to Setup.” However, with my magnifier / reader tool (ZoomText 10.1) I am able to place the mouse on the screen and start tabbing from there, so I know the “Back to Setup” and following buttons work and the Tab does stop there.
• [x] If I use Shift-Tab to go backwards, I get “Assignments, Layout, Styles, etc.. which are not actually visible on the About page.

Extras

• [x] This has been improved nicely with the following remaining issues. Blind users can Tab to Dev / Production mode, but the audible text initially says “switches to production mode” regardless of the state. The space bar toggles between the two states, but no audible cue is provided as to which state is currently active. Also using the arrow keys while this button is active yields some funky width change with the drop down, and doesn’t change the state at all. The enter key doesn’t work to make a state change, and that is probably OK, as I am not sure what the specification standards actually are for toggle switches. Clear Cache works, but again the purple box in the lower right of the screen provides no audible cue to a blind user that the process is complete. Pressing enter to go to Platform Settings works for Blind Users.
• [x] Like the About page, Reverse Tab doesn’t work so well!

Theme Outlines Drop Down

• [x] This still works fine with text-to-speech for vision impaired using mouse hover. Now a blind user can use an arrow to scroll the list, but still has no audible cue. The enter key updates to the selected theme, but it seems that the using the Tab key takes the user nowhere.

Styles Tab

• [x] Looks like either I missed some issues or changes that were made affected this page. While this page and its various navigation elements basically work fine for both vision impaired and blind persons, here are a few items: Blind users can’t navigate to “Recompile CSS” and “Save Styles” buttons. Maybe this related to the same Tab sequence issue described above?
• [x] I think I overlooked the style details. This works pretty well for vision impaired users, and it probably isn’t important to collapse sections for blind users, and the Tab Stop skips this. I found it a bit disconcerting that the Enable Check Box at the right came before the field detail. But, logically this makes sense for a blind user, who then knows what element they are updating. But, while they know the element name, they don’t know the section they are in, be it Header, Navigation, Showcase, etc…
• [ ] The Text Selection icon says “Symbol” for both vision impaired and blind users, versus something like Select Font Family. The pop-up box is currently problematic for both vision impaired and blind users, and much of these issues with text boxes or cryptic button labels have been described before.
• [ ] The Showcase Image field is not defined, speaking “Unnamed Edit Box” when either tabbing or placing the cursor in the box.
• [ ] Likewise the Image Browse button says nothing when the Tab Stops there or hovering with the mouse. The pop-up box (or should I call these overlays?) has many problems for blind users. specifically that the Tab Stops only seem to go to Select and Cancel, along with Selecting Them file upload link. Note that neither the thumbnail nor list display buttons have an text-to-speech cue for vision impaired users.
• [ ] I also think the File Selection should be a button instead of a link. I personally didn’t see it at first.
• [x] The Dropdown Animation dropdown box suffers similar issues like described above in the Outline Drop Down section.

Settings Tab

• [x] Much of this page has been updated for both Blind and Vision Impaired users. The Check Boxes are good, however the section toggle switches suffer the same issues as described earlier, with the primary issue being for a blind user they don’t know the state of this switch. Likewise, the edit boxes are still unlabeled and the Image Buttons are also not labeled,
• [x] and the DropDown Boxes such as the Date Format only partially work (for vision impaired persons, OK, for Blind users not really working).

Layout Tab

• [ ] It looks like there is an issue dragging and dropping now. I cleared cache in the Template, from the Joomla system menu, and my browser, and the problem still persists. I will wait for a resolution on this before reviewing updates for this section.

Assignments Tab

Some 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.

• [x] The menu toggle switch suffers the same issue as described above where the Blind user has no indication of the current state as the text-to-speech only says “Enables “x” Menu Item.”
• [x] In the configuration I am using the Main Menu Filter box is not defined, thus when a blind user Tabs to this element, they wouldn’t know what it is.
• [x] It appears Tab Stop doesn’t make it to “Save Assignments” anymore.

Hope these updates help to continue improving the Gantry 5 framework.

[RyanMPierson]

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!

[w00fz]

Hello @Mediaversal, thanks again for yet another great set of feedbacks. I'm going to look at more of these issues you reported but I also wanted to ask you a few things.

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 aria-label there were it makes sense. In the case of toggles, they can be switched on and off via spacebar, I understand you use enter and the specifications are a bit vague about what is right and what is not, so I'm going to implement both keys. Although the question I have on this matter is regarding the change of state. The way I implemented it is to behave like checkboxes. The label is always the same ("Switches to Production Mode") but when you toggle it on or off it should also say "checked" or "not checked", is this not happening for you?

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?

[w00fz]

Toggles on/off

Regarding 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.

[Mediaversal]

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.

[Mediaversal]

@w00fz , I'll test the Toggle On/Off when I install the nightly build tomorrow.

[w00fz]

Thank you!

[mahagr]

@Mediaversal I'm always impressed on people who come and help us, using great amounts of time to help us to solve the issues. You are not an exception. I am already seeing that the changes that @w00fz and @kevlardev are implementing based on your valuable feedback will make this platform a great choice for vision impaired and blind users.

Layout screen, or layout manager as we call it will be the hardest to make accessible, which makes us to wonder if we should implement an alternative page into the layout, which is not as sight intensive as the current one. We can easily implement some of the features to make it possible to use by visually impaired people, but the whole design relays on having a certain structure, which makes it really hard to target some of the features if you are using a screen reader.

In the mean time we are also working on a simpler text format for saving layouts in a file and we are wondering if YAML based text file syntax would be easy enough to do some changes into the layout..? YAML relays heavily on using spaces to give a structure to the content; here is an example on how the file would look like the following code quote:

preset:
  image: gantry-admin://images/layouts/default.png

layout:
  header:
    container:
      - [particle-logo 30, position-header 70]

  navigation:
    container:
      - particle-menu

  main:
    container:
      - position-breadcrumbs
      - system-messages
      - pagecontent

  footer:
    container:
    - position-footer
    - [particle-copyright 40, spacer 30, particle-branding 30]

  offcanvas:
    - particle-mobile-menu

Is that something you could be using to modifying the basic structure to the site? It is an advanced feature of Gantry 5 allowing people to customise things that layout manager doesn't allow you to do; but our goal is to extend it to contain everything that exists in the layout in a simple text format.

[Mediaversal]

@w00fz The red / green toggle swithc sorta works for vision impaired and blind users now. When the switch first gets focus the text-to-speech identifies the state of the button (check vs uncheked). However, if I either left click, press enter, or mouse click, the state change is not announced, unliked the regular check boxes, whcih do audible announce the state change. Hopefully the red / green switch can be modified to include the state change on an action.

So, to be clear, the only way I would know (for sure) that the state change occured if I were blind is to Tab forward and the reverse Tab back to the switch, once again getting focus to hear the current state of the switch.

[Mediaversal]

@mahagr, thanks, happy to help. I am very excited about the Gantry 5 framework and also want to see it as the premier platform for vision impaired and blind users seeking to develop websites. On the other hand, as I am vision impaired rather than blind, my knowledge of exactly how the tools for the blind community function, other than I know Tab Stops are useful, along with tags to identify elements.

The YAML code shown above seems simple enough, but without fully understanding the tools a blind person uses, I am not sure how they would know the indent level. I assume their tools could identify the punctuation, as I personally turn off that feature to streamline text-to-speech reading.

Furthermore, with Gantry 5, and Joomla for that matter aimed at making it easier for Web Designers to create sites, I can't help but wonder if YAML would b e step backward to the cryptic days of all hand written code. Of course, you guys are writing the code, and thank you for that! I am looking at Gantry from a design and content viewpoint. The easier and more accessable it is the better.

Regards, Wesley

[w00fz]

@Mediaversal that is weird, with ChromeVox when I click, press spacebar or press enter, I do get the change of state announced (unchecked / checked). Behind the scenes I am updating the aria-checked value for this very reason. I wonder why it doesn't do it for you.

[w00fz]

Another batch of updates:

Dropdowns

I 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 Page

Tab 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. When the second navigation gets hidden I am now also ensuring that aria-hidden and tabindex are disabled.

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 Styles

All these buttons should be reachable via tab.

[w00fz]

Outlines

The buttons should now have a hover response and all the buttons in the Modal are now properly accessible by enter key.

[w00fz]

Toastr (purple) notifications

I'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.

[w00fz]

Pickers Fields

The 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.

[mahagr]

@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.

[w00fz]

Hey @Mediaversal, I think I managed to get the dropdowns fully accessible. Tabbing into any dropdown should now read its set value. You can then navigate with the arrows and it should give feedback of what's getting activated.

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. :smile:

Thank you.

[w00fz]

Override checkboxes

These checkboxes that previously were only announcing the field name, now tells the Section, Card, Field (ie, Particles Branding Content)

Filters / Searches

All the fields meant for Filtering (like in Assignments), are now properly labelled.

[Mediaversal]

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

• [ ] I duplicated an Outline, and then went to edit the Outline Name. However, without refreshing the page, the Text-To-Speech still indicated the original name, while the screen correctly displayed the updated name. This is an issue for both ChromeVox (Chrome) and ZoomText (FireFox).
• [x] Modal Pop-up’s: Both the tab key and enter to take action work as expected. However, while Cancel takes the user back to the previously focused item with Chrome, the previous focus is lost and the user is back at the top of the page while using FireFox. Likewise, it is fantastic to hear the text in the purple box after deleting an Outline. However, this only works in Chrome versus FireFox. This could be related to ZoomText versus the browser, and I am going to inquire about this issue to the developers of ZT.
• [x] The hover now works for ZoomText for several of the buttons on the Outlines page. Since ChromeVox is a keyboard related product, I won’t be speaking about Mouse actions for it. So, the “Add New Outline” and all of the System Outline buttons do not speak their Text-To-Speech when hovering with a mouse using ZoomText. Note that all of the buttons text-to-speech works when using Tab in both ChromeVox and ZoomText.

About

• The Tab issues I noted previously seem to be fixed.

Extras

• [x] The Tab Stop and Reverse Tab issues seem to be corrected.
• [ ] For ZoomText However, the red / green button sometimes works and sometimes doesn’t. It continues to identify the button and state when focus first occurs. It will sometimes say the state change, usually when switching to Checked. I don’t think I have heard it say it when going back to Unchecked. But, if I toggle a couple of times, it only seems to announce the first state change. This is all under FireFox using ZoomText.
• [x] Now for the same red / green button when using ChromeVox. I can’t make a state change with the Spacebar. But, it works very well with the Enter key. In fact, I really like that the Text-To-Speech identifies that either Development or Production is Enabled.
• [x] I learned that using the arrow keys in ChromeVox moves the focus between elements, and maybe it is supposed to do that… but I believe it is not working correctly – but let me be clear, I don’t fully understand the way ChromeVox works yet. The arrow keys have no effect on navigation, except for certain DropDown boxes when using ZoomText. Please note, I am not saying that the use of arrows is recommended. I don’t know the specs for this.
• [x] Once again, I like how the purple completion box is announced in ChromeVox when Clearing Cache, this doesn’t happen in ZoomText as described above.

Theme Outlines Dropdown

• [x] @w00fz Tab Key still is getting stuck here using FireFox / ZoomText, but does move forward using Chrome / ChromeVox. Likewise, the arrow Keys don’t work in CrhomeVox / Chrome – but that could be intentional. However, in Chrome I am not sure how a Blind user would access the various selections in the DropDown list in its current condition.

Styles Tab

• [x] Looks like some fine work was done to the Style Details buttons and various color and other field boxes. It is great that the various sections are now identified for both ChromeVox and ZoomText users.
• [ ] I noticed that the Modal pop-up for Fonts needs work to identify the Font Name selected and the state when Tabbing through the list. This is similar to the comments I provided earlier about the Image Selection Modal pop-up.

_I will get back to the Settings and Assignments Tabs later._

[w00fz]

Outlines

I 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

Firefox

I am noticing an issue in general with Tabbing with firefox, even though items have explicit tabindex set, Firefox doesn't seem to follow these and end up outside the viewport. I am not sure if this is an issue with Firefox itself, other than using HTML we really aren't doing anything special with tabbing.

Dropdowns

The tabbing away in Firefox seems to be related to the above issue regarding tabindex and Firefox. Although in Chrome I am not having issues using the up / down arrows to navigate via items. Is this not working for you?

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. These modals are a little bit more complex so they might require more time.

ChromeVox

Regarding 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 ZoomText

As I feared, it sounds like any screen reader is implementing only certain parts of the WAI-ARIA specifications. While the WAI-ARIA is an incredible specification and I think it's going the right direction, it is still a draft.

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. Every time you activate a different item (through arrows or mouseover) it is supposed to reread the active item, based on the property aria-activedescendant which I am updating accordingly. Sadly enough, this doesn't seem to be supported, fully, by ChromeVox or ZoomText.

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!

[mahagr]

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.

[Mediaversal]

Comments from nightly build: vdev-2a7e46c19

Outlines

• [ ] Editing Outline names has been improved. However, while no page refresh is needed for the updated Outline Name itself, the Edit / Duplicate / and Delete buttons still don’t update with the new name unless the page has been refreshed.

Extras

• I have spoken to Tech Support at ZoomText regarding the differences between ChromeVox and ZoomText. These refer to the red / green button and the purple update box in the lower right of the screen. At this point, I will say that if it tests fine when using ChromeVox, then it should work in ZoomText. For the items that still don’t work perfectly, these would be issues with ZoomText itself, rather than a coding issue. Thus, the red / green buttons and purple update box work fine.
• Also after my conversation with them, I did what I considered to be the unthinkable. I used Internet Explorer (v 11.0.96xx) again. Apparently their updates are less frequent than FireFox, thus easier for ZoomText to keep up with, meaning it is more stable from ZT’s perspective. And this is clearly true, as the red / green buttons work without an issue..

Outlines DropDown

• [ ] I gather more needs to be done to resolve issues of how this functions in FireFox when using Tab Stops, or maybe it just can't be done.
• [ ] I tested this in IE, and it works very well for vision impaired and blind users, with one exception noted in the last sentence. The selections are audible when selecting an item using the mouse or the arrow up and down keys. Pressing enter selects the active Outline and refreshes the page as it should. However, as with FireFox, the TabStops do not return the user to the next item (Styles) or (Extras when using reverse Tab).
• [ ] However, attempting to use this with ChromeVox there is no spoken text-to-speech for selected items while arrowing up and down the list. But, the Tab Stop works fine to get out of the list. Of course, this is probably a known issue.

Styles Tab

• [ ] Except for the Modal pop-ups, this page generally works well. But, the dropdown for the Dropdown Animation is listed as “Unnamed Edit Box” when the field is empty with no selections made. Meanwhile a vision impaired user can hover and get the text-to-speech feedback using ZoomText, I assume additional work needs to be done on the various DropDowns, much like the Outline DropDown noted above. DropDowns also appears to be problematic with ChromeVox too, as described above in the Outline DropDown section.

Settings Tab

• [ ] This is coming along very nicely. As in the Styles Tab above, there are text-to-speech accessibility issues that still exist for DropDown items. These include: Date Format, but also include the Date CSS Classes field. These both are identified as “Unnamed Edit Box.” Same for the Logo CSS Classes box and Base Path Menu dropdown, and the To Top CSS Classes box
• [ ] Wouldn’t it make better sense for the text-to-speech for the Sample Content to mirror the full title, rather than just “Sample?” This is the same for the balance of the checkboxes and fields.
• [ ] The Custom CSS / JS red / green button is mis-labeled as “Particle Assets.” Furthermore, both the CSS and Java checkboxes are unlabeled, but do provide checkbox state text-to-speech feedback.
• As noted above in Extras, I am considering the red / green toggle boxes working for both Blind and Vision Impaired users.
• [ ] DropDowns also appears to be problematic with ChromeVox too, as described above in the Outline DropDown section.

Assignments Tab

• [ ] OK, I need to suggest a design / engineering re-work for this page. The select and unselect all Menu Items for the entire page, and each of the sections, are not accessible for the Blind. I pressed both the return and enter keys when on any of these buttons, and a state change didn’t occur. I actually think the red / green button may be better to use, but I understand why the two smaller buttons have been chosen instead. So, either change to the red / green button or have the ability to press enter and the space bar to execute the state change for these Select / Unselect All buttons. Beyond that these have the proper text-to-speech information. This is also the same for ChromeVox, which I am considering the application of choice for Blind developers.

Hope I don't wear out my welcome here!

[mahagr]

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!

[w00fz]

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!

[blizam]

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 -

1. Old RokNav - could navigate the menu items 1 by 1, then arrow down to navigate level 2 menu items. Jaws (screen reader) would identify how many submu items existed. The device menu was not readable at all on phones (with core accessibility software). actually, it could not even be detected. I previously informed RT that it could be related to the hamburger menu not including the word menu - i guess this because other device menues with the 'menu' word are detectable with the core accessibility software.
2. The new RT menu does not work on either. This is entirely different, because for some reason i can't even get the second (top level) menu item (features) to open when it reads out. so what i hear is: logo, home, link, link, link and so on. The link words relate to the RT social media buttons (which have never read out anyway). It would be helpful if someone sent you a recording of what blind people hear when on RT template demos - perhaps your accessibility tester?

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.

[mahagr]

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?

[w00fz]

I already answered to the thread about it.