MDN has a good overview of the topic in its Accessibility Learning Area.
I'd start with semantic HTML; go through a reference of HTML tags and use the ones that apply. <button>
for interactive elements that trigger an action on the current page, headings for link results, <section>
for the results and the Wikipedia/knowledge-graph info, <aside>
for supplementary lower-priority sidebar info, <footer>
for the site footer, <a>
for hyperlinks that trigger a navigation to a different location, and <header>
for the header containing the search bar.
The JS-enabled versions of Google and Bing make for good references. Mojeek is a fine example too.
Next, I'd move onto accessible names. Browser devtools should have an accessibility toolkit that lets you browse through the accessibility tree, similar to how "inspect element" lets you navigate around the source tree. Firefox is pretty well known for this, and Chrome is catching up with an experimental "full accessibility tree". When you select an element, it lets you see its accessible name, contrast ratios, keyboard focus-ability, and other attributes. If an accessible name is missing, you can add it with tag contents (when possible; <a>this is the label of a link</a>
), aria-labelledby
, or aria-label
(descending order of preference).
For some landmark elements like <section>
, it often makes sense to use a heading instead of a label.
Some ideas for accessible names:
- Crystal ball: "result info".
- A
<section>
for the link results: "Search Results". Alternatively, give the section a "Search Results" heading that's visually hidden; a common technique is to use the clip
CSS property.
- Sidebar infoboxes could be wrapped in a landmark. Google calls them "Complementary results", Bing calls them "Additional results". In addition to this label, they could use a heading. The infobox for "Bill Nye" on Google is called "Complementary Results" and it contains the heading "Bill Nye".
- The "interesting_finds" widget could be a
<section>
with the "interesting finds" label or could have the "interesting finds" text be a heading (preferable; that big text intuitively looks like a heading).
The big hyperlinks for search results should be wrapped in headings, for easy heading-based navigation. It also logically makes sense; they're not just links, but also titles of mini-sections.