Activity 6: HTML Markup Validation
One of the main requirements under the robust principle is using web technologies as they were intended to be used. Assistive technologies rely on standard uses of HTML, for instance, to effectively read out content on the Web. When HTML is used in non-standard ways, i.e., when it is used incorrectly, it can often affect accessibility.
Surprisingly, it can be difficult to find websites that actually use valid HTML. More often than not, websites contain a range of markup errors, which may or may not affect accessibility. In many cases, broken HTML markup won’t cause problems. Browsers are pretty good at dynamically correcting HTML. But there are difficult-to-predict errors that sometimes interact with other errors in HTML markup, which prevent assistive technologies from accessing parts of the content.
From the perspectives of search engines (a site’s ranking in search results) and responsive design (a site’s ability to work effectively across a range of browsers and operating systems), using valid HTML is important for each of these reasons (i.e., the curb cut effect).
In this activity, you’ll review the validity of the HTML used on three (3) websites that you are familiar with. It could be your own site, your employer’s site, perhaps a site where you shop online, or maybe your banking site (though not limited to these). Choose sites that you use regularly or that you would expect others to use regularly and examine the validity of the HTML used to create the site.
Choose only one page from each site. The homepage is a good candidate, or choose another important page like a shopping cart page or a registration/login page. Enter the URL to that page into the validator at the link that follows:
Some common issues to watch for that can affect accessibility:
- HTML tags that are not closed
- Duplicate ID attributes used on a given page
- HTML used incorrectly (e.g., certain HTML tags used where they should not be)
- HTML elements that are not correctly nested (e.g., a parent element closed before a child element is closed)
In your answers for this activity include the following details for each website:
- What is the name and URL of the website?
- How many errors did the validator find?
- How many warnings did the validator find?
- Scan through the validation report. Identify any markup errors (not warnings) that you think might affect accessibility. List at least one, but no more than three, if you find issues.
- Describe why you think it might be an issue. If there are none, mention “none.” (No wrong answers here, provided your reasoning is logical.)
- If there are any false positives in the report that the validator generates, mention those or mention “none” if you don’t see any.
Note 1: Warnings generated by the validator typically have no effect on accessibility. Although, in some cases, they can affect other aspects of the site, like search engine rankings or cross-browser compatibility.
Note 2: If the site you are validating uses HTML5 (as most do nowadays), the validator will default to using the NU HTML Checker. This checker is still a work in progress, so there may be issues identified that are not actual issues. If you encounter issues that do not seem right, you can mention those in your false positives.
- Toronto Metropolitan University
- Errors found: 13
- Warnings found: 5
- Possible errors affecting accessibility:
“Error: Element style not allowed as child of element div in this context. (Suppressing further errors from this subtree.)
From line 800, column 2; to line 800, column 8”
- Why? This error may result in styles inside the div being ignored, thus displaying the content it contains incorrectly or inconsistently.
- False positives: none