Following this Tweet from Sara Soueidan I decided the prepare a pricing table using my chosen method that I can manipulate for any future work.
I have used the DL element and based this pen on the GitHub Pricing table.
The web is for everyone, not just users with decent eyesight so it's the job of a great web developer to write markup that supports that ideology.
Having random strings of text with no context can't be helpful so let's use a definition list to label our data in a meaningful way. We can then hide those labels with CSS for users that can see our layout and visually understand the separation of context.
Unfortunately we can't simply do a display: none
to hide content. That would remove our relevant content from screen readers as well so we're using a .hidden-but-relevant
class to simply move the content off screen and out of the visual flow.
To take it a step further, look at the markup for each price's currency. If we were to include the dollar symbol in our markup like so: $9
, a screen reader would read it literally as "dollar nine".
To counter this the dollar symbol isn't in our markup and we've appended each price with the word 'dollars' so a screen reader reads it coherently "Nine dollars".
For able-eyed users we're appending the dollar symbol via a pseudo :before
element that screen readers ignore. We're also hiding the word 'dollars' using our hidden-but-relevant
class.
Having more accessible and meaningful content in our raw markup can only be a SEO boost so there's no excuse.
To be honest I think screen readers should ignore all CSS by default so the raw markup is used. We would then enhance our raw experience with CSS for everybody else but alas, that's just another one of my accessibility dreams.
If you have any further tips for cleaner and more maintainable accessibility, drop me a comment! I want to know.
A Pen by Laurence Archer on CodePen.