Programming Archives - Go Fish Digital

Universal Web Design: A Guide to WCAG Compliance

Alison Iddings — Thu, 06 Aug 2020 14:00:11 +0000

Universal Design for the Web

Accessibility is an extremely important yet often overlooked component of web design and development. Many companies don’t think about the importance of Universal Web Design until they are troubleshooting client issues or facing a potentially costly lawsuit. I have put together this quick start guide to help companies understand their compliance needs as well as simple guidelines on how to accomplish them.

What is Universal Web Design

Universal Web Design is intended to ensure information and communication technology (ICT) can be accessed, understood, and used to the greatest extent possible by all people regardless of their disability. The primary international standards for the World Wide Web and its accessibility are set by the World Wide Web Consortium (W3C), who have created the Web Content Accessibility Guidelines (WCAG 2.0 & 2.1).

Related Content:

In the United States, Section 508 of the Rehabilitation Act of 1973 covers accessibility requirements. The Section 508 guidelines reference the WCAG and require the specific techniques within for compliance.

Who needs to be compliant with the WCAG?

All organizations, Federal and State agencies, and educational institutions should follow the WCAG. In the United States, federal agencies and their contractors are required to conform with WCAG 2.0 (A & AA). Many other countries and international organizations also require compliance with WCAG 2.0 or 2.1.

Levels of Compliance

The Web Content Accessibility Guidelines (WCAG) are categorized into three levels of compliance:

A – the minimum level of conformance
AA – the typical level of conformance required (includes A requirements)
AAA – the highest level of conformance (includes A & AA requirements)

Getting Started with WCAG Compliance

Many of us have developed bad compliance habits without realizing the consequences of our choices. I, for one, have been guilty of hiding the outline on the :focus indicator in the past as I found it unpleasant from a design perspective. I have put together the following list of recommendations to help prevent designers and developers from making similar mistakes.

Guidelines for Universal Web Design & Development

Always have alt text for visual elements
Orient content in a meaningful sequence with appropriate heading tags for each section
Use HTML rather than CSS when adding emphasis to text (ex. )

Use valid autocomplete attributes which correspond to the label on input fields

Use visual elements, such as underline or icon, to signify a link or use a change in contrast of 3:1 or greater

Use visual elements, such as underline or asterisk (*), to signify an error in a form

Use a text contrast ratio of at least 4.5:1 to meet AA standards

Use a text contrast ratio of 7:1 or more whenever possible to meet AAA standards

Ensure all text can be zoomed up to 200%

Use em units, named font sizes, or percentages for font sizes

Make all elements of your website responsive

Ensure visual elements have a contrast ratio of at least 3:1 to meet AA standards

Ensure your website can be navigated via keyboard only

Provide options for users to pause scrolling or automatic content

Provide more than one way to navigate to each web page whenever possible

Use techniques to show the user’s current location within your website such as:

Breadcrumbs

Site Map

Visual cues in navigation

Titles to indicate parent pages

Specify language attribute in HTML (ex. )

Common WCAG Compliance Mistakes

Avoid these common mistakes to maintain universal design during your development process:

Do not use CSS to create “headings.” Always use the HTML tags (ex.
)

Do not use CSS to add non-decorative images

Do not use :before or :after for non-decorative content

Do not lock orientation to either portrait or landscape view

Do not use color alone to signify a link or to show an error in a form

Do not allow text to become unreadable while viewed at 200%:

Avoid setting overflow to hidden on absolute elements

Avoid creating popups or modals with limited height properties and no scroll

Avoid adding height properties to paragraphs

Do not use images for text (unless it’s a logo or purely decorative)

Do not use CSS to turn off the visual focus indicator (ex. :focus {outline: none})

Do not set time limits on user interaction

Do not add anything that flashes more than three times in any one second period

View the How to Meet WCAG (Quick Reference) for more information.

If you are using video, audio, pdfs, gestures (swipe, pinch to zoom, etc.) or have other additional components to your site, read more on compliance at w3.org.

Need to know which disabilities may be impacted by non-conformance? Click here for a helpful chart.

Tools for Universal Design & Compliance:

Contrast Checker with Recommendations

Markup Validation

Accessibility Developer Tools (Chrome Extension which can be viewed via the inspector)

Create Universal Color Pallets

Resources for Designers

