Accessibility for Gantry 5
-
-
- Wesley Derbyshire
- Rocketeer
- Posts: 69
- Thanks: 5
- Wesley Derbyshire
- I am wondering what the plan is for providing accessibility for blind persons developing sites with Gantry 5? Since this framework apparently requires a mouse to move, resize, and delete objects on the page, what are the plans to make this usable for a blind person? As a vision impaired person, I found no instructions on how to delete an object, and since I magnify the screen, it took a long time to discover that there was a Red Circle with an "X" at the top where I need to drag the object to delete it. I am looking for keyboard shortcuts, and other accessible features that would allow me to continue to use Gantry 5 if I were completely blind.
-
-
-
- MrT
- Preeminent Rocketeer
- Posts: 101084
- Thanks: 13482
- Web Designer/Developer
-
We have an outstanding ticket to address accessibility here
https://github.com/gantry/gantry5/issues/673
. Please feel free to add any comments and suggestions therein - our developers have requested support from the community in addressing this.
Regards, Mark. - Please search forums before posting. Please make sure your post includes the version of the CMS you are using and a link to the problem. Annotations on screenshots can also be helpful to explain problems/goals. Please use the "secure" tab for confidential information.
-
-
-
- MrT
- Preeminent Rocketeer
- Posts: 101084
- Thanks: 13482
- Web Designer/Developer
-
I am pleased to report that our developers have made some alterations for accessibility in the latest Gantry 5 CI build. Could you try them out and provide some feedback to our developers in the ticket I mentioned above please.
http://gantry.org/downloads#ci-builds
Regards, Mark. - Please search forums before posting. Please make sure your post includes the version of the CMS you are using and a link to the problem. Annotations on screenshots can also be helpful to explain problems/goals. Please use the "secure" tab for confidential information.
-
-
-
- Matias Griese
- Sr. Rocketeer
- Posts: 249
- Thanks: 104
- Lead Developer
-
The changes we made for accessibility were just a quick start and there's still a lot of things we probably need to do to make it easier and even possible to use. So please provide some feedback on the changes and what are the worst remaining issues for you to allow us to keep us going forward.
Layout manager may be the hardest piece to improve as it really relays on sight. We already have some plans to provide alternative look to the layout, which looks just like Settings page (we need it for translations etc) as well as better text format so you can easily build/modify the layouts by using an editor to allow people to skip layout manager if they prefer using other methods.
All of this will take some time to implement, but we can start by doing baby steps first.
If you help us and want to get your name into our changelogs, please let us know which name you want to be used in credits. - Gantry 5, enjoy!
-
-
-
- Wesley Derbyshire
- Rocketeer
- Posts: 69
- Thanks: 5
- Wesley Derbyshire
-
Thanks - I will install a test site and provide feedback. At the moment I know that there is no text to speech feedback for the Tool icon when I roll over with a mouse, nor for the change in particle width. At least the particle width can be diffined in the tool pop-up box. Likewise, I don't recall any text-to-speech indication that a particle is being placed on a the delete red circle with "X". I can come up with a whole list of stuff... and will provide all of this and more at the link provided above after I install and play with the latest Gantry 5 build.
Overall, I am excited for the new Gantry, as in general it seems a lot easier to manage layouts than G4. I am still confused about the rt_custom.css file, but will check the forums on this when I am playing with the test site I will create.
I appreciate your prompt attention to this matter.
Regards,
Wesley
-
-
-
- MrT
- Preeminent Rocketeer
- Posts: 101084
- Thanks: 13482
- Web Designer/Developer
-
Thanks yes we'd be really grateful for your input on the ticket about accessibility - iunfortunately we don't have the necessary screen readers to test everything - but we're keen to make things better.
custom css is done is a different way in Gantry 5... To create a custom CSS compatible with Gantry 5 please read this http://docs.gantry.org/gantry5/tutorials/adding-a-custom-style-sheet .
Regards, Mark. - Please search forums before posting. Please make sure your post includes the version of the CMS you are using and a link to the problem. Annotations on screenshots can also be helpful to explain problems/goals. Please use the "secure" tab for confidential information.
-
-
-
- MrT
- Preeminent Rocketeer
- Posts: 101084
- Thanks: 13482
- Web Designer/Developer
-
Wesley Derbyshire - the guys have put a lot of change into the CI build - soon to be 5.0.2 release. If you can do some further Accessibility testing that would be great. We have closed off the github ticket I mentioned now. Could you please raise new github issues for each issue that uncover now - thanks, your help is much appreciated.
Regards, Mark. - Please search forums before posting. Please make sure your post includes the version of the CMS you are using and a link to the problem. Annotations on screenshots can also be helpful to explain problems/goals. Please use the "secure" tab for confidential information.
-
-
-
- Wesley Derbyshire
- Rocketeer
- Posts: 69
- Thanks: 5
- Wesley Derbyshire
-
Gantry 5 and Accessibility
====================
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
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
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
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
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. 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, and 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.
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” But, 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
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. 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. 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”. -
The following users have thanked you: Djamil Legato, DanG, MrT
-
-
-
- MrT
- Preeminent Rocketeer
- Posts: 101084
- Thanks: 13482
- Web Designer/Developer
-
Wesley - Thank you so much for taking the time to do that for us - it is very much appreciated.
I have now raised this as a new issue on githuib here https://github.com/gantry/gantry5/issues/713
Obviously it's going to take our developers some time to read through all that and address those items - so please be patient
Regards, Mark. - Please search forums before posting. Please make sure your post includes the version of the CMS you are using and a link to the problem. Annotations on screenshots can also be helpful to explain problems/goals. Please use the "secure" tab for confidential information.
-
-
-
- Djamil Legato
- Elite Rocketeer
- Posts: 2371
- Thanks: 70
-
Hello Wesley,
I just wanted to thank you SO MUCH for such a great job on outlining all the issues you encountered with Gantry 5 and accessibility.
We will do our best to make sure we cover all of it. Some of the issues I can see being easily implemented, although others might require a little bit more research on our end, as well as testing.
If you would like to subscribe to the issue Mark has pointed you to ( github.com/gantry/gantry5/issues/713 ), and you have a GitHub account, we can keep you up to date with the progress by commenting into it. Otherwise we can just update you in this topic.
Thank you again! -
The following users have thanked you: MrT
- / Djamil Legato / Lead Developer /
-
Time to create page: 0.065 seconds