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 & Remediation

How 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

How is CSS pseudo content treated by screen readers?

Generally speaking, web content should be included in HTML files, in a database or coming from an API. It should not be in CSS. However, sometimes CSS is used to add non-text content such as font icons or special characters. This content WILL be read by screen readers and can cause confusion with AT (assistive technology) users. If the content that the CSS is generating is purely presentational, you must make sure to hide it from assistive technology. This can be completed by using the aria-hidden property.

Do I need to add a ‘role’ attribute to html 5 tags like nav aside, main, etc.?

While the whole point of HTML5 elements is to provide more semantics to the page without providing 'role' attributes, it can still be a good idea to add ARIA roles to elements like 'buttons' to explain their purpose further.

Does my site need to be usable if the CSS and javascript doesn’t load?

Not necessarily, but there are a few things that you need to make sure of:
  • 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.

Do logos need to follow the accessibility guidelines?

No, logos do not need to follow website accessibility guidelines. It is always good practice to do your best to make sure they do though.

Is there a form element meant to provide instruction?

There are many form specific elements that can be used to describe what's going on. As you've already mentioned, each input requires that it has a corresponding label. If you would like to further organize and give meaning to your form, you can use the 'fieldset' element to group related inputs.   Within each fieldset, you can create a 'legend' that describes the inputs. For instance, let's say we have a form that asks a user for their personal information, and details about an order. The source code could look something like this.
<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>

What are the best accessible wordpress sliders?

Carousels and sliders pose accessibility issues for keyboard and screen reader users that can be challenging to adequately address by adjusting your markup. Keep in mind that all content and controls abled users can access must be made robust enough to be accessed by all users, this means (among other things) that slider controls need to have tab-navigation consideration, timing needs to be adequate enough so that all users can read slides, and UI controls need to have enough color contrast such that they can be perceived by everyone. Any carousel or slider can contain non-accessible content,  so keep these things in mind when building content:
  • 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?
Below are sliders that are accessible:
  • Snazzy Slider by Josh Cummings - https://www.joshcummingsdesign.com/snazzy-slider

How long does the accessibliity process take?

This question depends on a number of factors including size of site, desired level of conformance, your developer's understanding of accessibility techniques, etc. Accessible Web is here to help. Reach out and we can discuss your site specifically.