DEV Community: Annysah

Using Amazon Transcribe to Generate Accessible Captions for Video Content

Annysah — Thu, 01 Jan 2026 05:59:18 +0000

Introduction

Captions matter for more than compliance. They support deaf and hard-of-hearing users, non-native speakers, people watching in sound-restricted environments, and anyone who processes information better through text. In practice, captions improve clarity and reach for everyone.

Captioning a single video is straightforward with today’s tools. The challenge appears when captioning becomes part of a platform or an ongoing content pipeline. At that point, the question shifts from “How do I caption this video?” to “How do I build captioning into my workflow?”

Consider a small engineering, product, or DevRel team that regularly produces video content. At first, captions are handled manually using simple tools. This works until volume and expectations grow.

Over time, captioning shifts from an occasional task to a recurring workflow. Videos are published regularly, more contributors are involved, and accessibility expectations increase. At this point, captioning stops being a one-off task and becomes a workflow problem.

This is where Amazon Transcribe becomes relevant.

What Amazon Transcribe Is

Amazon Transcribe is AWS's speech-to-text service. It converts spoken audio into time-aligned text. For video workflows, it outputs subtitle files in formats like WebVTT (.vtt) and SubRip (.srt), which are widely supported by video players and streaming platforms.

The service abstracts away the complexity of speech recognition. There's no model training or ML pipeline to manage. You provide the media file, and the service returns captions. This matters when you need captioning to be a repeatable, automated part of your system rather than a manual task.

Amazon Transcribe is a managed service, which means AWS handles the infrastructure, scaling, and maintenance. You focus on integrating it into your workflow and ensuring the output meets your accessibility standards.

Prerequisites

If you're planning to work with Amazon Transcribe, you'll need:

AWS account access - You'll need an account with permissions for Amazon Transcribe and Amazon S3
AWS familiarity - Basic understanding of AWS services, particularly S3 for storing media files
Media files - Video or audio files in supported formats (MP3, MP4, WAV, FLAC, and others)
Development tools - AWS CLI or SDK for automation (the examples in this guide use Python and boto3)

You can also use Amazon Transcribe through the AWS Console without writing code, which is useful for exploring the service and understanding its capabilities before building automation.

When You'd Use Amazon Transcribe

Amazon Transcribe isn't trying to replace simple, one-click captioning tools. Those work perfectly well for occasional use. Instead, it solves a different problem: captioning at scale within an existing workflow.

Specific Scenarios

You might consider Amazon Transcribe if you are:

Building a platform that hosts video content and needs built-in captioning capabilities
Producing content regularly as part of training, documentation, or educational programs
Working with accessibility requirements that are part of your product or organizational standards
Automating media workflows using AWS services and need captioning to fit into that automation

Amazon Transcribe becomes valuable when you need automation, integration, consistency, and scalability. Whether it's five videos or five hundred, the workflow stays the same. It's less about convenience and more about control and integration.

If you're captioning a single video occasionally, simpler tools are probably faster. If captioning is part of your product or process, Amazon Transcribe fits naturally into your infrastructure.

How Amazon Transcribe Works

Architecture Overview

Thinking in workflows rather than individual tools helps clarify how this fits together. At a conceptual level, a captioning pipeline on AWS looks like this:

The flow is straightforward:

Amazon S3 stores uploaded files
Amazon Transcribe processes the audio and generates caption files
Captions are reviewed for accuracy
Captions are attached to the video player or publishing platform

Optional services like AWS Lambda can automate orchestration, and AWS Elemental MediaConvert can be used if captions need to be embedded directly into video outputs.

Basic Implementation

Here's an example on what starting a transcription job looks like using the AWS SDK for Python (boto3):

import boto3

transcribe = boto3.client('transcribe', region_name='us-east-1')

job_name = "video-caption-job-001"
job_uri = "s3://your-bucket-name/your-file.mp4"

transcribe.start_transcription_job(
    TranscriptionJobName=job_name,
    Media={'MediaFileUri': job_uri},
    MediaFormat='mp4',
    LanguageCode='en-US',
    OutputBucketName='your-output-bucket',
    Subtitles={
        'Formats': ['vtt', 'srt']
    }
)

The Subtitles parameter tells Transcribe to format the output specifically for video players. Without it, you'd get a JSON transcript that you'd need to convert to caption format yourself.

Transcription jobs run asynchronously. You start the job, then check its status until it completes:

import time

while True:
    status = transcribe.get_transcription_job(
        TranscriptionJobName=job_name
    )
    job_status = status['TranscriptionJob']['TranscriptionJobStatus']

    if job_status in ['COMPLETED', 'FAILED']:
        break

    print(f"Status: {job_status}. Checking again...")
    time.sleep(15)

if job_status == 'COMPLETED':
    transcript_uri = status['TranscriptionJob']['Transcript']['TranscriptFileUri']
    print(f"Caption files available in S3 output bucket")

When the job completes, Amazon Transcribe writes the caption files to your specified S3 bucket. You get both the caption files (VTT and SRT) and a JSON file containing the full transcript with detailed timing information.

Understanding the Output

A VTT caption file looks like this:

WEBVTT

00:00:00.000 --> 00:00:03.450
Welcome to this guide on Amazon Transcribe.

00:00:03.450 --> 00:00:07.890
Today we'll explore how to generate captions for your video content.

Each caption block has a timestamp range and the corresponding text. Video players that support VTT will display this text at the right moments during playback.

The JSON output includes confidence scores for each word, which helps you identify sections that might need manual review:

{
  "results": {
    "items": [{
      "start_time": "0.000",
      "end_time": "0.450",
      "alternatives": [{
        "confidence": "0.9987",
        "content": "Welcome"
      }]
    }]
  }
}

Additional Features

Amazon Transcribe supports several features that improve accuracy for specific use cases:

Custom vocabularies help with domain-specific terms, product names, and technical terms:

