Favoriting sessions has accessibility issues

[rianrietveld]

On the schedule of a WordCamp site there is the option to mark a session as favourite by clicking the star next to the title.
At the bottom of the page there is an option to mail/print/share the marked sessions.

There are the the following accessibility issues:

• The colour contrast of the star against a white background is too low
• The star is not focusable by a keyboard, it's placed in a, <a> without a href, so it get's no focus (it should be a <button>)
• There is no text inside the <a>, so there is no accessible name, real text content for the star icon
• The mail/print/share option should be activated by a <button>, not an <a>
• The div with the mail/print/share option should be an accessible dialog modal
• The tab interface inside is not keyboard accessible

This all means that this functionality is not usable for someone using a keyboard or a screen reader.

For accessible examples and components see: ​https://inclusive-components.design/

[coreymckrill]

Thank you @rianrietveld !

[ryelle]

Just noting that the issues around the star icon have been fixed (except the color contrast), the remaining issues are still accurate:

• The mail/print/share option should be activated by a <button>, not an <a>
• The div with the mail/print/share option should be an accessible dialog modal
• The tab interface inside is not keyboard accessible

The color contrast of the star itself is also still too low (hasn't changed), but considering we don't know what theme/background someone will be using, this might need some thought. Good contrast against the default BG of Twenty Twenty would be a good start.

[dd32]

This ticket has been moved to GitHub ​https://github.com/WordPress/wordcamp.org/issues/615