In content implemented using markup languages, elements have complete start and end tags, elements are nested according to their specifications, elements do not contain duplicate attributes, and any IDs are unique, except where the specifications allow these features.
*Start and end tags that are missing a critical character in their formation, such as a closing angle bracket or a mismatched attribute value quotation mark are not complete.
Testing & RemediationHow to test: You will need to test whether or not your pages validate properly. How you do this will depend on whether or not the content is static & publicly accessible. For static, publicly accessible content, we recommend using the W3C Markup Validation Service. Once the results are displayed, it's best to filter down to only show errors & warnings related to accessibility. This can be done using the WCAG Parsing Bookmarklet. For pages where the content is dynamically generated or hidden behind a login, you'll need to copy & paste your entire DOM into "Validate by Direct Input" method in the W3C Markup Validation Service (same link as above). Follow the same instructions from above for filtering the results down to only show errors known to impact accessibility. How to remediate: This Success Criterion can be met in a number of ways, but generally speaking you will need to ensure that the page contains “clean” code that will not cause any errors. Some items to consider:
- All content has complete start and end tags.
- Elements are nested to their element specifications when appropriate.
- Elements do not contain duplicate, incorrect, or malformed attributes.
- Each ID tag on a page will be the singular instance of that specific ID tag.
Questions and Answers
- The page should be using the proper semantic elements. This means things like header, nav, aside, etc.
- All headings and page content should flow in a logical order. H1 > H2> etc.
- Without styling, elements should still be in the order they are intended to be read or listened to.
<form> <fieldset> <legend>Enter Your Information</legend> <label for="first">First Name</label> <input type="text" name="first"> <!-- etc --> </fieldset> <fieldset> <legend>Order Details</legend> <label for="size">Size</label> <select name="size"> <!-- sizes --> </select> <!-- etc. --> </fieldset> </form>
- Do the headers flow from h1 down without skipping a level?
- Do embedded images have adequate alt tags?
- Do the links open have descriptive titles or link text?
- Snazzy Slider by Josh Cummings - https://www.joshcummingsdesign.com/snazzy-slider