Contact us

Adee API Services

Our API cloud-based toolkit easily integrates into your workflow, offering robust accessibility features alongside stringent security measures.

For development support, these API services provide robust features that streamline the creation of accessible web content. They assist in generating, evaluating, and fixing HTML tags to ensure compliance with accessibility standards. From automatically converting Figma designs into accessible HTML to generating appropriate alternative text for both decorative and informative images, these tools are integral in building the foundation of an accessible website. They also offer testing for touch target sizes, contrast ratios on images and texts, and even color blindness considerations by analyzing dominant colors in images. Moreover, they provide comprehensive scanning of web pages, both in-house and live, to detect and rectify any accessibility issues.

When it comes to testing support, these APIs seamlessly integrate into continuous integration and continuous deployment (CI/CD) processes, enhancing the efficiency and coverage of testing protocols. They guide testers in ensuring that all elements of a website meet the Web Content Accessibility Guidelines (WCAG) compliance requirements, covering a broad spectrum of potential user needs and preferences. Additionally, for ongoing quality assurance, these services offer monitoring capabilities for web pages, alerting developers and site owners to new or recurring accessibility issues. This proactive approach ensures that websites remain accessible long after their initial launch, adapting to both content updates and evolving accessibility standards. With these tools at their disposal, developers and testers can more effectively contribute to a more inclusive digital world.

  • Accessibility Testing
  • WCAG Compliance
  • HTML Tag Evaluation
  • Automated Web Monitoring
  • Cloud-Based AWS Integration

Summary

Design & Build Phase:

Generating/fixing accessible HTML Tags:

  • Creating and Fixing HTML Tags: Start with accessible HTML and maintain it with our ongoing support.

Example Request and Response

fetch('https://api.adee.ai/generateHTML', {- [Testing Made Simple](#testing-made-simple)bsite
      role: 'button', // Accessibility role
      'aria-label': 'Navigate to site via SVG' // Accessible label
    },
    content: '<svg>...</svg>' // Your SVG content here
  })
})
.then(response => response.json())
.then(data => {
  // Handling the response with the generated HTML tag
  console.log('Generated HTML:', data.html);
})
.catch(error => {
console.error('Error:', error);
});

{
  "success": true,
  "html": "<a href='https://www.targetwebsite.com' role='button' aria-label='Navigate to site via SVG'><svg>...actual SVG content...</svg></a>"
}
  • success: Indicates whether the API call was successful.
  • html: Contains the generated HTML string. It would be the complete anchor tag with the specified attributes and content you requested, including the SVG.

Design to HTML Code:

  • From Figma to HTML: Transform your designs into accessible web content. Using Adee plugin to generate HTML, it can also accept "Figma Tokens" or "Design Tokens".

Example request and respose

fetch('https://api.adee.ai/generateHtmlFromTokens', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
    'Authorization': 'Bearer your-access-token'
  },
  body: JSON.stringify({
    designToken: {
      colors: {
        primary: '#FF5733',
        background: '#FFFFFF'
      },
      typography: {
        headerFont: 'Arial, sans-serif',
        bodyFont: 'Roboto, sans-serif'
      },
      // Add other design tokens as needed
    },
    outputType: 'React', // Can be 'React', 'HTML5', 'Tailwind', etc.
  })
})
.then(response => response.json())
.then(data => {
  console.log('Generated Code:', data.generatedCode);
})
.catch(error => {
  console.error('Error:', error);
});


{
  "success": true,
  "generatedCode": "<div style={{backgroundColor: '#FFFFFF'}}><h1 style={{color: '#FF5733', fontFamily: 'Arial, sans-serif'}}>Welcome!</h1><p style={{fontFamily: 'Roboto, sans-serif'}}>Your text here</p></div>"
}
  • success: Indicates whether the API call was successful (true in this case).
  • generatedCode: Contains the generated code based on the design tokens. This example assumes React output, so it returns a string that can be used as JSX in a React application. The code includes a div with a background color, an h1 tag with the primary color and header font, and a p tag with the body font.

Generating Image Alternative Text:

  • Alternative Tag Generations for Images: Generating Alternative text for images or incorporating alternative text to be part of HTML generation with descriptive texts for all types of images.

Adee API to automatically generate alternative text for images, including the confidence level of the generated text and how to receive the output in HTML tag format.

Example request and respose

fetch('https://api.adee.ai/generateAltText', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
    'Authorization': 'Bearer your-access-token'
  },
  body: JSON.stringify({
    imageUrl: 'URL_of_the_image_to_be_processed',
    options: {
      returnHTML: true // Set to true to receive the response in HTML tag format
      // Include other options as required by the API, such as image format or quality preferences
    }
  })
})
.then(response => response.json())
.then(data => {
  console.log('Generated Alternative Text:', data.altText);
  console.log('Confidence Level:', data.confidence);
  if(data.html) {
    console.log('HTML Tag with Alt Text:', data.html);
  }
})
.catch(error => {
  console.error('Error:', error);
});

