Select Page
2022 SkillsUSA Web Design Contest Recap

2022 SkillsUSA Web Design Contest Recap

Our organization was proud to help facilitate the web design contest at the national SkillsUSA competition in Atlanta, GA from June 19-24, 2022.  Our team arrived on Sunday, set up Monday and Tuesday, and ran the high school competition on Wednesday and post-secondary competition on Thursday. We also organized a Thursday evening debrief and meet and greet with industry professionals and participated in the overall awards ceremony on Friday evening. We would like to thank all our team members for using their vacation time to support SkillsUSA and the web design contest. 

This year, the web design contest teams were greeted with messages in Spanish, German, Chinese, French and Arabic from our international members. One of the benefits of our organization is that our community is made up of members from all over the world, and our international experience and membership helps to craft the real-world challenges that our competition delivers. We are about helping to create and support whole professionals ready to work both domestically and internationally—especially in this age of remote work. 

The Contest

The competition was held at the Georgia World Congress Center, and the competitors were teams of two from different states in the country. The teams were tasked with creating websites for clients, all while completing specific tasks in the process to demonstrate web design proficiency. 

We were able to utilize the online technologies we developed in 2020 and 2021 when we ran the contest fully online due to COVID-19. This design allowed all competitors on-site to participate—whether they had a laptop, PC, Mac, or Chromebook. All tools were available online and were the same for each of the teams. This meant the teams could focus on listening to and meeting the client’s needs, fundamentals and creativity to win the day. Our new system allowed us to judge all the competitors’ work online, which improved the efficiency of judging the final products that the teams designed. 

It should be pointed out that this competition is far more than just a competitive challenge. We at Web Professionals Global, which started the competition in 2004, brought our mission of “Community, Education and Certification” to the competition. Our community of professionals developed the competition challenges and judged the work of each team. We also provided training before the event to help give the competitors the chance to learn about trends in the industry and more about what it takes to be competitive in this in-demand and high-paying career pathway.  

Just like in the real-world, each team met with the client whom they were building the website for. This provided the competitors with a real-world environment to get a taste of what it is like to work as a web design professional. After the event, we held a Q&A event with the web design professionals who had been part of the judging team. This was an opportunity for the teams to hear from professional web designers about personal experiences, how to get started, the ups and downs of the career pathway, day-to-day experiences on the job, and how to set themselves apart and on the path of success. 

To learn more about Web Professionals Global or the SkillsUSA competition, contact us today. We would love to chat with you.

Jonathan, the client, holding a meeting with all of the competitors Wednesday morning at the beginning of the event. 

David Jackson and Bryce Hickson, web designers and lead judges, speaking to the high school and post-secondary competitors in the competition debrief on Thursday.

The competitors chatting with David and Bryce after the debrief.

Mark DuBois, Executive Director, Web Professionals Global, handing out awards at the ceremony on Friday night.

 

 

The Importance of Web Accessibility

The Importance of Web Accessibility

Web accessibility is the practice of making websites and web tools accessible to as many people as possible, and it is rapidly growing in importance in the world of web design and development. The web levels the playing field for people from all different walks of life and removes barriers for people who may have disabilities and struggle in one way or another in the physical world. 

With more people than ever working and learning from home, it is important to make sure websites and web tools are properly designed so that no user is left out. Poor website and web tool design can limit accessibility, often unintentionally. It is up to web designers and developers to ensure the products and services they offer can be easily utilized by everyone.

In addition to supporting people with disabilities, accessibility can include other groups that are often marginalized such as populations in rural areas, populations in developing countries, and older populations. Additionally, improving accessibility is a good business decision as it improves the overall user experience for all users. An increased focus on accessibility can spearhead new product and service offerings as well as expand market share. Once accessibility becomes a priority for you and your organization, it will become an integral part of the design process.

web accessibility

Let’s take a look at some of the most common disabilities, and how smart design can make the web accessible for all.

Cognitive impairments

This group includes people with a wide range of disabilities including learning disabilities and mental illness. The most common issues this group has when using the web are difficulties understanding content on websites and how to navigate complex web page layouts. To help this group, designers can focus on making easily understood content by delivering the content in more than one way, such as text, video, and text-to-speech. Maintaining a consistent web page layout and making forms easy to understand and submit are other ways to ensure accessibility for this group.

Mobility impairments

This group includes people with different disabilities ranging from physical impairments to neurological conditions. Disabilities include difficulties moving a mouse around on the computer screen and conditions that require assistive technologies such as speech recognition. Designing a website that can be fully navigated with just a keyboard can go a long way toward meeting the needs of this group.

