Easy Wins with Accessibility
My takeaway on the talk given by Ally Palanzi at CSS Conference Australia 2016.
Accessibility issues refer to the design of products, devices, services, or environments for people who experience disabilities.
In the context of technology, disability means a mismatch between the features of a person’s body and the products we build. Did you know that, as a maker of products, you have the power to create or remove this mismatch?
Just take a look at all the amazing things the web has done for us. For example, connecting people with anyone literally miles away. The abundance of information that you can access via a super computer in your pocket. The web has removed barriers to communication that many people face in the physical world.
As web developers, we have the ability to create a better experience for everyone by making our products more accessible. Remember that disability affects all of us at some point in life. It could be permanent, temporary, or situational. Take me, for instance. I’m currently walking with a broken ankle. Was it accessible for me at the CssConfAU 2016? Yes. Is it accessible for me to board a plane that uses stairs? Not so much.
Personally, I find it far-fetched to design with everyone in mind because there are an infinite amount of factors to consider. But I say do your best at what you do to build a product that can be used by the broadest spectrum of users.
As Ally puts it, how to convince your boss. In a nutshell, it is better for business. It helps make your product usable to a wider range of users — think cross-platform, cross-device, design with older users in mind, etc. You can reach more people. Also, it’s better for SEO (Search Engine Optimisation). We know bosses love them SEO.
Accessible = better SEO = increased in audience reach = more leads
Not good enough of a reason? What about scary legal things? In some countries, it is against the law to have inaccessible products or services. For example, if someone can’t use a product at work due to inaccessibility, or if they find it discriminating, then this could lead to a lawsuit. No one likes lawsuits.
One more — and this is my favourite. Accessibility supports social inclusion, which allows us to grow diversely and to reach a diverse audience. This responsibility goes beyond than just being members of the tech industry. More than that, it’s our responsibility as people. We have the duty to support social inclusion. It’s our duty to create a society where everyone feels valued, differences are respected, and basic needs are met. I support you to be part of our industry; I believe that with a diverse community, we are on the right track to create positive impacts on the world.
Ally encourages us to be accountable for the products we build and make them accessible. She shared a list of easy and good wins for achieving that goal:
- Treat accessibility as any other feature in your project. Integrate it into the quality assurance process.
- Attention to colour contrast on your products. Not everyone has good eyesight. Some of your users may be colour blind. If you are using a Mac device, try setting your display to grayscale to experience what it’s like to be colour blind.
- Avoid using only one form of affordance to your anchor tags
<a>. For example, have the difference in colour and text underlined to indicate an interaction on the elements.
- Accessible forms. Show your input label. Don’t hide input labels when users focus on the input field. It may be cool to look at first. But if it ain’t accessible, it ain’t cool. Also, show meaningful error messages. Errors with random code labels don’t make any sense to your users.
h1heading tag for each page. This allows screen readers to notify users that they have landed on a new page. Plus, search engines use this to interpret what the content on the page is about.
- Specify language attribute, for example
<html lang="en">. This is how users know what language your page uses.
- NEVER remove focus state on elements. You can change them or make them stand out. But never remove them.
outline: none; // NO NO NO
- Use of buttons vs. links. Buttons should be an action, like submitting a form. For links, it is used to navigate to different pages or even different positions of a page.
- Descriptive text on buttons and links. Communicate clearly to your users. Click here. vs. Click here for more info. See the difference?
- Accessible images. Add
alttags to your images. This way, screen readers and unloaded images have a way to present the content of the image.
- Accessible SVGs. Add
titleto your SVGs and use the
aria-labelledbyattribute to tell the screen reader what element to use to describe the SVG.
- Implement your websites in semantic
html. Avoid changing default semantics.
- Support keyboard navigation on your websites. Users should be able to tab through the entire page with their keyboard.
Accessibility is everyone’s responsibility.
Thumbs up to you if you checked off all the steps above. If not, keep trying. Taking baby steps towards better accessibility for your product is definitely better than no progress. Another way to ensure that you’re building an accessible product is to think of accessibility early in the process and think of it regularly.
One last thing. Ally urges us to steal the guideline for accessibility that she and her team at VoxMedia developed. Check it out here. They made it into a checklist so you can easily tick off the ones you have done. Need this checklist in some document? It generates the checklist in markdown, plain text, or GitHub flavoured markdown, where you can easily copy and paste it over.
Ally’s talk is a vital topic to our industry. Not only did she clarify the reasons why accessibility is important, but she also provided a list of actionable items that we — as contributors to the web — could do to start creating better and more accessible products.
People want to use our product. Let’s make it great for them.
Thank you, Ally, for sharing the easy wins! Being awesome as she is, she also shared a few resources for further reading and testing on accessibility. Check them out below.
Resources on Accessibility
- Accessibility Guidelines by VoxMedia
- Contrast Analyser
- Tota11y: an accessibility visualisation toolkit
- WAVE Chrome extension
- Colorsafe: To make accessible palettes
- Color Oracle: To simulate color blindness
- Microsoft Inclusive Design Toolkit
- Interactive WCAG
- 508 Compliance Checker
- Web Content Accessibility Guidelines
- W3C Markup Validation
To the team, volunteers, behind-the-scenes crew, sponsors, everyone involved with organising the conference. Thank you for making #cssconfau16 such an awesome event. Great food. Cool drinks. Cozy atmosphere. Rad swag bags. Mind-blowing talks. Also, making the event accessible for a temporary-disabled person like myself. You all did an amazing job pulling it off.
To my lovely company, NetEngine. Thank you for sending me to the event!