Search Functionality

Search trigger & form 

 Rules: Use a universally recognized search icon (magnifying glass) in the header and ensure icon is easily clickable/tappable and stands out from the other header elements 

 

 

 Provide an accessible label using area-label to describe the icon (e.g “Open search”) and enable keyboard focus and activation for users who navigate via keyboard. 

 Icon should remain visible on all devices, if space is limited on smaller screens consider alternative placement that do not compromise accessibility. 

 Clicking the search icon will open a full screen modal with a close button and the search input text and submit. 

 

 

 Results Page 

 Rules: Display the user’s search query so they know what was searched 

 

 Present results in a clean and organized list with clear headings with link, short description and any relevant metadata like dates or categories. 

 Limit the number of results and provide pagination if there are multiple results. 

 Clearly indicate if there are no results found, and offer alternative search option. 

 Maintain visual consistency with the rest of the site’s design, ensuring that typography, spacings and colors follow the proposed design. 

 Use proper hover and focus states for the links. 

 

 Search Functionality Document