Visual impairments

This group includes people with blindness, limited vision and color blindness. To help this group, it is important to include tools with zoom capabilities for websites and web tools. It is also helpful to include screen readers so that users can opt to have the text on the site read aloud to them. 

Hearing impairments

This group includes people who are completely deaf or partially hard of hearing. To keep websites accessible for people in this group, make sure all audio content is transcribed and all video content has closed captioning easily available. 

Designers and organizations often publish accessibility statements on their websites to provide an overview of accessibility policies and what steps have been taken to improve in this area. This can be a good way to be transparent, and it is also an opportunity to solicit feedback from users about areas for improvement.

The World Health Organization states that over 1 billion people—15% of the global population—have a disability. By not incorporating accessibility into websites and web tools, designers and organizations miss out on a massive number of people who might otherwise be potential users. Accessibility in web design is the right thing to do, makes the experience better for all users, and can help businesses grow worldwide. For more information on web accessibility, contact us today.

Read More: Taking a Look at Cybersecurity

 

May, 2021 Desktop View

Note from Mark. I plan to periodically provide article summaries and insights. I am hoping this will happen once each month. Hope is the operative word. Here are my thoughts as we begin May, 2021. I welcome your comments about additional topics you would find helpful as well as your thoughts about these articles. I found them most interesting/ thought provoking.

Accessibility

Using Modern CSS to Improve Accessibility. This article by Stephanie Eckles provides a quick overview of what it means to have an accessible website. Stephanie then covers using some of the newer CSS to enhance accessibility. This includes use of outline-offset to position the outline away from the element. The focus-visible pseudo-class will display an outline only when the user agent determines it needs to be visible. There is so much more in this article, I encourage you to set aside time to read it in its entirety and digest how these CSS features can be used to solve real world accessibility issues.

A.I.

GPT-3 is a language supermodel which is quietly ushering in the A.I. revolution. This article by Luke Dormehl explains why this text generating algorithm makes a difference. The main difference with prior algorithms is that limited training is required. In the past, significant input was required for A.I. to “learn.” This no longer seems to be needed. Think. About. That. Here is a key quote from the article (it certainly resonated with me).

“Machine learning has been transformative in all sorts of ways over the past couple of decades. But machine learning requires a large number of training examples to be able to output correct answers. GPT-3, on the other hand, has a “few shot ability” that allows it to be taught to do something with only a small handful of examples.”

Ok, Mark, what does all this A.I. have to do with Web design and development? One example mentioned in the article is a layout generator which”renders a functional layout by generating JavaScript code from a simple text description.” Another example is a GPT-3 based search engine. I think you will find this article most interesting and informative. Our industry is changing and A.I. is going to have a major impact. Plan accordingly.

FLoC

Federated Learning of Cohorts is Google’s replacement for tracking cookies. Our advisory board member, Deborah Edwards-Orono, has a great article about this effort and her concerns. Simply put, FLoc is included by default in the new version of the Chrome browser [see our recent post on the popularity of this browser] and collects your recent browser activity. It takes that activity and labels it then shares the “cohort” with other websites and advertisers. The main concern with this approach is privacy. She also discusses a new WordPress plugin Disable FLoC which is easy to install and has no configuration settings, it just  does what it claims to do. If you would like to learn more about the implications of FLoC, the Electronic Frontier Foundation has a solid overview as well.

For those not using WordPress, Marko Saric has an overview article at Plausible which also includes the snippet of code you can add to your .htaccess file to disable FLoC as well.

Future of the WWW

Professor Sir Tim Berners’Lee (inventor ot the WWW) thinks his creation is out of control. In this interview, he explains his plans to save it.The big issue these days is privacy. He proposes Solid (a new system to decentralize the Web). His core idea is PODS (Personal Online Data Stores) which each person has control over. The fundamental change is that anyone wanting to use your information must ask for your permission. After you review the interview, I would be keen to learn your thoughts about this approach. Comments are open.

Hardware

Gizmodo recently discussed the fact that Verizon is recalling 2.5 million of its hotspots because they are literally too hot. There have been 15 reports of the devices overheating (6 instances of fire damage). Review the article to see if  you have one of these hotspots (various models sold between April, 2017 and March, 2021).

WordPress

