Accessible Template Page - Before and After Demonstration
Improving a Web site using Web Content Accessibility Guidelines (WCAG) 2.0
Improving a Web site using Web Content Accessibility Guidelines (WCAG) 2.0
The pages is uniquely identified using the title element so that readers know on which page they are on. Also the page layout is organized using CSS rather than with table elements, which helps maintain a reading order that matches the visual presentation.
Note: Improvements on the template are propagated throughout the entire website.
<title>Citylights Template</title>
Note: Improvements on the template are propagated throughout the entire website.
Skip-links are provided to bypass the header and navigation blocks which are repeated on each page. This makes website use more effective for some readers and keyboard users. Skip-links appear when they are actived via the keyboard though ideally they are presented for all users.
Note: Improvements 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: Improvements on the template are propagated throughout the entire website.
The text alternative for this image of text contains the words that are displayed in the image.
<img width="250" height="65" src="../img/logo.svg" alt="Citylights: your access to the city. ">
Note: Improvements on the template are propagated throughout the entire website.
The script creates a new Document Object Model (DOM) node and uses document.innerHTML to add the content. There is also a redundant server-side script that inserts default content, in case JavaScript is not activated. This is not a requirement but good practice where possible.
var tochange = document.createElement("span"); tochange.innerHTML = today;Note: Improvements on the template are propagated throughout the entire website.
The left navigation menu is marked up as a list, and each navigation link is a list item.
<ul>
...
<li class="news"><a href="../news/annotations">News</a></li>
...
</ul>
Note: Improvements on the template are propagated throughout the entire website.
The template suggests styling for headings using the corresponding markup within the HTML code.
<h1>Template</h1>
Note: Improvements on the template are propagated throughout the entire website.
The template suggests use of the link text that contains a brief description in addition to "read more...", to make the link text more descriptive and to convey the purpose of the link. It also uses color that is distinct from the surrounding text to make it easier to identify the link.
Note: Improvements on the template are propagated throughout the entire website.
Contrast ratio between foreground color (#000000) and background color (#c0c0c0) is with 11.5:1 sufficiently high for most people to be able to differentiate.
.datahead { background-color: #c0c0c0; }
.sfdtable { color: #000000; }
Note: Improvements on the template are propagated throughout the entire website.