transcribe.start_transcription_job(
    TranscriptionJobName=job_name,
    Media={'MediaFileUri': job_uri},
    MediaFormat='mp4',
    LanguageCode='en-US',
    Settings={
        'VocabularyName': 'tech-terms-vocabulary'
    },
    Subtitles={
        'Formats': ['vtt', 'srt']
    }
)

Speaker identification distinguishes between different speakers in interviews or panel discussions:

Settings={
    'ShowSpeakerLabels': True,
    'MaxSpeakerLabels': 2
}

Multiple languages are supported, allowing you to caption content in dozens of languages using the same workflow.

Important Considerations

Human Review Is Required

Like all automated captioning systems, Amazon Transcribe has limitations. Common issues could include missing punctuation, incorrect terminology, poor speaker identification, misheard words, etc.

While automation is valuable for scaling, it doesn't eliminate the need for quality control. Someone needs to review the generated captions for accuracy and readability before publishing. The captions represent your content, and errors can confuse viewers or change meaning.

Audio Quality Matters

Caption quality is closely tied to audio quality. Clear audio and minimal background noise tend to produce more accurate results, which is worth keeping in mind when recording video intended for transcription.

Cost and Scale Considerations

Amazon Transcribe charges per second of audio transcribed. For occasional use, costs are minimal. For large-scale operations processing hours of content daily, it's important to monitor usage and costs carefully.

Integration with Your Platform

Most video platforms support VTT and SRT caption files. For custom video players using HTML5, you add captions with a track element:

<video controls>
  <source src="your-file.mp4" type="video/mp4">
  <track label="English" kind="captions" srclang="en" 
         src="captions.vtt" default>
</video>

For YouTube, you can upload caption files directly. For streaming platforms like AWS Elemental MediaConvert or AWS Elemental MediaPackage, you can include caption files as part of your video processing workflow.

Consider where caption files will be stored in your storage system, how they'll be linked to their corresponding videos, and how your application will retrieve and display them.

Getting Started

Start small. Try transcribing a few videos using the AWS Console or a simple script. See how the accuracy matches your specific content. Identify common error patterns. Build confidence in the process before automating and scaling up.

Next Steps

Ready to explore further? Here are resources to help you move forward:

Official Documentation:

Amazon Transcribe Developer Guide - Comprehensive documentation covering all features and API references
Getting Started with Amazon Transcribe - Step-by-step tutorials for your first transcription jobs
Subtitles Documentation - Detailed guide on generating subtitle files

Code Examples:

AWS Samples on GitHub - Search for "transcribe" to find complete code examples and reference architectures

Related AWS Services:

AWS Lambda Documentation - For automating your transcription workflow
Amazon S3 Documentation - For managing your media files and outputs
AWS Elemental MediaConvert - For embedding captions directly into video files

Pricing and Costs:

Amazon Transcribe Pricing - Current pricing information to estimate your costs

The AWS documentation includes complete tutorials, API references, and best practices that go beyond what this guide covers. Start with the Getting Started guide, experiment with a few videos, and build from there.

Conclusion

Amazon Transcribe provides a practical way for teams to generate captions as part of their workflow, not as an afterthought. When captions are treated as part of the content lifecycle and reviewed with care, Amazon Transcribe helps shift the work from manual transcription to quality review, making consistent captioning achievable at any scale.

If captioning is becoming a recurring need in your work, it's worth exploring how this kind of automation can support your accessibility goals while maintaining the quality your audience deserves.

Introduction to AWS AI Concepts: A Beginner's Guide

Annysah — Mon, 29 Dec 2025 05:28:22 +0000

Artificial Intelligence (AI) as a concept can sometimes feel abstract and overwhelming to understand. New terms and tools are evolving quickly, and it might not always seem clear what AI is actually meant to do in real-world systems.

The goal of this article is to help you understand AWS AI concepts, how the pieces fit together, and how beginners can explore AI responsibly and confidently without diving into the technical implementation.

What AWS Means by AI

On AWS, AI is an umbrella term that covers a range of technologies designed to help systems perform tasks that typically require human judgment. These tasks include recognizing patterns, understanding language, analyzing images, or making predictions based on data.

AWS generally groups AI-related technologies into three closely related areas:

Artificial Intelligence (AI) - The broad field focused on building systems that can perform intelligent tasks.
Machine Learning (ML) - A subset of AI where systems learn patterns from data rather than relying on fixed rules.
Deep Learning - A subset of machine learning that uses neural networks to solve more complex problems, such as image recognition or speech processing.

When AWS refers to AI services, it is usually describing managed services built on top of machine learning models. These services allow users to apply AI capabilities without needing to design or train models from scratch. An example could be Amazon Comprehend an AWS AI service, which can analyze customer reviews to determine if sentiment is positive or negative, without you needing to build a sentiment analysis model yourself.

Machine learning, the foundation behind most AI services on AWS, works by learning from examples. Instead of writing instructions for every possible scenario, you provide data and allow the system to identify patterns within that data. For example, a system might learn how to classify emails as spam by analyzing large numbers of previous emails and their labels.

As a beginner, you do not need to understand the mathematical details behind these steps. What matters is understanding that ML outcomes depend heavily on data quality and context.

How AWS Organizes AI Capabilities

AWS provides AI functionality through managed services that can be grouped into three broad categories. Understanding these categories makes it easier to choose where to start.

1. AI Services

As described earlier, these are pre-built services designed to solve specific problems. You do not train models yourself; you provide input and receive results.

Common use cases include:

Analyzing text for sentiment or key phrases using Amazon Comprehend
Recognizing objects or faces in images and videos using Amazon Rekognition
Converting speech to text or text to speech using Amazon Transcribe
Translating content between languages using Amazon Translate
Generating text, images, or code from prompts using Amazon Bedrock or Amazon Q

These services are designed to be used through simple API calls and follow a managed service model, allowing users to apply AI capabilities without training custom models.

For beginners, these services are often the easiest entry point because they abstract away most of the underlying complexity.

2. Machine Learning Platforms

