How We Test for Accessibility at Envato (Tools and Tips)
Tackling the challenge of creating an accessible website–or making an existing website accessible–can sometimes be a difficult task. It can be awkward to understand exactly how a user with low-vision, for example, might use a website. Naturally, it can be difficult for us to be happily satisfied that our sites are accessible.In this post I’ll show you that testing accessibility doesn’t have to be a difficult task. I’ll walk you through the tools and processes we use at Envato to keep our platforms usable to those with all levels of ability and to ensure accessibility stays at the front of our mind when delivering new features.Google LighthouseOne of the most important tools we use when judging our accessibility is Google Lighthouse. Lighthouse is a tool to assess the extent to which a website meets industry best practices–whether that be for performance, SEO, or in our case, accessibility.Lighthouse can be run either via the online interface or via the Chrome developer tools. A significant advantage of using Lighthouse is that it allows us to know exactly what Google relies upon when deciding how accessible they believe our site to be.To access Lighthouse via the Chrome developer tools:
Press CMD + Shift + C to open the developer tools.
Click on the Audits tab.
Ensure Accessibility is selected.
Hit Run audits.
Running Lighthouse via Chrome developer tools.Once run...
Quick Tip: Use the “lang” Attribute for Better Accessibility
The lang attribute is one of the global HTML attributes developers can apply to any HTML element, and it can really help with accessibility. It allows you to specify the language of an element and all its child elements using a language “subtag”: a 2 or 3 character code defined by an international standards body.Basic Uselang is most commonly found on the html element, where the declaration can propagate to all content on the page. For example, a declaration of <html lang="en"> tells the browser that all content on the page is English. lang subtags may also have a script or region designator, which allows you to specify either the language’s writing system or geographic region. For example, a declaration of <html lang="en-GB"> specifies United Kingdom English (color vs. colour, center vs. centre, etc.).You can override an existing lang declaration with a more specific lang declaration to programmatically identify content that uses a language that’s different from the rest of the page. A section written in Spanish on an English page would look something like this:<html lang="en"> <head>…</head> <body> <!-- English page content --> <aside lang="es"> <h2>Información para hispanohablantes</h2> <p><!-- Additional Spanish content --></p> </aside...
Child Mind Institute boosts social shares on AMP pages with AddThis
Posted by Chad Edmonds, Director of Product Marketing, AddThis
AddThis has been excited to work with the AMP project over the past year, to ensure the web is fast and user-friendly for everyone. As AMP turns 3 years old this month, we’re celebrating the project’s progress with a recent case study showing increased shares and engagement using the AddThis AMP component. Happy birthday AMP!
Child Mind Institute is an independent, national nonprofit dedicated to transforming the lives of children and families struggling with mental health and learning disorders. The organization’s website, childmind.org, provides content and resources to help those in need.
Mobile traffic has become an increased priority for the Child Mind Institute and they’ve recently implemented Accelerated Mobile Pages (AMP) to provide a better user experience for mobile visitors. Since implementing AMP in November 2017, they now see an average page speed of 3.1 seconds compared to their previous page speed of 7 seconds.
Growth from AddThis Share Buttons
AMP was a huge success, and boosting social traffic was the next step to keep the momentum going. Childmind.org already had AddThis Floating Share Buttons on desktop and it made sense to use AddThis for AMP and their other mobile pages. It didn’t take long for Child Mind Institute to see results—they increased shares from AMP URLs by 10% (...
How to Make Custom Accessible Checkboxes and Radio Buttons
Form elements like checkboxes and radio buttons look different depending on the user’s browser and operating system. For this reason designers and developers have long been styling their own checkboxes and radio buttons, aiming for consistency no matter the browser or OS.This is perfectly fine, but at the same time we need to make sure our checkboxes and radio buttons remain accessible to assistive technology (AT) and keyboard users. In this tutorial I’ll explain what this means and how we can do things correctly in a few different ways.
Browser Default StylesLet’s begin by looking at how your browser renders checkboxes by default. As mentioned, what you see here will depend on your browser and operating system.
You’ll notice you can use your mouse to switch the checkboxes on and off, plus you can use your keyboard (jump through using TAB and toggle using SPACE, though this might alter depending on your settings).
1. Styling Custom CheckboxesTime to build our own. We’re going to visually “hide” the default checkboxes, placing custom-built versions over the top. The first thing we’ll need to look at is the markup.The HTML MarkupMarkup for a single checkbox looks like this:<div class="wrapper"> <input id="a11y-issue-1" name="a11y-issues" type="checkbox" value="no-issues"> <label for="a11y-issue-1">There are no issues</label>
</div>We use a...
Three Years of AMP!
Not long ago the mobile web was sluggish, clunky and at risk of being closed off by apps. Many publishers were concerned how this would affect their future and the promise of the open web. News publishers approached us at Google to help ensure their content was easy to distribute and read across the web. To tackle these challenges, we partnered alongside publishers and tech companies on an initiative to strengthen the web, especially on mobile. Three years ago this month, together we announced the launch of the open source Accelerated Mobile Pages project.
Fast forward to today and there have been over 11,000 commits to the AMP code and the AMP project’s pledge to ensure the web is fast and user-friendly for everyone remains the same. Since its launch in 2015, AMP has grown to power billions of pages across the web from tens of millions of domains. The project has grown from a small group of dedicated committers, to the more than 700 contributors globally, with the support of hundreds of companies. And just last month, over 80 contributors met in person at the first AMP Contributor Summit.
A strong community
Since 2015, we’ve seen the community come together to participate and shape the future of the project. From the core group of companies and developers who helped launch the project, to the more than 400 developers at AMP Conf in Amsterdam, and the over 20 cities where...
How to Use the Contrast Checker in Chrome DevTools
One of the most important aspects of creating accessible websites is ensuring you have readable text. And in turn, creating readable text means ensuring you have adequate color contrast between your text colors and your background colors.For example, take a look at the purple text on white background from the homepage of Tuts+. This contrast level is all good: Example of a good text contrast ratio But if we make the text lighter, we can quickly reach a point where the contrast is too low and it becomes too difficult to read: The same text adjusted now has a bad contrast ratio This might be a relatively straight forward concept, but ensuring sufficient contrast in practice can actually be a little tricky. Sometimes color contrast might look fine to the eye, but in reality may not be up to par. So how can we be certain our color contrast levels are accessibility friendly? That’s where Chrome Dev Tools can help out. How Chrome Dev Tools Can Help You’ll notice in the above screenshots we see the Chrome Dev Tools color picker. If you look closely you can also see there is some additional information in that color picker, such as the display of a contrast ratio score, that helps give feedback on color choices. This is part of the recently added accessibility tools in Chrome–let’s take a look and see how it all works. Note: You might see some instructions around the web saying you...
The Importance of Heading Levels for Assistive Technology
The HTML specification describes six heading elements: h1, h2, h3, h4, h5, and h6. The number in each of these heading elements reflects its priority, with h1 being the most general and h6 being the most specific.This is an important thing to know! WebAIM’s 2017 Screen Reader survey tells us that navigating via headings is the most important way people who rely on assistive technology locate information. Because of this, it’s important to craft your website’s headings properly.CognitionBefore we get into the nitty-gritty of how assistive technology works, there’s a reason our printed media uses things like chapters, sections and subsections, and scene breaks. Dividing content up into chunks makes it easier to understand, digest, retain, and reference. Chunks of content, from The Guardian newspaperWhile the web isn’t print, it does borrow all the good stuff from it—HTML heading elements are analogous to these print conventions. It’s one of those things that everyone takes for granted, but helps out a ton of people. Cognitive concerns are widespread and outweigh every other form of disability. Grouping content into logical chunks helps everyone, from people who have a biological condition such as dementia to people experiencing situational impairment such as sleep deprivation or learning a completely new skill.Navigating Via HeadingCertain kinds of assistive technology (...
What’s new in AMP, Q4 2018
A new, open governance model for AMP
In a separate blog post, we discussed our intent to move to a new governance model for the AMP Project.
For browsers that restrict third-party cookie access, AMP Linker is a new way to keep user sessions in sync. See our announcement blog post for details and how to implement them on your webpages.
“Infinite scroll” with amp-next-page
<amp-next-page> (now available as an experiment) supports what some call “infinite scroll” of articles. Developers can specify up to three URLs to load when the user gets to a specified scroll-depth in the page, and those documents will load seamlessly inline.
Tilt-bound animations with amp-orientation-observer
<amp-orientation-observer>, which supports low-level syncing between the orientation of a user’s device and frames in a given animation, is now launched. With this you can create a range of effects, like subtly shifting the background of your page, panning images, or advancing an animation on tilt. You can even create a layered 3D space by shifting multiple overlaid components of a scene at different rates.
Compare images with amp-image-slider
<amp-image-slider> gives users the ability to compare two images as overlays. This can be especially useful for “before & after” photos. Read more about that component in our recent blog post.
AMP Story Ads...
AMP Contributor Summit: Learnings & Takeaways
We held the first ever AMP Contributor Summit late last month, bringing together more than 80 developers from the open source community to meet each other face-to-face, talk about the latest developments in AMP and discuss where AMP should head into the future.
The summit kicked off with a New Contributor Day for people who were new to contributing to AMP. After a series of talks covering the basics of AMP extensions and how to get code reviewed and merged, we spent the afternoon writing code. We had 46 pull requests created on New Contributor Day alone, including many from people who had never contributed to an open source project before! If you’re interested in contributing to AMP but weren’t able to make it to the summit, check out the New Contributor Day talks and maybe even try the beginner or advanced codelabs!
On the second day of the summit members of the community gave talks to bring everyone up to speed on the latest in AMP and to get the attendees thinking about AMP’s future. Malte Ubl kicked off the day with an overview, and then a range of topics were covered throughout the day, including JS in AMP the proposal to change AMP’s governance model and fixing AMP URLs. All of these talks are now available on an AMP Channel playlist.
For the last day of the summit the attendees split up into a wide variety of discussion groups. These...
The latest results with AMP
In 2016, Australian car insurance comparison service Greenslips.com.au, embarked on a website redesign. After looking at possible web frameworks to meet their needs, they chose to rebuild their website with AMP. This allowed their developer team to maintain a single code base which ensured great and fast experiences on both desktop and mobile. Since launching their entirely “AMP-first” site earlier this year, Greenslips.com.au has seen a 12-15% (device dependent) increase in conversion rates on top of the expected speed gains of 15%.
Greenslips.com.au saw a 12-15% increase in conversion rates
Greenslips.com.au isn’t alone. We’ve seen many recent examples of businesses in both the publishing and e-commerce space see success with implementing AMP on their websites. In the last month we’ve published 5 new case studies on AMPproject.org — with more on the way. While each of these cases is unique, we hope that by sharing them, both businesses and developers can better understand how embracing AMP might benefit their own websites.
Indian publishers like The Tribune and Jagran New Media have seen revenue increases on their AMP pages, which are paired with their traditional site. In particular, Jagran New Media saw a 4.5x increase in revenue from mobile, along with an increase in traffic. Readwhere, the CMS provider used by The Tribune, is seeing both higher mobile revenue and...