Menu

VDOE SQP Style Guide

508 Compliance - Level A and AA

The QSP website is 508 Compliant to Levels A and AA as of 1/20/2017. There are two issues of note for content administrators:

  1. Priority AA warns 'Avoid specifying a new window as the target of a link with target="_blank" if cannot be avoided, indicate to unsighted visitor that link opens in a new window. We added (opens new window) to every such link so we are compliant, even though report does not read this workaround. If you create a link in a WordPress content area, you must add the same thing to remain compliant.
  2. Add alt tag content to any future images added
  3. Add a title and iframe content to any future iframes added such as maps or embedded video

Font Usage

Usage SCSS Variable Font Stack
Default Font $tDefault 'Roboto', sans-serif
Supporting Font $tCondensed 'Roboto Condensed', sans-serif
Subtitles and Large Pie Chart Labels $tDecoNumber 'Alegreya', serif
Data $tNumber 'Anton', serif
Small Data Labels $tLabel 'Roboto Condensed', sans-serif

HTML tags & elements

Headline 1

Headline 2

Headline 3

Headline 4 - Chart Subtitle

Paragraph content with link and bold text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ultrices, lacus id rhoncus posuere, elit massa sagittis ligula, sed vulputate est sapien a dolor. Aliquam eget massa eu nulla accumsan ultricies.

  1. ordered
  2. list
  • unordered
  • list


Color Palette & Usage

Color / Name Hexidecimal Value RGB Value SCSS variable Usage Example
Primary Palette
Bright green 		b4bf00 180|191|0 $cGreen
  1. Positive percentages on pie charts such as accredited schools, graduation rate, and post-secondary enrollment
  2. In longitudinal data charts (same sample at different points in time) like English Proficiency, the current year will use this color if it is a positive change
  3. In a comparison chart like Per-Pupil Spending, the current chart data will use this color
  4. School color in Bar chart comparisons of School, Division and State together

Dark Navy 		19232b 25|35|43 $cReallyDkBlue
  1. Negative percentages on pie charts such as accredited schools, graduation rate, and post-secondary enrollment.
  2. Title bars for mini-charts and large chart categories

Colonial Blue 		4476a0 68|118|160 $cBlue, $cSubBlack
  1. In longitudinal data charts (same sample at different points in time) like English Proficiency, all previous years (positive or negative) will use this color
  2. Used for subtitles in mini-charts
  3. Used for differentiating subgroups; typically Black subgroup
Medium Blue 		0672b0 $cMedBlue
  1. Division color in Bar chart comparisons of School, Division and State together
Super Dark Blue 		002f54 $cDkBlue
  1. State color in Bar chart comparisons of School, Division and State together
Secondary Palette

Grey Blue 		25354b 37|53|75
  1. In longitudinal data charts (same sample at different points in time) like English Proficiency, the current year will use this color if it is a negative change

CTA Yellow 		ffc95b $cCTA3
  1. Used in buttons and calls-to-action to draw attention.

Medium Grey 		a4a4a4 164|164|164 $cAllStudents
  1. In a comparison chart like Per-Pupil Spending, the Nationwide data will use this color
  2. All Students bar when compared to subgroups simultaneously
Tertiary Palette
005daa $cSubAsian
  1. Used for differentiating subgroups
8abbd2 $cSubHispanic
  1. Used for differentiating subgroups
1b4a71 $cSubWhite
  1. Used for differentiating subgroups
58a1c3 $cSubTwo
  1. Used for differentiating subgroups
408fd0 $cBrightBlue
  1. Non-Participating Eligible Students
  2. Master's Degree
  3. Provisional Special Education
005daa $cLogoBlue
919a01 --
656b00 --
484b53
  1. Used for negative criteria differentiation when there are many colors on a chart.
1F1F1E $cDarkGrey
  1. Other Non-Graduates
  2. Used for negative criteria differentiation when there are many colors on a chart.

Color Specifications by Chart