For users who need more flexibility, AWS also provides platforms that allow you to build, train, and deploy custom machine learning models.

These platforms are typically used when:

Data is highly specialized.
Pre-built services do not meet specific requirements.
Greater control over training and behavior is needed.

An example of this category is Amazon SageMaker, which supports the end-to-end machine learning lifecycle, including data preparation, model training, and deployment. These platforms usually come later in the learning journey and are not required for understanding AI fundamentals.

3. Infrastructure for AI Workloads

Behind all AI services is cloud infrastructure such as compute, storage, and networking. AWS offers specialized infrastructure to support AI workloads at scale.

At this level, AI workloads may run on GPU-enabled Amazon EC2 instances and use scalable storage services like Amazon S3 for datasets and model artifacts. This infrastructure supports traditional machine learning, deep learning, and generative AI workloads alike.

Beginners typically do not need to manage this layer directly when using managed AI services, but it is useful to understand that AI systems still rely on standard cloud building blocks.

What "Managed AI" Means on AWS?

A key concept for beginners is the idea of managed services. When an AI service on AWS is managed, AWS handles:

Infrastructure provisioning and scaling
Model maintenance and updates
Service availability and reliability

You focus on using the service rather than maintaining the underlying system. This significantly lowers the barrier to entry and reduces operational risk.

Managed does not mean guaranteed accuracy. Results still depend on the input you provide and the way outputs are interpreted. Understanding limitations remains important.

Getting Started with AWS AI as a Beginner

For beginners, the best way to approach AWS AI is gradually and through a practical starting path:

Clearly defining the problem you want to solve.
Evaluating whether AI is actually needed.
Exploring AWS pre-built AI services that align with your goal.
Running small experiments in low-risk environments.
Reviewing outputs carefully and critically.

It is important to note that AWS AI services have associated costs, but the AWS Free Tier includes usage limits for many AI services that allow you to experiment and learn without immediate expense.

In addition, for learners who prefer structured guidance, AWS also offers the AWS Certified AI Practitioner certification. This optional certification focuses on foundational AI concepts, common AWS AI services, and responsible AI practices. It is designed for both technical and non-technical audiences. Preparing for this certification can help you build a shared vocabulary and understand how AWS AI services fit together.

Responsible Use of AI

Using AI responsibly is an essential part of working with AWS AI services. Some principles to keep in mind include:

Understanding limitations: AI outputs are probabilistic and may not always be correct.
Avoiding blind trust: Results should be reviewed, especially in sensitive contexts.
Protecting privacy: Only use data you are authorized to process.
Being aware of bias: Models learn from data, and biased data can influence outcomes.

AWS provides guidance and tools to support responsible AI use, but responsibility ultimately rests with the user.

Conclusion

Think of AWS AI as a set of tools designed to help you make better decisions, not replace you. By understanding what AI can actually do, how AWS organizes its AI services, and when it makes sense to use it, you build a foundation that grows with your experience.

How to Automatically Generate Alt Text for Images Using Amazon Rekognition

Annysah — Mon, 13 Jan 2025 00:04:01 +0000

Introduction

Accessibility is a vital aspect of web development. One key component of web accessibility is providing alt text for images. Alt text (alternative text) is a textual description of an image that helps screen readers convey the image's content to users who cannot see it.

Thinking of the right words for alt text can be tricky, especially when you're unsure of what to call an object. In addition, describing multiple images can quickly become tedious. Amazon Rekognition is a powerful image analysis service that can help automate some of the process.

This guide will walk you through how to set up and use Rekognition to quickly generate alt text for your images, saving time and improving accessibility.

What is Amazon Rekognition?

Amazon Rekognition is a powerful machine learning service offered by AWS that can analyze images and videos to identify objects, scenes, activities, and people. It can also recognize text, faces, and other visual elements in images.

When you use Rekognition, it generates labels for an image, such as "Person," "Dog," or "Car," which describe the objects or scenes it detects. These labels can be a great starting point for alt text. However, it's important to remember that Rekognition is not a replacement for human judgment. It is essential to ensure that alt text is accurate, informative, and user-friendly.

Practical Example of When to Use Rekognition

Let’s say you manage an online store with hundreds of product images. Manually writing alt text for each product image can be time-consuming. Using Rekognition, you can automatically generate labels useful to write alt text for your product images in minutes, without having to spend a lot of time thinking about what to describe each image.

Prerequisites

Before you begin, ensure you have the following:

AWS Account.
AWS CLI.
IAM user with an access key ID and secret key set up
Basic Terminal Knowledge

Step-by-Step Guide: How to Generate Alt Text Using Rekognition

Step 1: Set Up AWS CLI

The first step is to set up your AWS credentials in the CLI.

Open your terminal and run aws configure.
Enter your AWS Access Key ID, AWS Secret Access Key, and the default region (e.g., us-east-1).

This sets up your AWS CLI with the necessary credentials to interact with AWS services.

Step 2: Prepare Your Image

You can use images stored locally on your computer or images stored in an AWS S3 bucket.

For local images: You need to either encode the image to base64 format or upload it to S3. For simplicity, we'll focus on using the base64 method here.
For images in an S3 bucket: You can refer directly to the image in the S3 bucket by providing the bucket name and image file name.

Step 3: Run the Rekognition Command

Once your AWS CLI is set up and your image is ready, you can use the Rekognition detect-labels command to generate labels.

For Local Images (Base64 Encoding):

Run the following command, replacing /path/to/your/image.jpg with the actual path to your image file:

aws rekognition detect-labels --image "Bytes=$(base64 /path/to/your/image.jpg | tr -d '\n')" --max-labels 10 --min-confidence 80

Here’s what each part does:

Bytes=$(base64 ...): Encodes the image to base64 so it can be passed to Rekognition.
--max-labels 10: Limits the result to 10 labels.
--min-confidence 80: Filters out labels with a confidence lower than 80%.

The command will return a JSON output with labels detected in the image. For example:

