{"id":20928,"date":"2019-05-16T11:30:52","date_gmt":"2019-05-16T11:30:52","guid":{"rendered":"https:\/\/www.heartinternet.uk\/blog\/?p=20928"},"modified":"2019-05-16T11:30:52","modified_gmt":"2019-05-16T11:30:52","slug":"33-articles-and-tutorials-that-will-help-you-build-more-accessible-websites","status":"publish","type":"post","link":"https:\/\/www.heartinternet.uk\/blog\/33-articles-and-tutorials-that-will-help-you-build-more-accessible-websites\/","title":{"rendered":"33 articles and tutorials that will help you build more accessible websites"},"content":{"rendered":"

Accessibility is finally going mainstream. It used to be a niche discipline that concentrated on disabled customers, a \u2018nice to have\u2019 that often got forgotten or lacked the necessary resources and budget. The smartphone and the recent focus on inclusive design have changed that.<\/p>\n

These days there\u2019s a real push for websites and digital products to be accessible for the full range of human diversity. This includes blind and deaf users, those with cognitive impairments, as well as neurodivergence and people with temporary or situational impairments (from arm injuries or ear infections to distracted drivers or new parents juggling multiple tasks while carrying their newborn).<\/p>\n

To mark the eighth Global Accessibility Awareness Day<\/a>, we\u2019ve rounded up a ton of articles that will help you design and develop more accessible and inclusive products. We cover the necessity and benefits of accessibility on the web and then move onto very practical tips and tutorials.<\/p>\n

Here\u2019s to an accessible web for everyone!<\/p>\n

Overviews<\/h3>\n

The WebAIM million<\/a><\/p>\n

An accessibility analysis of the top one million home pages recently found that 97.8 percent had automatically detectable issues, which prompted Ethan Marcotte (who coined the term Responsive Web Design) to write a thought-provoking article about \u2018the web we broke<\/a>\u2019.<\/p>\n

\"A<\/p>\n

Why the adoption of web accessibility keeps failing<\/a><\/p>\n

An exploration into why accessibility still hasn\u2019t been widely implemented, including a theoretical understanding of the subject of \u2018adoption\u2019, and what we can do about it. Part 3 of a series on \u2018forgotten\u2019 web innovations, which also includes posts about peer-to-peer and the muted web.<\/p>\n

Building accessible websites and apps is a moral obligation<\/a><\/p>\n

What if web accessibility was legally required (which it is in some countries) in the way handicapped access is in physical businesses? Chris Ferdinandi argues that the web is accessible by default and that we have to fix it, if we break it.<\/p>\n

10 website accessibility myths debunked <\/a><\/p>\n

UserZoom looks at 10 things that you might have thought, or heard about web accessibility that aren\u2019t necessarily true, including \u2018accessibility is just for blind or partially-sighted users\u2019 and \u2018accessibility is just about adding alt text to images\u2019.<\/p>\n

Putting accessibility in perspective<\/a><\/p>\n

Joanna Ngai, UX designer at Microsoft, examines web accessibility, why you should care and the benefits of improving accessibility, including increasing the number of your potential customers and reducing the likelihood of litigation.<\/p>\n

Accessibility, a powerful design tool<\/a><\/p>\n

When you start seeing accessibility as this magical ingredient that forces you to make things the right way, it becomes crystal clear that you need to apply it to every aspect of a product: from design to engineering, from marketing to customer support.<\/p>\n

Tips<\/h3>\n

Accessible does not mean ugly<\/a><\/p>\n

This article covers a few easy things you can do right now to improve accessibility on your site: outlines, hover states, legibility, and designing for colourblind users. Implementing these small improvements on your site or app not only can allow a completely new set of users to interact with it, but improve the usability for the majority of people too.<\/p>\n

\"Examples
Examples of text legibility<\/small><\/p>\n

HTML, CSS, and the path to accessible web design<\/a><\/p>\n

This article includes a range of tips on how to get started with accessible web design that were highlighted at this year\u2019s Monki Gras conference, an event about software, craft and tech culture that focused on creating great experiences for everyone this time.<\/p>\n

Learn to create accessible websites with the principles of universal design<\/a><\/p>\n

Plan for designing for accessibility with the seven principles of universal design, which all include guidelines with actionable approaches. A great resource for guiding your design process that should be incorporated into any project from the very beginning.<\/p>\n

14 easy ways to make your website more accessible<\/a><\/p>\n

You might think your site ticks all the accessibility boxes, but chances are it could do better. In this article, UX experts offer up their secrets on areas of inclusivity that often get overlooked but \u00a0can be addressed with minimal effort. From remembering alt text to confirming the end of a user journey, these fixes can be applied today.<\/p>\n

3 tips for designing better websites for colorblind users<\/a><\/p>\n

Testing using a colour blindness simulator, using a full range of value and changing your colour palette are quick and easy ways to make your design accessible for colour blindness. Also see Color blindness considerations for designers and content managers<\/a><\/p>\n

Accessibility for vestibular disorders: How my temporary disability changed my perspective<\/a><\/p>\n

A temporary disability changed Facundo Corradini\u2019s perspective on accessibility testing. On A List Apart, he shares the impact and how our design choices can affect people with vertigo and vestibular disorders. There are a lot more potential triggers than just animation.<\/p>\n

Revisiting prefers-reduced-motion, the reduced motion media query<\/a><\/p>\n

Two years ago Eric Bailey wrote an article about a media query to help people with vestibular and seizure disorders use the web. Here he returns to the subject and finds that most major desktop browsers (except Edge) now support it.<\/p>\n

Tips for making interactive elements accessible on mobile devices<\/a><\/p>\n

Front-end developer Ire Aderinokun gives an overview of some of the new Web Content Accessibility Guidelines that relate to interactive elements on a web page (for example, making it clear that an element is actionable).<\/p>\n

\"An<\/p>\n

Insights<\/h3>\n

Accessibility challenges in web apps<\/a><\/p>\n

Web developer Marcus Herrmann writes about accessible techniques for modern JavaScript apps and covers challenges such as click targets that aren\u2019t links, inputs and controls, changing and loading things asynchronously, and more.<\/p>\n

Creating a more inclusive world: How to test products for accessibility and usability<\/a><\/p>\n

Ashley Ferguson, a design researcher at Microsoft, covers three examples of accessibility traps (using colour alone to convey information, moving content, and inefficient keyboard access) that map to usability traps\u200a and offers tips for more usable alternatives.<\/p>\n

Designing for accessibility by using Apple VoiceOver<\/a><\/p>\n

UI\/UX designer Nazli Kaya conducts a little accessibility test on her own website using Apple screen reader VoiceOver and explains how she fixed the issues that she found.<\/p>\n

Accessibility lessons: Dealing with a large amount of form inputs<\/a><\/p>\n

Over at GOV.UK, front-end developer Andy Sellick shares some advice on creating accessible forms with a large amount of inputs fields.<\/p>\n

\"An
GOV.UK\u2019s accessible autocomplete in a finder (multiple selection mode)<\/small><\/p>\n

Building Better Forms\u2122 by not taking away affordances<\/a><\/p>\n

Don\u2019t fiddle too much with your forms’ look and feel. A small innocent-looking piece of CSS, even when combined with semantically correct HTML, could leave you with a degraded user experience and make your forms less accessible.<\/p>\n

Paint the picture, not the frame: How browsers provide everything users need<\/a><\/p>\n

Eric Bailey makes a case for leaving key accessibility features to the browser to ensure the most accessible experience, instead of tweaking or trying to control browser functionality, which could alienate users.<\/p>\n

Enforcing accessibility best practices with automatically-generated ids<\/a><\/p>\n

Brad Frost describes how to enforce accessibility best practices in your design systems. The technique renders it impossible for users of a design system to omit an important attribute and accidentally create an inaccessible experience.<\/p>\n

The ineffectiveness of lonely icons<\/a><\/p>\n

If your target audience is a general population, you should not be using icons alone to convey anything meaningful. By doing so, you have made assumptions that are unlikely to be appropriate to a general audience.<\/p>\n

See no evil: Hidden content and accessibility<\/a><\/p>\n

This post explores different scenarios in which you may want to hide content, and how to handle such situations in an accessible manner. You\u2019ll learn how to hide content for all users, for screen readers, for users not using screen readers, and for specific screen sizes.<\/p>\n

Think like an accessible UX researcher<\/a><\/p>\n

A three-part article on involving people with disabilities in UX research, covering defining your research problem, how many participants to include in your research and five common mistakes in usability testing and how to avoid them.<\/p>\n

Tutorials<\/h3>\n

How to create a custom radio switch in CSS<\/a><\/p>\n

In this tutorial, web developer Claudia Romano, co-founder of Cody House, takes a look at how to create a custom radio switch and how to keep it accessible.<\/p>\n