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?
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |