3 ms·

The thing is, the WAI-ARIA page works well as a reference, but not as an onboarding process. You have to develop your ARIA chops elsewhere and then come back to

The thing is, the WAI-ARIA page works well as a reference, but not as an onboarding process. You have to develop your ARIA chops elsewhere and then come back to the document to learn the finer points of each role. And roughly half of the document will never be useful, and slightly more of it is overshadowed with native HTML5 tags. I updated my comment with a sample project with some very basic accessiblity and aria roles, if you feel like giving me some pointers or critique.

darekkay 8y ago
Is there a live component showcase for your project? Just from the source code I see some requirements [0] not being followed: * The element with role button has aria-haspopup set to either menu or true. * When the menu is displayed, the element with role button has aria-expanded set to true. When the menu is hidden, it is recommended that aria-expanded is not present. If aria-expanded is specified when the menu is hidden, it is set to false. I'd also use a native "button" instead of "div role=button". It's cumbersome to (un)style buttons, but you lose a lot of built-in functionality with a custom component, which you need to care for. [0] https://www.w3.org/TR/wai-aria-practices-1.1/#menubutton https://www.w3.org/TR/wai-aria-practices-1.1/#menubutton
- kakarot 8y ago
  Not right now because I'm in the middle of integrating ansible into my servers and was waiting to get that finished, and I also need to make some changes with local storage. Nice catch on aria-haspopup! I totally missed that. Also good tip on aria-expanded, thank you. I can't remember why I went with a div instead of a button. I'd like to think there was a reason, but it was probably just oversight on my part. I appreciate your feedback!
steveklabnik 8y ago
I would like to second this in some sense. I would love to learn more about WAI-ARIA, but have no idea how to go about doing so. More non-reference documentation would be fantastic, or surfacing whatever does exist better.

darekkay 8y ago

Is there a live component showcase for your project? Just from the source code I see some requirements [0] not being followed: * The element with role button has aria-haspopup set to either menu or true. * When the menu is displayed, the element with role button has aria-expanded set to true. When the menu is hidden, it is recommended that aria-expanded is not present. If aria-expanded is specified when the menu is hidden, it is set to false. I'd also use a native "button" instead of "div role=button". It's cumbersome to (un)style buttons, but you lose a lot of built-in functionality with a custom component, which you need to care for. [0] https://www.w3.org/TR/wai-aria-practices-1.1/#menubutton https://www.w3.org/TR/wai-aria-practices-1.1/#menubutton

kakarot 8y ago
Not right now because I'm in the middle of integrating ansible into my servers and was waiting to get that finished, and I also need to make some changes with local storage. Nice catch on aria-haspopup! I totally missed that. Also good tip on aria-expanded, thank you. I can't remember why I went with a div instead of a button. I'd like to think there was a reason, but it was probably just oversight on my part. I appreciate your feedback!

steveklabnik 8y ago

I would like to second this in some sense. I would love to learn more about WAI-ARIA, but have no idea how to go about doing so. More non-reference documentation would be fantastic, or surfacing whatever does exist better.