I love when the motives of being empathic to others intersect with good business practices. A non-profit that improves their website to be inclusive and accessible to neighbors of a wide variety, it has the potential for a larger audience to support its mission. So what’s the first step?
Forget the average user – they don’t exist.
(Before we get going – full disclosure — the openbox9 website is going through some improvements of our own to make sure we are being inclusive and accessible. Meaning, the following is advice we are currently undertaking!)
In no particular order:
Forms
For a majority of you, your website is about conversions that involve either a subscribe, petition, or donate form. It’s key that these forms are designed thoughtfully to be the most accessible part of your website. For example, fields should be clearly labeled and positioned so a screen reader can clearly understand the instructions. It’s well worth the effort, as you never know if a bad form is keeping users from donating to you. To create accessible forms in WordPress, try the plugin Caldera Forms builder, which is specifically focused on accessibility.
Keyboard Accessibility
Ever try to navigate a website only using a keyboard? It’s difficult — and completely frustrating — when a website is solely focused on touch screen and mouse interactions. In short, your website, meaning all the content and navigation, should be accessible using the tab key or, even better, a plethora of keys! Read more about “Keyboard Accessibility” to understand where to start.
Clickability
No matter how long I’ve been designing, designers still have to remind each other about making sure navigation looks like navigation – we need to stop designing for super-users and make sites for everyone. Lets face it, super-users also like easily understandable navigation systems, and for the super-users that employ assistive technologies to browse your website, you’ll speed up their experience. That’s creating a fan of your organization!
Story-telling through Images
People using screen readers want to be a part of the storytelling you are doing — make sure the image you include with your copy has descriptive text associated with it (AKA: “alt text”). By “descriptive text”, I’m talking about how you feel the image supports the text. Example…
Above is an image of a woman, so some might write their “alt text” as: “Woman with book” – but not you, because you know that doesn’t aid in the story-telling. You would write: “Photo of woman diligently researching the causes for human-made greenhouse gases and the effect on oceanic temperature increases.” See how that includes more readers into your work? Now on the flip side, those using screen readers don’t want to be bombarded with descriptive text for every little irrelevant image such as; “image of blue square.” Spare them from those alt texts.
Readable Text
Simply put, it needs to be readable by devices but also by those with visual impairments… and don’t just think about making it accessible to seniors, as I know plenty of juniors that can’t read websites without their glasses on. Building your website so a user can enlarge the text is such a kind and appreciated gesture. To do this without busting up your design, one good practice is to avoid absolute units, such as specifying text size using pixels. Instead, use relative sizes. You can test your site by increasing the zoom level in your browser and seeing what works and what doesn’t.
Using Headers to create good hierarchy
This might seem like a wise graphic design solution in any case, but screen readers pick up on the header structure of content, allowing users to interpret the page which in turn improves the “in-page navigation.” An example of this is using header styles H2 through H4 in the content – not making your own header style by manually enlarging text to make it look like a header. A screen reader won’t pick up on that.
Colors
Simply put, we gotta know how colors are seen differently by users that could have a type of color blindness (Red-Green color blindness is the most common). Knowing more about color blindness should affect how you design your website’s color palette.
Language
“Hot diggity dog, I’m snookered!” Some of you know just what I’m talking about, but for many of you… I lost you. Make sure your content is inclusive. Spell out acronyms; avoid colloquialisms, especially ones that favor a culture; nix the insider language (remember you’re trying to grow your audience); and keep in mind there are so many English phrases that do not translate well to your global audience. Ever wonder what people think when “hot dog” is translated?
Speed
We lost our way, people. A lot of sites are being designed for users that have a high-speed internet connection and we designers like to believe that’s the majority of users these days. Not true. People are trying to browse your website in a coffee shop sharing the same wifi with 83 other people, and when their experience of your site is slow — they don’t blame the wifi—they blame you. People are also in rural areas and they don’t want to wait 10 minutes to watch your mission statement video, when they could read it in 1 minute (do both). To be inclusive, you have to think about your site’s performance so everyone can enjoy it.
Trust me, there is more than this list, so make it your business to understand where your website’s barriers are to interacting and engaging with the wide variety of people on the web. Show us you care.
