Release History

The World Bank header and footer are now fully compliant with WCAG 2.1. and accessible for those with disabilities using keyboard and screen readers to navigate the site.

The following are a list of high level features:

• Clear and visual focus indicator helps low vision, Keyboard-only and cognitive user to know which is the focusable and operable item
• Keyboard support: added following keyboard support for screen reader user and keyboard-only user to interact with mega-menu

Use “Enter” or “Space” key to opens the submenu and places focus on its first item when focus is on a menu item that has a submenu, else activates the item and closes the menu

Use “down arrow” to open submenu and places focus on the first item in the submenu When focus is on a menu item in a menu bar.

Use “Up arrow” to moves focus to the previous item when focus is in a menu,

Use “Right arrow” to perform following user experience

When focus is in a menu bar, moves focus to the next item

When focus is in a menu and on a menu item that has a submenu, opens the submenu and places focus on its first item.

Use “left arrow” to perform following user experience

When focus is in a menu bar, moves focus to the previous item, optionally wrapping from the first to the last.

When focus is in a submenu of an item in a menu, closes the submenu and returns focus to the parent menu item.

Use “Escape” key to close the menu that contains focus and return focus to the element or context from which menu was opened

• All the form field has been associated with logical and visual form field using various techniques so that screen readers , screen magnifiers and speech to text software (dragon natural speak) users can understand the purpose of such field and interact with them
• Improved color contrast so that people with low vision and cognitive disability can read and understand text.

Qualitative design guidelines and links to examples of use cases have been aded for most components

Dropdovn accordian component added.

Updated to include examples of available inline elements.

Social media component added.

A Menu offers a list of actions or functions that a user can access.

Use the Data Table component to arrange information into rows and columns.

Demo and download World Bank header and footer code. Headers and footers are available in full variants, in English, Spanish, French, Russian, Chinese and Arabic.

Card-Style using various options for customizing their backgrounds, borders, and text color.

An HTML form contains interactive controls to submit information to a web server.

The Pagination component enables the user to navigate pages in an ordered sequence, such as search results.