illustration of two workers looking at graphs

WCAG = Code + Design + Content

ByRenee Dunn Reading Time: 3 minutes

Creating an accessible website requires more than just high color contrast and alt text for images.  An accessible website that meets WCAG requirements is based on a combination of good code, good design, and good content.  A failure in any one of these areas is a failure for the whole website.    

Good Code

Of the 54 criteria necessary to meet WCAG 2.2 AA, over 80% involve good code to pass.  This means choosing the right theme or site builder from the beginning and working with a developer who know how to meet WCAG.  Some site builders, like Divi, have more inherent accessibility issues than others. 

  • Make sure the theme includes a skip to content link
  • Make sure the navigation menu can be operated by a keyboard
  • Make sure regions of the page (header, main, aside, footer) are tagged appropriately

Good code also extends to the plugins you choose to add to your site, especially form builders, pop-up makers, and slider tools.  Make sure to test and review the code on a demo site before implementing these tools on your site. 

  • Make sure links (that take a user to another page) are tagged appropriately with <a> tags
  • Make sure buttons (things that initiate a specific behavior when clicked) are tagged using <button></button> as opposed to <div>, <span> or <a>. 
  • Make sure form fields have visible labels
  • Make sure required form fields are indicated visually and in the code
  • Make sure form errors are clear and easy to understand
  • Make sure all interactive functionality can be operated with just a keyboard

WCAG applies to third-party tool integrations, so make sure to test code generated by third-party code snippets, video and map embeds, iframes, and cookie consent banners.   

Good Design

Approximately half of WCAG 2.2 AA criteria require good design practices.  Design covers all of the colors, font styles and graphical elements of visual presentation of the site. 

  • This includes using high color contrast for content.   
  • If you are including text over top of an image, there needs to be enough contrast between the text and every part of the image. 
  • Make sure your design doesn’t fall apart if a user increases or decreases the font size in their browser.  
  • Make sure clickable icons are far enough apart to prevent a user from accidentally clicking the wrong one.  
  • Make sure your focus indicator color has sufficient contrast against all of the background colors you use on the site. 
  • Make sure to design links to clearly stand out from regular content using more than just color. 
  • Make sure to design hover and focus states that also have sufficient contrast and stand out from the surrounding text. 
  • Avoid flashing and blinking in the design. 
  • If you use animation, make sure to include CSS to stop the animation for users who have reduced animation settings selected on their device.   
  • Avoid the use of “Learn More” or “Read More” buttons in your design unless you know that more descriptive aria-labels can easily be generated for those buttons.

Good Content

Over a third of WCAG 2.2 AA criteria deal specifically with content.  Content includes all of the images, text, audio, video, and documents included on your website.    

  • Provide good, descriptive page titles for your pages
  • Unless an image is decorative, it needs to have meaningful alt text. 
  • Use proper HTML heading structure to create the bones of your page content. 
  • Create links that have meaningful link text, rather than just “click here”. 
  • Make sure your videos have captions and transcripts.   
  • Minimize the use of PDFs on your website; consider providing that content in HTML form instead when possible.    

Creating a truly accessible website is a deliberate and coordinated effort across code, design, and content, each playing a critical role in meeting WCAG standards. By committing to accessible coding practices, thoughtful visual design, and inclusive content creation, you ensure your website is usable by everyone, regardless of ability. Accessibility isn’t just a checklist—it’s a mindset that should be embedded into every stage of your website’s lifecycle.