WCAG 2.0 Checklist

An accessible website is important for any website, but especially for higher education driven websites. 508 is equally important, but this article covers WCAG 2.0 specifically.

The WCAG 2.0 checklist is a great place to start.

There are three levels: A (beginner), AA (Intermediate) most colleges abide by this level, and AAA (Advanced)

At a glance:

A Level (Beginner):

1.1.1 – Non-text Content Provide text alternatives for non-text content

1.2.1 – Audio-only and Video-only (Pre-recorded) Provide an alternative to video-only and audio-only content

1.2.2 – Captions (Pre-recorded) Provide captions for videos with audio

1.2.3 – Audio Description or Media Alternative (Pre-recorded) Video with audio has a second alternative

1.3.1 – Info and Relationships Logical structure

1.3.2 – Meaningful Sequence Present content in a meaningful order

1.3.3 – Sensory Characteristics Use more than one sense for instructions

1.4.1 – Use of Colour Don’t use presentation that relies solely on colour

1.4.2 – Audio Control Don’t play audio automatically

2.1.1 – Keyboard Accessible by keyboard only

2.1.2 – No Keyboard Trap Don’t trap keyboard users

2.2.1 – Timing Adjustable Time limits have user controls

2.2.2 – Pause, Stop, Hide Provide user controls for moving content

2.3.1 – Three Flashes or Below No content flashes more than three times per second

2.4.1 – Bypass Blocks Provide a ‘Skip to Content’ link

2.4.2 – Page Titled Use helpful and clear page titles

2.4.3 – Focus Order Logical order

2.4.4 – Link Purpose (In Context) Every link’s purpose is clear from its context

3.1.1 – Language of Page Page has a language assigned

3.2.1 – On Focus Elements do not change when they receive focus

3.2.2 – On Input Elements do not change when they receive input

3.3.1 – Error Identification Clearly identify input errors

3.3.2 – Labels or Instructions Label elements and give instructions

4.1.1 – Parsing No major code errors

4.1.2 – Name, Role, Value Build all elements for accessibility

AA Level (Intermediate):

1.2.4 – Captions (Live) Live videos have captions

1.2.5 – Audio Description (Pre-recorded) Users have access to audio description for video content

1.4.3 – Contrast (Minimum) Contrast ratio between text and background is at least 4.5:1

1.4.4 – Resize Text Text can be resized to 200% without loss of content or function

1.4.5 – Images of Text Don’t use images of text

2.4.5 – Multiple Ways Offer several ways to find pages

2.4.6 – Headings and Labels Use clear headings and labels

2.4.7 – Focus Visible Ensure keyboard focus is visible and clear

3.1.2 – Language of Parts Tell users when the language on a page changes

3.2.3 – Consistent Navigation Use menus consistently

3.2.4 – Consistent Identification Use icons and buttons consistently

3.3.3 – Error Suggestion Suggest fixes when users make errors

3.3.4- Error Prevention (Legal, Financial, Data) Reduce the risk of input errors for sensitive data

AAA Level (Advanced):

1.2.6 – Sign Language (Pre-recorded) Provide sign language translations for videos

1.2.7 – Extended Audio description (Pre-recorded) Provide extended audio description for videos

1.2.8 – Media Alternative (Pre-recorded) Provide a text alternative to videos

1.2.9 – Audio Only (Live) Provide alternatives for live audio

1.4.6 – Contrast (Enhanced) Contrast ratio between text and background is at least 7:1

1.4.7 – Low or No Background Audio Audio is clear for listeners to hear

1.4.8 – Visual Presentation Offer users a range of presentation options

1.4.9 – Images of Text (No Exception) Don’t use images of text

2.1.3 – Keyboard (No Exception) Accessible by keyboard only, without exception

2.2.3 – No Timing No time limits

2.2.4 – Interruptions Don’t interrupt users

2.2.5 – Re-authenticating Save user data when re-authenticating

2.3.2 – Three Flashes No content flashes more than three times per second