Resources for Developers

Universal Web Design: A Guide to WCAG Compliance is an original blog post first published on Go Fish Digital.

I’m Considered “Non-Technical” – Should I Learn How to Code?

Ben Shepherd — Fri, 10 May 2019 12:00:16 +0000

Yes!

I get a lot of questions from coworkers, friends, and family about how and why I learned to code. I did not complete a Computer Science degree in college, my job title does not contain “Developer”, and many would consider my role to be a “Non-Technical” one. Yet, I invested significant time and effort and learned to code and manage infrastructure and data both on my own computer and in cloud platforms. I have come to believe that every person, in almost every position, can benefit from coding and understanding data. What follows are the tenants that have helped me come to this understanding.

Related Content:

Custom Website Development Services

Custom WordPress Development Services

Custom Shopify Web Development Services

Coding is about making decisions.

When you think about it, a computer’s main job is to help us make decisions. Many people who have never learned programming have trouble understanding this fact because they see a computer as an unfeeling blank slate, and they find that it’s an impediment. I would argue that a computer is the opposite of that. Writing code allows us to instill exactly what we want into the decision-making process by including data, excluding outliers, and creating or eliminating bias. The blank slate that a computer represents is actually the perfect starting point to help you create and organize logic.

Along with that, computers help us make decisions incredibly fast (when you can translate your desires into the language they understand.) Think about some decisions you make every day:

Who should I assign this task to?

When do I need to leave to make the train on time?

How effective is my team?

Coding effectively translates these types of questions into language the computer can understand. With the computer’s help, you can resolve those decisions millions of times per second. This allows you to answer important questions more completely than you could with your own intuition, freeing up your time for other tasks. Coding is about organizing logic, and it is one of the best ways we have to make you better at being you.

Coding can solve your repeatable tasks.

Computers are good at making a lot of decisions really quickly, especially when they have identical or similar decision-making criteria. Indeed, this is the exact area where we as humans start to feel stress and burnout. We are often faced with a mountain of work that is mostly similar, but just different enough that we have to invest significant amounts of effort to make the decisions required to complete it.

The key to coding is that when you can define your logic in a programming language, you only ever have to do it once. Once the task is defined, the action of carrying it out is infinitely repeatable. When we can automate this mostly repeatable work away, we can focus on more important things that don’t fit this paradigm. Some examples:

Data Analysis, Excel Sheets, Pivot Tables, Summarization

Categorization, Tagging, Labeling

Copying, Storing, Uploading, Downloading

Modifying, Reformatting, Transforming

I’ll bet that everyone reading that can relate at least one of those topics to the work they do every day. Imagine if you could step back and take a look at the bigger picture instead of worrying about the minutiae. This is what coding allows you to do.

Coding trades one-time effort for indefinite benefit.

We have this irrational feeling that the effort we put into our work is what defines its quality. The painful truth is that the only thing that defines the quality of our work is how it is perceived by others. Pulling an all-nighter is pretty meaningless if what you deliver doesn’t solve your problem. Coding allows you to redefine how you value work. Effort is a subjective metric that you can really only attribute to yourself. Time, however, is an objective commodity that you can’t trade, you can’t get back, and everyone experiences exactly the same.

When I started to think about the work I did in terms of how much time it would save, and not how much effort would be expended, I realized that programming is often the most efficient way to trade one for the other. I put in a tremendous effort to learn how to program and how to apply it to the work I do both at my job and at home. Because I put in the time to learn something that has a lot of inherent value, I now have much more time to pursue the things I like to do than I ever would have if I had left those tasks un-automated. I traded one-time effort for repeatable saved time. I’ve always identified with this quote often attributed to Bill Gates (but probably not):

I will always choose a lazy person to do a difficult job because a lazy person will find an easy way to do it.

Conclusion

I’ve found that “Non-Technical” is sort of an oxymoron because, in my experience, people in the least technical positions can often influence their job performance the most with the use of technology. The bottom line is this: your job title does not define you. Your ability to achieve results most certainly does. I’ve learned that understanding programming has made me undeniably better at achieving results, which has, in turn, lead to me achieving better results than I ever could have without it. I wholeheartedly recommend that everyone give programming a shot.

I’m Considered “Non-Technical” – Should I Learn How to Code? is an original blog post first published on Go Fish Digital.