Website
      Back to home
      1. Help Center
      2. Website

      ADA Website Accessibility and Compliance

      ADA Compliance and accessibility is extremely important, refer your designer to this article to ensure your site is up to standard.

      All of the Commerce7 widgets are out-of-the-box are level AA ADA Compliant. Once your designer takes over, they must ensure they are following ADA Compliance rules to avoid poor customer experience, and potential litigation down the line. 

      We have put together some resources for your designer to reference, and provide the government resource for this information at the bottom of this article. 

       


      Getting Started

      Accessibility for Front-End Developers

      Accessible front-end development ensures people with different abilities can access, understand, and navigate web content, regardless of how they’re accessing it. Front-end developers collaborate with other members of a cross-functional team to implement a robust user experience.

      How to use this guide

      • We recommend conducting accessibility testing throughout the design and development processes.
      • A good place to start testing is on high-touch pages, critical user paths, and site-wide templates.

      Keyboard Access

      Can you reach anything that’s interactive using the tab key?

      Why it’s important: Tyson has tendonitis and is unable to use a mouse; instead, he uses the keyboard to navigate the web.

      Steps to take

      • Use the keyboard to navigate through the page using the tab key.
      • Make sure you can reach all interactive elements and trigger them with the spacebar, enter key, or arrow keys.
        • Use semantic HTML elements that are accessible by default (For example: buttons, labeled inputs, etc). If you must use divs for interactions, ensure they are focusable and labeled appropriately.
      • Check to see that focus is always visible and appears in logical order.
      • Make sure that no content gets focused offscreen or is hidden from view.
      • Check to see that the page includes a skip navigation link (if navigation is present before the main content). This will allow users to skip past navigation to reach the page’s main content.

      Screen Reader Access

      Can you use a screen reader to access the page content?

      Why it’s important: Andrew is blind and uses a screen reader to navigate the web.

      Steps to take

      • Use a screen reader to make sure you can land on controls and that they’re announcing things as they should.
      • Determine whether the HTML document has a language attribute so that screen readers will read it with the correct accent and pronunciation. For example: <html lang="en">.
      • If forms are present, make sure the screen reader reads labels and instructions.
      • Make sure that all links are properly descriptive. For example, the link text “Read More” provides no context about where the user will go if they click it, while “Read more about dinosaurs” describes what’s on the other side of the link.

      Headings

      Are you using accurate headings on your page?

      Why it’s important: Carisen is blind and uses a screen reader to navigate the web. He hears an outline of the page's main ideas, then backtracks to read the parts he's most interested in.

      Steps to take

      • Headings briefly describe the section it introduces. Headings represent an outline of the content.
      • Use h1–h6 to define your section headings, where h1 is the highest section level and h6 is the lowest.
      • Avoid skipping heading levels: Always start with h1, use h2 next, and so on.
      • Use only one h1 per page for the page title.

      *While HTML5 allows you to reset headings to h1 on new section elements, some screen reader users will have difficulty discerning the structure of pages with multiple h1s. For this reason, it’s best to include only one h1 per page.

      Page Structure

      Are you using semantic elements and roles?

      Why it’s important: David is low-sighted and navigates pages by jumping to the page section he wants to get to.

      Steps to take

      • Use sectioning elements to create a broad outline of your page content; examples of these elements include header, nav, main, and footer. Use content sectioning elements like section, article, and aside to organize the document content into logical pieces.
      • Add role="banner" to your masthead and role="contentinfo" to your page footer once per page to define landmark elements.

      Images

      Do images have good alt text?

      Why it’s important: Christine’s page didn’t load all the way and didn’t get to download the images.

      Steps to take

      • Include meaningful information describing each image in the alt text.
      • Use null (empty) alt text when text describing the image is already on the page (alt="").
      • Don’t start the alt text with Image of or Photo of – the screen reader already announces that images are images.
      • If the image is decorative and you don’t want the screen reader to announce it at all, use null (empty) alt text (alt="") or CSS background images.

      Color and Contrast

      Is there enough contrast between text and its background color?

      Why it’s important: Elizabeth has low vision and needs content to have enough contrast to read it.

      Steps to take

      • Use a color contrast tool and test that the contrast between the text and background is greater than or equal to 4.5:1.
      • Use an automated tool to quickly scan for color contrast problems.
      • Don’t use color alone to convey meaning. Use icons, text, and other visual elements to reinforce the meaning of the content.

      Automated Testing

      Did your accessibility testing tools provide accurate results?

      Why it’s important: Including automated accessibility testing throughout the development process can help quickly catch many accessibility errors, but can’t guarantee that your site is accessible. Always combine automated testing with ongoing manual testing. Manual testing is the most reliable method to assess accessibility.

      Steps to take

       

      If you would like to reference the government resource on ADA Compliance, please follow this link- https://accessibility.digital.gov/front-end/automated-testing/. We pulled the majority of this information from here, and hope it helps in your website set up. 

       

      If you have additional questions please email support@commerce7.com.