Flipboard Accessibility Audit

I’ve never used Flipboard, so I decided to make my first visit an opportunity for a preliminary accessibility audit based on the WAI Easy Checks – A First Review of Web Accessibility heuristics.

It was a challenge to get the site’s source code because everything is rendered on the fly with JS. I had to use the Chrome inspector and copy/paste the code into an HTML file for upload to the W3C validation service. (And there is no fallback for users without JS.)

screenshot of a snippet of HTML that shows up when JS is disabled on the Flipboard homepage
JavaScript disabled on Flipboard homepage

The validation service returned many errors, but this audit explains three basic accessibility problems.

1) Images Lack Text Alternatives

So basic yet so overlooked, the home page images don’t have alt attributes. This includes both images that are linked and not linked.

For linked images, lack of alt attributes means a screen reader has no context for the link; it’s like a link without text. For all images without alt text, the screen reader will read the file name, which provides little to no context for the element.

Linked image on Flipboard homepage

This is the rendered HTML for the National Geographic square:

<a class=" splash-tile partner" href="/section/national-geographic-ga7unkc6sb3qhid0?intent=invite"><img class="background-image" src="https://images.nationalgeographic.com/wpf/media-live/photos/000/898/overrides/sheep-grazing-judean-desert_89872_990x742.jpg"><img src="https://cdn.flipboard.com/dev_O/featured/svg/logo_natgeo_dark.svg"></a>

And this is how a screen reader would interpret that HTML:

LinkGraphic slash logo underline natgeo underline dark.svg

Always include the alt attribute in the <img> element. If the image is there for visual design only, include an empty attribute alt="". For images that provide contextual information to sighted users, provide meaningful descriptions of the contents.

Flipboard.com also uses a lot of SVG, none which is accessible because there are no <title> or <desc> elements used to provide text alternatives for these graphics. For example, the Flipboard logo shows up as an empty link. SitePoint has a great article on how to create accessible SVG.

2) Form Fields Lack Labels

The sign up form on the homepage relies on placeholder text to do the job of field labels. The problem with this approach is that labels provide context for form fields that placeholder text can’t. Further the poor color contrast with the light gray text on a white background does not meet accessibility standards with a ratio of 2.28:1.

HTML for the sign up form with CSS disabled to show it does not have form labels

Labels don’t have to be visible, accessible by screen-readers only, but relying on placeholder text makes it difficult for users to remember what data to enter after they start typing; this is probably not a big deal for a three field form, but it’s a good idea to be consistent. This form could change the placeholder text into field labels while maintaining the same visual design.

screenshot of the sign up form with field labels always visible


This form does deserve some props for using a “Full Name” field instead of two fields for first name and last name, and for not having a “Confirm Password” field.

3) Poor Keyboard Access and Visual Focus

Many people cannot use a mouse (or finger) to navigate websites and rely on keyboards or assistive technologies to move between links. For this to work, links must

  • provide sufficient visual queues when they are in focus, and
  • be a logical order within the source code that closely matches the natural reading order

The simple litmus test for this is to try to tab through a site. I had a lot of trouble with Flipboard because none of the links had visual focus. For example, the “Sign In” link in the upper right changes background color on hover, but not on focus; so when users tab to this link, there is no visual indication of where they are on the page.

screenshot showing the sign in link box


Further, the “Sign In” link looks like it’s the first or second link on the page, but it’s actually the 12th link, requiring users to tab through the sign up form before they can sign in to use the site. That link needs to move up in the source code to be more readily accessible.

Some content is hidden from some users

Looking at the homepage with CSS disabled, I noticed two things that cannot be reached by everyone: a search box and a “Sign In” option that opens a modal window.

screenshot showing that the sign in link and search box are not visible when CSS is enabled

All content must be accessible to all users. While users can tab to the search box, it remains invisible on focus to keyboard-only user and it lacks both a field label and a form submit button. Ironically, search appears to be more accessible to screen readers than to visual users because I didn’t see search on the page.

The “Sign In” option functions as a link but is not marked up as a link.

<div role="button" class="tab-item login-button" data-
reactid=".0.$/.0.2.3:$signintabitem">Sign In</div>

Because it is not an <a>, users cannot tab to this element; it’s not really a link. I see this all the time, and there are several more examples on the Flipboard homepage. In my experience, this is lazy coding in a JS framework.

Recommendations

These three issues are just the beginning. The site does not make use of ARIA role attributes for navigation, proper headings for the document outline, or pass a logical structure check of the HTML. Flipboard needs to work with an accessibility expert to make its site inclusive. This web accessibility checklist is a good place to start.

Image Descriptions Finally Possible for Desktop Tweets

In March, Twitter enabled users of its mobile apps the option to add a text description (alt text) when tweeting images. Last week, the Twitter A11y Team announced this functionality is available to users of its desktop website too.

screenshot of the Twitter a11y tweet announcing desktop support for image descriptions, alt tags

To enable this feature, go to the Profile > Settings > Accessibility screen using the desktop version of twitter.com. Check the box for “Compose image descriptions,” then click the ‘Save Changes’ button.

Screenshot of the Twitter accessibility screen

You’re all set! The next time you insert an image into a tweet, you’ll have the option to compose a description, which will be added as alt text for screen readers.

Click the ‘Add description’ option at the bottom of the attached image.

Screenshot of a new twitter dialog box with the option to add an image description

Type a useful image description into the form field and click ‘Apply.’

screenshot of the image description screen for an image attached to a tweet

Here’s the image description as alt tag in the HTML.

<img data-aria-label-part="" src="https://pbs.twimg.com/media/CjzeFsQVEAAOQyk.jpg" alt="close up of a tabby cat's face" style="width: 100%; top: -84px;">

If an image is not given a text description, an empty alt attribute is used instead.

Why are some toilets still inaccessible?

The other day, I was in an older office building, definitely pre-ADA (1990). I went into the bathroom and saw an interesting and flawed attempt to retrofit it for accessibility.

photo of a double bathroom stall with an outer door to close off the space for a wheelchair user
Inaccessible bathroom

The bathroom has two regular-sized stalls with openings I estimated to be about 30″ wide. In order to accommodate a wheelchair, someone just added a door that would close off both stalls since neither stall is large enough to allow wheelchair access.

Granted the ADA regulations for bathrooms are complex and confusing to the lay person but even so, I’ve seen enough bathrooms to understand this was not cutting it.

Drawing of an accessible bathroom stall with door opening outward, width 35-37 inches, depth 60 inches, and grab bars
ADA small stall requirements

This drawing demonstrates some of the features required of an accessible stall. I can’t be sure of the width or depth of the stall, only that it lacks grab bars and the door opens inward.

This kind of oversight might not seem like a big deal to most people; but if you’re in a wheelchair and can’t use the bathroom, that’s an indignity. I’m always disappointed when I see half-ass things like this 26 years after the ADA was passed.

Design Recommendation

Seems like there are two good options:

  1. If you’re going to restrict the bathroom to use by one person only if she is in a wheelchair, remove the other stall and make one, large, accessible stall. The building is not that busy.
  2. Move the door for the first stall to the side wall so it’s usable even when someone else is in the accessible stall. Then remove the door on the accessible stall, turn the commode sideways, and install grab bars.
drawing of a wider, wheelchair accessible stall
Large, accessible bathroom stall