Style Guide

Topics

There are many different utility and helper classes that have been added to make the refresh pages more extensible

Accessibility Concerns

Accessibility is at the forefront of what we do. All on-page elements must be accessible to site visitors who use screen readers or are BVI. The following color combinations meet or exceed AA standards for accessibility at the font-size and font-weight in which we use them.

Resources

Color Combinations

The color combinations in the boxes below are all accessible. In addition, the default 'btn' stylings for anchors are also accessible. You can override these defaults, but be wary of accessibility issues that may occur as a result.

Contrast Ratios

Contrast ratios are based on font-size & font-weight. You can check the contrast ratio of one color with the other as its background at the WebAIM Contrast Checker.

Several of our classes have already been tested and confirmed as compliant for font-size: 16px and font-weight: normal. In most cases their contrast ratio is well in excess of the requirements, leaving room for future use of slightly lighter shades of the color for accenting, etc.

Our Accessible Class Pairings

Use class 'educator-bg'

Text defaults to white with these backgrounds

Use class 'parent-bg'

If you need to use white text elsewhere, use class="white"

Use class 'get-involved-bg'

Use class 'bvi-bg', or override the default as in the second example below. Simply use one of the '-bg's and the color text you want. The second example has three classes; 'btn educator-bg light-txt'

Text Cannot be White. Use 'mission-bg' for this background

  • class 'educator-txt'
  • class 'parent-txt-dark', 'parent-txt' is not accessible on this background
  • class 'get-involved-txt-dark', 'get-involved-txt' is not accessible on this background
  • class 'bvi-txt'
  • class 'educator-txt-dark'
  • class 'parent-txt' is accessible on white
  • class 'get-involved-txt' is accessible on white
  • class 'bvi-txt-dark'

Interactive And Dynamic Elements

Follow accessibility guidelines as laid out by SSB Bart Group. Remember that BVI users will not be able to receive the same visual cues that sighted users receive. Provide the best experience.

Key Concepts:

  • Let users control focus and do not move focus without warning. Cases where you may choose to change focus include when the user performs an action that prompts the change such as a search, filtering, or attempting to submit a form with errors
  • Do not always just try to mimic the sighted experience. Sometimes you can add additional aria- information to give the BVI user better context
  • Give the user feedback when s/he is waiting (i.e. use the freezer icon, which has this built in)

Font Size

Font sizes we use are based on the font-size set by the html element. By using rem for our headers, a relative mesaure, instead of a fixed measure, px we enable better adaptaion to changes in that font size. While we do not currently base our p tags on this same scale (i.e. they have a property definition of font-size: 16px instead of font-size: 1.0rem), this is an opportunity for improvement in the future. However, it would echo across all styles and might break pages, so we did not implement this in the initial website refresh due to lack of time to test

Key Concepts:

  • Both rem and em are relative measures.
  • We use rem because it is relative to the html element and therefore the relationship between any heights and measures is preserved throughout the page.
  • Using em makes the measure relative to the parent element foremost, and opens the door to having, for example, an h2 in one block with the standard font-size: 1.6rem; that is a different pixel height than a, h2 in another block because they are relative to two different baseline pixel measurements.
  • Because in many places we use set heights that are in px measurements, changing the html's font-size breaks the page.
  • Changing our heights to rem might be worth exploring.

Links vs Buttons

Links, buttons, and tabs have different roles for the page, and as a result screen readers expect them to behave certain ways. A misused element might make it difficult for a BVI user to navigate the way s/he would expect, or might take a user away from the page when s/he does not expect it. This could be a result of JavaScript that is attached to interactions with the element, that is not characteristically associated with the element

Links

Links are used for navigation, routing in SPAs, and have their own properties relied upon by screen readers to help users navigate the page and to deliver user expectations when clicking them.

From marcysutton.com, links

  • Create hypertext, a network of online resources
  • Navigate the user to a new page or view
  • Change the URL
  • Cause a browser redraw/refresh
  • Support page jumps with internal href attributes
  • Deep-link client-rendered applications
  • Are focusable by default with the href attribute
  • Register a click with the Enter key
  • Have the implicit link role
  • Can’t be disabled like buttons but can be made inert with tabindex="-1" and aria-hidden="true"
  • Allow opening in new windows (and back in the day, framesets)
  • Show :link, :visited, :focus, :hover, :active
Links vs. Buttons in Modern Web Applications

Buttons

