The new responsive League and Legends website. With their new website design now living in the wild for over a month, we decided to take a look at some analytics data to get an idea of how their updated site was performing.
In celebration of Global Accessibility Awareness Day I thought it would be the perfect time to highlight the recent updates to the Web Content Accessibility Guidelines (WCAG) from the latest 2.1 release.
If you are new to web accessibility, then it is important to understand that the core role of WCAG is making digital applications accessible for all people, including those with disabilities. It is about creating an inclusive web for everyone to access. The foundations of the guides are based on four key principles - Perceivable, Operable, Understandable and Robust. By applying these principles in web application design and development there becomes a greater chance of success for your applications usability and accessibility in the market.
The term WCAG stands for Web Content Accessibility Guidelines. The World Wide Web Consortium, known as W3C or w3c.org were the creators of WCAG. On May 5th in 1999 the first version of the guidelines was released, version 1.0. Version 1.0 was very focused on HTML and this was a great step forward at the time. As time progressed and the internet use became more popular with new advancements in HTML and CSS code it was time for an update. By December 11th in 2008 the W3C released version 2.0 which is the version that most people are familiar with today. Version 2.0 was designed to be technology agnostic, not just HTML focused, but supportive of other digital media including PDF, Text Doc, Presentation, eBook, native app etc.
In Australia the Federal Government endorsed WCAG 2.0 in 2009 and set a national transition strategy in place to ensure all government websites be WCAG compliant by 2012. This was a great influence on web design, development and accessibility in general at the time.
Today we have most government websites compliant with the guidelines and a hugely increasing awareness of accessibility in the public market. A large sector of private companies are now choosing to meet the guidelines to make their web applications accessible.
It’s 2018 now and that means version 2.0 is turning ten this year. In the last decade we have seen further advancements with technology, such as the introduction of smart phones and tablets, which have created new gaps in the accessibility of website applications. The W3C recognised that the existing WCAG 2.0 needed to be advanced to cover all the new things that have emerged in web over the last ten years. With that a special dedicated working group of the W3C WCAG have produced dot release 2.1 which serves as an extension of the existing and still relevant WCAG 2.0. That doesn’t mean you need to disregard 2.0, it has stood the test of time and everything still applies, version 2.1 is just adding to it. So this means that 2.1 really just adds to 2.0 by focusing on filling known gaps.
What are some of the items to expect to see in WCAG 2.1? To make it easier for you I’ve prepared a summarised list of 16 additions that you can find in 2.1:
Password memorise – Let a user login without having to remember a password. Slack does a nice job of this with their “magic password” feature.
Override keyboard shortcuts – We now need to be able to override keyboard shortcuts and character key shortcuts. For example, Google has single key shortcuts but you can override it.
Pointer gestures – Design use that supports only one finger/touch point or provide additional ways that support one touch.
Equivalent labels - Labels to match headings and hidden labels that match display headings/labels. This is to keep the non-visual experience consistent with the visual experience.
Events are triggered on touch up - Avoid accidental activation, which allow users more time to think. This is so simple and just makes sense, an easy fix.
Provide alternative way to get device sensors info - Don’t force the single action such as shaking or tilting eg. if the device is shaken then there is a way for the move to be undone.
Responsive design down to 320px is mandatory: zoom content - Be mindful of this when downloading or designing template themes.
Conventional name of elements can be determined - Use semantic HTML5 elements for form or page structure so assistive tech can better identify what is on the page eg. <aside> <section> <nav> instead of <div class=”nav”>.
4:5:1 & 3:1 contrast controls – Text contrast rules are the same only now there is more focus on Graphic contrast, like graphs.
Interactive elements (buttons) 4:5:1 contrast minimum - Includes focus and background.
People can change text without losing functionality – Have adapting text, fixed width layouts are no longer compliant.
Tooltips that appear on hover or focus are easy to interact with – this is for content on hover or focus eg. the tooltip can’t disappear when hovering or in focus.
Notify users when there are content changes on sites. - Well that’s self-explanatory.
Don’t interfere with inputs - Don’t disable the mouse if user has a touch screen
Provide method to prevent interruptions or popups – My personal recommendation is to avoid popups as much as possible. Have you ever met a person that said that they liked them?
Major interactive elements need to be 44x44px minimum - Be careful if you have a complex admin interface. This is most important for finger touch.
If you would like to understand more about WCAG 2.1 please visit https://www.w3.org/WAI/WCAG21/Understanding/
There is an active community group working with the W3C on a new copy of WCAG which has been nicknamed “Silver” (think of it as 3.0) which will be a full redesign from today’s copy. The date of release for this version is not published yet. You have the opportunity to join the Silver Community Group to contribute to the development of the new guides, so if you wish to learn more about Silver please visit the Silver Community Group (https://www.w3.org/community/silver/) page.