Improving a Web site using Web Content Accessibility Guidelines (WCAG) 2.0
Demo starts here
|
This and all other pages are identified as "Welcome to Citylights!" using the title
element so that it is unclear for some readers on which page they are on. The page layout also uses deeply nested table
elements (up to 5 levels alone for the template) that can cause confusion and disorientation to some readers.
<title>Welcome to Citylights!</title>
Note: Errors on the template are propagated throughout the entire website.
The text alternative for this image of text is overly verbose and does not serve the equivalent purpose of the image. The text alternative is as follows:
<img src="top_logo.gif" alt="Red dot with a white letter 'C' that symbolizes a moon crescent as well as the sun. This logo is followed by a black banner that says 'CITYLIGHTS' which is the name of this online portal. Finally, the slogan of the portal, 'your access to the city', follows in a turquoise green handwriting style and with a slight slant across the top banner." ... >
Note: Errors on the template are propagated throughout the entire website.
Selecting an item from the drop-down menu automatically redirects the user to another page. This is confusing and disorienting to some users, especially keyboard users who are trying to move from one item to the next rather than actively selecting an item.
<select onchange="...">
Note: Errors on the template are propagated throughout the entire website.
The script uses document.write()
technique which should be avoided. Content inserted that way into a page is not included in the Document Object Model (DOM) and may not be properly communicated to the accessibility APIs used by some assistive technology.
document.write(today);
Note: Errors on the template are propagated throughout the entire website.
The page does not offer mechanisms to bypass the header and navigation blocks which are repeated on each page. Such skip-links make website use more effective for some readers and keyboard users.
Note: Errors on the template are propagated throughout the entire website.
The template suggests styling for headings without use of the corresponding markup within the HTML code.
<p class="headline">Template</p>
Note: Errors on the template are propagated throughout the entire website.
The items in the left navigation menues are images that do not have any text alternative, so that it is unclear to some readers what the links correspond to.
<a href="..." ... ><img src="..." ... >
Note: Errors on the template are propagated throughout the entire website.
The is automatically removed from the menu items using scripting, so that some users cannot navigate to these items.
<a href="..." onfocus="blur();" ... >
Note: Errors on the template are propagated throughout the entire website.
The template suggests use of the link text "Read more...", which is not descriptive to convey the purpose of the link. It also uses color that is similar to the surrounding text making it hard for some users to identify the link.
Note: Errors on the template are propagated throughout the entire website.
Contrast ratio between foreground color (#41545D) and background color (#A9B8BF) is too low for some people to differentiate.
{color:#41545D; background-color:#A9B8BF;"}
Note: Errors on the template are propagated throughout the entire website.