I don't remember when was the last time I used the keyword global in php to allow a function to use a global variable. Why did I do it today? Because I built a prototype and wanted a quick solution, but the function is evoked by an event, hence the value of the content can change unexpectedly.
I think it taught me not to take shortcuts, as the consequences can be bad.
I took it from the example of XML Element Structure on the official php website.
Tuesday 30 October 2012
Monday 27 February 2012
Maintaining accessibility when creating dynamic element driven by JavaScript
Clients these days require to have dynamic flashy style pages, but a lot of
organisations need to maintain their website accessible to a wide audience, whether
they don't want to lose potential customers, but also discrimination laws force
them to do so.
jQuery and others frameworks offer to create sliders and other rich GUIs rapidly, but try to disable Javascript (easiest when using FireFox to install web developer tool and the disable menu will do the trick) and you found out things stop working.
One of the tricks to achieve both nice looking accessible slider is to use list element and style it with CSS. Generaly you want to create a scroll down list that people can navigate even with a mouse and in the onLoad or onReady event of the JavaScript you hide the vertical scroll bar and style the element.
In the second image on the right side of the image you can spot the scroll bar and the white line just above the white helmet the person wears is the seperation between seperate items in the list.
The HTML sample is where class is the CSS style, I used in this example the default one, but you can modify and create new ones based on the default one.
<div class="jcarousel-skin-tango" id="mydiv">
<ul>
<li><img src="" /></li>
<li><img src="" /></li>
</ul>
</div>
The mechanism is based on JavaScript and I used jCarousel.js
that is a plugin for jQuery.
jQuery and others frameworks offer to create sliders and other rich GUIs rapidly, but try to disable Javascript (easiest when using FireFox to install web developer tool and the disable menu will do the trick) and you found out things stop working.
One of the tricks to achieve both nice looking accessible slider is to use list element and style it with CSS. Generaly you want to create a scroll down list that people can navigate even with a mouse and in the onLoad or onReady event of the JavaScript you hide the vertical scroll bar and style the element.
jQuery("#myDiv").css('overflow','hidden');
Javascript enabled |
Javascript disabled |
The HTML sample is where class is the CSS style, I used in this example the default one, but you can modify and create new ones based on the default one.
<ul>
<li><img src="" /></li>
<li><img src="" /></li>
</ul>
</div>
The mechanism is based on JavaScript and I used jCarousel.js
that is a plugin for jQuery.
Subscribe to:
Posts (Atom)