Accessibility UI Guidelines: Bad Practices

4. What to Avoid

Use this section to highlight common mistakes and outdated practices that can hinder accessibility.

While implementing web accessibility features, it's equally important to recognize and avoid common pitfalls that can hinder the user experience. This section outlines practices and elements that should be avoided to maintain an inclusive and accessible website.

4.1 Badly Implemented ARIA

<!-- Incorrect Use of ARIA Roles -->
<div role="button" tabindex="0">Submit</div>

<!-- Overusing ARIA Attributes -->
<span role="presentation" aria-hidden="true"></span>

    

4.1.1 Common Mistakes in ARIA Implementation

Here are some common mistakes to avoid when implementing ARIA:

• Using ARIA Roles on Native Elements: Native HTML elements come with built-in accessibility features. Overriding these with ARIA roles can cause conflicts.
• Incorrect ARIA Attributes: Assigning inappropriate ARIA attributes to elements can mislead assistive technologies.
• Missing ARIA Labels: Failing to provide necessary labels for interactive elements can leave users without essential information.

<!-- Using ARIA Role on a Native Button (Unnecessary) -->
<button>Go to Dashboard</button>

<!-- Missing ARIA Label for Icon Button -->
<button aria-label="Settings">
    <i class="icon-settings"></i>
</button>

4.1.2 Best Practices for Using ARIA

To ensure ARIA enhances accessibility, follow these best practices:

• Use Native HTML Elements: Prefer native elements over ARIA roles whenever possible.
• Apply ARIA Only When Necessary: Use ARIA to address accessibility gaps not covered by native HTML.
• Ensure Correct Usage: Refer to the WAI-ARIA specifications to correctly apply roles, states, and properties.

4.2 Deprecated Elements

HTML evolves over time, and certain elements become deprecated as newer, more accessible alternatives emerge. Using deprecated elements can lead to accessibility issues and compatibility problems across different browsers and assistive technologies.

<!-- Deprecated <font> Element -->
<font color="red">This text is red.</font>

<!-- Deprecated <center> Element -->
<center>This text is centered.</center>

4.2.1 Common Deprecated Elements to Avoid

Avoid using the following deprecated HTML elements:

• <font>: Use CSS for styling text instead of the <font> element.
• <center>: Utilize CSS properties like `text-align` to center content.
• <marquee>: Refrain from using <marquee> for scrolling text; consider CSS animations instead.
• <blink>: Avoid the <blink> element as it is not supported in most browsers.

<!-- Using CSS Instead of <font> -->
<p style="color: red;">This text is red.</p>

<!-- Using CSS Instead of <center> -->
<p style="text-align: center;">This text is centered.</p>

4.2.2 Best Practices for Modern HTML

Adopt modern HTML practices to ensure accessibility and future compatibility:

• Use Semantic Elements: Employ elements like `<header>`, `<footer>`, `<article>`, and `<section>` to convey the structure and meaning of content.
• Leverage CSS for Styling: Separate content from presentation by using CSS for all styling needs.
• Stay Updated: Regularly review the latest HTML specifications to avoid using deprecated elements.

4.3 Redirection Without Warning

Automatic redirections can disorient users, especially those relying on assistive technologies. Unexpected navigations can lead to confusion and a poor user experience. It is essential to handle redirections thoughtfully to maintain accessibility and provide users with control over their browsing experience.

<!-- Automatic Redirection Without User Consent (Avoid) -->
<meta http-equiv="refresh" content="0; url=https://newpage.com">

4.3.1 Issues with Unwarned Redirections

Unwarned redirections pose several accessibility challenges:

• Loss of Context: Users may lose their place on the website, making it difficult to understand their current location or navigate back to the previous page.
• Assistive Technology Interruptions: Screen readers and other assistive technologies may abruptly announce the redirection, causing confusion for users.
• User Control: Users lose control over their browsing experience, which can be frustrating and disorienting, especially for individuals with cognitive disabilities.

<!-- Unwarned JavaScript Redirection (Avoid) -->
<script>
    window.location.href = "https://newpage.com";
</script>

4.3.2 Best Practices for Redirections

To handle redirections in an accessible manner, consider the following best practices:

• Provide User Consent: Inform users before redirecting them to a new page or site, giving them the option to proceed or stay on the current page.
• Use Timed Redirections Sparingly: If a redirection is necessary, provide a clear message explaining the redirection and allow users to cancel or delay the action.
• Maintain Context: Ensure that users understand why they are being redirected and what to expect on the new page, maintaining a seamless user experience.
• Implement Accessible Notifications: Use ARIA live regions or visually clear messages to announce redirections to assistive technologies, ensuring users are aware of the action.

<!-- Informed Redirection with User Choice -->
<p>
    You are being redirected to a new page. If you are not redirected automatically, please
    <a href="https://newpage.com">click here</a>.
</p>

<!-- Using ARIA Live Region for Announcement -->
<div aria-live="assertive">Redirecting you to our new homepage.</div>
<script>
    setTimeout(function(){
        window.location.href = "https://newpage.com";
    }, 5000);
</script>

4.3.3 Informing Users About Redirections

Always inform users when a redirection is about to occur. This transparency helps users prepare for the change and prevents confusion. Informative messages can provide users with context and a sense of control.

<!-- Informative Redirection Message -->
<p>
    You will be redirected to our partner site in 5 seconds. If you do not wish to wait,
    <a href="https://partner.com">click here</a>.
</p>