Some Site Search Box Accessibility Issues

- July 20, 2018

Hoping to Help Others Find and Fix Some Accessibility Issues

I wanted to add a site search box to this site's Sitemap and custom 404 error page. With my concern for Internet Privacy, choosing which search engine to use was easy. To me the obvious choice was DuckDuckGo — "the search engine that doesn't track you". But as a freelance Software Tester and Accessibility Auditor, I'm also very concerned about accessibility. (I test and audit websites and mobile apps to help make sure that they're usable by people with various disabilities.) And when I tried the DuckDuckGo Search Box builder, the search box it generated had some accessibility issues.

My intent is not to pick on DuckDuckGo. I'm a satisified user not only of their search engine, but also of their Privacy Essentials browser extensions and Android Privacy Browser. And the types of issues I found are far from unique to DuckDuckGo. They're on many other websites as well. Instead, I'm hoping this might be helpful to DuckDuckGo and others. I'll point out a couple of the more serious accessibility issues I found, along with some solutions. It's been estimated that about one sixth of the world's population has some sort of disability. And I'd like to help DuckDuckGo minimize any potential barriers to the disability community.

Both accessibility issues fail one of the 25 Level A ("must have") "success criteria" of WCAG (Web Content Accessibility Guidelines) 2.0. WCAG 2.0 is a widely-used international accessibility standard. (WCAG 2.1 was recently made an official recommendation of the World Wide Web Consortium, but I don't know that it's legally binding anywhere yet.)

Keyboard accessibility

Some people have difficulty using a mouse, such as:

  • People with spinal cord injuries, lost or damaged limbs, Parkinson's disease, arthritis, or certain other motor disabilities.
  • People with vision disabilities, because using a mouse requires users to see where they're clicking.

This site's old Sitemap still has the search box generated by the DuckDuckGo Search Box builder. I tried navigating through that Sitemap using my keyboard's Tab key instead of using my mouse. With or without a screen reader, I encountered the search box's enclosing <iframe> element, followed by its submit button, followed by its text input field. But that order is backwards from what's expected in a left-to-right language like English. It's also backwards from a user's normal work flow. A user needs to enter 1 or more search terms into the text input field before activating the submit button, not afterwards. WCAG 2.0 addresses this type of issue in its Guideline 2.4.3: Focus Order.

The reason that the submit button is focused before the text input field is because that's the order they're in within the HTML <form> element on DuckDuckGo's search box site. Using my browser's Developer Tools, I temporarily moved (in my local copy of the page) the submit button:

    <div id="search_wrapper_homepage">
        <input id="search_button_homepage" type="submit" value="">
    </div>

before the text input field:

    <input id="search_form_input_homepage" type="text" placeholder="Search DuckDuckGo">

That change caused the text input field to be focused and announced before the submit button, as it should.

(Note: There were more attributes on the text input field. But, for simplicity's sake, I'm not showing them all.)

Missing Alt text

I had instructed the DuckDuckGo search box builder to display the DuckDuckGo logo. That correctly displays the

 <img id="logo" src="/assets/logo_icon60.v101.png" style="display: block;">

image from DuckDuckGo's search box site. But on my Samsung Galaxy Note 4 (Android 6.0.1) phone, the Google TalkBack screen reader announces "logo_icon60.v101.png", the logo's filename. That's not very helpful, especially since it's announced twice.

WCAG 2.0 addresses this type of issue in its Guideline 1.1.1: Non-text Content. It can be fixed by simply adding an appropriate HTML alt attribute to the <img> tag. I might suggest alt="DuckDuckGo", but "DuckDuckGo" is already announced because the <iframe> includes an HTML document containing:

    <title>DuckDuckGo</title>

And the placeholder text of "Search this site" is announced as well. So, since there's already sufficient context to inform a user that this is a DuckDuckGo "Search this site" box, all that's needed is simply alt="".

Video showing these accessibility issues

Here's a screen recording demonstrating these issues. It's in landscape mode, using the DuckDuckGo privacy browser on my Samsung Galaxy Note 4. I'm using the TalkBack screen reader, which comes preinstalled on most Android phones.