Definition List (DL) & Accessible Pricing Table

definition-list-dl-accessible-pricing-table.markdown

Definition List (DL) & Accessible Pricing Table

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.

License.

index.html

<div class="packages-overview">
    <dl class="pricing pricing--personal">
        <dt class="pricing__title">Package Type</dt>
        <dd class="pricing__data pricing__data--package">Personal</dd>
        <dt class="pricing__title">Price per month</dt>
        <dd class="pricing__data pricing__data--price"><span class="currency currency--dollar">7</span> <span class="hidden-but-relevant">dollars</span></dd>
        <dt class="pricing__title">Package Overview</dt>
        <dd class="pricing__data pricing__data--overview">Build your own projects on GitHub.com and invite collaborators to join you in unlimited private repositories.</dd>
        <dt class="pricing__title">Package Offers</dt>
        <dd class="pricing__data pricing__data--offer">Free for students as part of the <a href="#">Student Developer Pack</a></dd>
        <dt class="pricing__title">Package Action</dt>
        <dd class="pricing__data pricing__data--action"><a href="#" class="button">Upgrade your account</a></dd>
    </dl>
    
    <dl class="pricing pricing--organization">
        <dt class="pricing__title">Package Type.</dt>
        <dd class="pricing__data pricing__data--package">Organization</dd>
        <dt class="pricing__title">Price per user per month.</dt>
        <dd class="pricing__data pricing__data--price"><span class="currency currency--dollar">9</span> <span class="hidden-but-relevant">dollars</span></dd>
        <dt class="pricing__title">Package Overview.</dt>
        <dd class="pricing__data pricing__data--overview">Work with your team on GitHub.com in unlimited private repositories. Manage team and user level permissions.</dd>
        <dt class="pricing__title">Package Offers.</dt>
        <dd class="pricing__data pricing__data--offer">Starting at <span class="currency currency--dollar">25</span> <span class="hidden-but-relevant">dollars</span> per month for your first 5 users.</dd>
        <dt class="pricing__title">Package Action.</dt>
        <dd class="pricing__data pricing__data--action"><a href="#" class="button">Create an organization</a></dd>
    </dl>
    
    <dl class="pricing pricing--enterprise">
        <dt class="pricing__title">Package Type</dt>
        <dd class="pricing__data pricing__data--package">Enterprise</dd>
        <dt class="pricing__title">Price per user per month</dt>
        <dd class="pricing__data pricing__data--price"><span class="currency currency--dollar">21</span> <span class="hidden-but-relevant">dollars</span></dd>
        <dt class="pricing__title">Package Overview</dt>
        <dd class="pricing__data pricing__data--overview">Host your team’s code on your own servers or in a private cloud with your existing security controls.</dd>
        <dt class="pricing__title">Package Offers</dt>
        <dd class="pricing__data pricing__data--offer">Sold in packs of 10 users and billed annually.</dd>
        <dt class="pricing__title">Package Action</dt>
        <dd class="pricing__data pricing__data--action"><a href="#" class="button">Start a free Enterprise trial</a></dd>
    </dl>   
</div>

style.scss

/**/
@import 'https://fonts.googleapis.com/css?family=Roboto:300,400,500';

/**/
@function pxtoem($targetPx, $baseFontPx: $baseFontPx) {
    @return #{$targetPx / $baseFontPx}em;
}

/**/
$baseFontPx: 16px;
$baseFontColor: #767676;
$baseBgColor: #FFF;

$defaultLinkColor: #4078c0;

$pricingBorderColor: #E0E0E0;
$pricingOfferBgColor: #F5F5F5;

$buttonFontColor: #FFF;
$buttonBgColor: #2196F3;

/**/
* {
    box-sizing: border-box;
}

html,
body {
    width: 100%;
    height: 100%;
    
    font-family: 'Roboto';
    font-size: $baseFontPx;
    line-height: 1.4em;
    
    color: $baseFontColor;
    background-color: $baseBgColor;
}

/**/
a,
a:visited,
a:active {
    color: $defaultLinkColor;
    
    text-decoration: none;
    
    &:hover {
        text-decoration: underline;
    }
}

.hidden-but-relevant {
    position: absolute;
    top: auto;
    left: -99999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.currency {
    &.currency--dollar:before {
        content: '$';
    }
}

.button,
.button:visited,
.button:active {
    display: block;
    padding: 1em;
    
    font-size: pxtoem(14px);
    text-align: center;
    
    color: $buttonFontColor;
    background-color: $buttonBgColor;
    
    border-radius: 0.3em;
    
    &:hover {
        background-color: darken($buttonBgColor, 10%);
        
        text-decoration: none;
    }
}

/**/
.packages-overview {
    margin: 0 auto;
    width: 100%;
    max-width: 600px;
    
    overflow: hidden;
    
    padding: 1em;
}

.pricing {
    float: left;
    clear: none;
    width: 100%;
    
    border: 1px solid $pricingBorderColor;
    border-radius: 0.5em;
    
    ~ .pricing {
        margin-top: 1em;
    }
}

.pricing__title {
    @extend .hidden-but-relevant;
}

.pricing__data--package {
    padding: pxtoem(16px, 22px) pxtoem(24px, 22px);
    
    font-size: pxtoem(22px);
    
    border-bottom: 1px solid rgb(229, 229, 229);
}

.pricing__data--price {
    padding: pxtoem(16px, 38px) pxtoem(24px, 38px) 0;
    
    font-size: pxtoem(38px);
    font-weight: 300;
}

.pricing__data--overview {
    padding: pxtoem(10px, 14px) pxtoem(24px, 14px) 0;
}

.pricing__data--offer {
    padding: pxtoem(16px, 14px) pxtoem(24px, 14px);
    margin: pxtoem(16px, 14px) 0 0;
    
    background-color: $pricingOfferBgColor;
}

.pricing__data--action {
    padding: pxtoem(24px);
    
    border-top: 1px solid rgb(229, 229, 229);
}

.pricing__data--overview,
.pricing__data--offer {
    font-size: pxtoem(14px);
}

.pricing__data--package,
.pricing__data--price,
.pricing__data--overview,
.pricing__data--offer,
.pricing__data--action {
    line-height: 1.4em;
}

/**/
@media screen and (min-width: 916px) {
    .packages-overview {
        max-width: 1060px;
        
        display: flex;
        flex-direction: row;
    }
    
    .pricing {
        width: (100% / 3) - 4%;
        margin: 0 2%;

        display: flex;
        flex-direction: column;  
    
        ~ .pricing {
            margin-top: 0;
        }  
    }
    
    .pricing__data--offer {
        flex-grow: 1;
    }
}