Web Accessibility - WCAG Compliance

Web Accessibility

Web accessibility is a principle that ensures easy access to web applications for different user groups, providing equal opportunities for everyone facing various challenges, including disabled users, the elderly, and those new to technology.

People with disabilities should have access to the same information as those without disabilities. There are technologies available that reduce or eliminate barriers to their access. Ensuring these advantages allows everyone, regardless of age, physical, or mental capacity, to use the internet and have a positive web experience.

Types of Disabilities

• Visual: Visual disabilities include blindness, low vision, and color blindness.
• Hearing: Hearing disabilities encompass hearing impairments and deafness.
• Neurological: Neurological conditions and disorders involving the central and peripheral nervous systems, such as epilepsy, Alzheimer's disease, Parkinson's disease, etc.
• Cognitive: Cognitive disabilities include attention deficits, learning difficulties, and reasoning impairments.
• Physical: Physical disabilities involve limited fine motor control, muscle slowness, difficulty or inability to use hands.

Web Accessibility Standards and WCAG

The most common guide used to ensure web accessibility is called the Web Content Accessibility Guidelines (WCAG). WCAG, developed by the World Wide Web Consortium (W3C), encompasses fundamental principles and criteria to make web content more accessible. WCAG is based on four core principles:

• Perceivable
• Operable
• Understandable
• Robust

WCAG's success criteria are divided into three levels of conformance: A, AA, and AAA, each addressing different levels of accessibility. These criteria are based on four principles:

• Level A: This level covers the basic requirements of accessibility features and the minimum level of accessibility that needs to be met. Not complying with this level will result in a completely inaccessible website.

• Level AA: This level addresses some of the most common entry barriers for people with disabilities. It's the highest level of compliance required by most websites because it ensures the removal of the major accessibility barriers.

• Level AAA: This is the highest level of accessibility under WCAG and is more difficult for most sites to achieve. It's desirable to reach this level, but it's not an absolute requirement.

Perceivable

Your website/application should present information in a way that people can understand and use, regardless of how they use the content (such as those with low vision or using assistive technologies like screen readers).

Keep in mind that perceiving doesn't necessarily mean seeing with the eyes. Blind or visually impaired users often use screen reader software, which converts written text into synthesized speech. When creating and updating your website, consider these users as well.

• Provide text alternatives for images (Level A): All non-text content on your page, including images, videos, and audio content, should have a text alternative for the understanding of visually impaired individuals

• Provide transcripts for prerecorded audio content (Level A): Provide a transcript for audio content (such as podcasts).

• Provide subtitles for prerecorded videos (Level A): Provide subtitles for prerecorded videos.

• Order of elements (Level A): The order in which elements appear in the HTML should match the order in which they appear on screen.

• Provide captions for live videos and presentations (Level AA): Provide subtitles for live, real-time videos and presentations.

• Provide audio descriptions for pre-recorded videos (Level AA): Provide audio descriptions of what is happening on the screen, even if you have already provided a text description for pre-recorded videos.

• Orientation (Level AA): Make sure a page's orientation is not locked to portrait or landscape mode unless it's necessary.

• Purpose of text fields (Level AA): If a text input field is collecting information about the user, specify its specific purpose in the code (for example, email, password, or username).

For instance, if an HTML input field is collecting the user's name, adding the attribute autocomplete="given-name" allows the browser and screen readers to understand the purpose of the input field. This benefits individuals with language and memory impairments or disabilities, as they can take advantage of the browser's autofill feature.

<form>
  <label for="given-name">Name:</label>
  <input
    type="text"
    name="given-name"
    id="given-name"
    autocomplete="given-name"
    required
  />
</form>

• Resizing text (Level AA): People should be able to increase text size up to 200%. This allows visually impaired individuals to comfortably read the content.

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

• Text Contrast (Level AA): Ensure that the text has sufficient contrast with the background color.

• Non-text Contrast (Level AA): Ensure that important graphics, interactive controls, and visual information defining their status have sufficient contrast.

• Text Spacing (Level AA): Ensure that no information or functionality is lost when users increase spacing between lines, paragraphs, letters, or words.

• Text in images (Level AA): Use real text instead of text within images.

• Additional content when hovered over or focused (Level AA): Tooltips (short descriptions that appear when a user hovers over or focuses on an element on a web page) should be easily dismissible, readily accessible, and in a visible state when triggered by users hovering their mouse over an item or focusing on it with their keyboards.

Operable

No matter how someone interacts with your website or application, it should be easy to navigate and use. For example, people who don't use a mouse can use their voice or press the Tab key on their keyboard to move the focus to interactive controls.