{
  "success": true,
  "altText": "A scenic sunset over the mountains",
  "confidence": 0.94,
  "html": "<img src='URL_of_the_image_to_be_processed' alt='A scenic sunset over the mountains'>"
}
  • success: Indicates whether the API call was successful.
  • altText: The alternative text generated for the image.
  • confidence: A decimal representing the confidence level of the generated alt text.
  • html: The complete HTML image tag including the src and generated alt attribute.

Touch Target Size Testing:

  • Interactive and Visual Touch Target Testing: Ensure usability and visual accessibility with our touch target testing specific to the target device.

Example request and respose

{
  "inputType": "FigmaToken/HTML", // Specify whether the input is a Figma Token or an HTML tag
  "inputValue": "Your Figma Token or HTML tag here", // The actual Figma Token or HTML content
  "deviceSpecs": {
    "type": "android/iphone/etc", // Specify the type of device
    "model": "Model of the device if known", // Specify the model if known, e.g., iPhone 12
    "aspectRatio": "16:9", // The aspect ratio of the device screen
    "resolution": "1080x1920" // The resolution of the device screen
  }
}
{
  "success": true/false, // Indicates if the API call was successful
  "message": "Touch targets are sufficient/insufficient for the specified device.", // A message about the touch target analysis
  "details": {
    "providedTouchTargets": [
      {
        "size": "48x48 pixels", // Actual size of the touch target
        "recommendedSize": "48x48 pixels", // Recommended size for the device
        "issue": null or "Touch target too small" // Issue found if any
      },
      // ... other touch targets
    ]
  }
}

Contrast Testing Image and Text]:

  • Color contrast check: Check color contrast on images and texts.

Example request and respose

{
  "imageData": "Base64EncodedImageDataOrURL", // The image data or URL of the image to be analyzed
  "textData": "OptionalBase64EncodedTextOrDirectString", // Text data if specifically testing text on image
  "contrastParameters": {
    "minimumRatio": "4.5:1", // The minimum contrast ratio acceptable, default might be WCAG AA standards
    "type": "textOnImage/imageOnImage" // Specify the type of contrast check
  }
}
{
  "success": true/false, // Indicates if the API call was successful
  "contrastRatio": "5:1", // The actual contrast ratio found
  "meetsMinimumRequirement": true/false, // Whether it meets the specified minimum ratio
  "recommendations": "Suggestions or modifications if requirements are not met" // Optional recommendations for improvement
}

Color Blind Testing:

  • Color contrast check: Extract dominent colors from image and detecting issues with the image for color blind people.

Example request and respose

{
  "imageData": "Base64EncodedImageDataOrURL", // The image data or URL of the image to be analyzed
  "colorBlindnessTypes": ["deuteranomaly", "protanopia", "tritanopia"], // Types of color blindness to check against
  "options": {
    "extractDominantColors": true, // Boolean to indicate if dominant colors should be extracted
    "contrastThreshold": "Minimum contrast ratio value" // Optional: specify a minimum contrast threshold
  }
}
{
  "success": true/false, // Indicates if the API call was successful
  "dominantColors": [
    // Array of dominant colors with details
    {
      "color": "hex or rgba value",
      "percentage": "Percentage of the image the color covers"
    },
    // ... other dominant colors
  ],
  "colorBlindnessIssues": [
    // Array of issues detected for each type of color blindness
    {
      "type": "deuteranomaly",
      "issuesDetected": true/false,
      "details": "Description of issues or contrast concerns"
    },
    // ... other types as specified in the request
  ]
}

Tesging Phase - Seamless CI/CD Integration:

  • CI/CD Process: Incorporate accessibility testing right into your development cycle.

Comprehensive Accessibility Testing of Live and Staging Websites:

  • WCAG Guidelines: Test against established standards to ensure broad accessibility.

Continuous Monitoring of Production Websites:

  • Accessibility Alerts: Stay informed about your site's accessibility status with proactive monitoring.

Security, Privacy, and Data Integrity:

Commitment to Security:

  • Data Privacy: We prioritize the confidentiality and privacy of your data throughout the testing process.
  • Data Integrity: Rigorous protocols ensure the accuracy and integrity of your data.
  • Cloud-Based Reliability: Leveraging AWS services, our solution is not only robust but also flexible, allowing for localization to specific Availability Zones and adherence to geographical limits.

With Adee API, in addition to making your website accessible we do not compromise on security. It's built on a foundation of security and privacy. Our cloud-based, AWS-powered service is designed to meet your specific regional requirements while maintaining the highest standards of data protection.

Please share your requirements with us, we'll do our best to comply.

Tell us about your project

Say hi

Our office

  • Sydney
    2019
    NSW, AUSTRALIA