Axe-core Alternatives

axe-core reviews and mentions

• How to Write Accessible Technical Documentation – Best Practices with Examples
  2 projects | dev.to | 15 Apr 2024

  ‌Videos To caption videos, HTML is a great option. But if you are using markdown, you can embed videos from YouTube and Vimeo using the tag. These apps offer in-built caption support so you can enable captions before adding the embed code.

  You could also install third-party plugins for this purpose.

  Here’s another tip: avoid flashing content in your videos as it could lead to seizure triggers. If your video has flashing bright colours, ensure that it does not exceed two times within a second.

  Add transcripts to audios and videos

  It’s a good idea to add transcripts to your audio and video content. Not everyone will want to watch or listen to the content. But they may be curious to know what it is about.

  By adding a transcript, you make it easier for anyone to navigate through the content and get the information that they need.

  Transcript for audio
  For audio content, you can insert transcripts using HTML.

  Here’s an example:
  

   controls muted> 
     src="ringtone.mp3" type="audio/mpeg"> 
   
  
   
    
  Here is a transcription of the text 
    00:03 = I am going to be productive today
  
   
    00:05 = I am going to be productive today
  
   
    00:08 = I am going to be productive today
  
   
    00:10 = I need to be productive today
  
   
    00:11 = I have to be productive today
  
   
    00:13 = I should be productive today
  
   
    00:16 = I am going to be productive today
  
   
    00:18 = I ought to be productive today
  
   
    00:21 = I have to be productive today
  
   
    00:23 = Productivity matters to me 
  
   
  
  

  Enter fullscreen mode Exit fullscreen mode

  For markdown documentation sites like Docusaurus, you can create a custom component.‌

  • In your src/components folder, create a file named transcript.jsx.

  • Insert this code:
    

  import React, { useState } from 'react'; 
  export default function Transcript({ }) { 
    const [showTranscript, setShowTranscript] = useState(false); 
    const toggleTranscript = () => { 
      setShowTranscript(!showTranscript); 
    }; 
    return ( 
      <div> <a href="#" onClick={toggleTranscript}> { 
      showTranscript ? 'Hide transcript' : 'View transcript'
      } 
      </a> {showTranscript && ( 
   (insert your transcript text here) div> )} 
      </div> 
    ); 
  }‌
  

  Enter fullscreen mode Exit fullscreen mode

  • Go to your markdown file and import it.

  import Transcript from '@site/src/components/transcript'; 
  
  
  

  Enter fullscreen mode Exit fullscreen mode

  

  Note: I added some tweaks to the code to make transcript display optional. You can edit it if you want the transcript to show as the page loads.

  Transcript for video
  Now for videos, YouTube is a great option. It provides inbuilt transcripts for your videos. So, you can always embed YouTube videos in your docs.

  The transcript is in the video description after the main details. The transcript will display with the timestamps when you click the “Show Transcript” button.

  Add code snippets and use the colour contrast technique

  How to add code snippets
  Use code blocks within the text to explain code instead of images. You could also use code snippets to showcase the output of your code. Unless it is necessary to add an image, you should use code snippets.

  For instance,

  index.html
  

   
     
      
       
      A calculator app 
       
      
      
      
    
  

  Enter fullscreen mode Exit fullscreen mode

  This will allow screen readers to read through the code, which they are not able to do with screenshots.

  

  Colour contrast technique
  The colour contrast technique implies using colours that are opposite or heavily contrasting.

  For example, using black text on a white background has a high contrast, as opposed to using light brown text on a brown background.

  When combining colours, you could use an accessible colour palette like Color Safe.‌

  

  Add translation options

  There are documentation sites that provide translation options where you can build your docs in multiple languages, websites like Jekyll. This is an example.

  Docusaurus is also another doc site that provides multilingual options using Crowdin or Git.

  • Follow through this guide to set up translation and localization on Docusaurus using Git.

  • Follow through this guide to set up translation and localization on Docusaurus using Crowdin.‌

  Use accessibility testing tools

  There are tools you can use to check for errors in accessibility in your docs. Some examples are WAVE (Web Accessibility Evaluation Tool) and AXE (Accessibility Engine).

  Also, you can get the NVDA(NonVisual Desktop Access) screen reader to test out your content. This software will let you know how the content of your documentation will be perceived by a user using a screen reader.‌

  Set up an improvement or suggestion box

  Finally, it may not be possible to cover the needs of every user. So you could add a suggestion or improvement box, allowing users to send feedback about how you could further improve the content. Hearing firsthand from users can help you know how best to make the docs accessible for them.

  To add an improvement box, you could use an external form link that stores the users’ inputs or you could set up the suggestion box in the docs.

  How to add an external form link in Docusaurus

  You would need to create a custom component for that.

  • Go to src/components folder and create a file feedback.jsx.

  • Add this code:
    

  import React from 'react'; 
  
  export default function FeedbackButton({ href }) {
    return ( <a href={href} target="_blank" rel="noopener noreferrer" > Give Feedback </a> ); 
  }; 
  

  Enter fullscreen mode Exit fullscreen mode

  • In your markdown file import it:

  import FeedbackButton from '@site/src/components/feedbackbutton';
  

  Enter fullscreen mode Exit fullscreen mode

  • Insert the link

  Enter fullscreen mode Exit fullscreen mode

  When you run it on your docs, it should showcase a link to Google forms. Google Forms is an example, you could add the link to your company website or server.

  Here’s what it’ll look like:

  

  Summary

  To follow and implement these accessibility best practices, you can consider creating or using an already made style guide. This can help you consistently implement these practices and make it easier for you and other technical writers on your team.

  There are style guides focused on accessibility for technical writers, such as the following:

  • Accessibility style guide by Heyawhite

  • Write accessible documentation by Google for developers

  • Writing for Accessibility by MailChimp content style guide

  That sums up my tips about web accessibility practices in writing. I’m a technical writer, and you can reach out to me on Instagram or hire me via Upwork. Thank you for reading.‌

