JavaScript
Make the Navigation Menu user specific
For a workflow application serveral user types are defined. In general, depending on their roles, users have different rights. In particular the navigation menu must be user specific (e.g. some users may have write access, others only read access ).
How to automatically modify web content locally
Web pages do not always provide the design we want them to. There are web pages which one visits very frequently and which one would like to modify slightly. Such modifications would be for example: a different font, to resize a part of the page or to eliminate a part of the page.
Using a predefined Blogger template to "show the voice generator the right way"
Idea of a solution
As far as the majority of blind people use special software, so call “screen readers” that read everything that is shown on the screen. As far as we deal with websites, i took into account, in my opinion, one of the best, flexible and not so buggy voice generator - FireVox (www.firevox.clcworld.net/). It’s a screen reading extension for Internet browser Mozilla Firefox. As browser itself, FireVox is also completely free and open-source.
User can control what FireVox reads by pressing Tab button. Each element of the webpage that can have focus and is accessible by Tab button can be “observed” by user. Also FireVox provides some information about the object under the focus, e.g. whether it’s an input field, image or hyperlink. Also settings of FireVox allow to set the mode when it will read each element on the webpage which is situated under a mouse cursor.
Actually usage of Tab button is not always comfortable for user, because elements on a webpage can have completely illogical tabulation order. Moreover, the default tabulation queue of a webpage consists only of hyperlinks and input fields.Thus it’s not always simple to obtain a right impression about a webpage. So I decided to develop such an engine that can set logical tabulation order that is easy comprehensible and clear.
So the set goal was to create a standard Google Blogger template that will support assigning right tabulation order to provide clear picture for blind people using FireVox and also assigning different color\contrast schemas for people with low eyesight.Also, as a minor goal I set minimizing the difference between website for disable people and people without any disabilities. For instance I tried to create one template for both audiences.
Used technology
As far as Google Blogger templates in general have the same meta-structure, we can define an algorithm which won’t depend on particular implementation of a user blog. We can define several principal widgets: Calendar, Posts feed, Comments line, Last 5(10,…) posts, Fast links and Help links. For them we develop an algorithm in Javascript for arranging tab order. All other elements are situated in the end of a tabulation queue having a default tab order between them. This was done because we cannot predict all the possible widgets that blogger can introduce to his webpage, but on another hand we cannot remove them from the tabulation queue, because it will make those elements unreachable for disabled people.
The algorithm is run after loading the page and arranges tabulation order by assigning appropriate values to tabIndex property of webpage elements in the following order:
1. The header and description of a blog
2. Items of special navigation panel, that was also added to a standard template (explained later).
3. Posts feed (Date, Title, Post body, Post details)
4. Last five posts
5. Blog archive by calendar
6. Help links
7. Style changing panel (explained later)
8. All the rest elements
This is the explanation of a general algorithm. I also introduced a new navigation panel that has the following sense: the user accesses this panel in the beginning of website exploring, right after “reading” the title and the description of a blog. This menu provides anchor links to different parts of a website. But along with normal behavior of web anchors we implemented such a functionality that arrange the tab order so that the selected element\widget will first obtain the focus after pressing the Tab button. Also we removed from the tabulation queue all other elements of a webpage, so that user could concentrate on exploring the chosen element\widget. The tabulation queue is cyclic, it means that after exploring, for example, Last five posts, user is transferred (by pressing Tab) again to the new navigation panel, so that he could choose another option. Option “navigate all” sets the tabulation algorithm to the general state.
Font size and color change
I was doing this project in collaboration with another student who was responsible for font size and color change in order t o provide different contrast schemas for color-blinded people. Here is a short summary of what he has done, just to give a full picture.
The font and background color change feature is intended for people with low vision problems. Our widget provides possibility to select between four different color sets.By selecting a specific style the cookies are created so the style will be applied to domain (e.g. http://hci-unibz.blogspot.com/), which means that all blog posts will retain the selected style. Furthermore next time user will connect to the site the browser will remember his style settings. If user selects “normal” style the cookie will be deleted.
The text size change is considered browser feature: “Most Web browsers include functionality to let you increase or decrease the text in a Web page… …The browser settings should work when browsers and Web sites meet WAI guidelines and are designed for accessibility, flexibility, and user control” [1]. Taking this reference into account we intentionally leave text resizing for user control using browser flexibility.
Conclusion
So, I have implemented a nice and easy to use tool for publishing your blog not only for sighted people, but at the same (that’s important) moment for blind and visual disabled people. The implementation can be checked on http://hci-unibz.blogspot.com/ with FireVox voice generator switched on. The created standard template for Google Blogger doesn’t depend on particular user’s design solutions for his blog page, as long as created algorithm uses meta-structure of a blogging service itself. Also the tweaking for disabled people is almost not noticeable for sighted people, if not taking into account font-style-changing panel. For normal users it looks like a logical arrangement of tabulation order, if at all they use Tab button, because normally navigation through pages is done either with mouse or touch-pad.
References
[1] http://www.w3.org/WAI/changedesign
[2] http://www.teleacademy.it/course/view.php?id=159
[3] http://www.w3.org/WAI/intro/accessibility.php
[6] http://www.eblogtemplates.com/
[7] http://blogger-templates.blogspot.com/
[8] http://msdn.microsoft.com/en-us/library/ms533050(VS.85).aspx
Taggings:
Enabling people with disabilities access Google Blogger Service
<p><p class="MsoNormal"><span style="font-family: Calibri; mso-ansi-language: EN-US;" lang="EN-US"><span style="white-space: pre;"> </span>Web accessibility means that people with disabilities can use the Web. More specifically, Web accessibility means that people with disabilities can perceive, understand, navigate, and interact with the Web, and that they can contribute to the Web. Web accessibility also benefits others, including older people with changing abilities due to aging [1].</span></p><p class="MsoNormal"><span style="font-family: Calibri; mso-ansi-language: EN-US;" lang="EN-US"><span style="white-space: pre;"> </span>Nowadays social networks become more and more important in our ordinary life, especially life of youngsters. Millions of Internet users read or either write blogs, they share feelings, emotions, thoughts, information, video and much more.</span></p><p class="MsoNormal"><span style="font-family: Calibri; mso-ansi-language: EN-US;" lang="EN-US"><span style="white-space: pre;"> </span>That’s why it was decided that it would be unfair to deprive blind people and people with low eyesight of such an interesting part of nowadays life. So it was decided to create easy implementing tool to provide access to blogs for disabled people with low eyesight. As a platform Google Blogger was chosen as far as it provides a lot of possibilities to manage the structure of the blog.</span></p><p class="MsoNormal"><span style="font-family: Calibri; mso-ansi-language: EN-US;" lang="EN-US"><span style="white-space: pre;"> </span>Exisiting solutions include contrast schemas and voice generators. But the major problem in using the voice generators is that they do not structure the information, namely the order of the information that is read out-loud is usually not the right one, so person gets into a chaos of information and he\she has to understand on his own, what is realtions between pieces of information he received. </span></p><p class="MsoNormal"><span style="font-family: Calibri; mso-ansi-language: EN-US;" lang="EN-US">References:<br />[1] <a href="http://www.w3.org/WAI/intro/accessibility.php">http://www.w3.org/WAI/intro/accessibility.php</a></span></p><p class="MsoNormal" style="margin-left: 35.4pt; text-indent: -17.4pt;"><span style="font-family: Calibri; mso-ansi-language: EN-US;" lang="EN-US"> </span></p></p>
tinymce init options
tinyMCE.init({
...
force_br_newlines : true,
forced_root_block : '' // Needed for 3.x
});
or use css to set margin and padding:
p {margin: 0; padding: 0;}
Taggings:
Usage of gwt-fx with not mozilla based browsers
<p>Assuming we want to move a specified element from point A to point B, where A and B are absolute positions relative to aparent -element described within a linked css-style sheet;</p><p>(e.g. elementStatA{position:absolute;top:0;left:0}</p><p> elementStatB{position:absolute;top:10;left:10}</p><p> NmorphStyle will accept the two selector-names as parameters and interpolate the values so that a smooth transition can be displayed; however the whole undertaking will fail (without notification what so ever) if the browser of choice is ie8 (or less), and the html is rendered in strict mode.</p><p> </p>
Taggings:
Create a popup window using Javascript
<p>Implement a website popup window plugin so that rich media can be embedded to it. The plugin should be able to be capable of embedding external flash videos, images like JPG, html elements. Images that are grouped together should be shown as gallery.</p>
tinymce custom buttons
a newsletter application which uses tinymce for content creation. it should be possible to add a custom button to the tinymce toolbar which inserts custom tags into the text, which later will be replaced be data from a database.
e.g.
Good morning <?last name?>,
Taggings:
tinymce
in tinymce wrapping everything in <p> tags can be very annoying and is often an unwanted behaviour. how can you force tinymce to use <br /> instead of <p> tags?
Taggings:
Pages
