Top 10 Content Development Tips for Compliance and Usability

WE MAKE LOCAL GOVERNMENT WORK BETTER |
CivicPlus Webinar Series:
Top 10 Content Development Tips for Compliance and Usability
11.19.15
civicplus.com
WE MAKE LOCAL GOVERNMENT WORK BETTER |
Our Speakers
Jessica Jones
Content Operations Manager
CivicPlus
civicplus.com
Dean Kimball
Penny Lasater
Sr. Lead Software Engineer
CivicPlus
Sr. Product Manager
CivicPlus
WE MAKE LOCAL GOVERNMENT WORK BETTER |
Agenda
 Goals
 Make Your Website Compliant With Industry Standards and Laws
 Create Your Website Content in a Usable Manner
 The Top 10 Tips for Compliant and Usable Content
 Recap
civicplus.com
WE MAKE LOCAL GOVERNMENT WORK BETTER |
Goals
Compliance with WCAG 2.0 standards
will make your Web content
accessible to the over 49 million
Americans with disabilities.
Usability means that your content is
created in a manner that users can
comprehend and use to accomplish
their goals on your site.
civicplus.com
WE MAKE LOCAL GOVERNMENT WORK BETTER |
Top 10 Content Development Tips
Here are some tips from the experts here at CivicPlus on how to
comply with WCAG 2.0 standards and make your content usable.
civicplus.com
WE MAKE LOCAL GOVERNMENT WORK BETTER |
Tip Number 1:
Users Need to Know Where They’re Going
When naming items (pages, documents, categories, etc.) on your
website remember that naming is essential to understanding. You
should name items in a way that describe their topic or purpose. Aim
for specific instead of broad naming conventions.
civicplus.com
WE MAKE LOCAL GOVERNMENT WORK BETTER |
Pay Special Attention to Page & Heading Titles
civicplus.com
WE MAKE LOCAL GOVERNMENT WORK BETTER |
Pay Special Attention to Category Titles
civicplus.com
WE MAKE LOCAL GOVERNMENT WORK BETTER |
Compliance Information
• Category Titles in Modules
• WCAG Guideline 2.4.6 (Level AA)
• Headings Within Content
• WCAG 1.3.1 (Level A) and 2.4.6 (Level AA)
• Page Titles
• WCAG Guideline 2.4.2 (Level A)
civicplus.com
WE MAKE LOCAL GOVERNMENT WORK BETTER |
Tip Number 2:
Break Up Page Sections / Topics With Headings
When a user arrives on a page they scan for the information they
need. Use Subhead1 and Subhead2 class headings to break up your
content and show hierarchy so it is easily scannable.
civicplus.com
WE MAKE LOCAL GOVERNMENT WORK BETTER |
Pay Special Attention to Breaking Up Topics / Hierarchy
civicplus.com
WE MAKE LOCAL GOVERNMENT WORK BETTER |
Compliance Information
• Show hierarchy in information by using headings
• WCAG Guidelines 2.4.3 (Level A) and 2.4.10 (Level AAA)
civicplus.com
WE MAKE LOCAL GOVERNMENT WORK BETTER |
Tip Number 3:
The Purpose Of Links Can Be Determined in Context
Links are how users get from place to place on your site. It is
important that they be able to determine where a link goes without
reading all of the text near the link. This concept applies to both the
average user and users with assistive technologies.
civicplus.com
WE MAKE LOCAL GOVERNMENT WORK BETTER |
Pay Special Attention to Links in Text
civicplus.com
WE MAKE LOCAL GOVERNMENT WORK BETTER |
Pay Special Attention to Lists of Links
civicplus.com
WE MAKE LOCAL GOVERNMENT WORK BETTER |
Compliance Information
• Links
• WCAG Guideline 2.4.4 (Level A)
civicplus.com
WE MAKE LOCAL GOVERNMENT WORK BETTER |
Tip Number 4: Only use tables when the information
fits under the header cells appropriately (do not use
for layout purposes).
Screen readers are particular about tables. In order to provide your
users with screen readers the correct information, you must make
sure that the contents of every cell is directly related to the heading
for that cell and that each column does have a heading.
civicplus.com
WE MAKE LOCAL GOVERNMENT WORK BETTER |
Pay Special Attention to Blank Cells
civicplus.com
WE MAKE LOCAL GOVERNMENT WORK BETTER |
Pay Special Attention to Non-Data Tables
In this example, a screen reader
would interpret this information as
a table and not as separate
pieces of data. The feedback
from the reader might sound
something like:
• Table
• Column 1, Row 1 This is some
text
• Column 2, Row 1 Image
• Column 1 Row 2 Image
• Column 2 Row 2 This is some
more text
civicplus.com
WE MAKE LOCAL GOVERNMENT WORK BETTER |
Compliance Information
• Tables
• WCAG Guideline 1.3.1 Information and relationships conveyed through
presentation (Level A)
civicplus.com
WE MAKE LOCAL GOVERNMENT WORK BETTER |
Tip Number 5: Do Not Depend on Only Color to
Relay Information
Color should never be the sole indicator for a user as to what text is
important. Color is problematic for both screen readers and users
with color blindness.
civicplus.com
WE MAKE LOCAL GOVERNMENT WORK BETTER |
Pay Special Attention to Highlighting & Colored Text
civicplus.com
WE MAKE LOCAL GOVERNMENT WORK BETTER |
Compliance Information
• Use of Color
• WCAG Guideline 1.1.1 Color is not used as the only visual means of
conveying meaning (Level A)
civicplus.com
WE MAKE LOCAL GOVERNMENT WORK BETTER |
Tip Number 6: Do not use symbols or abbreviations
as they will not translate well (symbols such as “ for
inches)
Screen readers have limitations regarding what they can read or how
the symbols or abbreviations are translated.
civicplus.com
WE MAKE LOCAL GOVERNMENT WORK BETTER |
Pay Special Attention to Common Bugs / Misconceptions
http://www.deque.com/blog/dont-screen-readers-readwhats-screen-part-1-punctuation-typographic-symbols/
civicplus.com
WE MAKE LOCAL GOVERNMENT WORK BETTER |
Pay Special Attention to Common Unread Characters
Additional unread characters at:
http://www.deque.com/blog/dontscreen-readers-read-whats-screenpart-1-punctuation-typographicsymbols/
civicplus.com
WE MAKE LOCAL GOVERNMENT WORK BETTER |
Compliance Information
• Special characters
• WCAG Guideline 3.1.2 The human language of each passage or phrase
in the content can be programmatically determined except for proper
names, technical terms, words of indeterminate language, and words or
phrases that have become part of the vernacular. (Level AA)
civicplus.com
WE MAKE LOCAL GOVERNMENT WORK BETTER |
Tip Number 7: Know your audience. Do not use
jargon and think of the average reading level of the
user.
The internet is the ultimate source of information. Users from all
backgrounds and levels of education need to be able to find
information on your site.
civicplus.com
WE MAKE LOCAL GOVERNMENT WORK BETTER |
Pay Special Attention to Highly Sought / Important Information
To make sure your average citizen can understand the
most important information on your site, pay special
attention to the readability level on the following pieces of
information:
• How to submit payments
• Who to contact
• Important announcements or alerts
• Emergency response information
• Etc.
civicplus.com
WE MAKE LOCAL GOVERNMENT WORK BETTER |
Usability Information
www.usability.gov
– Chapter 15: Writing for the Web
» Section 2: Avoid Jargon
» Section 3: Use Familiar Words
» Section 4: Avoid Acronyms & Abbreviations
» Section 7: Limit The Number of Words & Sentences
civicplus.com
WE MAKE LOCAL GOVERNMENT WORK BETTER |
Tip Number 8: Use descriptive alt text for images or
provide a link to a text description adjacent to an
image or other non-text content
Screen readers rely on alternative text in order to give your visually
impaired users the same experience as your users that do not
require assistive technology.
civicplus.com
WE MAKE LOCAL GOVERNMENT WORK BETTER |
Pay Special Attention to the Details
civicplus.com
WE MAKE LOCAL GOVERNMENT WORK BETTER |
Pay Special Attention to Non-Image Images
All images on your website need to
have alt text in order to be complaint.
This includes:
• Icons
• Buttons
• Background Images
• Banners
• Logos
civicplus.com
WE MAKE LOCAL GOVERNMENT WORK BETTER |
Compliance Information
• Images
• WCAG Guideline 1.1.1 All non-text content (with certain exceptions)
presented to the user should have an equivalent text alternative. (Level A)
civicplus.com
WE MAKE LOCAL GOVERNMENT WORK BETTER |
Tip Number 9: Use consistent navigation techniques
and placement of other important items, such as
contact information.
When users find a piece of information in an area of your site, they are going to look in that same
location the next time they need to find similar information. Using consistent navigation and
placement of important information will help your users find what they need faster.
civicplus.com
WE MAKE LOCAL GOVERNMENT WORK BETTER |
Pay Special Attention to Contact Information
civicplus.com
WE MAKE LOCAL GOVERNMENT WORK BETTER |
Pay Special Attention to Navigation Pieces
civicplus.com
WE MAKE LOCAL GOVERNMENT WORK BETTER |
Compliance Information
• Navigation
• WCAG Guidelines 2.4.1 (A), 2.4.3 (A), 2.4.4 (A), 2.4.5 (AA), & 2.4.7 (AA)
all deal with navigation. However, the navigation topic above is not
directly addressed by any guidelines. Rather, it represent best practices.
civicplus.com
WE MAKE LOCAL GOVERNMENT WORK BETTER |
Tip Number 10: Do not use flashing elements, such
as images, text, or banners.
Flashing lights can be a huge medical problem for those with seizure
disorders and can inhibit the ability of light sensitive individuals to see
other page content. Flashing elements should always be completely
avoided.
civicplus.com
WE MAKE LOCAL GOVERNMENT WORK BETTER |
Pay Special Attention to Sensitivities
civicplus.com
WE MAKE LOCAL GOVERNMENT WORK BETTER |
Compliance Information
• No flashing elements
• WCAG Guideline 2.3.1 Web pages do not contain anything that flashes
more than three times in any one second period, or the flash is below the
general flash and red flash thresholds. (Level A)
civicplus.com
WE MAKE LOCAL GOVERNMENT WORK BETTER |
Jessica Jones
[email protected]
888.228.2233 x390
civicplus.com