• Responsive design and cross-device testing
  1 project | dev.to | 27 Feb 2024

  To measure or rather estimate accessibility, we can use automated audits like WAVE, axe and the accessibility report in Lighthouse or PageSpeed Insights to ensure that we don't violate essential Web Content Accessibility Guidelines (WCAG)

• Deque Systems Sues BrowserStack for Intellectual Property Theft
  1 project | news.ycombinator.com | 14 Feb 2024

  axe-core licensed via MPL 2.0: https://github.com/dequelabs/axe-core

  Here is the BrowserStack extension:

• 🌟 #DEVImpact2023: A Year of Challenges, Triumphs, and The Future
  2 projects | dev.to | 28 Dec 2023

  [ ] Checked with axe DevTools and addressed Critical and Serious issues?

• First time diving into Accessibility
  1 project | /r/ExperiencedDevs | 10 Nov 2023

  axe-core - To detect violations on page level.

• Accessibility, SustyWeb, SDGs, and upcoming European Legislation in 2024/2025 🇪🇺⚖️
  2 projects | dev.to | 6 Nov 2023

  Like auditing WCAG compliance with accessibility tools like axe and WAVE, it has become much easier to measure and provide data about the ecological impact of web development, but there are still a lot of unknown figures.

• React-ing to accessibility: Building accessible e-commerce forms that everyone can use
  4 projects | dev.to | 20 Jul 2023

  Axe is a set of tools created by Deque, to provide a solution for a testing library. To use Axe, one of the possible ways is to install Axe DevTools, which is a browser extension that provides you with a way to test your applications for accessibility issues. To start testing for accessibility using Axe DevTools, you just open the browser's Developer Tools, navigate to the Axe DevTools tab, and run an analysis on your desired webpage;

• Como adicionar recursos de acessibilidade em um site?
  2 projects | /r/brdev | 12 May 2023
• Is siteimprove legit?
  2 projects | /r/accessibility | 4 May 2023
• I just launched the new website of the agency I work for. I appreciate your feedback!
  1 project | /r/Frontend | 24 Apr 2023

  If you run the site through axe on the different layouts, it will highlight a lot of these. Many are color contrast issues. There are a few others that the tool won't pick up like removing focus outlines on the contact form or keyboard navigation issues on the main nav. If you hit the tab key, you'll see that each link in the main nav gets focus twice. That's because you have a button nested inside of an anchor tag. It's invalid HTML anyway, so you should probably address that.

• A note from our sponsor - WorkOS
  workos.com | 19 Apr 2024

  The APIs are flexible and easy-to-use, supporting authentication, user identity, and complex enterprise features like SSO and SCIM provisioning. Learn more →