• Keyboard Shortcuts(Level A): Ensure that every task can be completed using only a keyboard.
• Keyboard Shortcuts (Level A): Provide a way to disable or reassign custom keyboard shortcuts if you have added any.
• Timing (Level A): If there's any time limit (like session timeouts), provide an easy way for people to extend the time if needed.
• Distractions (Level A): When content automatically moves, animates, flickers, or scrolls automatically for more than five seconds, users should be able to pause or hide the content if it updates automatically on the page.

For example, if a carousel automatically moves every few seconds and cannot be paused, add buttons to pause and resume it.

<div class="carousel__controls">
  <button>Prev</button>
  <button>Pause</button>
  <button>Next</button>
</div>

• Persistent Element (Level A): Do not display anything flashing more than three times per second.

• Skip to main content (Level A): Provide a way for keyboard and screen reader users to directly navigate to the main content of the page.

A <a> element containing the text Skip to main content has been placed at the very beginning of the page (or very close to it). The <a> element has a href attribute pointing to the ID of the main element of the page. If this "Skip to main content" link is hidden by default, it becomes visible on :focus.

<body>
  <a href="#main">Skip to main content</a>
 
  <!-- header and navigation go here -->
 
  <main id="main">
    <h1>Main heading on the page</h1>
    <p>This is the first paragraph of content on the page</p>
  </main>
 
  <!-- ... -->
</body>

• Page Title (Level A): Give each page a unique and meaningful title that reflects the purpose of the page.
• Tab Order (Level A): Ensure interactive controls are logically focused in a sensible order as users navigate with the keyboard.
• Link Purpose (Level A): Ensure that the purpose of each link is understandable from the link text alone or in conjunction with its associated content (if screen readers recognize the association).

<h3>Our loans</h3>
<p>
  <a href="loans.html">
    Learn more
    <span class="visually-hidden">about our loans</span>
  </a>
</p>

.visually-hidden {
  clip-path: inset(100%);
  clip: rect(1px, 1px, 1px, 1px);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

• Multiple Ways to Locate a Page (Level AA): If a page isn't a step in a process, provide different ways for people to locate each page (such as searching or browsing through links).

• Headings and labels (Level AA): Headings and form labels should help people find content and complete tasks.

• Focus-visible feature (Level AA): Ensure that only keyboard users can clearly see which interactive control is focused when navigating between links.

Understandable

All content on your website, including written and graphic design content, should be easily understandable to visitors. Complex and lengthy texts are not only challenging for typical visitors to comprehend but also limit access for individuals with cognitive difficulties and those whose first language is not yours. Be simple and clear.

• Page Language (Level A): Use the lang attribute to specify the language of the page, informing browsers which language the page is written in.

<html lang="en"></html>

2. Language of Parts (Level A): If content in different languages is present on the webpage, specify the language of each part using the lang attribute.

<p>
  To indicate the language of a specific part, you can use the 'lang' attribute
  in HTML.
</p>
<p lang="tr">
  Belli bir parçanın dilini belirtmek için HTML'de 'lang' özelliğini
  kullanabilirsiniz
</p>

3. Error Identification (Level A): When someone makes an error while filling out a form, clearly explain the error with text and clearly indicate where the error occurred.

<input type="text" id="firstname" aria-describedby="firstname_error" />

<div role="alert">
  <h4>There are 1 errors in this form</h4>
  <ul>
    <li>
      <a href="#firstname" id="firstname_error">
        The First name field is empty; it is a required field and must be filled
        in.
      </a>
    </li>
  </ul>
</div>

• Form Labels (Level A): Provide labels to clarify how users should fill out a form.

<fieldset>
  <legend>Would you like to receive email updates?</legend>
  <input name="rg1" type="radio" id="r1" value="yes" />
  <label for="r1">Yes</label>
  <input name="rg1" type="radio" id="r2" value="no" />
  <label for="r2">No</label>
</fieldset>

• Error Suggestions (Level AA): When someone makes an error while filling out a form, provide suggestions on how they can correct it.

• Error Prevention (Legal, Financial, Data) (Level AA): If users are making a legal commitment, conducting a financial transaction, or updating their personal data, provide them with a way to review and confirm the information they entered before submission.

For example, an online banking application provides multiple steps to complete a money transfer between accounts:

• Select the transfer option
• Choose the recipient account
• Enter the amount

The user can select a button to either complete or cancel the transaction. They can also choose to return to completed sections at any time to review and make changes to their selections. A final page should be displayed with buttons to review their choices.

Robust

Your website/app must work with different web browsers and assistive technologies.

• Valid HTML (Level A): Make sure the HTML does not contain errors that are known to cause conflicts with assistive technologies (such as incorrect nesting of elements, or duplicate ids).

HTML elements have complete start and end tags, nested according to their specifications and don't contain duplicate attributes. Any id are unique within a page.

Checking whether elements with ARIA role attributes are nested correctly.

If you’re using the ARIA role attribute, look at the role’s definition in the W3C ARIA 1.1 specifications to check whether you’re nesting elements with that role correctly.