{
  "Labels": [
    {
      "Name": "Woman",
      "Confidence": 99.5
    },
    {
      "Name": "Baby",
      "Confidence": 95.1
    }
  ]
}

For Images in an S3 Bucket:

If your image is stored in an S3 bucket, use the following command, replacing <your-bucket-name> and <image-name> with your S3 bucket and image names:

aws rekognition detect-labels --image "S3Object={Bucket=<your-bucket-name>,Name=<image-name>}" --max-labels 10 --min-confidence 80

Upon following either of the steps above, you’ll receive a JSON response with detected labels. You can use these labels as the starting point of your alt text. In this case, the alt text could be: "A woman carrying a baby."

Step 4: Automate the Process (Optional)

If you have many images, you can automate the process to make it more efficient.

Batch Processing with S3: You can use AWS Lambda to automatically trigger Rekognition whenever an image is uploaded to your S3 bucket.
Using a Shell Script: You can also write a shell script to process multiple images in a folder.

For example:

#!/bin/bash
for image in /path/to/images/*.jpg; do
    aws rekognition detect-labels --image "Bytes=$(base64 $image | tr -d '\n')" --max-labels 10 --min-confidence 80
done

Considerations

While Rekognition is a powerful tool that can be helpful for generating alt text, it’s important to keep the following in mind:

Use Rekognition as a starting point: Rekognition can help you identify key objects and scenes in an image. It may not always generate the most precise labels for your images. It’s a good idea to review the generated labels and adjust them if necessary.
Context: The labels generated by Rekognition are generic, so you may want to adjust them to fit the specific context of your image.
Limitations: Rekognition generates labels based on visual content, but it doesn’t provide nuanced descriptions like a human might. You may need to fine-tune the alt text to provide a more detailed description when needed.

Conclusion

Rekognition can be a valuable tool for assisting with image alt text, but it should always be used as part of a human-centered workflow. By following these steps, you can automate the process of generating alt text for your images. This saves time, improves accessibility, and ensures that your website is more inclusive for all users.

In addition, make your alt text brief and to the point, and use a screen reader to test it, ensuring it is accessible.

Leveraging AWS Services for Accessible Cloud Solutions

Annysah — Mon, 06 Jan 2025 03:32:18 +0000

Cloud computing has become widely adopted over the years, powering everything from simple websites to complex technologies. Amazon Web Services (AWS) provides a wide array of services to businesses and developers worldwide. But do you know that some of these tools also play a significant role in improving accessibility for people with disabilities?

In this post, we’ll explore these tools and practical examples of how to leverage them for accessible solutions.

Key AWS Tools that Aid Accessibility

1. Amazon Rekognition

This tool uses machine learning to identify objects, text, and scenes in images and videos. Developers can use it to build applications that describe visual content, aiding users with visual impairments.

2. Amazon Transcribe

Amazon Transcribe converts spoken language into accurate, readable text, improving accessibility by providing transcripts for audio and video content. Transcribe is commonly used in customer support and e-learning platforms, providing live captions that make content more accessible.

3. Amazon Polly

With this text-to-speech service, you can create applications that convert written content into natural-sounding speech, helping users with reading difficulties or visual impairments.

4. Amazon IVS (Interactive Video Service)

AWS IVS allows for live video streaming with added accessibility features like closed captions, making live content more inclusive.

5. AWS Amplify

Though not solely focused on accessibility, AWS Amplify simplifies the development of accessible front-end applications by integrating best practices and tools that support accessibility standards. The Amplify UI library provides pre-built components that comply with WCAG and WAI-ARIA standards, making it easier to create applications with accessible user interfaces.

Practical Examples of AWS Tools in Action

Amazon Rekognition: A shopping app can use Rekognition to analyze product images and describe them (color, size, brand) in text. By integrating text-to-speech services like Amazon Polly, the app can read these descriptions aloud, helping visually impaired users shop independently.
Amazon Transcribe: An online learning platform can use Transcribe to generate subtitles for videos. This provides access to deaf or hard-of-hearing users while also supporting multiple languages to reach a global audience.
Amazon Polly: A news app can use Polly to read articles aloud, making it more accessible for users with visual impairments or reading difficulties. This feature also allows users to listen while multitasking.
Amazon IVS: For a live streaming platform, combining IVS with Amazon Transcribe can provide real-time captions during virtual events, ensuring that deaf or hard-of-hearing viewers can fully engage with the content.
AWS Amplify: When building an e-commerce platform with Amplify, developers can use the built-in UI components like forms that comply with WCAG standards, making it inclusive for everyone.

Conclusion

AWS offers a range of tools that empower developers to create more inclusive applications. Whether you're enabling text-to-speech, automatic transcription, or accessible video content, AWS tools can help you improve accessibility and enhance user experiences for people with disabilities. By integrating these tools, you can help make the digital world a more inclusive place for all users.

10 Web Accessibility Principles Every Developer Should Know

Annysah — Mon, 11 Mar 2024 04:25:22 +0000

Introduction

Web accessibility ensures that people with disabilities can perceive, understand, navigate, and interact with web content effectively. As developers, it's essential to incorporate accessibility principles into our work to ensure inclusivity and provide a seamless experience for all users. In this article, we'll explore ten key accessibility principles every developer should be familiar with.

Semantic HTML

Semantic HTML elements help search engines understand the structure of your content and also assist screen readers in interpreting the information correctly. Utilizing proper tags like , , , , , etc. provides a clear hierarchy and meaning to your web pages.

Keyboard Accessibility

Many users rely on keyboards for navigation instead of a mouse. Ensure that all interactive elements, such as links, buttons, and form fields, are accessible via keyboard navigation. Additionally, avoid trapping users in keyboard traps where they cannot navigate away using keyboard commands.

Alt Text for Images

Provide descriptive alt text for images to convey their content and function to users who cannot see them. The alt text should be concise yet descriptive enough to convey the purpose of the image.

It is important to note that decorative images should have empty alt attributes alt="" to indicate they are for visual presentation only.

Color Contrast

Maintaining sufficient color contrast between a text and its background ensures readability, especially for users with low vision or color blindness. Always aim for a minimum contrast ratio of 4.5:1 for normal text and 3:1 for large text. There are various online tools available to help evaluate color contrast ratios. To learn more, you can check out 5 Essential Tools for Web Accessibility.

Proper Form Labels

Ensure that every form field has a corresponding label, and use the for attribute to explicitly associate labels with their respective inputs.

Focus Management

Proper focus management ensures that users can navigate your website efficiently, especially those using assistive technologies. Provide a clear visual indication, such as an outline or change in color, for focused elements. This will help users easily identify which element has the keyboard focus.

ARIA Roles and Attributes

Accessible Rich Internet Applications (ARIA) attributes can enhance the accessibility of complex web applications. Use ARIA roles and attributes to convey the purpose, state, and structure of dynamic content for assistive technologies. However, use them sparingly and prioritize native HTML elements whenever possible.

Logical Document Structure

Organize your content using a logical document structure that follows best practices. Headings should be used to outline the content hierarchy, and lists should be used for grouped items. A well-structured document enhances navigation and comprehension for all users, including screen readers.

Video and Audio Accessibility

Provide captions for videos and transcripts for audio content to make them accessible to users with hearing impairments. Additionally, it offers controls for users to adjust the volume, pause, and play media content. Consider providing alternatives, such as text-based summaries, for users who cannot access multimedia content.

Testing with Accessibility Tools:

Regularly test your website for accessibility using automated and manual testing tools. Automated tools like Lighthouse, Axe, and WAVE can help identify common accessibility issues, while manual testing ensures a comprehensive evaluation of your website's accessibility across different devices and assistive technologies.

Conclusion

By adhering to these ten web accessibility principles, developers can create websites and web applications that are inclusive and accessible to all users, regardless of their abilities or disabilities. Prioritizing accessibility enhances the user experience and aligns with ethical and legal obligations to provide equal access to digital content. As developers, let's commit to building a web that is accessible to everyone.

5 Essential Tools for Web Accessibility

Annysah — Mon, 11 Mar 2024 04:08:49 +0000

Introduction

Web accessibility is crucial for ensuring that all users, including people with disabilities, can access and interact with web content effectively. Fortunately, there are numerous tools available to help developers assess and improve the accessibility of their websites and web applications. In this article, you'll learn about five essential web accessibility tools that every developer should be familiar with.

1. Axe

Axe is a widely used accessibility testing tool developed by Deque Systems. It integrates seamlessly with popular web development tools such as Chrome DevTools and Firefox Developer Tools, making it convenient for developers to identify accessibility issues during development.

It performs automated accessibility scans on web pages and provides detailed reports highlighting violations of accessibility standards, along with suggestions for improvement.

2. WAVE

The WAVE evaluation tool is another popular accessibility testing tool that provides comprehensive evaluations of web content for accessibility issues. Developed by WebAIM (Web Accessibility in Mind), Wave is available as a browser extension for Chrome and Firefox as well as a web-based tool.

This tool evaluates web pages against the Web Content Accessibility Guidelines (WCAG) criteria and provides visual feedback directly within the page, making it easy for developers to identify and understand accessibility issues. Wave also offers detailed reports with explanations and suggestions for fixing accessibility problems.

3. Lighthouse

Lighthouse is an open-source tool developed by Google that helps developers improve the quality of their web pages across various dimensions, including performance, accessibility, best practices, and Search Engine Optimization (SEO).

Integrated into Chrome DevTools, Lighthouse performs automated audits of web pages and generates detailed reports with actionable insights for optimization. Its accessibility audits cover a wide range of accessibility criteria, including semantic HTML, focus management, color contrast, and ARIA usage.

4. Color Contrast Analyzers

Color contrast is essential for ensuring that text content is readable for users with low vision or color blindness. Color contrast analyzers help developers assess the contrast ratio between text and its background color to ensure compliance with accessibility standards.

There are various color contrast analyzers available, including browser extensions such as ColorZilla and WebAIM's Color Contrast Checker. These tools allow developers to input foreground and background colors and instantly determine whether the color combination meets the required contrast ratio according to WCAG guidelines.

5. Screen Readers

Screen readers are assistive technologies that convert on-screen content into synthesized speech or braille output, enabling users with visual impairments to access and navigate digital content. While not strictly a developer tool, understanding how screen readers interact with web content is essential for building accessible websites.

Developers should test their websites with screen readers to ensure that all content is perceivable and navigable using assistive technologies. Popular screen readers include JAWS, NVDA, and VoiceOver (built into macOS and iOS devices). By testing with screen readers, developers can gain insights into how users with visual impairments experience their websites and identify areas for improvement in terms of navigation, content structure, and interactive elements.

Conclusion

Web accessibility tools play a crucial role in helping developers create websites and web applications that are inclusive and accessible to all users. By utilizing tools like Axe, Wave Evaluation Tool, Lighthouse, color contrast analyzers, and screen readers, developers can identify accessibility issues, understand their impact on users with disabilities, and implement necessary improvements to ensure a seamless and inclusive user experience.

Prioritizing web accessibility not only benefits users with disabilities but also contributes to the overall usability and quality of web content. As developers, let's leverage these essential accessibility tools to build a web that is accessible to everyone.

Connecting AWS with Terraform: A Short Guide

Annysah — Sat, 27 Jan 2024 06:01:32 +0000

Infrastructure as Code (IaC) has become an essential component of modern software development, allowing teams to manage and provision infrastructure in a consistent and automated manner using tools like Terraform. In this guide, you'll learn how to connect AWS with Terraform, enabling users to seamlessly provision and manage resources on the AWS cloud.

Prerequisites

Before diving into the article, ensure that you have the following prerequisites in place:

AWS Account
AWS CLI installed
IAM user with an access key ID and secret key set up
Terraform installed

If you are a Windows user, you can checkout my Step-by-step Guide to Installing Terraform on Windows

Step 1: Configure AWS CLI

Run the following command to configure the AWS CLI with your AWS credentials:



aws configure

You will be prompted to enter your AWS Access Key ID, Secret Access Key, default region, and output format. Make sure to provide the necessary information.

Step 2: Set Up AWS Provider in Terraform

Create a new Terraform file, for example, main.tf, and specify the AWS provider, and configure the region as shown below:



terraform {
  required_providers {
    aws = {
      source = "hashicorp/aws"
      version = "~> 5.0"    
    }
  }
}

provider "aws" {
  # Configuration options
  region = "us-east-1" 
}

You can replace the region with the appropriate AWS region code where you want to deploy your resources.

Step 3: Initialize Terraform Configuration

Next initialize your Terraform project by running the following command:



terraform init

This command downloads the necessary provider plugins.

Step 4: Write Terraform Configuration

Now, you can start writing your Terraform configuration to define the AWS resources you want to create. For example, to create an S3 bucket, you can add the following code to your main.tf file:



resource "aws_s3_bucket" "annysahbucket" {
  bucket = "annysah-terraform-practice"
}

Step 5: Apply Terraform Configuration

Apply the Terraform configuration to create the specified AWS resources:



terraform apply

Upon running the command above, enter 'yes' for each prompt displayed.

Step 6: Verify Resources in AWS Console

Check the AWS Management Console to ensure that the resources provided in your Terraform configuration file have been successfully created.

If you want to destroy the created resources, you can run terraform destroy from your terminal.

Conclusion

In this guide, you've gained an overview of how to connect AWS with Terraform, allowing you to automate and scale your infrastructure deployments with ease.

Step-by-step Guide to Installing Terraform on Windows

Annysah — Mon, 08 Jan 2024 01:44:13 +0000

Installing a new software package on your PC can sometimes feel daunting. Trust me, I did feel this way when I was trying to install Terraform on my Windows PC. So, if you are new to Terraform and want it installed on your Windows PC, this guide will walk you through the process.

You can also check out my previous article on a brief introduction to Terraform

Step 1: Download Terraform

Navigate to the Terraform homepage and click on "Download Terraform".

Select Windows under the "Operating Systems" section.

Click on "AMD64" to download Terraform binary for a 64-bit operating system (OS) or "386" for a 32-bit OS.
Navigate to your PC's Windows directory and create a new folder named terraform.

In your Downloads, right-click on the downloaded Terraform binary file and select "Extract All..." The window below will pop up.

Click on "Browse..." and navigate to the terraform folder created earlier. This is where you will extract the file. Once you are in the 'terraform' folder, click on "Extract."

Step 2: Set Terraform Path to System Environment Variables

In your Windows start menu, type environment and click "Edit system environment variables."
Click on "Environment Variables" in the System Properties window.

Under "System variables," select the "Path", then click "Edit."

Click "New" and enter the path of the Terraform folder, which is C:\terraform. Click "OK" to close each window.

Step 3: Verify Terraform Installation and Configuration

Navigate to the folder path C:\terraform in a new command prompt window and type the terraform -version to verify the installed version.

To see more Terraform commands, you can simply type terraform in the terminal.

Now, you have successfully installed and configured Terraform on your Windows PC. Cheers to more learning!

A Brief Introduction to Terraform

Annysah — Sun, 07 Jan 2024 04:59:04 +0000

In DevOps and cloud infrastructures, efficient management and provisioning of resources (compute, network, storage, and database) are very important because they tend to get complex quickly. As a result, a robust tool like Hashicorp's Terraform can handle this and even eliminate errors that can occur with a manual setup. This article provides an overview of what Terraform is, its importance and basic concepts.

What is Terraform?

Terraform is an open-source infrastructure as code (IaC) tool that enables DevOps teams to define and provision infrastructure resources in a configuration file (with the .tf extension) using the Hashicorp Configuration Language (HCL). This means that instead of manually configuring resources, it allows you to describe your complete infrastructure in the form of code.

Why Terraform?

Terraform plays a crucial role in the DevOps lifecycle by providing numerous benefits, such as:

Facilitates rapid development cycles by automating the provisioning and management of infrastructure.
Improves team collaborations due to the ability to version control infrastructure configurations
Supports multiple providers such as AWS, Azure, GCP and more
Seamless CI/CD (continuous integration and continuous deployment) pipeline integrations.

Basic Concepts of Terraform

The following are a few of the basic concepts you would often come across when using Terraform:

Providers
Resources
Modules

Providers

In Terraform, providers act as connectors to different cloud platforms or infrastructure services by giving access to the API you will need to interact with to create resources. Users specify the provider they want to use in their configuration files, and all Terraform does is translate it into the specific API calls needed for each service.

provider "aws" {
  region = "us-east-2"
}

The code above is an example of how to declare a provider. The "provider" keyword is used to specify the service you want, in this case "aws". Users can then put all the necessary configurations within the curly braces.

Resources

In Terraform configuration file, resources are the most important element. They represent the infrastructure components you want to create or manage.

resource "aws_s3_bucket" "first_bucket" {
    bucket = "my-first-bucket"
}

The resource block above tells Terraform to create an AWS S3 bucket with the specified name as "first-bucket" and then set the necessary configurations for the bucket within the curly braces.

Modules

Modules in Terraform are helpful in defining a reusable block of Terraform code, of which we can have many instances in the main configuration file. Modules are a great way to maintain and manage complex infrastructure.

module "web_server" {
  source = "./modules/web_server"
  instance_count = 3
}

The code above is an example of how to write a module configuration. Here, this module block is instructing Terraform to use the "web_server" module. It also sets a specific parameter, "instance_count," to 3, influencing the behavior of the module when executed.

Conclusion

Terraform is a really powerful solution for managing infrastructure as code, offering automation, scalability, and collaboration benefits in the DevOps and cloud worlds.

This article introduces you to the basics of Terraform. You’ve learned about some of its benefits and concepts. To further deepen your knowledge of Terraform, you can visit the documentation. Cheers to more learning!

Building a CI/CD Integration with Amazon EC2, Jenkins and Docker

Annysah — Tue, 12 Dec 2023 02:26:39 +0000

Introduction

Continuous integration (CI) and continuous delivery (CD) are the development practices of committing code to a shared repository frequently and reliably, allowing for continuous software improvement. Each commit triggers automated workflows on a CI/CD server, which can alert the development team of a potential issue.

In this article, you'll learn how to use DevOps tools like Amazon EC2, Jenkins, and Docker to build a CI/CD integration of a simple React app.

Prerequisites

The following is required to follow along smoothly with the tutorial:

An AWS account
A simple React application you would like to deploy. Here is the repository for the React app used in this tutorial.

Tools

Amazon EC2 (Elastic Compute Cloud) is a cloud computing service that allows for the deployment of virtual servers within an AWS environment.
Jenkins is an open-source automation tool that allows developers to build, test and deploy software.
Docker is an open-source software development platform that uses virtualization technology to ease the development and deployment of applications in containerized environments.

You can learn more about What Docker is and why it is important

Module 1: Create an EC2 Instance

Step 1: Go to the AWS management console and sign in with your AWS account credentials.

Step 2: Use the services search box in the console to look up "EC2". Click on it to navigate to the dashboard, and then select the "Launch instance" button.

Step 3: Launch an EC2 instance

Give the instance any name e.g. tasky.
Select the Ubuntu AMI and the t2.micro free tier instance type.
Choose "Create new key pair," then pick either RSA or ED25519 as the key-pair type. Afterward, select the Private key file format as .pem and .ppk. Then, click the "Create key pair" button.

In this tutorial, RSA and the .pem format were specifically chosen.

Under the network settings, click edit and set the inbound security group rules as shown in the image below;

The custom TCP with port range 8080 is for the Jenkins that will be installed later in this tutorial.

Finally, launch the instance.

Step 4: Choose the instance you recently created from the instances table, click the connect button, and opt for the "EC2 Instance Connect" tab to enable SSH access to the CLI.

Module 2: Configure Jenkins on the EC2 Instance

Jenkins utilizes Java as its underlying framework, so be sure to install it on your EC2 virtual server instance by doing the following:

Step 1: Update its package source list to acquire the latest versions of packages from the repositories by running

sudo apt update

Then install Java and validate the installation.

sudo apt install openjdk-11-jre

java --version

Step 2: The next step is to install Jenkins by running the following command;

sudo wget -O /usr/share/keyrings/jenkins-keyring.asc \
  https://pkg.jenkins.io/debian-stable/jenkins.io-2023.key

echo deb [signed-by=/usr/share/keyrings/jenkins-keyring.asc] \
  https://pkg.jenkins.io/debian-stable binary/ | sudo tee \
  /etc/apt/sources.list.d/jenkins.list > /dev/null

sudo apt-get update

sudo apt-get install jenkins

You can always check for the updated Jenkins releases here.

Step 3: Start Jenkins by running the following commands;

sudo systemctl enable jenkins

sudo systemctl start jenkins

sudo systemctl status jenkins

Step 4: Open the Jenkins application in your web browser by entering the public IP address of your instance, followed by port 8080.

http://<your-ec2-ip>:8080

You should see this in your browser

To access your administrator password, enter sudo cat /var/lib/jenkins/secrets/initialAdminPassword in your instance terminal.

Then, copy the password, return to your browser, paste it into the Administrator password field, and click "Continue."

Next, select "install suggested plugins." Create first admin user; upon clicking "Save and Continue," it leads you to the dashboard as shown below

Step 5: Set up Jenkins;

On the left side of the dashboard, select "New Item" and type in any name.
Choose "Freestyle Project" and click Ok.
Add a short project description, select "Github Project," and paste the link to your project repo as shown below

Step 6: Run the following in your EC2 instance terminal so you can access your instance RSA private and public keys

ssh-keygen

cd .ssh

ls

The expected output will be authorized_keys id_rsa id_rsa.pub. To get the public key, run sudo cat id_rsa.pub while to get the private key, run sudo cat id_rsa.

Step 7: Go to your Github profile settings and look for "SSH and GPG keys" on the left pane. Click on "New SSH key."

Enter a name, type in your RSA public key, and click "Add SSH key."

Step 8: Copy your .git URL and paste it into the "Repository URL" within the "Source Management" section of your Jenkins dashboard.

Click on the "Add" button to add credentials and select "Jenkins Credentials Provider." In the dialog box, under kind, select "SSH with private key" and type an ID and description, and set the username to ubuntu

In the private key, tick "Enter directly" and enter your private key, then click Add.

You can then select the created credential in the "Credentials" field.

The next step is to click "Save" and "Build Now."

You can check the "console output" for build details.

Step 9: In your instance terminal, run the command below to access your Jenkins workspace

cd /var/lib/jenkins/workspace/{your-project-name}
ls

Next, proceed to install the necessary dependencies listed below.

sudo apt install nodejs

sudo apt install npm

sudo npm install

Step 10: In your AWS console, navigate to Instance -> Security -> Security groups -> Edit inbound rules. Add the rule as illustrated below and save the changes to enable access to the app from your instance server later on.

Module 3: Set up Docker

Step 1: Inside your Jenkins workspace on your instance terminal, install Docker by executing the following command:

sudo apt install docker.io

Step 2: Create a Dockerfile. This file will be used to build an image

vim Dockerfile

Step 3: Add the following content to the Dockerfile;

FROM node:12.2.0-alpine
WORKDIR app
COPY . .
RUN npm install
EXPOSE 3000
CMD ["npm","start"]

To exit vim, type :wq

Step 4: Then, build your image

docker build . -t tasky

To fix any permission issues, execute the commands below:

sudo usermod -a -G docker $USER

sudo reboot

Create a container from the image

docker run -d --name tasky -p 3000:3000 tasky

Verify if it is running

docker ps

Access your application in the web browser by entering the public IP address of your instance, followed by port 3000

http://<your-ec2-ip>:3000

Module 4: Automate Jenkins

Step 1: Now configure "Build Steps" in your Jenkins dashboard as shown below

Then, click Save -> Build Now

Step 2: Navigate to Manage Jenkins -> Plugins -> Available Plugins, search for the "GitHub Integration" plugins, and install.

Step 3: Go to your Github project repo settings and look for "Webhook" on the left pane. Add your Jenkins URL, appended with /github-webhook/, select the content type as "application/json," and click "Add webhook."

Step 4: Navigate to Jenkins configuration for your project and check the "GitHub hook trigger for GITScm polling."

You can test your modified Jenkins build job by making changes to any file in your project repository. After completing the update, Jenkins will automatically trigger a build job.

Conclusion

In this article, you learned how to integrate a simple CI/CD practice into an application by utilizing DevOps tools such as AWS EC2, Jenkins, and Docker.

Integrating Jenkins with AWS EC2 and Docker creates an effective CI/CD pipeline that automates software delivery. This combination allows for easy scalability and repeatability in the development, testing, and deployment of applications. Adopting these technologies allows development teams to easily detect errors, accelerate release cycles, while maintaining high quality requirements.

Dockerizing a Next.js App: A Step-by-Step Guide

Annysah — Tue, 21 Nov 2023 06:33:29 +0000

Introduction

Docker is a helpful tool in software development, especially when integration of new features and frequent deployments are required. This tool makes it easy to containerize applications and their dependencies, ensuring they remain consistent across various environments. In this article, you'll learn how to dockerize a Next.js application.

Prerequisites

Before getting started, you will need to have the following tools installed on your system:

Step 1: Create a Next.js App

If you don't have a Next.js app yet, create one using the following commands:

npx create-next-app my-next-app
cd my-next-app

Run npm run dev to see if the app is running properly.

Step 2: Setup a Dockerfile

Create a file called Dockerfile in the root of your Next.js app. This file will contain the following instructions for building a Docker image for your application:

FROM node:21

WORKDIR usr/src/app

COPY . .

RUN npm install

CMD ["npm", "start"]

From the file above, the:

FROM node:21 command defines the image we want to build from, often called the base image. Here, we used the latest version of Node available as seen from the Docker Hub
WORKDIR usr/src/app specifies the working directory as usr/src/app, for executing any command you add in the Dockerfile.
COPY . . command copies all the files and folders from the current directory to the working directory.
RUN npm install installs all the necessary dependencies inside the container.
CMD ["npm", "start"] command defines how to start the application in the container.

Step 3: Create a .dockerignore File

Create a .dockerignore file at the root of your app and add the code below

node_modules
.next

This allows Docker to know what to ignore during the build process.

Step 4: Build the Docker Image

Open your terminal and run the following command to build the Docker image:

docker build -t my-next-app .

This command tells Docker to build an image using the instructions in the Dockerfile and give it the name my-next-app.

Step 5: Run the Docker Container

After successfully building the Docker image, run the container:

docker run -p 3000:3000 my-next-app

This command maps port 3000 on your local machine to port 3000 in the Docker container. Open your browser and navigate to http://localhost:3000 to see your Next.js app running inside a Docker container.

Conclusion

In this article, you learned how to dockerize your Next.js application by following the steps outlined.

Dockerizing a Next.js app allows for easy deployment and ensures consistency across environments. This approach makes project development and deployment processes more efficient and scalable.

What is Docker and why it is important?

Annysah — Mon, 06 Nov 2023 07:59:43 +0000

In the constantly evolving DevOps and cloud computing space, Docker has become a helpful tool. At some point, you may have heard about it, and the idea behind it may sound a little confusing. In this article, you will understand what Docker is and its importance.

What is Docker?

Docker is an open-source software development platform that uses virtualization technology to ease the development and deployment of applications in containerized environments. It is a lightweight tool that bundles applications and their dependencies into virtual containers that would work efficiently in different environments without worrying about constant configurations and compatibility issues.

Why Docker?

In a development team scenario, for example, team members use different operating systems. While working on a project and making frequent changes and deployments to the software, compatibility issues can occur due to these varied operating systems. It may lead to problems like "it works on your machine, but it doesn't work on mine."

With the help of containers, Docker solves this problem by ensuring that applications run consistently, regardless of the operating system they are running on. It allows us to work in several different environments without compromising anything on our local machine.

Containers

To further comprehend Docker, let's talk about the concept of containers. Think of a container as Tupperware for your applications that encapsulates everything they need to function, such as the application's code, libraries, dependencies, and OS, all neatly packaged to run as soon as you deploy it.

In other words, Docker simplifies the management of containers, making it accessible for developers, system administrators, and DevOps teams.

Containers offer several advantages, such as:

Consistency: Containers ensure that your application behaves consistently across different environments. Just like following a precise recipe for baking cookies, containers follow a set of instructions for predictable performance.
Portability: Containers can run on any platform that supports them, offering the flexibility to deploy your application wherever needed. It is just like enjoying your homemade cookies at home, at work, or at a friend's house.
Efficiency: Containers are lightweight, consuming fewer resources compared to traditional virtual machines. It's like sending a compact parcel with only the essentials instead of a bulky package with a lot of unnecessary padding.
Isolation: Containers keep your applications separate, similar to the Tupperware in a fridge. If one container encounters a problem, it won't affect the others.

Conclusion

In conclusion, Docker is a game-changer in the world of DevOps and cloud computing. With Docker, the "it works on your machine, but it doesn't work on mine" scenario becomes a thing of the past, as it ensures consistent performance across different operating systems. Just like Tupperware keeps your food fresh and separate, Docker keeps your applications isolated and ready to run seamlessly.

So, whether you're working with a diverse team or deploying software in various environments, Docker ensures that your applications function predictably, efficiently, and with the utmost consistency.