The Vancouver Quakers are a non-profit organization with a WordPress-based website. As a volunteer project in 2014, I revised their site to make it mobile device-friendly and more accessible to people with disabilities.
The Existing Site
Until mid-2014, the site was difficult to read on mobile devices. Much of a phone screen was taken up by sidebars and navigation controls. If the user zoomed in to make the text bigger, reading would require horizontal scrolling.
The existing site also presented some issues to people with disabilities, including low contrast between grey text and grey background in the navigation bar:
The group was not seeking a major redesign, but welcomed the opportunity to make the site more usable on mobile devices and more accessible to people with disabilities.
A Responsive Solution
I set out to improve the site in ways that would be relatively simple for others to maintain. Therefore I implemented a new WordPress theme, WPstart, that brought about most of the desired changes, and further customized that theme by creating a child theme. In the child WordPress theme, I created a custom CSS file to modify the look and feel of the WPstart theme, particularly the navigational menus.
Out of the 2,655 free WordPress themes available, WPstart is one of only twelve that are tagged as accessibility-ready. Although switching to an accessibility-ready theme could not fix all of the site’s accessibility issues, it was a step in the right direction.
Styling the Mobile Navigation Menu
The WPstart theme included a three-line “hamburger” icon to bring up a navigation menu on mobile devices. This icon is currently popular in mobile site and app design, but testing has found that users often don’t know what the hamburger icon is for. Usability tests have shown that adding the word “Menu” and making the icon look like a button greatly improve its chances of being discovered. I used CSS to completely re-style the hamburger icon accordingly.
Mobile Menu Before Customization:
The “hamburger” icon in the uncustomized theme
Mobile Menu After Customization:
I used CSS3 to restyle the icon as a “MENU” button
I re-styled the large-screen menus for richer interactivity and a cleaner look and feel:
For the visually impaired, the new theme makes the site more accessible to screen reader devices. Text for content and navigation has sufficient foreground-background contrast for users with low vision. The new version of the site works well on a wide range of screen sizes.