2.4.8 – Location Let users know where they are

2.4.9 – Link Purpose (Link Only) Every link’s purpose is clear from its text

2.4.10 – Section Headings Break up content with headings

3.1.3 – Unusual words Explain any strange words

3.1.4 – Abbreviations Explain any abbreviations

3.1.5 – Reading Level Users with nine years of school can read your content

3.1.6 – Pronunciation Explain any words that are hard to pronounce

3.2.5 – Change on Request Don’t change elements on your website until users ask

3.3.5 – Help Provide detailed help and instructions

3.3.6 – Error Prevention (All) Reduce the risk of all input errors

Source: https://wuhcag.com/wcag-checklist/

Zedric Myers
Zedric Myers is a Web Designer for Beacon Technologies. After earning his degree in Advertising and Graphic Design, he spent 11 years with an advertising agency in Greensboro, NC where he was initially hired as a designer and transitioned to being a Web Developer.
By | 2017-12-11T13:31:39+00:00 December 13th, 2017|Web Development|0 Comments

Managing a Website Redesign: Overcoming 3 Common Problems

The moment has arrived. Your website needs an overhaul. There’s a great deal at stake and if you’ve never gone through the process, it can be overwhelming. However, if you take the right approach, it isn’t that painful. Done right, it can even be exhilarating.

Either way, there are sure to be surprises. Nobody likes surprises. The small ones take care of themselves but the big ones, well that’s another matter. Consider this a heads-up. It’s your insurance policy against a costly mishap.

1. Understand the Full Scope of Content Issues

Content is one of the most important things to consider in any website redesign. It is also the part of the project that is most often underestimated. Content consists of old information that you’ll want to carry over as well as new content. This new content includes video, photography, and social media.

There’s more there than meets the eye. Here’s why.

User habits have changed. Attention spans are shorter so you’ve got to create easily scan-able pages. If someone cannot find the information they seek at a glance, they won’t hesitate to move on to a competing website.

Google’s algorithm has changed. Once engineered to emphasize written content, the algorithm has changed to reflect the habit of today’s users. Engagement and user experience are big factors, hence a new emphasis on video and other engagement tools. You’ll want to consider who you’re presenting information to, new and old.

Accessibility is a hot button issue. Not only has accessibility become part of Google’s algorithmic changes, it has become a legal consideration for schools and companies. You’ll need to make sure that your content – new and old – meets compliance requirements.

Step one is to thoroughly assess your content situation. Place your pages into categories so that you’re working with manageable groups. If you’re a college website for example, a few appropriate categories may be admissions, programs, news, and alumni. Some of these categories will require that you update or rewrite the information. Typically, this is the case with your program pages. With your news pages, you may wish to carry the more recent ones over while eliminating some that are so old they’re no longer relevant.

You’ll also want to review your admissions content as that information may need to be newly created or updated. The same may be said for student life pages. By now, you get the picture. Before you begin the redesign process, make sure you have a realistic accounting of the total pages you’ll want to carry over, which ones require updating and which are to be newly created.

2. Maintain Consistency Throughout the Redesign Process

This problem is particularly acute in cases where there are many stakeholders, such as a college or university. The marketing or admissions office may be driving the bus, but there are deans, professors, administrators, athletic directors, and students who all want to tell the driver where to go.

If you’re spearheading the website redesign project for your school, don’t get hung up on pleasing every stakeholder equally. What may be ideal for one school or department may not work as well for another. Try to maintain a singular vision throughout the entire website redesign.

The stakes are high so try to keep all interested parties on point. Managing the expectations of deans, administrators, and other interested parties can be paramount to the project’s success. Your redesign firm’s project manager will do their best to give the website redesign the momentum it needs.  But it works best when all parties involved adhere to a singular vision. Otherwise, you run the risk of a delayed launch and cost overruns. Or worse. If everyone gets what they want, you may have so much clutter you may wish for the old website back. Imagine having to redesign your redesign just a few months later!

3. Adhere to a Hierarchical Strategy

