What is Web Accessibility?

Web accessibility ensures that all users, including those with disabilities, can navigate, understand, and interact with a website effectively. This includes, but is not limited to, individuals with visual, auditory, motor, and cognitive impairments who may rely on assistive technologies such as screen readers, keyboard navigation, or voice commands. 

An accessible website removes barriers that might prevent these users from accessing information or completing tasks. Beyond legal considerations, prioritizing accessibility enhances user experience, broadens audience reach, and demonstrates a commitment to inclusivity.

Read this article to learn more about what steps your Arryved Web Solutions Team takes to help improve your web accessibility, and recommendations for you to try as well, to improve the accessibility of your content. 

Accessibility Standards

Web Content Accessibility Guidelines (WCAG)

The Web Content Accessibility Guidelines (WCAG) is a standard framework for improving digital accessibility. They provide best practices for making web content perceivable, operable, understandable, and robust. While WCAG is not a law, it serves as the foundation for various regulations worldwide.

• The most commonly referenced standard is WCAG 2.1 AA, which many organizations use as a benchmark for accessibility.

Title III of the Americans with Disabilities Act (ADA)

In the U.S., Title III of the Americans with Disabilities Act (ADA) prohibits discrimination against individuals with disabilities in places of public accommodation, which courts have increasingly interpreted to include websites. As legal standards continue to evolve, implementing web accessibility is not just a best practice but a proactive step toward conformance and inclusivity.

Arryved’s Role in Your Web Accessibility

Arryved is committed to building Web Solutions (Websites, Online Shops, and BevFinders) for businesses and their customers, following WCAG 2.1 AA guidelines. 

While we strive to create accessible Web Solutions in line with industry best practices, we are not a conformance service and do not certify or guarantee compliance. Accessibility requirements are complex, vary by jurisdiction, and continually evolve, making it the responsibility of owners to ensure their Web Solutions meet guidelines.

Working With Third-Party Vendors

We strive to work with third-party vendors who prioritize accessibility and follow best practices. However, we cannot guarantee the accessibility of third-party plugins, integrations, or code used on your site, as these are developed and maintained by external companies. Their accessibility standards may vary, and updates or changes may introduce new challenges. We recommend reviewing third-party accessibility documentation and reaching out to vendors to ensure their products align with your accessibility goals.

Arryved’s Best Practices for Web Accessibility

The Arryved Web Solutions team does their best to implement the following best practices as they build out your Web Solutions. These are also recommendations for you to consider as you’re adding content to your Web Solutions. While these practices do not guarantee protection from legal action, they address common accessibility issues that can enhance usability for all visitors.

Content & Structure

1. Use Descriptive Alt Text for Images – Ensure all meaningful images have appropriate alt text describing their purpose.

2. Avoid Text Embedded in Images – Screen readers cannot read text that is part of an image, making it inaccessible to visually impaired users. Whenever possible, use actual HTML text instead. If not possible, use descriptive alt text.

3. Provide Text Transcripts & Captions for Multimedia – Add captions for videos and transcripts for audio content.

4. Use Clear and Logical Headings – Structure content with proper heading tags (<h1>, <h2>, etc.) to help screen readers navigate.

5. Write Descriptive Link Text – Avoid vague terms like "click here"; instead, use meaningful text like "View Our Food Menu."

6. Ensure Sufficient Color Contrast – Text should stand out clearly against the background for readability.

7. Avoid Relying Solely on Color for Information – Use text labels, patterns, or icons in addition to color cues. 

8. Make Text Resizable – Ensure users can zoom in without content overlapping or becoming unreadable.

9. Use Readable Fonts & Sizing – Choose simple fonts and ensure a minimum text size for readability.

10. Include an Accessibility Statement – Provide a clear, public statement outlining your commitment to accessibility. The statement will be added to the footer of your Web Solutions Site. While an Accessibility Statement does not guarantee complete protection against accessibility-related lawsuits, it can help signal to visitors that you take the issue of digital accessibility seriously and provide a method of contact should they encounter any accessibility issues.

Navigation & Interaction

9. Test Keyboard Navigation – Test the site to ensure all interactive elements (links, forms, buttons) are usable without a mouse.

10. Provide Skip Navigation Links – Allow users to jump past repetitive navigation to your main content.

11. Use ARIA Landmarks & Labels Where Needed – Help assistive technologies better understand page structure and dynamic elements.

12. Ensure Forms Are Accessible – Label fields properly, provide clear instructions, and include error messages that explain how to correct mistakes.

13. Make Interactive Elements Focusable – Ensure buttons, links, and form fields have a visible focus indicator.

14. Allow Users to Pause or Stop Moving Content – If there are carousels, animations, or auto-playing media, give users control.

Technical Considerations

15. Ensure Proper HTML Semantics – Use correct HTML elements (e.g., buttons instead of <div> for clickable actions) for better screen reader support.

16. Use Responsive & Mobile-Friendly Design – Ensure accessibility across different devices and screen sizes.

17. Ensure Error Messages Are Clear & Helpful – Provide users with useful feedback when they enter incorrect information.

18. Test with Accessibility Tools – Use automated tools like WAVE to identify issues. Using the WAVE tool, ensure that there are no errors prior to launching the site to the public. Documentation of this will be saved and available for reference.

Tips for Web Solution(s) Owners

As you take ownership of your Web Solution(s) and continue to add content like Beers, Events, and new pages, you too can continue to use these Content & Structure best practices to help make your content more accessible. The tips below outline simple, practical steps you can take to improve accessibility as you update your Web Solution(s) over time.

Tip 1: Add Alternative Text to Images

