In my earlier article ‘Designing websites for accessibility in Expression Web – Part I’ I have shared certain tips about how to create web content that is accessible to everyone especially to users with certain disabilities. This is the second part of the article, which covers how to check if the web content you have created is accessible.
I have already mentioned in the first part of the article, that making your website accessible is one of the important aspects you must consider while creating your websites. To reach out to people of varied capabilities you need to make your website easily accessible to them. Along with making it accessible by using various attributes and features, testing your website’s accessibility is just as important. It is essential for you to know if you haven’t missed anything or made any mistake. Expression Web has a feature called the ‘Accessibility Checker’. The feature is available in versions 2 and above. The Accessibility Checker will check your web page or the entire website against the WCAG (Web Content Accessibility Guidelines) or Access Board Section 508. Accessibility Checker outputs all the errors and warnings related to accessibility in your web page or website. Let us explore the Accessibility Checker in this article.
To turn on the Accessibility Checker, do either of the following:
a. From the Tools menu > choose Accessibility Reports. This would prompt an Accessibility dialog box as shown below:
b. From the Panels menu (in Expression Web 3) or Task Panes menu (in Expression Web 2) > choose Accessibility. This would open up a panel (known as task pane in earlier version of Expression Web) in the bottom of your workspace, as shown below:
In the panel, click the Run Accessibility Checker button (green arrow) to open the Accessibility Checker dialog box shown above.
NOTE: The Accessibility task pane may look little different in Expression Web 2.
Let us take a look at the Accessibility Checker dialog box in detail:
I. Check where:
a. All pages – Choose to check all pages in your site.
b. Open pages – Choose to check only the pages that you have open.
c. Selected pages – Choose to check only the selected pages. You need to select the pages from the Folder list and then choose this option.
d. Current page – Choose to check the page that you currently have open.
II. Check for:
a. WCAG Priority 1 – WCAG or Web Content Accessibility Guidelines explain how to make content accessible to people with disabilities. There are three priority levels and choosing this option would enable Expression Web to check the compliance with the recommendations of Priority 1.
b. WCAG Priority 2 – Choose to check accessibility as against the Priority 1 of WCAG.
c. Access Board Section 508 – Section 508 is a legislation that is an amendment to the Workforce Rehabilitation Act of 1973. The standards define the types of technology covered and set forth provisions that establish a minimum level of accessibility. Choose this option to check accessibility against this section.
NOTE: To check accessibility against both WCAG and Section 508, check both the boxes.
a. Errors – Choose to show only the errors.
b. Warnings –Choose to show only the warnings.
c. Manual Checklist – Choose to view a list of problems and check it yourself manually.
Click the Check button to run the Accessibility Checker. When the Checker completes its checks, the Accessibility Panel opens and docks at the bottom of the workspace. See image below:
The Accessibility task pane has five columns:
1. Page - lists the pages that have errors or issues.
2. Line – displays the line number at that has an issue.
3. Issue Type – shows what type of issue it is, for instance an Error, a Warning or Manual check required.
4. Checkpoint – gives you a link to the WCAG checkpoint for more information. Expression Web does not currently link to the Section 508.
5. Problem Summary – explains the issue.
The task pane has six buttons on the left hand side:
1. Run Accessibility Checker – lets you run the Accessibility Checker.
2. Next Result – to move to the next issue in the report.
3. Previous Result – to move to the previous issue in the report.
4. Refresh Changed Results – lets you refresh the report. Once you have rectified the errors and saved the changes, you can refresh the report.
5. Show Problem Details – gives you more information about the issue. When clicked, a box with detailed information pops up, as shown below:
6. Generate HTML Report – will help you to generate an HTML report with the checker results. You can save this report in your site or anywhere else and use it later.
To go to the error, double-click on the error in the Accessibility task pane and Expression Web will take you to Code view and the line of code with the error will be highlighted.
NOTE: If you are already in Split view then, you will stay in the Split view and the line of code with the error will be highlighted.
In the above example, I have not added an ‘alt’ (alternative text) attribute to the image. Alternative text is important for users with poor or no vision. They will not be able to make out what the image is. Alt text will also be useful in case if image is not rendered by the browser and when you hover over your mouse over the image, the alt text would describe what the image was about. Adding an alt attribute to the <img> tag in the above example will do the trick.
So once you correct the above error, click the Refresh Changed Results button in the Accessibility panel and the panel will be cleared.
Use the Accessibility Checker to test your pages for accessibility against the WCAG and /or the Access Board Section 508. Accessibility is an extensive subject, and I have tried to cover the basics in these two parts of this article. I hope you enjoyed reading it as much as I enjoyed writing it.