Doctype not validating correctly
murkas opened this issue · 4 comments
Summary
When running the a11y tests, against the following URL: http://bbcthree-web-server.int.api.bbc.co.uk/bbcthree?usestubdata validation fails, reporting the following error: Validation: All documents must have a W3C recommended doctype - Missing w3c recommended doctype. Upon inspection, the tested URL does have a doctype.
Expected Behaviour
In this case I would expect the test to pass, as the page's doctype is as follows <!doctype html>.
Current Behaviour
As of current the test fails with the following error, reporting that a valid w3c doctype is not present.
✗ http://bbcthree-web-server.int.api.bbc.co.uk/bbcthree?usestubdata
* Validation: All documents must have a W3C recommended doctype
- Missing w3c recommended doctype
Possible Solution
I believe that this may be failing due to a potential issue with the test.
Currently, if (!$('html')[0].ownerDocument.doctype) is used to check for the presence of a doctype.
Upon pasting a snippet of this into Chrome's developer tools console undefined is returned, despite the doctype being present on page.
I have experimented with this for a short amount of time and found that the following works in retrieving the doctype: $('html').ownerDocument.doctype. Hopefully this could help with rectifying the failure? Please let me know if I have missed something/am misunderstanding what is likely going on here.
Steps to Reproduce (for bugs)
- Run a11y tests against
https://www.int.bbc.co.uk/bbcthree?usestubdata - Observe error (please ignore the numerous others, we are going to fix them!)
- Inspect page in dev tools to confirm presence of doctype.
Context & Motivation
This occurred whilst inspecting the BBC Three website in order to document potential improvements to the site.
Your Environment
Version(s) used: 1.4.0 & 2.1.0
OS: MacOS High Sierra
Project Link: https://github.com/bbc/bbcthree-web
Hope that the explanation of this issue is in depth enough - please let me know if more is required or if a demo would help!
Hi @marcusBBC
I just tried with bbc-a11y 2.1.0 and I did not get an error about the doctype:
> ./bin/bbc-a11y.js http://bbcthree-web-server.int.api.bbc.co.uk/bbcthree?usestubdata
✗ http://bbcthree-web-server.int.api.bbc.co.uk/bbcthree?usestubdata
* Design: Content resizing: Text must be styled with units that are resizable in all browsers
- Text styled with px unit: //div[@id='bbcprivacy-prompt']/h2
- Text styled with px unit: //button[@id='bbcprivacy-continue-button']
- Text styled with px unit: //span[@id='secondary-nav-label']
- Text styled with px unit: //main[@id='content']/div[2]/div[1]/div/ul/li[1]/a/div[1]/h3
- Text styled with px unit: //main[@id='content']/div[2]/div[1]/div/ul/li[2]/a/div[1]/h3
- Text styled with px unit: //main[@id='content']/div[2]/div[1]/div/ul/li[3]/a/div[1]/h3
- Text styled with px unit: //h2[@id='best-of-grid-header']
- Text styled with px unit: //div[@id='best-of']/ul/li[1]/a/div/div/div/div[1]/div[2]/span
- Text styled with px unit: //div[@id='best-of']/ul/li[1]/a/div/div/div/div[2]/h3
- Text styled with px unit: //div[@id='best-of']/ul/li[2]/a/div/div/div/div[2]/h3
- Text styled with px unit: //div[@id='best-of']/ul/li[3]/a/div/div/div/div[2]/h3
- Text styled with px unit: //div[@id='best-of']/ul/li[4]/a/div/div/div/div[1]/div[2]/span
- Text styled with px unit: //div[@id='best-of']/ul/li[4]/a/div/div/div/div[2]/h3
- Text styled with px unit: //div[@id='best-of']/ul/li[5]/div/div/div/a/div[2]/h3
- Text styled with px unit: //div[@id='best-of']/ul/li[5]/div/div/div/a/div[2]/div[1]
- Text styled with px unit: //div[@id='best-of']/ul/li[5]/div/div/div/a/div[2]/div[2]/span
- Text styled with px unit: //div[@id='best-of']/ul/li[6]/a/div/div/div/div[1]/div[2]/span
- Text styled with px unit: //div[@id='best-of']/ul/li[6]/a/div/div/div/div[2]/h3
- Text styled with px unit: //div[@id='best-of']/ul/li[7]/a/div/div/div/div[1]/div[2]/span
- Text styled with px unit: //div[@id='best-of']/ul/li[7]/a/div/div/div/div[2]/h3
- Text styled with px unit: //div[@id='best-of']/ul/li[9]/a/div/div/div/div[1]/div[2]/span
- Text styled with px unit: //div[@id='best-of']/ul/li[9]/a/div/div/div/div[2]/h3
- Text styled with px unit: //div[@id='orb-modules']/div/footer/div[1]/h2
- Text styled with px unit: //div[@id='orb-modules']/div/footer/div[2]/div/div/div[1]/p
- Text styled with px unit: //div[@id='orb-modules']/div/footer/div[2]/div/div/div[2]/div/a
- Text styled with px unit: //div[@id='orb-aside']/div/h2
- Text styled with px unit: //div[@id='orb-aside']/div/div/ul/li[1]/a
- Text styled with px unit: //div[@id='orb-aside']/div/div/ul/li[2]/a
- Text styled with px unit: //div[@id='orb-aside']/div/div/ul/li[3]/a
- Text styled with px unit: //div[@id='orb-aside']/div/div/ul/li[4]/a
- Text styled with px unit: //div[@id='orb-aside']/div/div/ul/li[5]/a
- Text styled with px unit: //div[@id='orb-aside']/div/div/ul/li[6]/a
- Text styled with px unit: //div[@id='orb-aside']/div/div/ul/li[7]/a
- Text styled with px unit: //div[@id='orb-aside']/div/div/ul/li[8]/a
- Text styled with px unit: //div[@id='orb-aside']/div/div/ul/li[9]/a
- Text styled with px unit: //div[@id='orb-aside']/div/div/ul/li[10]/a
- Text styled with px unit: //div[@id='orb-aside']/div/div/ul/li[11]/a
- Text styled with px unit: //div[@id='orb-aside']/div/div/ul/li[12]/a
- Text styled with px unit: //div[@id='orb-aside']/div/div/ul/li[13]/a
- Text styled with px unit: //div[@id='orb-aside']/div/div/ul/li[14]/a
- Text styled with px unit: //div[@id='orb-aside']/div/div/ul/li[15]/a
- Text styled with px unit: //div[@id='orb-aside']/div/div/ul/li[16]/a
- Text styled with px unit: //div[@id='orb-aside']/div/div/ul/li[17]/a
- Text styled with px unit: //div[@id='orb-aside']/div/div/ul/li[18]/a
- Text styled with px unit: //div[@id='orb-contentinfo']/div/ul/li[1]/a
- Text styled with px unit: //div[@id='orb-contentinfo']/div/ul/li[2]/a
- Text styled with px unit: //div[@id='orb-contentinfo']/div/ul/li[3]/a
- Text styled with px unit: //div[@id='orb-contentinfo']/div/ul/li[4]/a
- Text styled with px unit: //div[@id='orb-contentinfo']/div/ul/li[5]/a
- Text styled with px unit: //div[@id='orb-contentinfo']/div/ul/li[6]/a
- Text styled with px unit: //div[@id='orb-contentinfo']/div/ul/li[7]/a
- Text styled with px unit: //div[@id='orb-contentinfo']/div/ul/li[8]/a
- Text styled with px unit: //div[@id='orb-contentinfo']/div/small
- Text styled with px unit: //div[@id='orb-contentinfo']/div/small/em
- Text styled with px unit: //div[@id='orb-contentinfo']/div/small/span/a
* Forms: Managing focus: Forms must have submit buttons
- Form has no submit button: //form[@id='orb-search-form']
⚠ Structure: Headings: Headings must be in ascending order
- First heading was not a main heading: //div[@id='bbcprivacy-prompt']/h2
* Structure: Headings: Exactly one main heading
- Found 0 h1 elements.
* Text equivalents: Alternatives for non-text content: Images must have alt attributes
- Image has no alt attribute: //div[@id='best-of']/ul/li[1]/a/div/div/div/div[1]/div[1]/img
- Image has no alt attribute: //div[@id='best-of']/ul/li[2]/a/div/div/div/div[1]/div/img
- Image has no alt attribute: //div[@id='best-of']/ul/li[3]/a/div/div/div/div[1]/div/img
- Image has no alt attribute: //div[@id='best-of']/ul/li[4]/a/div/div/div/div[1]/div[1]/img
- Image has no alt attribute: //div[@id='best-of']/ul/li[5]/div/div/div/a/div[1]/img
- Image has no alt attribute: //div[@id='best-of']/ul/li[6]/a/div/div/div/div[1]/div[1]/img
- Image has no alt attribute: //div[@id='best-of']/ul/li[7]/a/div/div/div/div[1]/div[1]/img
- Image has no alt attribute: //div[@id='best-of']/ul/li[8]/div/div/div/div[2]/img
- Image has no alt attribute: //div[@id='best-of']/ul/li[9]/a/div/div/div/div[1]/div[1]/img
- Image has no alt attribute: //div[@id='best-of']/ul/li[10]/div/div/div/div[2]/img
For details on how to fix these errors, please see the following pages:
- http://www.bbc.co.uk/guidelines/futuremedia/accessibility/mobile/design/content-resizing
- http://www.bbc.co.uk/guidelines/futuremedia/accessibility/mobile/forms/managing-focus
- http://www.bbc.co.uk/guidelines/futuremedia/accessibility/mobile/structure/headings
- http://www.bbc.co.uk/guidelines/futuremedia/accessibility/mobile/text-equivalents/alternatives-for-non-text-content
1 page checked, 67 errors found, 1 warning, 0 standards skipped
Running $('html')[0].ownerDocument.doctype in Chrome will give you something different from bbc-a11y, because in that line of code in bbc-a11y, $ is jQuery, but in Chrome it's not. If you make $ actually jQuery and then run $('html')[0].ownerDocument.doctype, you get a doctype for this page.
How did you install bbc-a11y 2.1.0? Do you still have the issue if you do a full clean install?
I believe that this may have been an environment issue as I cannot recreate the issue at this point - apologies for that. Would you be happy for me to close this issue, given that?
Closing issue as the reporter is no longer able to reproduce.