Almost everyone uses the internet. Browsing websites, purchasing products online, checking bank account balances, or just chatting with friends using social media, are activities that sighted people take for granted. But, how would you accomplish these tasks if you were blind?
Different Modalities
When a sighted person uses the web, they use their eyes to scan the page, and then make a decision where to click their mouse or where text needs to be input such as on a form. Buttons and links are easily discerned. For a blind person, navigating these simple tasks requires an extraordinary amount of time in comparison and relies on whether the website being used is in compliance with W3C (World Wide Web Consortium) and WebAIM (Web Accessibility In Mind) guidelines and international law. Continue reading Web Accessibility: Using the Web With No Eyesight→
WCAG is short for Web Content Accessibility Guidelines.
These guidelines were developed through the W3C process with a goal of providing a shared standard for web accessibility that meets the needs for every individual, organization, and government. It covers a wide range of recommended web content to make it easier to browse the internet for people with disabilities. Its success criteria is written as a testable statement that isn’t technology-specific.
How to Use It
WCAG addresses the shortcomings by defining what “accessible” content is and presenting guidelines in a way that it can be easily understood and adapted to new technology. Continue reading Web Accessibility: What is WCAG?→
Are you needing to revamp your WordPress site? Are you not the most tech savvy? I have found the perfect Plugin for you: Random Backgrounds. With this easy-to-use Plugin, your WordPress site will automatically change the background image each time your blog visitor clicks on a new Page or post. This can be used by just about anybody wanting to freshen up their site; whether it be Molly’s personal blog or Miss Fashionista’s Handbag website.
Here’s How it Works:
Search for Random Backgrounds in the Plugin Repository, download it, then activate it.
On your WordPress site, hover over “Appearance,” and click on “Random Backgrounds.” You’ll then see this page, where you can upload your own images, using the WordPress Media Uploader. The defaulted images are purposely unattractive, as to inspire a need to customize your own backgrounds.
Once you’ve uploaded your backgrounds, you can set them to either tile or stretch across the background. Click “Save Changes,” and take a look at your new changing backgrounds.
A Sample of my Random Backgrounds:
Random Backgrounds is very simple to install and use on your WordPress site. It enhances the professionalism of your site, which positively catches the attention of your visitors.
WordPress gives women a voice. WordPress gives women an opportunity to better integrate meaningful income-producing work into their family life. I especially enjoy helping young mothers grow a business out of their talents and passions.
WordPress supplies Artists of all kinds – from authors, musicians, and actors to painters, photographers, and sculptors – with a platform to showcase their work and preserve their memories. WordPress enables graphic designers to include complex functionality at an affordable price through the use of its vast assortment of Plugins. Cheri Calvert
The Interview
It was the first significant rain and wind storm this fall: Mother Nature was angry, and I had the greatest opportunity to meet with Cheri Calvert, Web Designer, Developer, and Artist, at her breathtaking Hayden Island work office. The wind was whipping my scarf around my face and rain pelted my glasses as I approached Cheri’s front door.
After a soft knock, Cheri opened the door; her friendly face appearing with a smile. She was so stylishly outfitted as well as accessorized with a beautiful black and silver scarf.
Andrea: Cheri, thank you so much for taking time out of your day to meet with me! This is such a pleasure, and your view is amazing!
Cheri’s home office view onto the Columbia River on an especially stormy day.
Andrea: How long have you been working with WordPress, and do you have any other experience with non-WordPress website design?
Cheri: I’ve worked with WordPress for the last 8 years, but I started out hand-coding an HTML site back in 2002. I purchased Adobe Suites shortly thereafter, and worked in DreamWeaver and Flash. I worked for a couple of years for a company that was a pioneer in the field of virtual tours. One of their contracts was to film and create virtual tours for all the Best Western properties in the US. One of my jobs in 2006 at VRNational was to research blogs along with some of the cutting edge virtual environments of Second Life. This was my first blog, still published on Blogspot (she said to me as she pulled the website up on her computer).
Andrea: Why do you prefer WordPress, and what is your favorite feature?
Cheri: I really like the WordPress culture; it was created to share. It is affordable: a platform for the people, not designed just for corporate elitists. It is a supportive International Community that works together to create something that is bigger than merely the sum of its parts. I once had a question that I posted within the WordPress Community, and a young man in Belgium responded to me immediately with a solution.
Andrea: How did you get into Web Design and Development?
Cheri: As the world changed, I felt I needed these new tools to effectively market my own artwork. I fell in love with the creative possibilities and loved the fact that I could keep all my messes tidily on a couple of hard drives. I foresaw the freedom it would give me to earn a higher hourly rate, work from just about anywhere, and make my own schedule. When the sun comes out and it’s a glorious day, I want to be able to take a “Sun-Day” off and go out and worship our amazing Earth! I’ve found that living in the Pacific Northwest, Mother Nature usually supplies me with sufficient inclement weather for me to make a living. When it’s rainy like this (as she indicates out the window), it’s perfect weather to cozy up to my computer.
Andrea: How do you go about generating new business?
Cheri: I have participated in BNI, networking groups, several Chambers of Commerce and done numerous pro bono work for non-profits. However, most of my work comes from Word of Mouth. Existing clients have recommended friends from across the country that I have never met. I think any group that you are consistently involved with creates a feeling of trust. If you let them know what you love doing, they will seek you out if that need arises for them. In the past few days, I have had four new projects come in. One is an Artist who just moved here from Hawaii and has seen some of the work I’ve done for our HOA. Another is an Actor who’s appeared on Law and Order and Grimm who is in my cardio class at the Marshall Center. Another is a single Mom who is growing her personal chef business. My daughter is her food photographer and recommended me.
Andrea: How do you deal with clients that are difficult or resistant to change?
Cheri: I just let them go. I know the relationship won’t work, and perhaps there’s someone who can better accommodate them.
Andrea: How do you make a website mobile-friendly?
Cheri: I let the Theme do the basic heavy-lifting and tweak it with a Child Theme’s custom CSS. To ensure compatibility on all mobile devices, I test them out on my Windows desktop, Apple Notebook, Tablet, and Android phone.
Cheri Calvert tests her sites with a Windows desktop, Apple Notebook, Tablet, and Android phone to ensure compatibility.
Andrea: How do you feel about Web Accessibility?
Cheri: In 2003, while working for Lewis-Clark State in Coeur d’Alene, Idaho, I had the opportunity to participate in a workshop introducing the importance of accessibility issues. Although the screen-reader technology was rather crude back then, it was a good tool to help understand how information would be extracted for the visually impaired.
Andrea: What would you change about WordPress?
Cheri: Nothing. I can’t think of anything I’d want to change.
Andrea: It seems that this line of work requires constant education to keep up with all the upgrades. How do you go about continuing your knowledge?
Cheri: WordPress Meetup Groups, WordCamp, Online User Groups, solving problems through researching. When things don’t work, I try to look at it as a game. I’m “Cherlock” Holmes, searching for clues to solve the mystery. When something breaks, it is oftentimes trying to determine what is different. Sometimes I find that it’s just a comma in the code…
Andrea: What do you enjoy most about your career?
Cheri: Flexibility. Plus, there’s always something new to learn! I am an introvert (meaning that groups of people drain my energy). I need solitude, like a nutrient, to keep me balanced. Web Development gives me a voice and allows me to connect with the world from the comfort of my own office!
Andrea: Do you have any advice for those who are pursuing the same line of work?
Cheri: You’ve got to love it!
Cheri’s Story
Cheri is not just a Web Designer/Developer, but she has also worn many, many hats. She went from processing crab in the Aleutian Islands in the 70’s to Head of Wardrobe for Bobby Vinton and the Glen Miller Orchestra at the Blue Velvet Theatre in the 80’s, and spending the majority of her time as a self-employed artist.
She had her own line of sheepskin outerwear and hand-laced deerskin clothing. Cheri used the scraps to create hand-sculpted dolls, with faces made of deerskin. These dolls were featured on the cover of Better Homes & Gardens and Early American Life. She sold these little dolls, as well as elves and Santas, while featuring them in illustrated booklets.
In the 90’s Cheri developed her own line of hemp clothing called the Cannabis Collection. She created beautiful clothing and bridal gowns, all made of hemp.
Cheri continues to play with the creative features of WordPress, which fits well with her Artist clientele. Her current favorite Theme is Elegant Themes DIVI to create fun special effects and layouts. One of the biggest joys of her career is being able to help promote her fellow creative-types and their work.
Do you like Time Travel? Do you also like saving your work files? Well now you can do both at the same time by using Git to save your files while keeping track of each change, to each file along the way. Once you’ve saved (committed) a file in the project, the old version is saved forever allowing you to travel back through time to make changes or revert back to old files when needed.
Imagine your just uploaded your beautiful new custom theme to your WordPress site and you realize that you forgot to save your old CSS file and you’ve just overwritten the old one on your web server. You now have no way to revert back to your latest version of the old layout in case you have problems with browser compatibility in the new layout.
Git is a very powerful version control system that allows you to keep track of all your files during a project so losing file version along the way will never happen. This requires a few extra steps during your saving process, but it has saved the skins of many programmers from all over the world every day. Now, we should all try to save backups of our projects and files to protect from data loss and keeping old versions. Git takes that idea but saves each version of that file since it was created. It also protects someone from editing a file at the same time someone else is, preventing overwriting of each others new version.
Let’s take a look at the Git structure to get a clear picture of how the system checks out and references each file.
Git file reference structure
This table shows us how Git associates each file to the master project. Each time a change is made, a “snapshot” of the entire file structure is made. This allows us to see our project in front of us, while old versions are saved and hidden from view unless we physically use our time travel capability to revert. Additionally, if no changes were made to a file in a new commit, the old version will automatically be referenced instead of uploading the unchanged file into the project commit. These basic features are why Git is so powerful and efficient, that might explain why 42.9% of professional software developers reporting that they use Git as their primary content version control system.
To learn more about Git the features and the benefits, please refer to these links from which this article was sourced.
By default, WordPress Themes provide a variety of post types. They always include Post, Page, Attachment, Revision and Nav Menus. Depending on a website design objectives, themes may also include the more specialized Portfolio, Testimonials and Products post types. In Adelina Tuca’s post on September 15, 2015 on Tesla Themes, she reminds us to consider the flexibility available in using Custom Post Types.
Custom post types are awesome. Because they let you add amazing things on your website, things that, in most cases, make the difference between an ordinary website and a well crafted one.
Being a skilled web developer is not necessarily required. While Adelina confirms the coding to create a Custom Post Type can be very challenging, WordPress Plugins are available to simplify the process.
When considering unique design objectives, get out of the box and use Custom Post Types to build extraordinary websites.
When you decrease the file size for images before you insert them, uploads and pages will load faster. – WordPress.com
It is important to optimize your images before using them on your WordPress site. The benefits of optimization would include better quality images, faster loading times, efficient data usage, and accessibility; while making the site’s images more attractive overall. For some users with smaller images, it will be significant enough to upload an image and choose from the WordPress default sizes allocated. Images that are set to display as a thumbnail, it doesn’t compress the image. That’s why it’s always better to optimize your images before uploading them.
Optimization is achievable by using photo editing software such as Photoshop. It’s imperative that you don’t take images from your camera and upload them immediately to the web, as images that come from your camera are set for print rather than web. – Visit abrightclearweb.com for more information
Software Recommendations
You can use a slew of programs to edit your photos such as Photoshop, Lightroom, and Paint Shop Pro. Unfortunately these are paid or subscription software programs, so below is a list of free software recommendations.
If you upload an image that is 1080 x 720px and set it to a thumbnail, it will still take just as long to load as if it was set to full size.
The following image was uploaded to WordPress in full size. (1080 x 720px) The file size is 924.9k which takes 168 seconds to load just this image at 56.6 kbps.
This image was re-sized in Photoshop to the same size as allocated by the large image option in WordPress. It is 156.3 kb which takes 29 seconds to load at 56.6 kbps.
Image Formats
The following image formats are supported by WordPress functionality.
JPG – This image format works well when displaying an image with a lot of detail or a photograph.
GIF – Used when an image needs transparency and logos, line art, and illustrations with type. GIF however, only supports 8 and 16 bits of color.
PNG – Also is used when transparency in an image is needed but supports more color than a GIF file. PNG images are larger so attempt to use the GIF file format first to see if it works for your image.
The GNU General Public License (GNU GPL or GPL) is the most widely used free software license, which guarantees end users (individuals, organizations, companies) the freedoms to run, study, share (copy), and modify the software. Wikipedia – GNU General Public License
The usage of a GPL can actually be beneficial to both the developer and the client, as Josh Pollock outlines in his article published in Torque Magazine. Josh explains that as you develop a library, after creating numerous software solutions for various clients, it will become extremely beneficial for you to reuse some of that code. This is how the GPL can help the developer, and especially a WordPress developer who is making either a theme or Plugin that they hope multiple clients will use in the future. However, the client will also be concerned about liability, in the usage of the code you have written for them, as well as their ability to hire another developer, should they want to expand the software later. This is how GPL can benefit the client.
Sounds like Socialism
While it may sound like a “hippie-commune” mentality when you say that you want to open your work so that it may be taken and used by others, but as the statistics show, most developers prefer the GNU GPL license. Just look at the rankings for the license market share for the SAAS community:
So why are developers okay with their work being open to be used by others? Well, the simplest way to say it is that coding is an impossible feat for any one person, regardless of the time invested. In a way, coding anything requires that you have a large amount of work already completed that gives you a framework to build around. And this required framework is enormous. If coders didn’t share their work, we wouldn’t have the majority of the code-dependent technologies that we enjoy today. It would be like a car-manufacturer having their cars built one at a time, with only one person working on each car. Making the paint from base-materials, smelting the metals, hand-tooling the custom parts. It would be an unsustainable system.
The Better Road
So in the end, the GPL not only provides peace-of-mind and freedom for the client, but it also protects the developer and ensures that they can focus on the client’s specific needs, instead of reinventing the wheel every time. And when a developer solves a problem for a client and licenses it under the GPL, they are in a sense, solving the problem for everyone in the future that requires that particular solution.
The web has an immense amount of work to accomplish in it’s future, and The GPL is just one facet that we as society need to utilize, if we are to get it all done in a timely manner. If you’d like some more information about the GPL and what is involved in its rules, head over the official GNU GPL page to read the actual license for yourself. Over there they will go into more detail about the limits and rulings of the license.
Web accessibility refers to the inclusive practice of removing barriers that prevent interaction with, or access to websites, by people with disabilities. When sites are correctly designed, developed and edited, all users have equal access to information and functionality. Web Accessibility – Wikipedia
The best reason for building an accessible website is that it is “the absolute right thing to do!” Not only that, but it also comes stocked with other important advantages, among them legal protection, cost savings and marketing potential.
The United States has accessibility laws governing websites funded by the federal government, non-profits, and other public access business sites, while many other counties have established web accessibility laws for a much broader scope.
When you develop a website, consider website accessibility as part of the initial development. The cost of styling is nominal at the beginning of a project, but the the price of going through the entire site to identify and fix the past problems can be very costly. Continue reading How to Test a Site for Web Accessibility→
Do you know who Tim Berners-Lee is? If the name sounds familiar it’s because you probably heard the name before. He created the World Wide Web (WWW) and is founder of the World Wide Web Consortium (W3C), an organization that develops technological standards for the Web. He is committed to the ideal that the internet should be available to anyone, anywhere in the world, on any type of machine that has an internet connection.
This includes people with different technology resources, rural users or even people with disabilities which is estimated to be about 1 billion people worldwide.
The work of standards organizations help us identify what barriers people face when using the Web. There’s a plethora of information on what Web Accessibility is and what barriers there was to users on the Web. To remove these barriers we must first define what they are. I will focus on three main points that generally define what they are for all users.
Perceivable: The interface and the information on a Web Page must be presented in ways that are perceivable.
Operable: The navigation components and interface must be usable.
Understandable: The user interface and information must be understandable.
Robust: The underlying code and programming is robust, adaptable, and secure.
Along with these main points, there are also four main disabilities that can affect access to the web.
Visual
Text Magnification hardware/software
Relative font sizes
Use of proper CSS
Small or poor contrast text
Color identifying information
Mobility
Limited mobility devices
Mouse typically not an option
Cognitive
Learning disabilities benefit from well designed and organized pages
Auditory
Multimedia barriers to users hard or hearing or deaf
Example
Here is an example of ways to design your image ALT text to remove barriers to disabled users when using screen readers.
Because screen readers cannot interpret the content of images on a web page, the use of “ALT” text helps describe in words to the user what the image content is. Taking the time to accurately describe an image content will greatly help the Accessibility on your site.
If an image is a…
The ALT Text should…
Chart or Illustration
Summarize and explain
Photo or work of art
Describe the image’s content
Graphic or button with text
Be the same as the image’s text
Functional icon without text
Describe the action to be taken
Background or other decoration
Contain an empty space (” “)
Although, ALT Text is meant to be short and concise, when longer descriptions are used to explain or describe an image it can be very helpful in breaking down the Web Accessibility barriers to users on your site.
Standards in Accessibility on the Web
As the we move forward in developing web standards and adhering to those standards, we help define what barriers users experience in terms of Accessibility when using the World Wide Web. Organizations helping pave the way for these standards are helping remove barriers to users across the world by evaluating the needs of users from all demographics.
For more information on related articles and resources used in this article:
As of April 2012, 53% of American adults ages 65 and older use the internet or email. Though these adults are still less likely than all other age groups to use the internet, the latest data represent the first time that half of seniors are going online. After several years of very little growth among this group, these gains are significant. Pew Research Center
Within that 53% of American adults of at least 65 years of age, 70% use the Internet on a daily basis.
Since these statistics were recorded in 2012, it is believed that the numbers have risen significantly. It is important for web designers and developers to factor this information into their designs to cater to this group of regular Internet users in these ways:
Text Size
Select a larger font and allow the text to be resized up to 200% by the user without creating an issue with the function of the website.
Legible Text Style & Layout
Create a site that is easy to read by selecting a legible font, spacing your lines accordingly, and keeping your lines short.
Contrast & Color
While some color and contrast looks great to young eyes, older eyes can lose the ability to see text on a high-contrast page. At a minimum, your contrast ratio should be 4.5:1 with the involvement of images and text.
Multimedia
With older adults, eyesight and/or hearing can rapidly decrease. By offering multimedia with subtitle options as well as visual and audible, your website visitor will be able to enjoy the presentation.
Text-to-Speech
Some elderly people rely upon speech synthesis software when browsing websites. To make your website accessible, you’ll want to use more text instead of images, especially on call-to-action buttons.
CAPTCHA
Completely Automated Public Turing tests are used to decipher a live human user, as opposed to a machine spammer by requiring the user to type in the displayed text. As you can see below, the text is very difficult to read, even for those who do not suffer from vision impairments.
It is suggested to offer an audible version of CAPTCHA as a second option, but the user may have difficulties enabling the audio on their computers or have a hard time hearing it if enabled. Removing CAPTCHA from your site altogether is a much better solution, as it doesn’t deter spammers.
Links
Due to visual impairments and difficulty with mouse usage, links need to be created over more than two words, as well as providing alternative text that indicates the destination of the link. Links must be underlined and have other visual indications.
Keyboard Use
Many people aren’t able to use a mouse and rely open only utilizing a keyboard. Always allow your site to be functional by the use of keyboard navigation without a mouse. Also, it is important to allow the tab function to move onto different cells within an online form.
Distractions
It is imperative to provide the ability to pause, mute, or stop movement and sound within a website to avoid distractions from the web experience. People may not always want to watch a video on a website, but would just prefer to quietly read the article around it.
Use of Forms & Instructions/Time Limits
Sometimes websites have time limits to complete a form for a transaction; if the time limit is reached, the website will time out and the user will have to start from the beginning. Older people may have a difficult time understanding how to fill out forms to complete the transaction. Does your form require a time limit? If so, it needs to be increased.
Out of Date Software
Not everyone is going to have up to date web browsers and new computers, so your site needs to be as compatible as possible with older software. A warning message indicating that the visitor must download a newer version of a web browser will most likely result in frustration and website abandonment.
When designing websites it is imperative to follow the necessary standards to design a site that is safe for those who suffer from photosensitive epilepsy or other seizures.
Photosensitive epilepsy is a form of epilepsy in which seizures are triggered by visual stimuli that form patterns in time or space, such as flashing lights, bold, regular patterns, or regular moving patterns.
HTML5 has improved greatly over the years. One of its biggest successes was trying to make the World Wide Web more accessible by moving in a more semantic direction. It introduced several new semantic elements such as: <section>, <article>, <aside>, <hgroup>, <header>, <h1> through <h6> level headings, <footer>, and <address>. While these new elements are great, they don’t actually do anything.
They crack the door open slightly to provide value to assistive technologies that can expand upon the elements through programming. These new elements have been made standards by W3’s Consortium. While these are made standards, not everyone is required by law to follow them. The biggest problem with HTML5 and its accessibility features is the compatibility of the browsers that interpret the markup. Most development companies follow these standards but they are free to take their own direction when building a browser.
Accessibility and Compatibility
HTML5 has great accessibility features but there are still some issues. Because HTML5 is constantly evolving, it makes it difficult in the development stages. Here are some of the current issues:
Competing video formats are making HTML5 based video playback almost impossible to implement
Inconsistencies between web browsers
The heading structure is not useful in assistive devices
Interpretation and support among technology products
One of the top browsers that has kept current with the evolution of HTML5 is Mozilla’s Firefox. This screen shot shows which major browsers support HTML5 accessibility attribute features:
The ARIA
Every developer and designer should ensure their website covers as many disabilities as possible to provide users with a rich accessible experience. That’s where ARIA (Accessible Rich Internet Applications) or WAI-ARIA comes into play. ARIA defines the roles, names, descriptions, values, and states of objects to help assistive technologies, such as screen readers to better understand the information laid out on the page.
ARIA When and How
ARIA has a wide range of accessibility elements. For that reason we will only be covering a few examples in this section. The elements that will be explained are better known as the “Landmark Roles.”
The document Role
The document role helps assistive technologies switch from normal browsing mode into a mode more suitable for interacting with web documents. Most webpages are considered a document because you often read them, while a document role still supports users to have interactions. This is often inserted into the body element.
<body role="document">...</body>
The banner Role
The banner role should only be used once within the html markup. It is usually used within the top of the page in the <header> or any element that contains the prime heading or in-page title of the site.
<header role="banner">...</header>
The complementary Role
The complementary role is generally used in the <aside> or sidebar section of the HTML document. The complementary role element lets assistive technologies know that whatever is inside this area, it is complementary to the main content.
<aside role="complementary">...</aside>
The contentinfo Role
The contentinfo role is used within the area that contains copyrights and links to privacy statement information. It is generally used in the <footer> element of your markup.
<footer role="complementary">...</footer>
The form Role
The form role is used by a screen reader to let users know that they can fill out a form. On some screen readers, users have quick keys to direct them to this sections of the page quickly. There is a lot more that goes into forms and it is recommended that you read the help documentation provided by W3.
<form role="form">...</form>
The main Role
The main role in ARIA is better explained as the most important element for screen readers and users alike. It is essentially used a link to “Skip to the main content”. It helps users know that this is what they are essentially looking for on a page.
<section role="main">...</section>
The navigation Role
The navigation role element is used in the navigation or <nav> element. The most important thing for any website is to be able to clearly navigate it. The navigation role tells screen readers that this is your navigational links.
<nav role="navigation">...</nav>
The search Role
The search role tells assistive technologies that users can search the website through this section. It is often used in a text input field labeled with role search.
Dyslexia is a learning disability that affects 3-7% of the population, and up to 20% may have some degree of the symptoms. It is not an intelligence problem, but considered a cognitive disorder that primarily affects learning, memory, perception, and problem solving. Specifically, it impairs a person’s ability to read. As web designers, we need to be aware of the design choices we make so we don’t make it harder for people with dyslexia to read a website.
Dyslexia Design Decisions
When making design choices we need to consider the needs of the following two groups:
Dyslexic people who use computer speech output technology: Like many visually-impaired users, many dyslexics now rely on computers to read the text to them. Thus pages should be designed to be compatible with most screen readers. All important information should be conveyed in text, as computers can not read or interpret graphic images.
Dyslexics who need clear graphics and distortion-free text: Other dyslexic individuals, who are reading your site on their own, will appreciate clear, simple, and consistent graphic navigational icons. They will be troubled by flashing text, variations in fonts, distracting sounds or animations, and textured or patterned backgrounds. Dyslexia
WCAG is short for Web Content Accessibility Guidelines.
ClarkWP WordPress Magazine 