search

hackoregon / civic

The frontend monorepo for the CIVIC platform.
http://civicplatform.org
MIT License
60 stars 26 forks source link

ShareText pullquote accessibility improvements: ARIA, HTML, labelling #950

Open fstorr opened 5 years ago

fstorr commented 5 years ago

What

The pullquote / <blockquote> elements need improving from an accessibility perspective:

  1. The buttons don't have an aria attribute to describe that they open pop-up content.
  2. The citation should be wrapped in a <cite> element which is inside a <footer> element (see the reference example in the HTML 5.3 spec).
  3. I'm not convinced that having the entire text of the quote as the button's accessible name is the best idea.
  4. Added to which, putting a <blockquote> inside a button is invalid HTML, so we need to address that. Hopefully that's not the markup we have to use because it's part of the react-share package.
  5. The Twitter logo doesn't have an aria-role to describe it as an image or an aria-label to label it.
  6. Not accessibility, but CSS quotes can be used instead of HTML ones for the text content.
  7. Because there's no hover state for the cursor when the quote is moved over, it's not at all obvious that the content is interactive. Adding a suitable cursor would help that.
  8. Font size, margin, and line-height are all set in px. The first two should be in em or rem and the last should be unit-less.
fstorr commented 5 years ago

The role and aria-label issue is blocked because its not supported in the package. I've opened an issue.

jaronheard commented 4 years ago

The role and aria-label issue is no longer blocked with the release of react-share 4.0.0 See https://github.com/nygardk/react-share/issues/258