Buttons signify user actions that prompt the page to respond, but do not re-route the page or navigate away from the page. The button element has specific properties that screen readers take advantage of and that differentiate it from an a element. These include the following, listed as from marcysutton.com:

  • Receive keyboard focus by default
  • “Click” with the Space key
  • Submit form data to a server
  • Reset a form
  • Be disabled with the disabled attribute
  • Instruct a screen reader with the implicit button role
  • Show :focus, :hover, :active, :disabled

With a little scripting, a button is the perfect element for:

  • Opening a modal window
  • Triggering a popup menu
  • Toggling an interface
  • Playing media content
  • Inserting with JS if they only work with JS
Links vs. Buttons in Modern Web Applications

Key Concepts:

  • Use links, that is a tags, when a click navigates to a new page, or is routed elsewhere for SPAs
  • Use buttons, that is button tags, when an action is triggered, such as a form submission, or a modal is opened

Audience Themes in Refresh

By design, the refresh has color themes targeted to different audiences. This is a way to help these audiences navigate through the site, and to affirm that a block of content is pertinent to their needs. While it is neither mandatory nor encouraged that a specific color is used exclusively for a specific audience (i.e. blue for parents), the 'Parents' section of the site, for example, should make greater use of the blue than of other colors, and blue should be the underlying theme.

But DO NOT use 'h1', 'h2', 'h3', 'h4' tags just for sizing! They are meant to create an outline for BVI users and for SEO

Parents

Use 'parent-bg' or 'parent-txt' (like this text) if on light background.

If you need larger text on this or any section, use a class of "h1"

Educators

Use 'educator-bg' or 'educator-txt' (like this text) if on light background.

You can also use the class of "h2" for smaller text, but still large, text on a paragraph element

BVI Users

Use either 'bvi-bg' for the background or 'bvi-txt' (like this text) if on light background.

Likewise with the class of "h3"

Get Involved

Use 'get-involved-bg' or 'get-involved-txt' (like this text) if on light background.

Or h4 as well.

Blocks and Image Borders

This block is in a container called R_Summary_Mission_Block. This container has 20px of padding on the top and bottom, and 30px padding on the left and right sides, as stipulated in the design by Creative Counsel.

Other colors can be accessed via the containers:

  • R_Bvi_Block
  • R_Educator_Block
  • R_Get_Involved_Block
  • R_Parent_Block
  • R_Plain_Block: this block is plain white, but has the correct margins

image class is "img img-responsive bvi-border"

image class is "img img-responsive educator-border"

image class is "img img-responsive get-involved-border"

image class is "img img-responsive parent-border"

image class is "img img-responsive no-border"

