The following article looks at testing a websites accessibility by utilising online accessibility evaluation tools. For the sake of this exercise, a simple website has been created with HTML & CSS components. The site looks at a range of different technologies and devices that are used by professional photographers. The website has been provided along with submission with the files having been made accessible to assessors through the zip file titled “Accessibility Test Website”
There are many different online evaluation tools that can be used to check a websites accessibility. The W3C have an assortment of validators that check the source code against accessibility standards while user agents provide web browsers that allow plug-ins to be installed that enable users of different disabilities to access online material with ease. The plug-ins provide a good means for accessibility testing which allow for isolating source code and accessing the websites bare content. Listed below are the online testing tools that I will be using during the course of my accessibility testing and a brief description as to what it is they do.
The W3C‘s markup validation service checks the markup validity of web documents and identifies areas of the web page that could benefit and are recommended for adjustment to improve its accessibility. This service will help test the sites images and their accessibility for those that require an alternative descriptor instead of the image in its visual form. A set of alternative text descriptions are to be applied to all informational images that exist within the site.
Browser testing will be conducted to ensure that the websites information that is conveyed in colour, can also be accessed without colour. Many browsers offer this type of accessibility support so that the user can set different colours and fonts with the use of the browsers tools. This type of testing is quick as well as reliable and has been chosen because it is as close to the users commands and offers the tester insight into developer tools that are provided within browsers.
An important part of accessibility testing is checking the sites ability to read as content only and involves isolation of website content (HTML) by way of separating the applied styling elements (CSS). In order to separate the content and fulfill this testing we will be disabling the styling elements. Testing will be performed by using browser plug-ins to attempt to remove style formatting from the technology website
Vision impairments such as colour blindness are quite common but rarely spoken of. Those that are affected have difficulty distinguishing certain colours. Developers who make poor choices between background and foreground colours, are actually rendering there websites inaccessible to these groups. Accessibility testing will be carried out utilising colour contrast checkers that work on the basis of entering the hexidecimal numbers of foreground/background colours into an online checker which then grades your colour choices with a contrast ratio that will then receive an endorsed grading in accordance with the Web Content Accessibility Guidelines WCAG, a recommended standard set out by the W3C
Compiled below is a checklist of 10 simple steps that developers can take in order to check the accessibility of their web pages. Will your newly developed website pass these accessibility tests?
- Check informational images for alternative text. Example of informational images are Logo, Icons. This is achieved by applying the alt=” ” attribute to the <image> tag in your code. The alternative text should reside within the quotation marks. This is helpful when browsers do not support image display and for people with visual impairments. Place the cursor over an informational image on your website, you should have a box appear with a short phrase or sentence that explains what exists. This type of information is not necessarily a literal description of the image, but more so, it should cut straight to the point of the image and not be long and drawn out.
- Check decorative images for alternative text. Decorative images are aesthetically driven and do not require alternative text because they are simply not conveying important information. This does not mean that it is to be left out entirely. In this case the alt attribute should still be present under the image tag but it should be set to null. This means there is to be no alternative text within the quotation marks of the alt attribute. Setting decorative images the attribute of null text is very important because if it is not set, users whose browsers do not display images will be alerted to the images presence but with no description offered, lending to frustration and user discouragement.
- Audio and video content should contain written transcripts. This type of support offers people with hearing impairments a fair chance at accessing multimedia content that produces audio or sounds. Websites that provide video content might choose to do this in the form of captions that overlay the video where is websites that publish podcasts that are of an audio nature, can choose to provide a supplementing transcript record of the pod cast. Providing transcripts of your content is a relatively inexpensive offering for web developers. Some transcription services can convert transcripts directly into HTML format.
- Check that forms are accessible. Web forms provide space or fields for users to input specific information. Fields on web forms are accompanied by a prompt which resides next to the field. For example, the prompt First Name next to an open field where a user would input their first name. Clicking on the prompt text should provide a flashing cursor in its associated field. This is achieved by using the <label> tag which unambiguously links the prompting text to the field. If the label tag is not present, Your forms may be inaccessible to some users.
- Check that the text on your web page be resized. People with vision impairments may have problems viewing the text of your web page. Common web browsers have the ability to resize text on a web page. Check this against commonly used browsers. Using Mozilla-Firefox, you can achieve this by navigating the menu to the Options — Content page. You can set default font sizes for your browser from here. There is also a quick menu option to increase the visibility by zooming in and out with simple plus (+) and minus (-) symbols. The zoom in, zoom out feature can also be achieved via keyboard short-cuts. If you cannot achieve this outcome, your page may be inaccessible to those with vision impairments.
- Check your website in the Lynx browser. The Lynx browser is the oldest known web browser that is still used and developed having been founded in 1992. It does not support any other content other than text which makes it a good test for web accessibility. If you can interpret the content and navigate through your web pages successfully, you are fulfilling a majority of the web accessibility guidelines as stipulated by the W3C‘s standards.
- Check that you can access all areas of your site without a mouse. Some people with physical or motor disabilities cannot use a mouse and rely on keyboard and or voice recognition software. Check your web page for navigation using just the tab, shift-tab, and enter keys and combinations. This will be a good indicator as to how these groups of people will fare using your website.
- Check that there is a site map available. Site maps are extremely useful to all those people that may become a little unstuck using your website. It compiles a list to everything that resides on your website with valid links to their related content and areas. Site maps are valuable tools not just for those with disabilities but for all of us.
- Take time to ensure link text makes sense out of context. Link text refers to the alternative text that has been inserted throughout your site that guides users through links to other sections of your site. Blind users often tab through web pages and rely heavily on this information. It is up to the site developer to provide descriptive information using small phrases that make sense out of context. For example, “Learn more about our latest sale promotions”. Developers can achieve this by simply using the title attribute as well as thinking a little outside the box for those with vision impairments.
- Check your web pages with an automated program. Web accessibility evaluation tools are online services that help check a websites accessibility and to what level your site conforms with accessibility guidelines. There are a number of these services available and it is up to you to decide which one you would prefer to use based on your level of desired conformance. The W3C offer a list of these service providers with filtering options based on their own standards as well as other internationally developed standards.
World Wide Web Consortium – W3C
The Web Standards Project
This article looks at Web Accessibility and gives specific mention to the standards and requirements that have been established by industry professional groups.
The World Wide Web Consortium or simply W3C, have developed and fostered a program called the Web Accessibility Initiative (WAI). The initiative is regarded as the international standard for web accessibility. The WAI set standards, develop guidelines, provide resources and support materials that promote systematic web development and aims to make the web accessible to all.
Under the WAI, the following standards have been authored and are the global bench mark for web accessibility
- Web Content Accessibility Guidelines (WCAG) – The WCAG standard outlines how to make web content more accessible to people with disabilities. The content refers to information on a web page in the form of text, images, multimedia material, and sounds. It also refers to the programming language or markup that defines its structure and presentation. The WCAG standard is designed with authoring in mind and is aimed at web developers and designers, web authoring tool developers, web accessibility evaluation tool developers and any other persons or groups such as governments or community groups who strive to set a standard in web content accessibility.
- Authoring Tool Accessibility Guidelines (ATAG) – The ATAG standard explains how to make the authoring tools that are used to build dynamic web pages, accessible to those with disabilities so they too can create and publish web content. Furthermore and importantly, the standard promotes the production of web content in a way in which the published content itself conforms to the Web Content Accessibility Guidelines (WCAG) so that people using the website and on the receiving end of the chain, can access and interpret the content. The ATAG standard is primarily for the use of developers of authoring tools and those that wish to develop tools that are far more accessible. The following are some of the types of authoring tools that developers are utilising and that should adhere to the ATAG standard, What-you-see-is-what you get HTML editors, software for developing websites such as content management systems, software that converts to documents to web content technologies, multimedia authoring tools, websites that allow users to add content such as blogs and photo-sharing sites.
- User Agent Accessibility Guidelines (UAAG) – Quick Note: For the intended purpose of this topic, a user agent is described and intended to be a web browser or other software application that renders web content. Generally speaking and according to wikipedia, a user agent is a software agent that acts on behalf of a user. The UAAG standard explains how developers of user agents can work to make them accessible to those with disabilities. In some cases, accessibility is better met in the browser than in the web content allowing users with specific needs to customise the content, preferences and interface to suit their specific needs. For user agent developers that conform to the standard, they will improve upon their web accessibility by allowing the software greater ability to communicate with assistive technologies that are widely used by people with disabilities. The UAAG has been developed primarily for the use of developers of web browsers, browser extensions, media players, readers and other software applications that serve the purpose of rendering web content. The standard is also intended for those looking to improve upon their own software when it comes to audience reach and its accessibility, individuals looking to choose a more accessible user agent or even people who wish to file bug issues against the UAAG in the hopeful desire that their chosen user agent will improve upon these issues in the future.
As well as the above guidelines established by the WAI, the initiative have published a number of documents that serve as recommendations for improved accessibility across modern websites.
- Accessible Rich Internet Applications (WAI-ARIA) – The ARIA documentation provides accessibility recommendations on how to help make web pages with more dynamic and interactive content accessible to those with disabilities
- Independent User Interface (Indie UI) – Indie UI describes ways in which user actions can be communicated to web applications. It will provide improved accessibility by allowing web applications to function across different devices, different assistive technologies and for users with differing but specific needs
World Wide Web Consortium – W3C