What is in this section?
In this section of the site I aim to share some tips and tricks that I have used in this site. Some of them may have been influenced and adapted from other peoples solutions, so I will try and give credit were credit is due.
Image replacement.
A number of time when creating website I like to produce a header image which contains the title of the site or other text within it. Some of the time a background image can be used with plain text over the top, but when specific fonts are required or plain text is not visible enough, rendered text is the obvious replacement. This can cause problems, as screen readers have no access to the content of the image other than the alt text.
A solution to this problem is to provide a plain text alternative but hide it from the view of sighted people, who are able to see the graphic. This allows screen readers or brail browsers to provide their users with the information whilst sighted users can be presented with logos of stylised fonts. This can be seen on this site, the title image is replaced by text in an H1 tag with the text content in. Click the "Text" button in the top right to see it change.
To do this I used and adapted the Radu Method. I created a div that acts as a container for the image, this image is then displayed as a background image in the CSS with plain text over the top in the HTML. Also in the CSS I give the plain text a negative margin so it disappears off the top of the page and out of view for sighted users. This method is also beneficial for users with text browsers that would not show the image. The code can be found below.
Image replacement code:
Bobby doesn’t equal accessibility!
Some people may take a validation in bobby to mean that a site is accessible. This is however untrue, bobby can only check the code behind the site for missing elements or common pitfalls. They can not however check the semantics of a site, for example a site could pass bobby with a AAA grade but have meaningless ALT text. Bobby has no way of checking that the ALT text used has any relevant meaning, even if it does it may not be descriptive enough or may just cause confusion to users.
This may lead to problems in a few areas, firstly developers and web masters may assume that all they need to do to create an accessible site is make it validate in bobby. This may take the focus away for the users whom should be paramount, instead apply it to botch jobs in order to jump on the accessible site gravy train. Secondly the use of badges on sites and accessibility in general may be tainted by false claims.
Bobby should not be used as a tool to make a site accessible. It should however be used to highlight areas that you may have overlooked. These areas will then need consideration and thought so that they can become accessible to your target audience.
Style Sheet switching
There is always an advantage in giving your users choice. In this case allowing the user to choose a style may help them and improve their experience. On this site I have an option to increase and decrease the text size of the main content by 2 points, as well as removing all styling. Most browsers used today have an inbuilt function to increase and decrease text sized, however on some sites they do not work (as text sizes are sometimes set by the developer, or are in graphical form) and the controls change from browser to browser. On Internet Explorer the option is hidden in a sub menu and there is no short cut key, some novice users may also just not know about it. By putting an option at the top of the site with descriptive title text I hope that users will notice they have the option and be more inclined to use it.
To code this option into my site I used PHP, there is an option to use Java Script but there is still a lack of total saturation in the market. I have instead chosen to use cookies to store users preferred preferences, as I believe cookies are more commonly accepted. I have adapted the example taken from ALA's PHP style sheet switcher, in their example a separate page is used to set the cookie and redirect the user to the referring page. This however has some problems on some versions of PHP so I made some changes.
I placed the script at the top of ever page, and ran it when the URL contained the get variable used to switch the styles. If this was set I would then create the cookie containing the chosen style option. However cookies are not accessible until the next time a page is loaded, so I also had to set the get variable in PHP for use until the page was refreshed. If the get variable is not set when the user visits a page (not in the URL), the script gets the chosen style from the cookie, if there is no cookie the default style is used.
Style sheet switching code:
Using Acronym tags.
The nature of this site means that I have used a number of acronyms. Rather than force users to have to look up the meaning of these acronyms or not fully understand part of the site I have used the acronym tag. This tag allows me to supply the acronym with a title that contains the meaning of the acronym. This is a HTML tag and therefore it is styled by the browser, this styling differs from browser to browser, some will underline the acronym, make it italic or even bold. The type of browser will also choose how this information is displayed, most web browsers for personal computers show the information when the acronym is hovered over, however some browsers such as a mobile phone browser may choose not to display this information at all due to lack of screen size.
The code used:
How the code is displayed:
Technologies used on this site:
HTML,
CSS,
PHP.
The order of content.
The order of the content in the HTML file may not seem important to most users, but when a screen reader is reading it out, the order the content appears in suddenly becomes very significant. As a general rule of thumb, the navigation tends to come first followed by the content and then the footer. This is a logical layout and fine as long as it is followed consistently thought the site. However on some sites huge quantities of navigation can lead to incredibly repetitive reading of links and wasted time.
A great solution to this is to add a skip to content link at the top of your page, it may also be useful to add a skip to navigation, thus allowing the user to have quick access to the two most important areas of the page. These can be simple anchor tags.
The code used:
On this site I have an accessibility section at the start of the page, first are the skip to navigation and content links followed by a link to the help. Then there are the style options, followed by the site title. Next comes the navigation, page title, section navigation, main content and finally the footer.
With the style sheet activated the order appears to be different as I have positioned the items according to my design. There are some areas were I have chosen to hide elements through the CSS. I have done this because I believe they are less important to some one that isn’t using a screen reader, that would read out the elements hidden from view or not.
Access Keys
Access keys can provide users with a standardized set of keyboard shortcut keys for navigating sites. This reduces excessive movement of the mouse that can be largely beneficial to users with reduced motor functions.
To set up access keys you need to enter the accesskey property into a link. Which can then be used by pressing ALT + accesskey on a PC and Control + accesskey on a Mac.
The code used:
There are few access keys which are not used my some screen reader or another, I have therefore used the number keys 1 to 7 as this is the most sensible range with least conflicts. A list of these reserved keys keys can be found here.
The access keys used on this site can be found on the Help page.
Discriptive Links.
When linking inside the text of your site, it is good practise to use easily understandable text links that are also descriptive. These links should also have title text to add more information about were the user is being taken.
More often than not, text links on pages are non descriptive and generic such as, Click Here, or More Info. This can be a huge problem when users of text browsers or screen readers hear the links on a page out of context (a feature to increase speed of navigation) especially if there are a number of More Info links on the page. A simple solution to this is to add the basic information to the link for example, More Info On Accessibility. This provides the user with a clear understanding of what the link is about.
Adding title text to links will further the accessibility and usability of your site. Title text is displayed when the user hovers their mouse over the link. It is useful to provide more in depth information about the link in the title text, so users can check were the link will take them. In our earlier example of More Info On Accessibility, the title text could be, Click here to view a web site on accessibility by Rob McMichael. Thus providing the users with a clear understanding about what they are to expect.
Adding title text is simple, as shown bellow:
This will be displayed like so:
More Info On Accessibility