Easy WP Guide has been released for WordPress 5.7 (most current version). No discussion of PHP or the technical details, just a comprehensive guide to help you edit the content of your site. This is a free download. Web Professionals who build sites using this technology may wish to share this document with their clients (if you haven’t already). You can purchase the guide which allows you to brand it as you wish.

For those developers using Elementor as part of their WordPress installations, you may wish to review the recent Wordfence post discussing recent vulnerabilities with Elementor.  For those who are not aware, Elementor is installed on over 3.5 million WordPress sites. The Wordfence team found over 100 vulnerable endpoints.

Final thoughts

Hopefully, you found these articles and insights helpful. What else would you like to see in future articles? What did you think about these? I look forward to reading your comments.

Best always,
Mark DuBois, Executive Director
Web Professionals (a.k.a. World Organization of Webmasters)

5 Things to Consider Regarding Web Accessibility

5 Things to Consider Regarding Web Accessibility

View of older woman reading printed article with magnifying lens. Accessibility matters! in bold print to the left of the woman.

Is Your Website Section 508 Compliant?

Imagine this… You manage a website for a company. Someone from Legal approaches you with a question, “Is the company’s website Section 508 compliant”? How would you respond?

Your first reaction might be to cringe. Or, maybe you get that “deer in the headlight” look because honestly, you haven’t dealt a lot with web accessibility. You wonder, “What is that anyway?”   

Web accessibility can be a scary thing, especially if you don’t have much experience with it.  But fear not! There is good news!

Here are five things to consider when establishing an accessible, and ultimately optimized, web experience for all.

1. There is no such thing as a completely 100% accessible website.

It might be of some comfort to know that it is pretty much impossible to create a web experience that is completely 100% accessible by all. Most websites are not built with web accessibility in mind, so know that you will be retroactively fixing problems.

Also know you will run across a variety of issues. Some issues you will be able to fix easily, while others will be much more challenging. You may even come across issues that you won’t be able to fix at all. Understand that applying accessibility to an established website can be like uprooting a well-established tree. It can be done, but it’s going to take a lot of effort.  

2. Web accessibility is not a binary thing.

You can’t just answer the question with a “yes” or “no” response. It is not just one or the other. Web accessibility will always have some shades of grey. The site you manage will probably have some accessible features already, like alt descriptions for images, and heading tag <h1 – h6> tags.

The website you manage is probably already somewhat accessible. The question is, “what shade of grey is it?” Remember there is no such thing as a 100% accessible website.

3. WCAG and Section 508 standards are similar but different.

If you do your research, you’re going to run across something called WCAG and Section 508. It’s important to know that these things are similar, but different.

The Web Content Accessibility Guidelines (WCAG) is advice developed by the World Wide Web Consortium (W3C), with the goal of establishing standard practices regarding web content. These standards are aimed at teaching individuals and organizations how to develop web content for all people, including those with physical and mental disabilities.

Section 508 also deals with creating accessible web content, but it is different than WCAG. WCAG is a cooperative web standard. Section is a law that requires government agencies to make their websites, and other technology, accessible to people with disabilities. If you manage a website that uses government money like a university or health insurance website, you might have to abide by Section 508.

4. What is the ultimate goal of web accessibility?

Is the ultimate goal of web accessibility just to be compliant? I would say no. Approaching web accessibility with the ultimate goal of compliance in mind is short sighted.

The ultimate goal of web accessibility is to create a web “experience” that is accessible by as many people as possible, regardless of ability. This issue is really about humans and their ability to access the information that they need. Yes, the law is involved in some instances, but ultimately we are talking about being compassionate towards others, and good stewards of the information that we manage.

5. If you must have benchmarks and metrics, create a checklist.

Now the person from Legal is probably looking for some sort of concrete evidence that they can use to defend the company. Here is one way to approach this:

  • What is the law, and what does it state that the website must have?
  • Think about the senses you have as a human being (sight, touch, and sound etc.), which ones do you use to take in information?
  • How will you modify the website based on someone who is visually impaired, doesn’t hear well, or doesn’t have use of their hands?
  • Don’t “forget” about memory retention! What types of modifications will you make for people who have a cognitive impairment?
  • Write these things down and create a list. Do an audit of the site. What do can you do differently?
  • Think about your website and the content in terms of numbers. Maybe you have 20 PDFs and none of them are accessible. Can you create a metric around this? Can you strive for all 20 PDFs to be accessible by the end of the year?
  • Take this information to Legal and work with them.

So, going back to the original question?  Is your website Section 508 compliant? How would you respond?

