Welcome to Podcast 100! Over the last few years, WordPress Accessibility has been making much progress and continues to do so. In this podcast, Dennis speaks with Joe Dolson (@JoeDolson) and Joseph O’Connor (@accessibleJoe) who share their knowledge of accessibility in WordPress and how they’ve been helping.
After brief introductions, the guys discuss theme guidelines, current accessible themes, and the accessibility of the Admin area. The terrific WP Accessibility plugin is also mentioned. Also discussed is WordCamp San Francisco which happens October 25-26 plus three days of contribution and community work after the conference.
Over the last year or so, a design trend in the web and mobile world has been transition animations, parallax effects, and the like. For many users, this can cause vestibular issues; the symptom is usually vertigo, or a feeling of motion sickness.
The issue was not well recognized until iOS 7 was released and overwhelmed users with an excessive amount of visual effects, especially parallax. Numerous articles were written about this issue, including iOS 7 and motion sickness by iMore. In a poll displayed on that article, about 28% of users reported having either mild or serious motion sickness with iOS7; this is not a formal study but still makes quite a statement. And at the time of writing, there are 100 comments on the article!
Pro tip! To reduce the parallax effect in iOS 7, go to Settings > General > Accessibility > Reduce Motion.
Pros and Cons
A study by Purdue University found that “although parallax scrolling enhanced certain aspects of the user experience, it did not necessarily improve the overall user experience”. Let’s take a look of pros and cons of parallax design.
Pros:
May possibly increase user engagement.
Cons:
Makes many users sick.
Requires additional code which makes web pages more complex longer to load.
Does not function smoothly across all browsers.
Difficult to implement with responsive and mobile design.
Can make it difficult or frustrating for the user to consume content due to excessive scrolling.
Recommendation
There are obviously many more negative points for using parallax design as there are positive. My recommendations are:
Use parallax effects (and animations) with much discretion and tolerance, if at all.
Ensure complete browser testing on desktop as well as mobile devices.
UPDATE: The CSS Reduced Motion Media Query can now be used to turn off (or reduce) animation and motion effects when a user has the setting on in the user agent, if supported.
The main point is, please do the basics. When designing a website, ensure controls with button-type behavior (submitting form and opening a modal dialog) are designed as buttons and regular text links (go to an external page, anchor on page, or external document) are designed like text links (such as blue underlined text).
When developing a website, ensure buttons are coded as buttons (the button or input element) and links are coded as links (the anchor element). You could also use ARIA roles to denote button and link, but it’s always better to use the semantic HTML elements.
Here are some reasons why it’s so important:
accessibility and usability
provides user with expectation of the control’s behavior
avoid conflicts with voice-control user agents (speech recognition software) such as Dragon NaturallySpeaking
a more robust website (support older user agents, non-JS, etc.)
lighter and less complex code
more consistent implementation so easier to maintain
Remember that for accessibility, no matter how much ARIA and trickery is done, there will mostly likely still be problems. When blurring the distinction between a button and a link, assistive technology (and/or the user) can be confused as to what’s what. View the beginning of this presentation by Derek Featherstone for a good example of this.
Button versus text link.
This advice sounds simple, but this elementary guideline is broken quite often; once you start to look, you’ll find it everywhere on the web, especially web apps. There’s no need to create confusion (the design) and to re-invent the wheel (the development). Sticking to the basics will make it easier for everyone, most importantly the user.
For an example of proper implementation, check out Easy Chirp.