Earlier, we spoke about decreasing attention spans and scan-ability.   Your hierarchical strategy needs to consistently follow this same principle. Information must be organized so that the content that’s important to your audience is simple to find. This should be reflected in the organization of your content as well as its visual design. In order to develop a sound hierarchical strategy, do your homework in advance.  At Beacon, we perform a user engagement analysis early on to identify the ways in which your audience uses your website. We strongly suggest you do the same. After all, good data makes for sound decisions.

Once you’ve reviewed the data, you’re ready to develop a hierarchal strategy based on user behavior, increasing your chance of success exponentially.

Breathe easy with Beacon.

If you’re looking for a new website, talk to me. I’m here to answer any questions you may have regarding the process and how Beacon can make it easier for you. We know a thing or two. We’ve been redesigning Higher Ed websites for over 20 years. Contact me any time or call one of our team members at 1.855.467.5447.

 

Deb Paylor
With a B.S. from East Tennessee State University and a Masters Degree from Kansas State University, Deb Paylor joins Beacon with over 18 years of experience in the project management and IT space. In her spare time, Deb enjoys reading, crafting and cooking.
By | 2017-12-06T20:43:15+00:00 December 6th, 2017|Web Development|0 Comments

How To Remove Aria-Described By if Dots are Disabled in Slick Slider

Need to remove the aria-described by tag if no control dots are needed? Try this:

This allows Slick Slider to pass accessibility testing.

Change “.slide-title” to your respective class name.