Understand that Legal is probably going to want to resolve this issue in a concrete way. Their job is to protect the company from legal trouble; however they don’t necessarily understand websites and web content. Your job is not to understand the law entirely, but to understand how the web works.

Remember you are the web expert. Respond appropriately and move forward in a collaborative and productive manner. Together you can create a wonderfully optimized web experience for as many people as possible, while keeping the company out of legal trouble.

Accessibility and WordPress Gutenberg

Accessibility and WordPress Gutenberg

What is WordPress Project Gutenberg?

Gutenberg is more than an editor. While the editor is the focus right now, the project will ultimately impact the entire publishing experience including customization (the next focus area). Gutenberg looks at the editor as more than a content field, revisiting a layout that has been largely unchanged for almost a decade. This allows us to holistically design a modern editing experience and build a foundation for things to come.

Here is the link to get more information on the Gutenberg plugin.

WordPress logos on blue background.

(more…)

January accessibility update

January accessibility update

As we begin a new year, we thought it summarize some recent information regarding web accessibility. As a web professional, one should already know that making your pages accessible helps your search engine ranking and much more. As an organization, we have been promoting (and encouraging members) to participate in Project Silver (this initiative is focused on a new version of accessibility guidelines) for some time. We encourage you to consider helping with this initiative.

Of course, it is important to understand what we should be doing now to make certain our projects are accessible. We found the following articles to be a helpful review of what is presently happening with respect to accessibility.

What are you doing to make your projects accessible?

In December, Scott O’Hara discussed the trials and tribulations of the title attribute. This is a great review of the current state of use/ disuse of this attribute. In a nutshell, Scott review this venerable attribute since it’s inception in the HTML 1.2 draft (yes, that was in 1993). One of the main issues with this attribute is that most browsers assume a visitor is using a mouse [for example, to see a title tooltip, you must hover your cursor].  Surprisingly, Internet Explorer 10, 11 (and MS Edge) display tooltips (after a short delay) as if the visitor hovered over them. Additionally, when you long press an image in iOS 11, the title attribute also displays in the popover menu. Of course, these sorts of examples do not help much with overall user experience (and are not consistently implemented). Scott also reviews how this attribute is somewhat useful on select elements for screen readers. NVDA and other readers will announce title on landmark elements (header, footer and so forth), but will not on div or other elements (unless role updates are provided as well). Scott provides a number of use cases where the title attribute can be helpful. The bottom line is that the title attribute can be potentially quite useful, but a number of previous bad practices and lack of consistent support among browsers and screen readers is hampering more consistent use. We encourage readers to review Scott’s entire article. It takes about 20 minutes to review and is well worth the read.

In July, IBM updated their accessibility checklist (now at version 7.0). We encourage readers to review it (if you haven’t already). In addition to providing a thorough checklist, we like the approach of combining the revised US Section 508 standards (which also incorporates Web Content Accessibility Guidelines) along with the additional requirements needed to meet European standard EN 301 549. One central checklist for multiple countries. That alone should be useful for those who conduct business in the U.S. and E.U. We encourage web professionals everywhere to make certain they review (and use) such a checklist.

Dennis Lembree provided a very useful article on the topic of building a culture of accessibility (with a focus on leadership roles). Many of us have encountered situations where initiatives fail because there is no clear leadership. What we like most about this article is the specific breakdown (by corporate division) how individual leaders can contribute to a culture of accessibility. We already look forward to follow ups to Dennis’ post and additional insights. We encourage web professionals to take 5 to 7 minutes and read his entire article.

For those using the React framework, Scott Vinkle provides a very useful overview of React’s accessibility code linter. What we found most helpful is that Scott walks you through creating a new React app and describes in detail how to employ the code linter for maximum accessibility. As a web professional, you are employing linting as part of your continuous improvement strategy (aren’t you?). We encourage you to review Scott’s article (particularly if you are considering employing React in applications you develop in 2018). It will take you a couple of hours to review this article (if you work along with his examples).

For those web professionals who are new to web accessibility, we offer a foundational course on this topic via our School of Web initiative. As a current member of Web Professionals, you first course is free.

As you surmise from the above overview, a lot has been happening in the past months regarding accessibility. We encourage you to provide comments regarding your efforts to incorporate accessibility in your projects and tell us what you have been doing to develop a culture of accessibility in your organization. We may be in contact with you to do a follow up post on the specifics you provide.

All the best for a great 2018,

Mark DuBois
Community Evangelist and Executive Director.