The Challenges of Accessible Website Design
[su_box title=”What is website accessibility?” style=”glass” box_color=”#872452″ class=”right”]Website accessibility is the process of designing websites which have no barriers to access for people with disabilities. Consideration must be given to blindness and low vision, motor disabilities and the widest range of cognitive abilities.[/su_box]For most customers, the primary concern in web design is reaching the largest-possible audience. Sadly, accessibility is often the last thing on the customer’s mind, and we have to gently steer the customer towards accessibility considerations.
Recently we had a web design project that turned this on its head. Chris McCausland is a stand-up comedian who is also blind. Our commission was to build a site which would be attractive and professional-looking to his sighted fans, as well as his fanbase of blind people.
We had to design accessibility-first, and this threw up some fascinating challenges.
There are many screen-readers including browser plugins and operating system level readers. Chris uses VoiceOver on the iPhone and we also tested using Jaws installed on our development PCs.
The main challenge was to strike the right balance between looking great for the majority of users whilst still being 100% accessible via screen readers. Meanwhile, it was vital that Chris could edit the site himself – adding blog posts, editing pages, adding images etc.
After research into the latest accessibility advances with Content Management Systems, we chose WordPress.
We then needed to find a WordPress theme that was as accessible as possible out-of-the-box. Many themes have too many bells and whistles to allow easy browsing with screen readers. After trialling many themes, we found “Raptor”, which has a great balance between semantic HTML and good looks.
HTML is first and foremost a semantic language, and design and visuals should be separate from the core HTML.
Semantic HTML means that menus, page titles, div sections and images can be described by the screen reader and make sense sonically as well as visually. In other words the HTML should convey the meaning of the page, not the visual appearance.
We had to customise the design so each block of text was positioned in the right order semantically, even if positioned in the “wrong” order visually.
Accessibility in WordPress plugins
While WordPress itself is designed with accessibility in mind, the same cannot be said for plugins which are developed by third-party developers.
We had to make significant customisations to the sharing plugin AddThis, the MailChimp signup form plugin and Contact 7 forms to get these working easily using a screen reader.
Putting it all together
This was a really interesting build which put accessiblity top-of-mind. Meetings with the client took place using screen-readers and smartphones. Testing involved shifting div blocks around, customising plugins, and trying our best to move away from our visual bias and think “audio” at all times.