WebSavvy
13-04-2008, 13:45/01:45PM
I thought it might be fun to share some tips for ways to make your site web accessible.
In order to be compliant with WAI guidelines, a site must use tabindex on links and form controls (e.g., input fields and label fields).
The easy way to do tabindex is to automate it with PHP.
In the very top of your page under the opening <body> tag simply add the following code variable:
<?php $tab=0;?>
Then, inside of your links and form controls add tabindex in the following manner:
links
<a href="/somepage.html title="Some Page" <?php echo "tabindex=\"" . (++$tab) . "\"";?>>Some Page</a>
form controls
<label for="blah" <?php echo "tabindex=\"" . (++$tab) . "\"";?>>Blah: </label><input type="text" name="blah" id="blah" value="" <?php echo "tabindex=\"" . (++$tab) . "\"";?> />
How ++$tab works is, it grabs the starting number and then increases it by 1.
So, if we start with 0 the very first link or form control will have tabindex="1" and then the next following, will have tabindex="2"
If your page has CSS positioned blocks that contain links or form controls, you will need to manually go through the page and add "start" numbers before a section in order to make tabindex flow logically.
If any of the above isn't clear enough, or needs to be expanded on more, please feel free to ask. I thought this tip might be helpful to those that are trying to make their sites more web accessible.
This is some code I worked out on my own about 2 years ago. :)
In order to be compliant with WAI guidelines, a site must use tabindex on links and form controls (e.g., input fields and label fields).
The easy way to do tabindex is to automate it with PHP.
In the very top of your page under the opening <body> tag simply add the following code variable:
<?php $tab=0;?>
Then, inside of your links and form controls add tabindex in the following manner:
links
<a href="/somepage.html title="Some Page" <?php echo "tabindex=\"" . (++$tab) . "\"";?>>Some Page</a>
form controls
<label for="blah" <?php echo "tabindex=\"" . (++$tab) . "\"";?>>Blah: </label><input type="text" name="blah" id="blah" value="" <?php echo "tabindex=\"" . (++$tab) . "\"";?> />
How ++$tab works is, it grabs the starting number and then increases it by 1.
So, if we start with 0 the very first link or form control will have tabindex="1" and then the next following, will have tabindex="2"
If your page has CSS positioned blocks that contain links or form controls, you will need to manually go through the page and add "start" numbers before a section in order to make tabindex flow logically.
If any of the above isn't clear enough, or needs to be expanded on more, please feel free to ask. I thought this tip might be helpful to those that are trying to make their sites more web accessible.
This is some code I worked out on my own about 2 years ago. :)