Alternative text, or alt-text, is a written description you can add to images that will be read aloud by a screen reader, allowing visually-impaired users a good idea of what’s in the image and its purpose on the webpage. The alt-text lives in the code and won’t be seen on screen; it only gets picked up by the screen reader. 

Give Your Images a Descriptive Filename

If you don’t add alt-text, the screenreader will read out the image filename by default, which is often something incomprehensible like “DSC-2897689NTS”. 

• Because of this default, you may want to consider getting in the habit of giving your images a descriptive name. It also makes searching your files for a specific image that much easier.

Alt-text Should Be Short and Concise

Good examples include “Taproom Beer Garden” or “Brewery Barrels and Equipment”.

Below are the different ways you can add alt-text to your images, depending on how you upload them: 

→ Images in the Media Library

1. Click on Media in the admin navigation.

2. Click on an image.

3. Add the text in the Alternative Text field. The text will be saved automatically.

→ Images added through the Text Editor

For posts, events, beers, pages, etc.

1. In the text editor, click the Add Media button.

2. Select an image (unless one is already selected).

3. Add the text in the Alt Text field. The text will be saved automatically.

To add alternative text to images already in the content:

1. Click on the image to open the Image Details window.

2. Update the alt text in the Alternative Text field as needed

→ Featured Images

For posts, events, beers, pages, etc.

1. In the Featured Image section, click on the Set featured image link (or the image if one is already set).

2. Select an image (unless one is already selected).

3. Add the text in the Alt Text field. The text will be saved automatically.

→ Through the Front-end Page Builder

1. Any front-end page builder sections that let you add images will have an Edit link. Click this link to open the Select Photo window. 

2. Select an image (unless one is already selected).

3. Add the text in the Alt Text field. The text will be saved automatically.

Tip 2: Add Closed Captioning to Videos

According to the WCAG 2.1 guidelines, all videos with audio must include captions. We recommend uploading all videos to YouTube since they have a free automatic captioning solution.

Tip 3: Make Links Descriptive

Adding a link that says "click here" or "learn more" is not enough information. Rather, use link text that reads “view our beers” or "learn more about us", staying both descriptive and concise.

Tip 4: Use Clear and Logical Headings

Headings help organize content, making it easier for all users, including those using screen readers, to navigate your Web Solution(s). Properly structured headings improve readability and allow assistive technologies to interpret the page layout correctly.

When adding headings:

• Follow a logical order – Use <h1> for the main page title, followed by <h2> for major sections, <h3> for subsections, and so on. Avoid skipping heading levels (e.g., jumping from <h1> to <h3>).

• Use headings for structure, not style – Headings should reflect the content’s hierarchy, not just be used to make text look larger or bold. 

• Make headings descriptive – Instead of vague titles like "More Information," use something clearer, like "Rent Our Event Space."

Tip 5: Ensure Sufficient Color Contrast

Color contrast plays a crucial role in making text and important visual elements readable for users with visual impairments, including those with low vision or color blindness. Proper contrast ensures that text stands out clearly against its background, improving overall accessibility.

We've implemented global styling that adheres to accessibility standards and should prevent color contrast issues. However, if you apply your brand colors in new ways or introduce additional colors that aren't part of your design theme, it's important to check for sufficient contrast. You can use contrast-checking tools like the WebAIM Contrast Checker to ensure you meet these ratios.

The WCAG 2.1 AA guidelines require:

• A contrast ratio of at least 4.5:1 for normal text.

• A contrast ratio of at least 3:1 for large text (18px and bold, or 24px and larger).

• A contrast ratio of at least 3:1 for essential graphical elements, like buttons or icons.

Tip 6: Avoid Text In Images

Text that is part of an image cannot be read by screen readers, making it inaccessible to users with visual impairments. Additionally, image text may become blurry or difficult to read on smaller screens or when zoomed in. Whenever possible, use actual text outside of the image instead of placing important information within an image.

Common examples we see are event flyers being posted on sites or social media, or logos with written text. If you can’t avoid posting a certain image with text, consider these options: 

• Alt-text or plain text: Consider adding alt-text or using plain text somewhere on the webpage to include the important information from the image.

• Image as a background: You can also consider making the image a background to a webpage or section with a heading or paragraph text layered on top. This approach ensures that all users can read the text while still maintaining your desired design. 

Resources

Ensuring ongoing accessibility is an active process, and automated testing tools can help you identify and address potential issues as you add new content. Below are free tools and references to help you evaluate accessibility and stay informed about best practices.

Key Accessibility Guidelines

• Web Content Accessibility Guidelines (WCAG) 2.1 AA – The industry standard for web accessibility.

• Americans with Disabilities Act (ADA) Title III – U.S. Department of Justice guidance on website accessibility.

Free Automated Testing Tools

• WebAIM Contrast Checker – Quickly test color contrast ratios to ensure readability.

• WAVE Accessibility Evaluation Tool – A browser-based tool that identifies common accessibility issues.

Screen Reader Testing

• NVDA (NonVisual Desktop Access) – A free screen reader for Windows.

• VoiceOver – Built-in screen reader for macOS and iOS.

By using these tools and resources, you can proactively improve your Online Solution(s)’ accessibility and provide a better experience for all users.

Arryved Web Solutions Support

Accessibility is an ongoing effort, and we encourage you to use the tools and best practices outlined in this guide to improve your Web Solution’s inclusivity. While we cannot guarantee full guidance and conformance, we’re here to support you with the accessibility-friendly practices mentioned in this article. 

• Reach out to Web Solutions Support if you have any questions about this article.