Fresh MeUndies for Everyone
Common accessibility pitfalls on the web
July 11th, 2016. This was the day my life was turned upside-down. This was the day my skin first came into contact with the soft, sensual silk of MeUndies boxer briefs.
I was an instant fan. After the high of wearing my first pair of MeUndies wore off, I wiped the sweat off of my forehead and thought, “hot damn… everyone should wear MeUndies”. Naturally the next thing I did was bust out a screen reader to see how accessible their site was.
The experience that followed was heartbreaking. MeUndies’ website was a total accessibility disaster! There were no headings, keyboard navigation was a pain… and so on.
These types of accessibility problems happen all too frequently. In this post I go over some common accessibility pitfalls on the web and how to fix them, using the MeUndies website as an example.
To preface, I am by no means trying to take a jab at the folks that built the MeUndies website in this post. Simply put, I just don’t want their website to prevent anyone from getting a pair of fresh undies.
The screen reader testing conducted in this post was done using OSX’s VoiceOver.
1. Add ARIA landmarks
The first thing I noticed was that the site had no ARIA landmarks. ARIA landmarks help break up sections of a page and make it easier for screen reader users to navigate and get an idea of the page’s structure.
ARIA landmarks can be added by using appropriate HTML5 tags . For example, if you wrap your navigation in the <nav> tag, it will appear as “navigation” in VoiceOver’s Landmarks menu. It might be a good idea to add role=”navigation” to make sure other screen readers pick it up too. Other examples of ARIA landmarks include:
You can find a full list of ARIA landmarks on Paciello Group.
A good example of this can be found on Simple Accessible. They use landmarks to allow screen readers users to jump to different sections of a page.
Recommendation: use markup such as <nav> and <main> and their respective role attributes to enable landmark navigation.
2. Improve headings
Headings are an extremely important way for screen reader users to get an idea of what content is on a page. This excellent Simply Accessible article shows that 65% of screen reader users rely on headings to find information on a page. This can be compared to how the table of contents on a Wikipedia article gives us a rough idea of the content of the page.
On MeUndies.com, there are many different elements that look like headings, but are actually regular old <div>s under the hood. As such, these heading-like elements are not detected as headings by screen readers.
At the time of writing, the homepage on MeUndies.com contains zero headings. This means that screen reader users who are visiting the site for the first time have very little idea of what to expect on the page.
Recommendation: use proper HTML heading tags where appropriate to provide better high-level information about the page.
3. Restore focus states
The third problem with the MeUndies.com website is that the site’s stylesheet has removed the outline on focusable elements such as buttons, links, and form elements.
I often use my keyboard to navigate, and it’s frustrating when there’s no visual indication of where I am on the page as I hit the tab key.
The GIF below taken from Shopify’s Solo theme is an example of a web page that has not removed focus state styles. It’s easy to see where you are on the page thanks to the blue outline.
Focus states should never be removed. You can imagine how frustrating and disorientating it is for users with motor disabilities who rely on keyboards to navigate.
Recommendation: remove any CSS that hides the outline on focus, or at the very least add a custom style for focus states.
4. Provide better context for links
I noticed that a lot of links on the site weren’t helpful to screen readers. For example, the social links in the footer do not say what site they’re pointing to:
This occurs because there is nothing inside the <a> tags, as shown in the screenshot of the markup below:
This can be fixed by adding a visually hidden span inside the anchor tag, or Visually this would make no difference to the footer icon links, but screen readers will read out the content that’s inside the anchor tags, giving screen reader users better context of where the links point to.
My good friend Scott Vinkle points out that CSS background images do not display on Windows’ high contrast mode, so using an <img> tag or an SVG for the social icons would be an even better way to fix this.
Recommendations: Add visually hidden labels or use images for social icons inside links to tell screen readers where the links are going to.
5. Use semantic HTML
One major problem I noticed was that there was no way to activate the cart summary popover using a screen reader. Not only are screen reader users unable to see a summary of what’s in their cart, they are also unable to proceed to the checkout process.
Twitter Bootstrap’s Dropdowns component is a great example of an accessible popover done right. You can see below how the screen reader gives useful information about the buttons, such as whether or not it’s expanded and how it’s an activator for a pop up.
Another example of this can be seen in the colour/pattern selector in the underwear details pages. Again, <div>s are being used instead of more appropriate markup; as such it does not appear on screen readers. Worse yet, if you rely on a keyboard to navigate the site you’re pretty much screwed because you cannot focus on the <div>s to select a colour or pattern.
The carousel is guilty of this too. The images in the carousel are not being output using <img> tags, so screen reader users are not able to access them. If the image is decorative and is not an important piece of content for the page this would be fine, but in this case visually impaired users would want to a description of the product images.
Recommendations: stick to semantic HTML. Avoid using <div>s for elements that should be <button>s or <input>s, or any other form elements. Use <img> for images if it’s not decorative (ex: an icon or background image) and is a crucial part of the page’s content.
I’ve come across the aforementioned issues often while browsing the web. They can be resolved easily and can instantly make a site more accessible to screen reader and keyboard users. I hope the folks at MeUndies takes these points into account — everyone should be able to cover their tushes with a soft, comfy pair of MeUndies!
Update: The fantastic folks at MeUndies got back to me and looks like fixes are on their way :) I really appreciate how fast they got back to me and how quickly they took action… hats off to you, MeUndies staff!