Tab Chart Screenshot Hexidecimal Value
Accountability Accreditation-Benchmarks 1-Year Average: #0672b0
3-Year Average: #002f54
Accreditation Benchmark: #b4bf00
Accountability FedGrad-Academic-Indicators School: #b4bf00
Division: #0672b0
State: #002f54
Assessments proficiency-level School - Advanced: #b4bf00
School - Proficient: #005daa
Division - Advanced: #919a01
Division - Proficient: #0672b0
State - Advanced: #656b00
State - Proficient: #002f54
Demographics Overall-Fall-Membership-by-Subgroup Black: #4476a0
Hispanic: #8abbd2
White: #1b4a71
Asian: #005daa
Two or more races: #58a1c3
Demographics Gifted-Program no chart on Abingdon American Indian or Alaska Native: #b4bf00
Asian: #005daa
Black: #4476a0
Hispanic: #0672b0
White not of Hispanic origin: #002f54
Native Hawaiian or Pacific Islander: #002f54
Non-Hispanic two or more races: #484b53
Readiness Diplomas and Completion Advanced Diplomas: #b4bf00
Standard Diplomas: #005daa
Other Diplomas: #4476a0
GED: #0672b0
Dropouts: #002f54
Other Non-Graduates: #1F1F1E
Readiness Four-Year-Virginia-On-Time-Graduation-Rate School: #b4bf00
Division: #0672b0
State: #002f54
Readiness Advanced-Program Advanced Placement Test Taken: #b4bf00
Advanced Placement Course Enrollment: #005daa
Dual Enrollment: #4476a0
Governors School Enrollment: #0672b0
IB Course Enrollment: #002f54
Seniors Enrolled in IB Program: #002f54
Readiness Postsecondary-Enrollment Students enrolled in IHE: #b4bf00
Remaining students: #005daa
Readiness Career-and-Technical-Education NOCTI Assessments: #005daa
State Licensures: #4476a0
Industry Certification: #4080672b0fd0
Workplace Readiness: #408fd0
Total Credentials Earned: #002f54
Students Earning One or More Credentials: #537687
CTE Completers: #7f7f7f
Readiness SAT-Achievement no chart on Abingdon School: #b4bf00
Division: #0672b0
Virginia: #002f54
Nation Public Schools: #484b53
Readiness AP-Achievement no chart on Abingdon Test Takers with Qualifying Scores: #005daa
Test Takers not Qualifying: #7f7f7f
Finance Percentage-of-Expenditures-for-Instruction Percentage of fiscal year 2014 division operating expenditures for instructional costs: #408fd0
Other Expenditures: #005daa
Finance Division-Per-Pupil-Spending-with-State-Comparison Local Funding: #b4bf00
State: #0672b0
Federal: #002f54
Finance State-Revenue-Sources no chart on Abingdon General Funds: #005daa
Trust and Agency Funds: #408fd0
Special Funds: #1b4a71
Federal Funds: #4476a0
Climate Attendance-Rate - Bryant pulled out - find this on earlier file
Climate Absenteeism Missed more than 20% (36 or more days per 180-day sch yr): #484b53
Missed between 15% and 20% (27 to 35 days per 180-day sch yr): #005daa
Missed between 10% and 15% (18 to 26 days per 180-day sch yr): #408fd0
Missed between 5% and 10% (9 to 17 days per 180-day sch yr): #484b53
Missed less than 5% less than 9 days per 180-day sch yr): #005daa
Climate SOA-Offenses-Data Weapons Offenses: #484b53
Offenses Against Student: #005daa
Offenses Against Staff: #408fd0
Other Offenses Against Persons: #484b53
Alcohol Tobacco and Other Drug Offenses: #005daa
Property Offenses: #408fd0
Disorderly or Disruptive Behavior Offenses: #484b53
Technology Offenses: #005daa
All Other Offenses: #408fd0
Climate Short Term Suspensions Percent of the total student population: #b4bf00
Percent of all short-term suspensions: #0672b0
Climate Long Term Suspensions Percent of the total student population: #b4bf00
Percent of all long-term suspensions: #0672b0
Climate Expulsions Percent of the total student population: #b4bf00
Percent of all expulsions: #0672b0
Climate Lunch Eligibility Eligible Students: #005daa
Non-Eligible Students: #408fd0
Climate Lunch Participating Participating Eligible Students: #005daa
Non-Participating Eligible Students: #408fd0
Teacher Quality Student Teacher Ratio - uses images
Teacher Quality Teacher-Education-Attainment Bachelor's Degree: #005daa
Master's Degree: #408fd0
Doctoral Degree: #1b4a71
Other: #4476a0
Teacher Quality Provisional-Credentials Provisional: #005daa
Provisional Special Education: #408fd0
Teacher Quality Professional Qualifications - table data only; no chart with colors