image class is "img img-responsive". This only works in one of the new Refresh block divs, (i.e. must be in a div with the class of educator-block, parent-block, etc., If you use one of the R_ containers, then you'll be fine

image class is "img img-responsive cta-border"

image class is "img img-responsive main-border" This border blends in because it actually is barely different than this background, but it works well on white.

Utility Classes

These utilities will help you refine your edits. Some have always been in our CSS, some are new.

Headers & Header Text Classes

Header elements, h1, h2, h3, etc., like many semantic elements have specific meaning and utility for BVI users. Screen readers treat these elements differently and essentially create a structured layout by which a BVI user can navigate the page. For this reason, header elements must be used only to signify semantic importance. To allow us to style elements visually like header elements, which gives marketing additional flexibility in their content, we have created several styles to mimic heading size. These text element or header classes work for any analogous text element (that isn't overridden by other styles).

Examples of Text Classes:

  • p class='h1' styles the paragraph like a refresh.css h1 element
  • h1 class='h2' styles the h1 like a refresh.css h2 element
  • h4 class='h3' styles the h4 like a refresh.css h3 element
  • h1 class='h4' styles the h1 like a refresh.css h4 element
  • p class='subheading-text' styles the paragraph in the manner of the first paragraph directly under 'Utility Classes' at the top of this box

To use these headers, simply add the class, class="h1". If you want to add a color often associated with the header, add the appropriate class for that color, class="h1 educator-txt".

Margins:

You can add these margins to modify the distance between an element and its border. The naming convention is that t means top, b means bottom, r means right, l means left, and the number corresponds to the number of pixels for the margin

Left & Right Margins

  • m-lr-30 therefore gives 30px margin on left and right of the element
  • m-lr-20
  • m-lr-15
  • m-lr-10
  • m-lr-neg10
  • m-lr-neg20
  • m-lr-neg30

Top & Bottom Margins

  • m-tb-25
  • m-tb-15
  • m-b-25
  • m-b-20
  • m-b-15
  • m-b-10
  • m-b-0
  • m-b-neg10
  • m-b-neg20
  • m-b-neg30
  • m-t-25
  • m-t-20
  • m-t-15
  • m-t-10
  • m-t-0
  • m-t-neg10
  • m-t-neg20
  • m-t-neg30

Padding:

You can add these margins to modify the distance between an element and its border. The naming convention is that t means top, b means bottom, r means right, l means left, and the number corresponds to the number of pixels for the padding

Left & Right Padding

  • p-lr-30 therefore gives 30px padding on left and right of the element
  • p-lr-20
  • p-lr-10

Top & Bottom Padding

  • p-t-10
  • p-t-20
  • p-b-10
  • p-b-20

Positioning:

  • absolute
  • relative
  • fixed

Text Alignment (from Bootstrap):

Left aligned text. Class is 'text-left'.

Center aligned text. Class is 'text-center'.

Right aligned text. Class is 'text-right'.

Justified text. Class is 'text-justify'.

No wrap text. Class is 'text-nowrap'.

Block Heights

These are classes you can use for block heights. The ones with numbers have heights defined to be that number of pixels on desktop. On smaller screens (991px and lower) ALL of the below height classes turn to auto to allow for elements to shift around. You must define heights for the rows on each individual page, and it is recommended to user use the class of 'row-[number from below]' for blocks placed horizontally next to one another that need to be the same height.

  • h-300
  • h-380
  • h-400
  • h-455
  • h-500
  • row-one
  • row-two
  • row-three
  • row-four
  • row-five
  • row-six
  • row-seven
  • row-eight
  • row-nine
  • row-ten

Layouts in the Refresh Design

Layouts can vary in color and structure, but content blocks on the same row must be the same size, so map out your content (including images) accordingly

You do not need to use all blocks in a given layout. Layouts simply offer flexibility in what kind of structure the visible page will have. Any unused block will simply not be rendered

"Refresh"

Block

Block

Block

Block

Block

Block

Block

Block

Block

Block

Block

Block

Block

Block

Block

Block

"Refresh_4_8"

Header

Block

Block

Block

Block

Block

Block

Block

Block

Block

Block

Block

Block

Block

Block

Block

Block

Block

"Refresh_6_6_Flex"

Block

Block

Block

Block

Block

Block

Block

Block

Block

Block

"Refresh_4_8_Flex"

Header

Block

Block

Block

Block

Block

Block

Block

Block

Block

Block

Block

Block

Block

Block

Block

Block

Block

Block

Block

Block

Block

"Refresh_Programs"

Block

Block

Block

Block

Block

Block

Block

Block

Block

Block

"FlexibleTADashboard_8_4"

Header

Block

Block

Block

Block

Block

Block

Block

Colors

Brand Primary

#3a2777

.dark-purple-bg

#6849bc

.white-bg--opaque

#074474

.dark-blue-bg

#0b72c1

.blue-bg

Brand Secondary

Currently only used on Parents Community page

promo promo-1-color

#1779a3

#97C767

promo promo-2-color

#F78E1E

promo promo-3-color

#FFC222

promo promo-4-color

Grays

#999

.dark-grey-bg

#eee

.grey-bg

#F5F4F4

light-grey-bg

Buttons

Both Refresh Buttons and Bootstrap Buttons are used throughout the site


Refresh Buttons

The following will work anywhere

Refresh Buttons in Refresh Blocks

The following will work only in refresh blocks, such as the above, because they are designed to complement them.

btn

in a div with educator-block

btn

in a div with parent-block

btn

in a div with bvi-block

btn

in a div with get-involved-block

btn

in a div with mission-block

btn

in a div with plain-block

Bootstrap Buttons

These will work everywhere


Deprecated Due to Being Inaccessible

.btn-cta should only be used for donation asks. Any "Donate Now" or "Support Us" buttons should use this class. It is not accessible.

Opaque backgrounds

Opaque backgrounds are best used with background images. See markup below for examples of how to implement.

Become an Audiobook Subscriber

For those who have trouble reading, audiobooks are a powerful tool that supports improved comprehension, boosts confidence and leads to better grades.


Headers

These headers are from previous styling. They do not require special classes to adjust the size and they should be used semantically. Headings are a big part of what screen readers use to organize the page. Headers should be precise, concise, and descriptive of the content housed under them.

Heading 1: The quick brown fox is so quick

Heading 2: The quick brown fox is so quick

Heading 3: The quick brown fox is so quick

Heading 4: The quick brown fox is so quick

Heading 5: The quick brown fox is so quick
Heading 6: The quick brown fox is so quick

Paragraphs

All paragraph text should be at least 1rem (on 16px scale) in font-size. If fixing font size for a specific element, use rem instead of em so that the ratio is uniform per our design standards. Do not use px as this might cause limitations for readers who resize the page or zoom.

For accessibility << Font-size styles should be specified as rem, not px or pt.

Only use <strong> tags to signify importance semantically and for screen readers. These will automatically style the element's font-weight as bold. Use <b> tags otherwise, as they will style somthing with the font-weight of bold, but will not tell site crawlers or screen readers that the text is important. Use <strong>on a few highly significant words and use sparingly. It is not to be used just for styling text. (i.e. you would not use <strong> for 'not' in the previous sentence, <b> should be used).


Forms

For accessibility

  • A validation summary should appear on top of the form explaining the specific error on the specific field.
  • The label must be tied to the input in that label for='inputId' would correspond to input name='inputId' id='inputId'. Both name and id attributes should be present on the input and should be the same as id serves as a unique identifier and name allows us to use the serialize() method to get form input values for validation or form submission.
  • Use autocomplete='tel' and other autocompletes to allow users (specifically on mobile) to more quickly fill out your form. This will enable them to select values they've entered on other forms that have the corresponding autocomplete field. Commonly used are:
    • 'username'
    • 'given-name' - First name
    • 'family-name' - Last name
    • 'email'
    • 'street-address'
    • 'postal-code'
    • 'bday-day'
    • 'tel'
    • 'off' - If you do not want autocomplete on, for example in cases of password or entering a new username you can, but do not necessarily need to use this.
    For more information on form inputs, look at MDN's reference.
  • Note that we CANNOT use input type='tel' or input type='email' when using XMod Pro forms. It will cause an error and the form will not render.
  • Please use the validation scripts we have approved for form validation.

Create a Community Membership

 

* indicates required fields

Search by zip code to find your school.

By clicking on Create Account you agree to Learning Ally's Terms of Service. This membership does not include access to audiobooks.

 

We respect your privacy.

Use Bootstrap forms where possible

For accessibility purposes, make sure each <input /> is paired with a <label/>. If you would like to remove the labels from view add the class ".sr-only" to the label.


Images

 

Use Bootstrap's responsive image classes wherever possible. Images should also be given a class of ".img-thumbnail" to provide a border around them.

Get started now

Get started now

Access the Teacher Ally user guides, IT guides, app guides and parent and student letter. Find the support you need to succeed.

Engage your students

Engage your students

Access book analysis forms, graphic organizers and a book club guide. Successfully integrate audiobooks into your classroom.

Grow the Community

Grow the community

Access ideas about how to spread the word about the benefits of Learning Ally, audiobooks and ear reading. Share the success.

Image Accessibility

Unless an image contains text or is crucial to a user's navigation of the website; an images alt tag may be left empty. Most of our images are decorative and contain empty alt tags so that they do not get in the way of users with screen readers.

 

Videos

 

To make an embedded video fit the size of it's container, place the video's embed code inside the following div tags. Be sure to include 'allowfullscreen="true"' so that users can make the video full screen. A maximum of 2 videos should be placed side-by-side per row, in order to allow room for closed captioning:



Alerts

 

Use Bootstrap alerts for alerts on user dashboards. Be sure to use h2's as the title though. This ensure that BVI users can access alerts when they login to their account.

Examples:

Success:

Info:


Layouts

 

Full width Headers

When using full width layouts:

These headers should make use of background images when possible. When using these layouts be sure to use an opaque background color over the background image to make sure that the text stands out from the image. We serve a low vision audience who will thank you very much for doing so.

When a full width image is not available consider using a two column layout.

Example:




 

Two column Headers

When using two column headers:

These headers should make use of background images when possible. When using these layouts be sure to use an opaque background color over the background image to make sure that the text stands out from the image. We serve a low vision audience who will thank you very much for doing so.

When a full width image is not available consider using a two column layout.

Example:


Kit resources layout

Engage your students

Engage your students

Access our book analysis forms, graphic organizers and book club guide. Gain insight into how Learning Ally and audiobooks can integrate into your classroom.

Get Started
Get started now

Get started now

Access the Teacher Ally user guides, IT guides, app guides and parent and student letter. Find the support you need to succeed.

Get Started

Kit resources cards

Student-to-Student Video

Student-to-Student Video

470 views

Introduce your students to Learning Ally. Through the voices of other students, help them realize that they are not alone!

Benefits of Audiobooks

Benefits of Audiobooks

530 views

Help your students become independent ear readers.

Other Elements:

Progress Circles

1 2 3 4 5


1
2              
3              
4              
5