Alison Iddings, Author at Go Fish Digital https://gofishdigital.com/blog/author/alison-iddings/ Wed, 30 Aug 2023 00:50:13 +0000 en-US hourly 1 https://wordpress.org/?v=6.4.3 https://gofishdigital.com/wp-content/uploads/2021/09/cropped-gfdicon-color-favicon-1-32x32.png Alison Iddings, Author at Go Fish Digital https://gofishdigital.com/blog/author/alison-iddings/ 32 32 Universal Web Design: A Guide to WCAG Compliance https://gofishdigital.com/blog/universal-web-design-and-wcag-compliance/ https://gofishdigital.com/blog/universal-web-design-and-wcag-compliance/#respond Thu, 06 Aug 2020 14:00:11 +0000 https://gofishdigital.com/universal-web-design-and-wcag-compliance/ Universal Design for the Web Accessibility is an extremely important yet often overlooked component of web design and development. Many companies don’t think about the importance of Universal Web Design until they are troubleshooting client issues or facing a potentially costly lawsuit. I have put together this quick start guide to help companies understand their […]

Universal Web Design: A Guide to WCAG Compliance is an original blog post first published on Go Fish Digital.

]]> Universal Design for the Web

Accessibility is an extremely important yet often overlooked component of web design and development. Many companies don’t think about the importance of Universal Web Design until they are troubleshooting client issues or facing a potentially costly lawsuit. I have put together this quick start guide to help companies understand their compliance needs as well as simple guidelines on how to accomplish them.

What is Universal Web Design

Universal Web Design is intended to ensure information and communication technology (ICT) can be accessed, understood, and used to the greatest extent possible by all people regardless of their disability. The primary international standards for the World Wide Web and its accessibility are set by the World Wide Web Consortium (W3C), who have created the Web Content Accessibility Guidelines (WCAG 2.0 & 2.1).

Related Content:

In the United States, Section 508 of the Rehabilitation Act of 1973 covers accessibility requirements. The Section 508 guidelines reference the WCAG and require the specific techniques within for compliance.

Who needs to be compliant with the WCAG?

All organizations, Federal and State agencies, and educational institutions should follow the WCAG. In the United States, federal agencies and their contractors are required to conform with WCAG 2.0 (A & AA). Many other countries and international organizations also require compliance with WCAG 2.0 or 2.1. 

Levels of Compliance

The Web Content Accessibility Guidelines (WCAG) are categorized into three levels of compliance:

  • A  – the minimum level of conformance
  • AA – the typical level of conformance required (includes A requirements)
  • AAA – the highest level of conformance (includes A & AA requirements)

Getting Started with WCAG Compliance

Many of us have developed bad compliance habits without realizing the consequences of our choices. I, for one, have been guilty of hiding the outline on the :focus indicator in the past as I found it unpleasant from a design perspective. I have put together the following list of recommendations to help prevent designers and developers from making similar mistakes.

Guidelines for Universal Web Design & Development

  • Always have alt text for visual elements
  • Orient content in a meaningful sequence with appropriate heading tags for each section
  • Use HTML rather than CSS when adding emphasis to text (ex. <em> <strong>)
  • Use valid autocomplete attributes which correspond to the label on input fields
  • Use visual elements, such as underline or icon, to signify a link or use a change in contrast of 3:1 or greater
  • Use visual elements, such as underline or asterisk (*), to signify an error in a form
  • Use a text contrast ratio of at least 4.5:1 to meet AA standards
  • Use a text contrast ratio of  7:1 or more whenever possible to meet AAA standards
  • Ensure all text can be zoomed up to 200%
  • Use em units, named font sizes, or percentages for font sizes
  • Make all elements of your website responsive
  • Ensure visual elements have a contrast ratio of at least 3:1 to meet AA standards
  • Ensure your website can be navigated via keyboard only
  • Provide options for users to pause scrolling or automatic content
  • Provide more than one way to navigate to each web page whenever possible
  • Use techniques to show the user’s current location within your website such as:
    • Breadcrumbs
    • Site Map
    • Visual cues in navigation
    • Titles to indicate parent pages
  • Specify language attribute in HTML (ex. <html lang=”fr”>)

Common WCAG Compliance Mistakes

Avoid these common mistakes to maintain universal design during your development process:

  • Do not use CSS to create “headings.” Always use the HTML tags (ex. <h2>)
  • Do not use CSS to add non-decorative images
  • Do not use  :before or :after for non-decorative content 
  • Do not lock orientation to either portrait or landscape view
  • Do not use color alone to signify a link or to show an error in a form
  • Do not allow text to become unreadable while viewed at 200%:
    • Avoid setting overflow to hidden on absolute elements
    • Avoid creating popups or modals with limited height properties and no scroll
    • Avoid adding height properties to paragraphs
  • Do not use images for text (unless it’s a logo or purely decorative)
  • Do not use CSS to turn off the visual focus indicator (ex. :focus {outline: none})
  • Do not set time limits on user interaction
  • Do not add anything that flashes more than three times in any one second period

View the How to Meet WCAG (Quick Reference) for more information.

If you are using video, audio, pdfs, gestures (swipe, pinch to zoom, etc.) or have other additional components to your site, read more on compliance at w3.org.

Need to know which disabilities may be impacted by non-conformance? Click here for a helpful chart.

Tools for Universal Design & Compliance:

Universal Web Design: A Guide to WCAG Compliance is an original blog post first published on Go Fish Digital.

]]> https://gofishdigital.com/blog/universal-web-design-and-wcag-compliance/feed/ 0