Microdata / Structured Data

There is structured data (aka microdata) using schema.org specification throughout the site including on charts and school information. Markup generally looks like this:

              <div itemscope itemtype="http://schema.org/Dataset">
              <div id="chart-diplomascompletion" class="dynamicChart">
              <meta itemprop="author" content="Virginia Department of Education"/>
              <meta itemprop="datasetTimeInterval" content="2012-2016"/>
              <meta itemprop="accessibilityFeature" content="alternativeText"/>
              <meta itemprop="audience" content="parents of Virginia public school students"/>
              <meta itemprop="isFamilyFriendly" content="True"/>
              <meta itemprop="learningResourceType" content="chart"/>
              <h3 itemprop="name">Diplomas and Completion <a href="/glossary"
              title="A helpful definition will appear here for in-context help."
              class="vdoetooltip"><span
              class="livicon" data-name="info" data-size="16"
              data-animate="true"></span><span class="compliance">Go to full chart</span><span
              class="compliance">Go to full chart</span></a></h3>
              <h3 class="datalabel" itemprop="alternativeHeadline">Diplomas and Completion </h3>
              
              <canvas itemprop="image" style="display:none;" id="canvasDiplomaTypesSchool"
              width="400" height="600"></canvas>
              <a itemprop="url" href="javascript:void(0);" class="item"
              id="embed-chartDiplomaTypesSchool"
              title="Embed Chart" role="button" tabindex="0"
              aria-label="Embed Chart"><span class="livicon"
                    data-name="code"
                    data-size="24"
                    data-animate="true"></span>embed
              chart</a>
              
              <div class="explanation" id="explanationDiplomaTypesSchool" itemprop="description"></div>
              </div>
              </div>

Editing Content in WordPress

Pages

There are a few general content pages on the website that can be managed through WordPress. Edit them under Pages > [click title]. For introductory content, please limit the character count so that the page does not get too long, especially for mobile users.

Glossary Terms

Create new term under Glossary > Add New or edit existing terms

Title should be the term and the body is the definition. The slug (page name with hyphens) is automatically generated by WordPress; please avoid special characters. Formatting using the WYSIWYG editor should be limited to bold/italic due to limited space and inability to click hyperlinks.

The slug must be manually placed in the code to display the tooltips for each chart/term. The public Glossary page is automatically generated from the WordPress content and alphabetized. Other than alerting developers when new tooltips need to be associated, no other admin work is needed.

Chart Context

Create new context under Context > Add New or edit existing terms

Title should be slug and always start with ‘explanation-‘

Body is the context content that displays under the chart on the public website. Formatting using the WYSIWYG editor is encouraged.

Add Context slug to https://docs.google.com/spreadsheets/d/1XX3voIYHjTDtGg7Asskq-WNlnxNV2C1lI8QEii9hfJg/edit?usp=sharing next to appropriate chart.

Frequently Asked Questions

Create new FAQ under Question > Add New or edit existing terms

Title is the question and the body is the answer. Formatting using the WYSIWYG editor is encouraged.

The public FAQ page is automatically generated from the WordPress content and ordered by the date published with the most recent first.

Divisions & Schools

This content is for viewing reference only; it is not editable and is overwritten when data feed is updated.

to top