GSOC 2012 Student Application: Accessibility Improvements for the CMS
Clone this wiki locally
« SilverStripe - Accessibility improvements for the CMS »
One week ago, I discovered the Google Summer of Code. I spent the week-end to nd an organization which fully represents my ideas. SilverStripe is the organization I chose, because they give the chance to anybody to make websites. Beside one project was very attractive to me : Accessibility improvements for the CMS.
The supposed best quality of the web is to get in touch a maximum of people. However there is a real lack in accessibility, for multiple reasons. One of them is certainly because of a technical aspect. Indeed some people could not access to the web because they couldn't use computer. However, this time has passed. Technologies made huge breakthroughs : there are now screen readers, braille display, vocal commands and so on... At the same time, the software used to be a problem. But now it is evolving in order to welcome those new users of web, such as motion/vison impaired users but also elderly people. We are entering in a new Web version that some people call the Web 3.0 : the semantic web.
How improve accessibility for the CMS of SilverStripe ?
The starter of this adventure is certainly in W3C. A lot of questions are resolved with some descriptions and criteria in the WCAG 2.0. They give potential points, which we can rely on. The challenge is to improve the accessibility for the CMS but without loosing the current structure. Here are my first requirements in order to enhance the accessibility :
- Control and reinforce the semantic.
- Improve the navigation.
- Enhance the text area.
- Give alternatives to media content.
- Make a user guide for the SilverStripe community.
Of course all this improvements would be check, test and validate. In order to be sure of the work, I would like to work with impaired users. I am actually connected to the medical world and especially with the CRRRF of Angers in France. It is a center of reeducation for people.
2.1 Control and reinforce the semantic
This step has some multiple tasks. It is based on the semantic of the code already existing and adding some tags with WAI-ARIA.
2.1.1 The patch phase
The very beginning of the project would be to check the whole code of the CMS. You can't implant new accessible module if the ground is not clean. For example, there must not be
<b> tags when the only aim of the tag is to reinforce a word. Indeed, it's inaccessible for visual impaired users. But, if you use a
<strong> tag instead, some screen-readers will make the dierence by accentuating the pronunciation. There also plenty of details like labels for text box. Another way to check the structure is to withdraw the CSS style or to use the Lynx navigator. Without CSS, the CMS should have a correct presentation with links which always describe
the user where he is. The CMS should also be understandable without elements coming from nowhere, long menus before to get the interesting part...
2.1.2 The enhancement phase
There are some new tags created with the WAI-ARIA initiative. They give some semantic and markup to the code. For example, there is a new tag call Role, which add a meaning to the object. For example, we can use this role to make people understand if the Tabs in the panel or the collapsible menu is closed. There is also something to do with the drag and drop reordering. It can be improve with tags telling people what can be grabbed and what is the drop eect. Another aim of the WAI-ARIA is to give to people the state of the current thing they are doing. For example, if there is a le which is very long to upload, we can give an information such as the percentage of the task remaining.
2.2 Improve the navigation
The experience of the CMS comes essentially with the mode of navigation. Indeed it is his main goal : make easier the conception of website.
The mouse is not the only experience, especially with impaired users. That's why I propose to develop a keyboard navigation. I thought of using the tabindex attribute. I also consider to use negative values with it and use programming. I mean by this that tabulation must give a quick access to the main ideas of the page, which will be done by using positive and ordered tabindex. Then, we can use negative tabindex to navigate through the details with the arrows of the keyboard.
It could also be more accesskeys. There are already two presents in the textarea but they use letters. It is more dicult to use letters because they are sometimes associated with others commands. I think we could use numbers instead. Besides, those acceskeys should be declared by some WEI-ARIA. 2) Actually, the only way to order les in the tree of pages is to use the drag and drop system. I propose to create a new system for motion-impaired users. We would dene a drag key, such as \ALT". When the key is down, you select a page. Then you can explore the tree with the keys arrows. Afterward, just drop ALT and drop the page as the same way.
###2.3 Enhance the text area
We could improve the quality of the text area, which is used to add some content to websites. The idea came to me when I downloaded the free screen-reader NVDA. This screen-reader describes everything and reads the text. It depends on how you build your page. By using it, I realize they were no clue for an impaired users to know which utility has each button. I will use the NVDA screen-reader as often as possible in order to test. Besides, it is not very practical for such a user to use the bold function since you must select the part of the text. In order to improve that, we could use tags which can be directly written. We just need to add some explanations to the tags with an anchor in the page. Finally, we can emphasize the size of buttons.
2.4 Give Alternatives to media content
Many users just disabled pictures and videos when surng. They have to be warned of what they are missing. The simpler task is to add an attribute "alt" on each . There are some missing actually in the CMS. Another thing to do is provide the possibility of writing a description when a user is uploading a le. By this way, each images on the websites created by the CMS would have the attribute correctly written. It could be the same for video or everything which could be disabled by the user.
2.5 Make a user guide for SilverStripe community
Technical aspects, especially with WAI-ARIA, are relatively new. That's the reason why I would read as much information as possible. It would be possible for me to write down all my discoveries in order to prevent the community from loosing some time. Indeed, when a module has to be develop, he could refer to this document in order to be surely conform to the norm. I could try to nd out which functions from any library respects really the rules. If needed, I could patch them. Of course, this help would be a natural feedback, because I know I have so much to learn with SilverStripe.
3 Success Criteria
I would like to introduce the success of this application with points :
- Try to get the AA success criteria in WCAG 2.0. This might be a greedy point but it worth trying.
- Write a complete overview documents for SilverStripe community.
- Have a positiv feedback from impaired-users.
This planning is given as an example. I will try to respect it as much as possible but it can evolved due to the bug encounter or the feedback from impaired-users. Indeed I would like to exchange with them as often as possible. They will surely have ideas that I couldn't imagine and much better than mine. Due to my school program, I won't be really able to focus at 100% on the project before the 10th of June. Until this date, I will stay in touch with the community and reinforce my knowledge about everything, especially WEI-ARIA and WCAG criteria. Moreover I will get closer to the code of CMS.
- From 10th June to mid-June : Intensive focus on the code of CMS. It has two advantages : I'll be able to add tags as much as possible (WEI-ARIA included) and I'll get more familiar with if for the rest of the planning.
- From mid-June to the end of June (about one week here) : patch libraries.
- From end-June to mid-July : Implement the keyboard navigation system. This system must work before the mid-term evaluation.
- From mid-July to the end of July : Enhance the text area
- For the rest of July and the beginning of August : Give alternative to media content.
- August : Get really close to impaired-users. Fix problems and add some content depending on feedback. Meanwhile, write the document for SilverStripe community.
Obviously all these points and deadlines are open to discussion.Work tightly with the community is one of my most important goal. I consider Google Summer of Code like an initiation for the Open Source. Also the whole project would be centered with a large amount of communication, with at least twice a week discussion and feedback from the mentor and community. Also I plan to do frequent commits so that the progress of the project can be tracked.
My name is Francois Desplanques. I'm a french engineering student at Ensimag (Grenoble Institute of Technology). Our main elds are computing and mathematics. At this school we learn to get to project to another very fast. We have learnt how to learn. I'm hard-working and motivate to achieve the Google Summer of Code this year. For example, I give you a website I've made when I was 16 years old : [http ://steveo.fr/~desplanques/Site TAC/Index.php](http ://steveo.fr/~desplanques/Site TAC/Index.php)
You can log in with :
- Username : SilverStripe
- Password : SilverStripe
Be carefull, it is in French ! As you mave have seen, I practised archery. I had a national level with competition.
- [http://www.c3rf-angers.asso.fr/](http ://www.c3rf-angers.asso.fr/) : the website of the hospital center which I am connected. Sorry, it is only in french !
- http://wiki.codetalks.org/wiki/index.php/Set_of_ARIA_Test_Cases : very useful to get example for ARIA tags.
- http://dev.opera.com/articles/view/introduction-to-wai-aria/ : to understand the essential role of ARIA
- http://www.w3.org/TR/WCAG/ : the guide of w3 for WCAG 2.0
- http://www.w3.org/WAI/guid-tech.html : give some links for the WAI
- http://www.alsacreations.com/tutoriels/ : it's in french but it provides tutorial for accessibility