{"id":19136,"date":"2023-11-27T15:58:51","date_gmt":"2023-11-27T15:58:51","guid":{"rendered":"https:\/\/getdevdone.com\/blog\/?p=19136"},"modified":"2026-04-23T16:36:34","modified_gmt":"2026-04-23T16:36:34","slug":"how-we-make-websites-accessible-2","status":"publish","type":"post","link":"https:\/\/getdevdone.com\/blog\/how-we-make-websites-accessible-2.html","title":{"rendered":"Breaking Barriers: How We Make Websites Accessible – Part 2"},"content":{"rendered":"\n

Welcome to the second part of our series, where we delve into the essential Web Content Accessibility Guidelines (WCAG)<\/strong> and our dedicated approach to their implementation.  <\/p>\n\n\n\n

Our main priority is to create an accessible and user-friendly digital environment for all users<\/strong>, including those with disabilities. In this post, we continue our discussion with the guidelines at the more challenging WCAG Level AA<\/strong>. <\/p>\n\n\n\n

We provide an in-depth exploration of each recommendation, its importance, who benefits most, and our approach to ensuring compliance. We believe that understanding and implementing these guidelines is vital for a more inclusive and accessible web experience for everyone.<\/p>\n\n\n\n

Let\u2019s get started. <\/p>\n\n\n\r\n

\r\n
\"decor\"<\/div>\r\n
\r\n

Inclusive Design, Better Business <\/h2>

Enhance accessibility. Get your website compliant now. <\/p>\n GO ACCESSIBLE<\/a>\r\n <\/div>\r\n

\r\n \"\"\r\n <\/div>\r\n <\/section> \r\n\r\n\n\n\n

The Journey from Level A to Level AA<\/h2>\n\n\n\n

First off, let\u2019s take a moment to discuss how Level A <\/strong>differs from Level AA<\/strong>, and why the latter can present more challenges in implementation.<\/p>\n\n\n\n

As a reminder, Level A<\/strong> is the most basic level of web accessibility. It includes the most critical and fundamental accessibility features that a website should have. For instance, providing text alternatives for non-text content, ensuring that all functionalities are available from a keyboard, and offering users the ability to stop, pause, or hide moving, blinking, or scrolling information. Meeting Level A conformance is crucial to ensure your site is not extremely difficult or impossible for certain users to access.<\/p>\n\n\n\n

Level AA<\/strong>, on the other hand, encompasses a more comprehensive set of requirements. It includes all Level A criteria<\/strong>, plus additional guidelines that address common issues faced by users with disabilities. <\/p>\n\n\n\n

These guidelines could include providing captions for all live audio content, offering multiple ways to find web pages, and ensuring that text and images of text have a contrast ratio of at least 4.5:1.<\/p>\n\n\n\n

The transition <\/strong>from Level A to Level AA can be challenging <\/strong>for several reasons<\/strong>:<\/p>\n\n\n\n

    \n
  1. Technical complexity. <\/strong>Level AA often requires more advanced coding skills<\/strong> and understanding of accessibility principles.<\/strong> For example, creating a consistent navigation and identifying the user’s location within navigation menus can be technically complex.<\/li>\n\n\n\n
  2. Time and resources. <\/strong>Achieving Level AA compliance often demands more time and resources. This might include conducting a thorough audit of your website<\/strong>, hiring a dedicated accessibility team<\/strong>, or investing in training and tools.<\/strong><\/li>\n\n\n\n
  3. Design considerations. <\/strong>Some Level AA criteria could potentially impact your website’s design. For instance, ensuring sufficient contrast ratios <\/strong>might require a change in your site’s color scheme.<\/strong><\/li>\n<\/ol>\n\n\n\n

    Despite these challenges, striving for at least Level AA<\/strong> compliance is highly recommended. <\/strong>It significantly improves the user experience for people with disabilities, helps avoid potential legal issues related to accessibility, and ultimately, expands your website’s reach to a broader audience.<\/p>\n\n\n\n

    So, what are the key Level AA guidelines and how do we implement them to make your websites more accessible and user-friendly? Let\u2019s talk about it next. <\/p>\n\n\n\n

    How We Implement WCAG Recommendations for Our Clients<\/h2>\n\n\n\n

    Level AA <\/h3>\n\n\n\n

    #1: Captions (Live)<\/h4>\n\n\n\n
    \"\"<\/figure>\n\n\n\n

    WCAG Recommendation 1.2.4 states that captions must be provided for the entire audio content in live synchronized media.<\/p>\n\n\n\n

    Why Is It Important? <\/h5>\n\n\n\n

    The importance of this recommendation lies in the fact that it promotes inclusivity and equal access to information and entertainment. Individuals who rely on captions, such as those who are deaf or hard of hearing, should not be excluded from participating in live events or accessing important audio content.<\/p>\n\n\n\n

    Who Benefits the Most? <\/h5>\n\n\n\n

    By providing captions for live synchronized media, such as videos or livestreams, the content becomes accessible to people who cannot hear <\/strong>or have difficulty hearing the audio.<\/strong> Captions display text that represents the spoken content, allowing individuals with hearing impairments to understand and engage with the video content.<\/p>\n\n\n\n

    Furthermore, captions also benefit individuals who are in environments where listening to audio is not feasible or desirable<\/strong>, such as in noisy environments or in situations where silence is required. <\/p>\n\n\n\n

    Captions provide an alternative way to consume the content without relying on audio alone.<\/p>\n\n\n\n

    Our Approach <\/h5>\n\n\n\n

    Our approach to implementing the WCAG Captions (Live) recommendation involves providing captions for live broadcasts. We also use media players<\/a> or broadcast platforms that support live captioning.<\/p>\n\n\n\n

    #2: Audio Description (Prerecorded)<\/h4>\n\n\n\n
    \"\"<\/figure>\n\n\n\n

    WCAG Recommendation 1.2.5 Audio Description (Prerecorded) states that prerecorded video content should include audio descriptions<\/strong> that provide a verbal narration of visual elements, actions, and other important details<\/strong> that are not conveyed through the main audio track.<\/strong><\/p>\n\n\n\n

    Why Is It Important? <\/h5>\n\n\n\n

    This recommendation is crucial because it ensures that individuals who are blind <\/strong>or have low vision<\/strong> can fully understand and enjoy video content. Without audio descriptions, these users would miss out on vital information presented visually, such as facial expressions, gestures, scene changes,<\/strong> and other visual cues that enhance the understanding and enjoyment of videos.<\/p>\n\n\n\n

    Who Benefits the Most? <\/h5>\n\n\n\n

    By providing audio descriptions, content creators and developers can make their videos inclusive and accessible to a broader audience. People who benefit the most from this recommendation are those with visual impairments<\/strong>, including blind individuals<\/strong>, who rely on audio descriptions to understand the visual content being presented.<\/p>\n\n\n\n

    Audio descriptions enable visually impaired individuals to engage with various types of video content, such as movies, TV shows, educational videos, training materials, and online courses.<\/strong> It enhances their overall media experience by allowing them to follow the story, characters, actions, and any visual elements that are essential to the narrative.<\/p>\n\n\n\n

    In addition to benefiting visually impaired individuals, audio descriptions can also be helpful for other users, such as those with cognitive disabilities<\/strong> or those learning a new language.<\/strong> Audio descriptions provide additional context and clarification, making the content more understandable and meaningful.<\/p>\n\n\n\n

    Our Approach <\/h5>\n\n\n\n

    To implement the 1.2.5 Audio Description (Prerecorded) WCAG recommendation, we take the following steps:<\/p>\n\n\n\n

      \n
    1. We ensure the inclusion of audio descriptions<\/strong> where the visual elements are not covered in the video’s dialogue.<\/li>\n\n\n\n
    2. Our team can integrate the audio description directly into your video <\/strong>or provide it as a separate element.<\/strong><\/li>\n\n\n\n
    3. Our audio descriptions are comprehensive, encompassing scene transitions, settings, actions spoken in dialogues<\/strong>, and any other visual details not communicated through speech or dialogue.<\/li>\n\n\n\n
    4. We use media players<\/a> that are fully equipped to support the use of audio descriptions.<\/li>\n<\/ol>\n\n\n\n

      <\/p>\n\n\n\n

      create<\/i><\/div><\/div>

      Note<\/h3>

      Whether we can implement this guideline depends on the specific details of your design and the files that you provide.\u00a0<\/em><\/p><\/div><\/div><\/div>\n\n\n\n

      <\/p>\n\n\n\n

      #3: Orientation<\/h4>\n\n\n\n
      \"\"<\/figure>\n\n\n\n

      The WCAG 1.3.4 Orientation recommendation emphasizes the importance of creating digital content that is flexible across different device orientations.<\/p>\n\n\n\n

      Why Is It Important? <\/h5>\n\n\n\n

      The WCAG 1.3.4 Orientation recommendation is incredibly important for several reasons.<\/p>\n\n\n\n

      Firstly, it promotes inclusivity and accessibility in digital content. By not restricting content to a single display orientation<\/strong>, we ensure that everyone, regardless of their physical abilities or device usage preferences, can access and interact with the content effectively. This is a crucial aspect of designing for all users, not just a majority.<\/p>\n\n\n\n

      Secondly, it acknowledges and respects user autonomy. <\/strong>Some users might prefer one orientation over another due to personal comfort or specific use cases. For example, landscape mode might be preferable for watching videos or playing games, while portrait mode might be more convenient for reading text. By allowing both orientations, we give users the freedom to choose how they want to consume the content.<\/strong><\/p>\n\n\n\n

      Thirdly, it enhances usability and user experience.<\/strong> A design that works well in both orientations shows that thought has been put into the user’s interaction with the product. It also allows for better use of screen real estate, <\/strong>especially on devices with larger displays.<\/p>\n\n\n\n

      Lastly, this recommendation is important because it future-proofs digital content.<\/strong> As technology evolves and new types of devices emerge, the flexibility of display orientation will become even more crucial. Adhering to this guideline ensures that the content will remain accessible and user-friendly<\/strong>, no matter what the future holds.<\/p>\n\n\n\n

      Who Benefits the Most?<\/h5>\n\n\n\n

      This recommendation is particularly beneficial for individuals with certain types of disabilities. For instance, people with physical disabilities<\/strong> may have their devices mounted in a fixed orientation<\/strong> and may not be able to easily switch between portrait and landscape modes. <\/strong>Similarly, some users might have dexterity impairments<\/strong> that make it difficult to rotate<\/strong> their devices.<\/p>\n\n\n\n

      Moreover, this recommendation also enhances the overall user experience<\/strong> as it provides flexibility in terms of how content can be viewed. It is especially relevant in the current digital age, where people use a variety of devices<\/strong> such as smartphones, tablets, and laptops, each with their unique display characteristics.<\/strong><\/p>\n\n\n\n

      In essence, the WCAG 1.3.4 Orientation recommendation encourages designers and developers to consider the diverse needs of their audience, ensuring that their digital content is accessible to as many users as possible<\/strong>, regardless of how they choose to view it.<\/strong><\/p>\n\n\n\n

      Our Approach <\/h5>\n\n\n\n

      Here’s how we implement the WCAG 1.3.4 Orientation recommendation:<\/p>\n\n\n\n

        \n
      1. Orientation flexibility<\/strong>. We do not limit your application or website to function only in landscape or portrait mode. Both modes are fully supported,<\/strong> providing users with the flexibility to choose their preferred viewing orientation.<\/li>\n\n\n\n
      2. Adherence to device settings<\/strong>. We ensure your application or website respects the default orientation settings <\/strong>of the user’s device. This means that your website will display in the mode (landscape or portrait) set by the user<\/strong> in their device settings.<\/li>\n\n\n\n
      3. Responsive design implementation<\/strong>. Our design approach caters to both landscape and portrait orientations. Regardless of how users hold their devices, they are guaranteed an optimal viewing experience.<\/li>\n\n\n\n
      4. User-centered testing<\/strong>. We conduct thorough testing across multiple devices and screen sizes to ensure your application or website performs well in both landscape and portrait modes.<\/li>\n<\/ol>\n\n\n\n

        #4: Identify Input Purpose<\/h4>\n\n\n\n
        \"\"<\/figure>\n\n\n\n

        WCAG recommendation 1.3.5 requires that the purpose of a form input field <\/strong>can be programmatically determined <\/strong>when it collects information about the user.<\/p>\n\n\n\n

        Why Is It Important? <\/h5>\n\n\n\n