Zedric Myers

About 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.

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

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

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

CMS Super Powers: Top 5 Underused Features in Cascade

Superheroes possess super powers that enable them to do the unimaginable with speed and precision. Similarly, the Cascade Server CMS enables it’s users to do things that other content management systems cannot. In both cases, these unique, underused or underappreciated features warrant further examination.

Accordingly, I’ve created a list of Cascade Server “super powers”. These features that are often overlooked but can give unworldly abilities to the Cascade users who possess them.

Personalized Dashboards

Judge performance at a glance thanks to a dashboard with widgets that can be re-arranged and/or removed to suit your informational needs. Your dashboard can include Google Analytics performance metrics, too. Within this dashboard, you can view Pageviews and Unique Visitors without having to enter a GA account. There are widgets for History and a Link Checker, New and Stale Content, just to name a few. Many of the features below can be reviewed through Cascade’s personalized dashboard.

Superhero equivalent: Arm Fall Off Boy (DC Comics). A superhero from the 30th century, Arm Fall Off Boy can rearrange and/or remove his arms. He can even use them as weapons. Never has there been a more malleable superhero. Kinda like our dashboard.

Stale Content

Within hundreds of website pages, it is so easy to lose track of old content that requires updating. Located under the dashboard, the stale content feature enables one to find stale content and change it so as to ensure a better user experience. The administrator can set defaults that specify folder, time lapse, etc.

Superhero equivalent: Diaper Man (Terrytoons). An animated superhero conceived by legendary animator Ralph Bakshi, this superhero uses his bottle to bludgeon bad guys into submission. He’ll never grow old, much like your website content if you’re in Cascade.

Content Review

With the Content Review feature, one can send new content to a colleague for review in advance of the scheduled publish date. An email goes out to the specified party while the article is still in draft. The recipient just clicks the link, reads, reviews and responds. Catastrophe avoided.

Superhero equivalent: Doorman. (Marvel Comics). Doorman is a living portal. However, he can only travel to adjacent rooms. If you need to reach your colleague in the office next door, then he’s your man.

Remove Formatting

This feature is part of the Cascade WYSIWYG. MS Word doesn’t translate well into HTML, yet many people prefer to do their drafts in this format. Remove Formatting to the rescue! With a click of a button, it translates any out of date or inaccurate code into the correct HTML code.

Superhero equivalent: Type Face (Marvel Comics). With his sidekick SpellCheck, Type Face defeats the bad guys by hurling letters a them. He’s a living, breathing WYSIWYG.

Saved History

Your entire session history is saved so you can easily navigate from one page to another, edit and migrate content. History is saved between logins so you can easily pick up where you left off before you were so rudely interrupted by whatever super-villains lurk within your office space.

Superhero equivalent: Martian Manhunter (DC Comics). An original member of the Justice League of America, Martian Manhunter had an eidetic memory.

As a long standing partner of Hannon Hill, we’ve got more experience with the Cascade CMS than just about anyone. If you’re searching for a content management solution and want to talk about what Beacon and Cascade Server can do for you and your organization, feel free to contact me with your questions or comments. If it’s urgent, pick up the phone and call one of our Cascade experts at 855.447.8276.

And remember. With great power comes even greater responsibility.

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-28T09:30:55+00:00 August 29th, 2017|Cascade CMS|Comments Off on CMS Super Powers: Top 5 Underused Features in Cascade

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-08-02T14:00:38+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

How to add an AccuWeather Current Weather Widget to your Website

You can easily install a current weather widget by going to the link below and following the instructions. https://www.accuweather.com/en/free-weather-widgets/current

AccuWeather Widget

Source: AccuWeather

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-11T10:36:37+00:00 July 11th, 2017|Web Development|Comments Off on How to add an AccuWeather Current Weather Widget to your Website

CSS Equal Height Columns Without Javascript

Here are two CSS options for equal height columns, without using javascript.

1. Using CSS Table Properties

HTML

CSS

Source: W3schools

2. Using Margin and Padding Method

HTML

CSS

Source: Call Me Nick

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-06-20T09:31:16+00:00 June 20th, 2017|Web Development|Comments Off on CSS Equal Height Columns Without Javascript
Load More Posts