{"action":"created","issue":{"url":"https://api.github.com/repos/gantry/gantry5/issues/713","labels_url":"https://api.github.com/repos/gantry/gantry5/issues/713/labels{/name}","comments_url":"https://api.github.com/repos/gantry/gantry5/issues/713/comments","events_url":"https://api.github.com/repos/gantry/gantry5/issues/713/events","html_url":"https://github.com/gantry/gantry5/issues/713","id":101152189,"number":713,"title":"Accessibility Improvements required","user":{"login":"marktaylor46","id":11683218,"avatar_url":"https://avatars.githubusercontent.com/u/11683218?v=3","gravatar_id":"","url":"https://api.github.com/users/marktaylor46","html_url":"https://github.com/marktaylor46","followers_url":"https://api.github.com/users/marktaylor46/followers","following_url":"https://api.github.com/users/marktaylor46/following{/other_user}","gists_url":"https://api.github.com/users/marktaylor46/gists{/gist_id}","starred_url":"https://api.github.com/users/marktaylor46/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/marktaylor46/subscriptions","organizations_url":"https://api.github.com/users/marktaylor46/orgs","repos_url":"https://api.github.com/users/marktaylor46/repos","events_url":"https://api.github.com/users/marktaylor46/events{/privacy}","received_events_url":"https://api.github.com/users/marktaylor46/received_events","type":"User","site_admin":false},"labels":[{"url":"https://api.github.com/repos/gantry/gantry5/labels/bug","name":"bug","color":"fc2929"},{"url":"https://api.github.com/repos/gantry/gantry5/labels/enhancement","name":"enhancement","color":"84b6eb"}],"state":"open","locked":false,"assignee":{"login":"w00fz","id":11734,"avatar_url":"https://avatars.githubusercontent.com/u/11734?v=3","gravatar_id":"","url":"https://api.github.com/users/w00fz","html_url":"https://github.com/w00fz","followers_url":"https://api.github.com/users/w00fz/followers","following_url":"https://api.github.com/users/w00fz/following{/other_user}","gists_url":"https://api.github.com/users/w00fz/gists{/gist_id}","starred_url":"https://api.github.com/users/w00fz/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/w00fz/subscriptions","organizations_url":"https://api.github.com/users/w00fz/orgs","repos_url":"https://api.github.com/users/w00fz/repos","events_url":"https://api.github.com/users/w00fz/events{/privacy}","received_events_url":"https://api.github.com/users/w00fz/received_events","type":"User","site_admin":false},"milestone":{"url":"https://api.github.com/repos/gantry/gantry5/milestones/14","html_url":"https://github.com/gantry/gantry5/milestones/5.1.1","labels_url":"https://api.github.com/repos/gantry/gantry5/milestones/14/labels","id":1254022,"number":14,"title":"5.1.1","description":"","creator":{"login":"w00fz","id":11734,"avatar_url":"https://avatars.githubusercontent.com/u/11734?v=3","gravatar_id":"","url":"https://api.github.com/users/w00fz","html_url":"https://github.com/w00fz","followers_url":"https://api.github.com/users/w00fz/followers","following_url":"https://api.github.com/users/w00fz/following{/other_user}","gists_url":"https://api.github.com/users/w00fz/gists{/gist_id}","starred_url":"https://api.github.com/users/w00fz/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/w00fz/subscriptions","organizations_url":"https://api.github.com/users/w00fz/orgs","repos_url":"https://api.github.com/users/w00fz/repos","events_url":"https://api.github.com/users/w00fz/events{/privacy}","received_events_url":"https://api.github.com/users/w00fz/received_events","type":"User","site_admin":false},"open_issues":26,"closed_issues":11,"state":"open","created_at":"2015-08-13T18:14:27Z","updated_at":"2015-08-19T20:30:23Z","due_on":"2015-08-28T07:00:00Z","closed_at":null},"comments":12,"created_at":"2015-08-15T08:32:43Z","updated_at":"2015-08-19T22:48:25Z","closed_at":null,"body":"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.\r\n\r\nThis information is very detailed and I quote below:\r\n\r\n\"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.\r\n\r\nI 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.\r\n\r\n\r\n## Outlines \r\n- [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.\r\nWhen 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.\r\n\r\n\r\n## Menus\r\n I am skipping this section at the moment, as the basic accessibility issues are described in the Layouts part below.\r\n\r\n\r\n\r\n## About\r\n This page and its various navigation elements seem to work fine for both vision impaired and blind persons.\r\n\r\n\r\n## Extras\r\n- [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.\r\n\r\nI ignored the Platform Settings page at this time.\r\n\r\n\r\n## Theme Outlines Drop Down\r\n- [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.\r\n\r\n\r\n## Styles Tab\r\nThis page and its various navigation elements seem to work fine for both vision impaired and blind persons.\r\n\r\n\r\n## Settings Tab\r\n - [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.\r\n\r\n\r\n\r\n## Layout Tab\r\n - [ ] 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.\r\n\r\n - [ ] 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. \r\n\r\n - [ ] 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.\r\n\r\nWhat 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. \r\n\r\n - [ ] However, the Tool icon to edit the properties is not identified for a text-to-speech reader.\r\n\r\n - [ ] 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. \r\n\r\n - [ ] 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.\r\n\r\n - [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”\r\n\r\n - [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. \r\n\r\n - [ ] 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. \r\n\r\nThe 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.\r\n\r\nBack down to the main layer, the last thing I want to mention is dragging and dropping the various items. \r\n\r\n- [ ] 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. \r\n\r\n - [ ] The small vertical bars don’t have a text-to-speech cue.\r\n\r\n 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.\r\n\r\nNOTE: 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.\r\n\r\n\r\n\r\n## Assignments Tab\r\n - [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. \r\n\r\n - [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. \r\n\r\nThe 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. \r\n\r\n- [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.\r\n\r\n\r\nI 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”.\"\r\n\r\noriginal RT topic is here http://www.rockettheme.com/forum/general-discussion/246086-accessibility-for-gantry-5?start=0#1226500\r\n\r\n"},"comment":{"url":"https://api.github.com/repos/gantry/gantry5/issues/comments/132815584","html_url":"https://github.com/gantry/gantry5/issues/713#issuecomment-132815584","issue_url":"https://api.github.com/repos/gantry/gantry5/issues/713","id":132815584,"user":{"login":"w00fz","id":11734,"avatar_url":"https://avatars.githubusercontent.com/u/11734?v=3","gravatar_id":"","url":"https://api.github.com/users/w00fz","html_url":"https://github.com/w00fz","followers_url":"https://api.github.com/users/w00fz/followers","following_url":"https://api.github.com/users/w00fz/following{/other_user}","gists_url":"https://api.github.com/users/w00fz/gists{/gist_id}","starred_url":"https://api.github.com/users/w00fz/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/w00fz/subscriptions","organizations_url":"https://api.github.com/users/w00fz/orgs","repos_url":"https://api.github.com/users/w00fz/repos","events_url":"https://api.github.com/users/w00fz/events{/privacy}","received_events_url":"https://api.github.com/users/w00fz/received_events","type":"User","site_admin":false},"created_at":"2015-08-19T22:48:25Z","updated_at":"2015-08-19T22:48:25Z","body":"## Toggles on/off\r\nRegarding 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."}}