#Next js language switcher how to#

#Next js language switcher how to#

One important thing to add here is the lang attribute (defined for each element in the original HTML structure) this way SR will know how to pronounce the language label.įinally, we have added an aria-selected='true' to the selected language link. language-picker_dropdown, we have an unordered list of languages with a role of listbox (this is a list of options which users can choose).Įach list item contains a link element to the website in the selected language, with a role of option (for the same reason the has a role of listbox). You can read more about that on the accessibility global documentation page. language-picker_dropdown has a class of sr-only: this class (defined inside the Codyhouse Framework) can be used to visually hide an element, leaving it accessible to SR. This will provide a description for the dropdown that will be announced by SR when the element is selected. We have added an aria-describedby equal to the id of the element inside it. language-picker_dropdown element with an id equal to the aria-controls value of our. Let's now take a look at the language list final HTML: The element inside the button is used to create the flag icon and has an aria-hidden='true' (it does not provide any additional info so we don't want it to be announced by Screen Readers). It is set equal to the id of the dropdown. aria-controls: this attribute links the to the element it controls (language list).aria-expanded: by default, it is set to false (it tells you the language list is not expanded), but it will be changed to true when the language dropdown is visible.You need this attribute as the may not have a visible text (for example, you just want to show a flag icon inside it). It is composed of the selected language (e.g., 'English') and the text of the element (e.g., 'Select your language'). aria-label: this is a string that labels our button and it's announced when the element is selected.Let's analyze the aria attributes we have added to this element: a dropdown element with the list of all available languages.įirst, lets' start by defining the HTML structure that we want to use for these elements.a which will be used as a trigger to open the language list.Using JavaScript, we can replace the default with a new structure.

Note that each element has a lang attribute (that specifies the language of the text) and that we used the labels in their original language (for example, I'm Italian so I'm expecting to find 'Italiano' as an option, rather than 'Italian'). This is what users with JavaScript disabled will see the form submission can be used to handle the language selection. Our starting point will be a (with the list of all possible languages) and its element: Let's go through the steps of creating our custom language picker. 👋 First time you hear about the CodyHouse Framework?