$(‘.slide-title’).each(function () {    var $slide = $(this).parent();        if ($slide.attr(‘aria-describedby’) != undefined) { // ignore extra/cloned slides        $(this).attr(‘id’, $slide.attr(‘aria-describedby’));    }});

Sources: https://github.com/kenwheeler/slick/issues/2020

Zedric Myers
Zedric Myers is a Web Designer for Beacon Technologies. After earning his degree in Advertising and Graphic Design, he spent 11 years with an advertising agency in Greensboro, NC where he was initially hired as a designer and transitioned to being a Web Developer.
By | 2017-11-16T12:22:32+00:00 November 16th, 2017|Web Development|Comments Off on How To Remove Aria-Described By if Dots are Disabled in Slick Slider

Surveys: Get the Right Input for your Redesign

The success of your redesign depends upon how thoroughly you understand your audience.  Your results are only as good as your preliminary research. Before you begin, ask the experts – the end users. Getting the right input may be the most important part of the redesign process.

Know Your User(s)

Many organizations have several audiences. For example, colleges must appeal to students, faculty, current students and alumni. Each have different needs and wants.  To properly address each user subset, you’ll likely need to create a different survey for each focus group.

Question Structure

There are two types of questions, fixed response and open ended. Each serves a purpose, however, you’ll want to lean heavier on structured questions. Respondents can be hopelessly vague when answering open ended questions.

Structured questions may include Yes/No, nominal or ordinal questions, just to name a few types. Choosing the right type of question will help determine how insightful the answers are. For example, instead of asking “Were you happy with the website navigation?” (yes/no question), you may wish to ask “How happy were you with the website navigation?”. Follow that with multiple choice options (very satisfied, somewhat satisfied, neutral, unsatisfied, or very unsatisfied). This can help you prioritize initiatives while in the planning phase of your redesign effort.

Regardless of type, make sure you’re specific. For example, instead of asking a question like “Do you take online classes often?” try something like “How many online classes did you take last semester?”

Construct questions that are simple and direct. If the question is a bit nebulous, then break it down into multiple questions rather than being vague.

What Questions Should You Ask?

The first step to understanding your user is to focus on their experience with your existing site. Find out what they like and dislike. That way, you’ll know what traits to carry over to the new design and what you’ll want to scrap. Asking a multiple choice question such as “What is the first method you use to find information on the website?” This way, you’ll know whether users prefer to use site search as opposed to the site’s navigation. This can go a long way toward determining what you emphasize with your redesign.

When you phrase your questions, focus on the user’s first impressions. Remember the 59 Second Rule*. Make sure you cover the most significant aspects of engagement such as design, content, imagery, navigation, and social media. Since demographic groups consume information in dramatically different ways, you’ll want to address device usage, too.

Using the prestigious (and imaginary) Beacon University as our subject, here are just a few examples of the types of questions you’ll want to ask:

  • Assuming the Beacon University website were accessible on all devices, what device would you most likely visit the site with? (multiple choice)
  • Rate your experience using certain areas of the website. (multiple choice)
  • What are the three top reasons you visited the Beacon University website? (open-ended)
  • Compared to other college or university websites, how would you rate the Beacon University site? (multiple choice)

Again, your questions will differ depending on the demographic you’re addressing. However, the questions above should provide some insight into the type of question one must ask and how to ask it.

Analyzing Survey Results

Look for patterns within your results. While common responses are important to note, the same can be said for outliers. Sometimes, surprises bring the greatest insights.

Here at Beacon, we typically provide a strategic document prepared from the survey results. Provided to designated stakeholders, a Beacon strategist meets with marketing staff or the organization’s website committee to discuss the results in depth and its implications on the planned website redesign.

Questions or Comments

As one of the nation’s premier Higher Ed. And retail redesign firms, Beacon has been providing colleges and online retailers with redesign consultation and services for almost 20 years. We invite questions or comments regarding all aspects of website redesign, not just the survey process.  Feel free to contact me or call one of our team members at 1.855.467.5447 with questions or leave a comment below.

Keana Lynch
Keana Lynch is the Director of UX Design & Development at Beacon where she has provided leadership and consultation for over 35 Higher Education projects. She specializes in the analysis, design, and implementation of websites. Keana is very passionate about design and development strategies focused on user experience, accessibility, multi-device interactions, and technical best practices. Outside of work Keana enjoys spending time with her three dogs, hiking, kayaking and volunteering with local animal rescue groups.
By | 2017-11-08T13:42:37+00:00 November 9th, 2017|Higher Education, Web Development|Comments Off on Surveys: Get the Right Input for your Redesign

Love Quiz: Fall In Love with Your Website Again

You have genuine feelings for your website, but you’re not entirely sure you’d call it love. Or, maybe your digital relationship has been less than fulfilling and you’re starting to wonder… is this a relationship worth saving?

Take this quiz to find out if it’s time to get more serious about a website redesign.

Question #1: How do you feel about your website’s friends?

If you’ve been “dating” your website for a long time, you’ve more than likely met the friends. If not, it’s time you do. Meet Google Analytics and Google Site Search. Believe it or not, they’re your best friends, too. Get to know them well as they can be the key to opening your significant other’s digital heart.

The “E” Word

That’s right. Engagement. Google Analytics can provide insights into the type of content that drives visitors and captivates users. Find out which pages are under-performing and adjust your new content strategy accordingly.

More importantly, ask yourself which pages are performing best. Exploit these subject areas in your new, updated content strategy. Some topics may need to be called out more. Knowing your website’s likes and dislikes can only make for a more healthy relationship.

Google Site Search

Google Site Search can tell you what users are searching for when they first meet your website. Are users satisfied with what they find? The results may be surprising. You may find new areas of opportunity that you’d never thought of. Are they searching for a product or online course that you don’t yet offer? Maybe it’s time to expand your catalog.

Get Your Friends’ Input, too.

A focus group is an ideal way to find out what your users need and want from this relationship. Identify your audience correctly and your focus group will be effective.

For example, in the case of a college or university, your focus group may be made up of a combination of students, prospective students and alumni. Keep the size at a manageable number (about 10-15). With the right moderator, you’ll find out what you need to know about your user’s habits and objectives so that you can design optimally for a more fulfilling relationship next go-round.

Question #2: Is your online presence responsive to your needs?

Responsive is the key word here. 86% of those between the ages of 18 and 29 have a smart phone. If this is your audience (that’s you, Higher Ed), this one’s a no-brainer. By contrast, 87% of those living in households making in excess of $75,000 a year have a smart phone (that’s your audience, online retailers). If your current website isn’t responsive, this is step one to a more healthy relationship.

Beauty is More Than Skin Deep (although that counts, too)

Often, websites fall behind as organizational branding requirements evolve. This is a chance to update a color theme, new logo, etc. And while looks are important, inner beauty is even more so. Make sure the voice of your website is consistent with your other collateral.

Incorporate images and video where appropriate. In short, it’s a great time to make sure that you and your website are speaking the same language – the language of (digital) love.

Question #3: Does your website’s content still give you butterflies?

We’ve all seen the data on declining attention spans. That’s very likely true for your audience, too. Creating a logical navigation and page structure ensures that your site is easily scanned – an essential element to today’s website design.

Start with an overview and make sure you’ve written relevant headings and used SEO friendly tags accordingly (H2s, H3s. etc.). Use bulleted or numbered lists where appropriate. Link to other relevant internal pages and make sure that link text is meaningful.

Breaking up (blocks of text) is hard to do. Not really. Nevertheless, it always seems to be overlooked. This one’s an easy fix. Don’t forget it.

Call Me

If you’re looking for a new website, that is. We at Beacon don’t claim to be “doctors of love” but we’ve been helping guide clients through their digital relationships for almost 20 years. Feel free to contact me with questions or call one of our team members at 1.855.467.5447.

 

Keana Lynch
Keana Lynch is the Director of UX Design & Development at Beacon where she has provided leadership and consultation for over 35 Higher Education projects. She specializes in the analysis, design, and implementation of websites. Keana is very passionate about design and development strategies focused on user experience, accessibility, multi-device interactions, and technical best practices. Outside of work Keana enjoys spending time with her three dogs, hiking, kayaking and volunteering with local animal rescue groups.
By | 2017-11-17T09:31:34+00:00 October 18th, 2017|Web Development|Comments Off on Love Quiz: Fall In Love with Your Website Again

CSS Accordion IE10 Fix

You can create accordions for your site using CSS and the input button method. The only caveat is that if you need to make the accordion row titles clickable in IE10 you have to add the labels method. With these few simple steps below, you will have clickable accordion row titles that also works in IE10.

Download the CSS Accordion IE10 Fix. You can also find all the needed information at the original source below.

Example below. You can change the HTML Class, ID names and CSS styles, as needed. Please note that each accordion row will need a unique label ID, Name and For Tag.

HTML

CSS

 

Sources: Brad S. Knutson

Zedric Myers
Zedric Myers is a Web Designer for Beacon Technologies. After earning his degree in Advertising and Graphic Design, he spent 11 years with an advertising agency in Greensboro, NC where he was initially hired as a designer and transitioned to being a Web Developer.
By | 2017-09-29T13:47:05+00:00 September 26th, 2017|Web Development|Comments Off on CSS Accordion IE10 Fix

How to fix for Object-Fit Cover for IE

You may notice Object-Fit Cover doesn’t work well for IE or Edge in a responsive aspect. Microsoft is working on a fix for this, so this would help in the meantime.

There is a work around for this and you can find all the needed information at the below source.

Quick example code reference, below:

HTML <div class=”post image-container”> <a href=”blogpost.html”> <img src=”pic.jpg” class=”post__featured-image”> </a> </div>

CSS: .post__featured-image { width: 120px; height: 120px; object-fit: cover; }

jQuery: if ( ! Modernizr.objectfit ) { $(‘.post__image-container’).each(function () { var $container = $(this), imgUrl = $container.find(‘img’).prop(‘src’);

if (imgUrl) { $container .css(‘backgroundImage’, ‘url(‘ + imgUrl + ‘)’) .addClass(‘compat-object-fit’); } }); }

SCSS: .post { &__image-container { width: 120px; // the same width and height as for the <img> height: 120px;

&.compat-object-fit { background-size: cover; background-position: center center;

.post__featured-image { // hide image if object fit is not supported – opacity to 0 for the link area opacity: 0; } } }

&__featured-image { width: 120px; height: 120px; object-fit: cover; } }

 

Sources:medium

Zedric Myers
Zedric Myers is a Web Designer for Beacon Technologies. After earning his degree in Advertising and Graphic Design, he spent 11 years with an advertising agency in Greensboro, NC where he was initially hired as a designer and transitioned to being a Web Developer.
By | 2017-08-10T14:55:38+00:00 August 14th, 2017|Web Development|Comments Off on How to fix for Object-Fit Cover for IE

Mobile is Booming 2017 Report

As an update to a blog post written in 2011, we can now see just how accurate the report was.

Mobile has definitely made its mark with over 50% usage.

Mobile Stats 2017

Click here, to see the original post.

Source: Smart Insights

Zedric Myers
Zedric Myers is a Web Designer for Beacon Technologies. After earning his degree in Advertising and Graphic Design, he spent 11 years with an advertising agency in Greensboro, NC where he was initially hired as a designer and transitioned to being a Web Developer.
By | 2017-12-15T16:38:27+00:00 August 2nd, 2017|Web Development|Comments Off on Mobile is Booming 2017 Report

Responsive iFrames

How to setup responsive iframes

Sometimes your website needs iFrames inserted for things such as forms or third party plugins. What do you do when your site is responsive? Well, hopefully this can help you out with these tested examples.

There are different setup options you can take to make the iFrame responsive. Some may take more effort than others, but these options should take care of what you need.

Note: The iFrame content itself will need to be responsive and then we make the actual iFrame responsive. Most update to date and well-known sites that offer 3rd party products make their iFrame content responsive. It will depend on the company and something that should be considered to review if you need it to work for a responsive site.

First step before any of the below. Remove the width and height attributes from the iFrame code.

These are some examples of how to setup responsive iFrames for your website or things to check on to make them work.

The simple responsive iFrame using CSS (This method only covers the surrounding iFrame container width and not height.) iframe, object, embed { max-width: 100%; }

NPR Responsive iFrame Example: This setup requires the javascript file to be on the parent page and on the page being embedded through the iFrame child. This helps control the width and height of the iFrame to work for responsive layout.

http://npr.github.io/responsiveiframe/

Zedric Myers
Zedric Myers is a Web Designer for Beacon Technologies. After earning his degree in Advertising and Graphic Design, he spent 11 years with an advertising agency in Greensboro, NC where he was initially hired as a designer and transitioned to being a Web Developer.
By | 2017-07-25T13:21:34+00:00 July 25th, 2017|Web Development|Comments Off on Responsive iFrames

Google Custom Search 2017 Update

Google has provided an easy way to search your site, be it free or paid with custom search. The free version comes with Google ads that relate to your site, but not limited in other areas like other third-party search engines. If you have a tax-exempt business website according to Google’s guidelines, you have the option to turn off the ads.

You can customize the whole search experience and everything needed through the Google Custom Search engine site. It requires very minimal setup to your website with simple copy and paste code. With Google hosting the search engine, you don’t have to setup any background files or plugins on your own web server and maintain it.

It works well for search engine optimization and your website rankings, since it gives the ability to work with Google Analytics. You can see what people are searching for on your website to help improve or update it and get maximum results.

Check out the Google Custom Search.

NOTE: As of April 1st, 2017, Google discontinued the sales of Google Site Search, the paid version of Custom Search Engine. This product will be completely shut down by April 1st, 2018. This note does not affect Custom Search Engine.

Source: Google

Zedric Myers
Zedric Myers is a Web Designer for Beacon Technologies. After earning his degree in Advertising and Graphic Design, he spent 11 years with an advertising agency in Greensboro, NC where he was initially hired as a designer and transitioned to being a Web Developer.
By | 2017-07-25T15:57:06+00:00 July 20th, 2017|Web Development|Comments Off on Google Custom Search 2017 Update
Load More Posts