Search page fails accessibility validation

[joeytakeda]

I've been running some automated accessibility checking in the WEA and discovered a couple small errors in staticSearch. All of these are easy to fix in my mind--validation errors and solutions below:

 • This textinput element does not have a name available to an accessibility
   API. Valid names are: label element, title undefined, aria-label undefined,
   aria-labelledby undefined.

   (#ssQuery)

   <input type="text" id="ssQuery" placeholder="Search...">

• The @placeholder is added by the project, but we still need the @aria-label. I think we should just use the $ssDoSearch caption.

 • Anchor element found with a valid href attribute, but no link content has
   been supplied.

   (#ssPoweredBy > a)

   <a href="https://github.com/projectEndings/staticSearch"> ...</a>

• This can also be fixed with an @aria-label. Here I think we should do {$ssPoweredBy} staticSearch.

I don't think this is a very big or contentious issue, so I'm just going to do this work now in a branch, but shout if you think otherwise.

[joeytakeda]

Working on this in iss201-a11y-labels branch

[joeytakeda]

Initial fixes complete, but discovered another slightly more difficult error in the boolean fieldset in the test set:

 • This fieldset element does not have a name available to an accessibility
   API. Valid names are: legend element, aria-label undefined, aria-labelledby
   undefined.

   (#ssForm > div:nth-child(8) > fieldset)

   <fieldset class="ssFieldset"><span><label for="ssBool2">Is a...</fieldset>

 • Fieldset does not contain a legend element. All fieldsets should contain a
   legend element that describes a description of the field group.

   (#ssForm > div:nth-child(8) > fieldset)

   <fieldset class="ssFieldset"><span><label for="ssBool2">Is a...</fieldset>

These are really the same error: since the booleans are all grouped into a single fieldset, it doesn't get a real <legend> like the rest of the <fieldset>s. Of course, there isn't one we could really use-- we could add one saying "Boolean filters" or something, but that would add a legend to the page which we probably don't want.

One solution that I've used in the past is to simply style the fieldset so that it doesn't appear visually, but is available to screen readers etc. What I've done before is something like:

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  border: 0;
}

[joeytakeda]

Added a <legend class="sr-only">Boolean filters</legend> to the boolean filters, the CSS, and tested. (Forgot to cite the issue number in the commit). Think this should be good to go now.

Forgot to mention: the way I'm testing accessibility is using pa11y-ci (https://github.com/pa11y/pa11y-ci), which is checking for WCAG2 conformance.

[martindholmes]

Thanks for this. I've been on the verge of raising a ticket for 1.5 which would have us revisiting the organizational structure of the search form, and in particular loosening up the CSS selector rigidity, which causes problems when you need to post-process the search page and re-organize the components into different groups; to get the required styling, for example, desc filters need to be inside a desc filter div, whereas you may want to put them inside a different container. So there's definitely more work to do here in 1.5. But it'll be nice to add WCAG2 conformance to the what's new for 1.4.

[joeytakeda]

This was fixed in PR #202 with no negative repercussions, so I'm going to close this.