Hi Remy great article, I only have some concerns on the ARIA part :
- first you have to choose to follow or not the aria tabpanel design pattern http://www.w3.org/TR/wai-aria-practices/#tabpanel (and it isn’t always a good idea since it’s an application design pattern who no always fit in a website and who are not very mobile friendly)
- if you choose to follow it you article and demo are wrong on keyboard navigation (only the active tab can get focus with tab key, then you need to use arrow key to switch tabs) and you need a role=“presentation” on the
levy
Hi Remy great article, I only have some concerns on the ARIA part :
- first you have to choose to follow or not the aria tabpanel design pattern http://www.w3.org/TR/wai-aria-practices/#tabpanel (and it isn’t always a good idea since it’s an application design pattern who no always fit in a website and who are not very mobile friendly)
- if you choose to follow it you article and demo are wrong on keyboard navigation (only the active tab can get focus with tab key, then you need to use arrow key to switch tabs) and you need a role=“presentation” on the
- if you doesn’t want to follow it it’s best to not use the role tab and tabpanel but simply a list of button or in your case with an aria-expanded attribut. Also in that case you don’t need tabindex since you use element with href attribut it’s focusable by default and it can be a good idea to add a link to the list of button at the end of each panel to allow keyboard/screenreader user to go back the list quickly