pendragon.online

Accessible Mobile Fashion e-Commerce Website

Mobile e-commerce site compatible with screen readers | HTML, CSS, JavaScript | Collaboration | Made for the blind

Define

A shocking report published by WebAIM (Accessibility In Mind) in February 2019 states that of the top one million website home pages on the internet, a staggering 98% of them had detectable web accessibility guideline failures. The report also stated that users with disabilities would expect to encounter errors and accessibility guideline failures on 1 in every 13 elements on a web page. What can be done to help?

For my dissertation I created a mobile fashion e-commerce website that is usable by the blind using screen reader software on a mobile phone.

Discover

Research from WebAIM and charities for the blind shows that:

36 million people in the world are thought to be blind - the vast majority over 50 years old.

20% of the human population will be in the 'aging population' category by 2050.

49% of web traffic was from mobile phones in 2017.

70% is how much mobile phone screen usage increased between 2009 and 2014.

23% of all web accessibility lawsuits took place between 2013 and 2016.

35.7% of blind users said a desktop computer is their preferred computing device (JBIR survey).

17.8% of all blind users said the iPhone was their preferred computing device (JBIR survey).

A group of people graphic.

Personas

User personas, created by W3C, helped me to understand more about how the disabled struggle to use technology.

Stock image of a side profile of an elderly man's head against a black backdrop.

85 year old retiree with low vision and hand tremmor

  • Uses the internet to blog, read the news and access social media.
  • Finds it hard to click on links in forms.
  • Finds it hard to read small text.
  • Has to increase the scale of websites to be able to read text and thus loses his place when text does not reflow correctly.
  • Problems with CAPTCHA verification on social media sites: can’t accurately enter the text because the text is too distorted when enlarged. Better experiences with alternatives.
  • He uses a web browser that saves thumbnails of recently visited sites – this helps him keep track of his browsing history and return to commonly accessed websites.
  • Uses a special mouse that is easier to control with hand tremmors.

Colour-blind user on an e-commerce website

  • Descriptions are difficult to read due to poor colour contrast.
  • Can’t tell the difference between certain colours, so some products look the same (no description with the colour of the item is provided).
  • Sites don’t have support for increasing contrast.
Stock image of a young man wearing glasses and a green jumper standing in the middle of a street with cars and trees on either side.
Stock image of a young woman with curly brunette hair wearing a white top and blue jeans sat on some rocks.

Deaf and blind teenager

  • She can only see a small portion of the screen and read text when it is significantly enlarged.
  • Uses a mobile device with a GPS to orient herself.
  • She uses an electronic braille device which includes an electronic calendar, e-mail, browser and note-taking facility.
  • She needs to use screen magnification software to enlarge text on websites to a suitable font size.
  • She uses screen reader software that outputs text on a refreshable braille device for her to interpret.
  • She has to use a large, high resolution and high nit (bright) display.
  • Better experience viewing content that is correctly marked-up for the screen reader and reflows correctly when scaled.
  • Finds that the text on many websites does not reflow correctly when they are enlarged. Makes content difficult to use.

Blind senior sales member

  • Can’t read braille, so screen readers and narrators must be used.
  • Uses a screen reader on mobile phone to view the web.
  • Screen reader tells her about the structure of the page and the order of content. It can even tell her what’s in tables.
  • Information is provided to her in audio format. She finds this easy to understand.
  • Screen reader does not work when websites have not been coded with this in mind – e.g. no ‘alt’ HTML attributes used.
  • Sites can be completely un-navigable and require time for the screen reader to all the content when no navigation cues have been provided.
  • She often finds herself unable to navigate away from a page and must abandon trying to interpret the page altogether.
Stock image of a blonde woman in her early 30s stood in front of some roses wearing a black leather jacket.

Why I decided to do this task

I thought ‘if mobile device use is on the rise, the number of visually impaired people is likely to increase and yet the visually impaired still prefer desktop computers, what can be done to make the mobile experience better for the visually impaired?’

That was how I came up with my dissertation title: ‘How can the accessibility of mobile e-commerce fashion websites be improved for the severely visually impaired?’

I chose to focus on fashion because it is a very visual topic and on e-commerce because I needed to choose a sector to focus on and the use of forms and other elements on e-commerce sites would be very testing.

Develop

Image of an accessibility prototype I made running on an iPhone. The prototype is just a basic text website with various elements such as forms, links, headings and menus to test how these work with a screen reader.

I researched how to create accessible websites by using HTML ARIA elements.

In order to get to grips with coding accessible websites I made several very basic prototypes featuring just text and images and tested these with Apple VoiceOver and Microsoft Narrator on smartphones to learn how to use these gesture-based screen readers.

I also tested many fashion e-commerce websites with Microsoft Narrator on a phone to see how accessible their mobile sites were. I tested the H&M, Matalan, Mark’s & Spencer, Primark, Lavish Alice TK Maxx and Tesco F&F mobile sites and none were really very easy to use with a screen reader.

Creating a brand

To make the e-commerce website prototype that I’d test as realistic as possible, I worked with a Fashion Design student at NUA to create a fashion brand and stock the e-commerce website with some her clothing. The brand we designed is called ‘FFA’ (Fashion For Accessibility). Clothes by FFA can be worn by anybody, but will be designed to be easy for the blind to buy and wear. Little things like:

  • Braille patterns so that the blind could read text on the clothing.
  • Selling ‘sets’ of clothing that don’t clash and are all made from the same textures and materials (making buying outfits and trousers and shirts easier).
  • Items of clothing use stretchier materials so that they don’t need to adjust their clothing as much and also because no fastenings (e.g. zips and buttons) are not required.
  • Samples of fabrics are available to buy cheaply so that customers can get an idea of fabric appearance and texture before they buy clothes

The brand itself is fairly simple and elegant – it is based somewhat on Zara’s brand, using a Serif font for its logo (Edwardian Script) and focusing on a very simplistic black and white colour palette to maintain elegance and cleanliness.

The logo itself is ‘FFA’ (without the full stops) in braille – further adding to the accessibility theme. The logo so happens to look similar to the brand mark and is extremely simplistic and memorable.

Information architecture

An information architecture diagram was drawn to show a possible site structure, based loosely on the structure of the H&M website in terms of the first and second layer page hierarchy.

Information architecture diagram for the prototype FFA website. Categories such as 'Menswear', 'Womenswear' and 'Unisex Clothing' are top-level items with each top-level item having sub-sections such as 'shirts', 'trousers' and 'basics'.

I chose this IA because:

  • It is a multi-page website with sections and categories that mimics a real e-commerce site.
  • It provides the challenge of creating navigation that works well with a screen reader.
  • I can be more flexible with the usability test that I write – I could get users to just browse the site and feed back to me, or write specific tests that have measurable goals and outcomes that measure how effective the site is.

Alt text for the images needs to include:

  • The colour.
  • The size.
  • The fabric used.
  • The kind of person that would wear the item.
  • A brief description of patterns on the clothing.

These are probably the kind of things that would describe the product images without repeating everything that is in the product description.

From this, I created wireframes and high-fidelity prototypes (complete with stock images) of how the website could look using Axure RP.

Home page

The design of the home page, like all pages on this site, is simplistic. Colours are generally black and white and items are arranged in a grid with no carousels, animations or moving elements. This sets the tone for the target audience: clean, stylish and elegant.

Wireframe diagram of the desktop home page. The header contains the FFA logo and type in the centre of the header and items are arranged in a 2x2 grid on the page, underneath a large hero image.
High-fidelity concept of the home page. The colour scheme of the website is black and white, with the header and footer black and the rest white. The product images show a level of class and quality.
Wireframe diagram of the mobile home page. The logo in the header is now positioned on the left and the 2x2 grid is turned into a single column design to fit narrower screens.
High-fidelity concept of the mobile home page. All images are the same as the desktop site, however the notable difference is the removal of the braille logo and just the FFA type is used.

Category pages

The design of the category pages is similar to that of the home page, where items are arranged in a simple 2x2 grid, however unlike the home page, the 2x2 grid is also visible on the mobile site too to save the user from scrolling.

Wireframe diagram of the women's wear category page for mobile. It is identical in design to the home page, with the exception of the page title being on top of the hero image rather than underneath it and items are displayed in two columns.
High-fidelity concept of the mobile women's wear category page. Like the mobile home page, items are arranged in a single column.
Wireframe diagram of the desktop women's wear category page. With the exception of the page title and description being on top of the hero image instead of beneath it, it's similar to the desktop home page.
High-fidelity concept of the desktop women's wear category page. The 2x2 grid that items are arranged in looks similar to the home page, however beneath the main navigation at the top of the page there is second-level navigation with the sub-categories.

Product pages

Product pages are very image-heavy. The aim is to showcase the clothes in the most visual way possible and have short descriptions. There is a section that is 'fixed' to the bottom of the page where the user can buy the item without needing to scroll to the 'add to cart' button. This design is similar to H&M's.

Wireframe diagram showing a product page - in this example an item called 'Black Dress' is shown. There is a big hero item at the top of the page which can be changed by clicking on one of the smaller images beneath it. Beneath that is the information text and then more images arranged in a grid.
High fidelity concept of the Black Dress product page shown on a desktop computer. The model is wearing a black dress on the top of a large building in a city. Colours are minimal.
Wireframe diagram showing the mobile version of the product page. It is similar to the desktop site in terms of composition but features one column for product information rather than two.
High fidelity concept of the product page on the mobile site. There is a container that is fixed to the bottom of the window where the user can select a size and add the item to the cart, just like on the H&M website.

View the wireframes and prototypes online

If you'd like to see a clearer view of these prototypes, please view them on Axure Cloud by clicking on the button below.

Screen reader compatibility

The site has been designed with screen reader compatibility in mind.

  • Menus that are not duplicated – i.e., in the mobile view the menu needs to be exactly the same as the desktop one, just rearranged into a different view (no separate HTML code for the mobile menu) so that the menu is only read out by the screen reader once.
  • Few big background images are used – instead images will be placed in divs and which makes adding alt text easier than trying to add alt text to big images, often set in CSS.
  • Second-level navigation (seen on the women’s desktop page) is obviously going to be read out after the main navigation by a screen reader and could be placed in its own section so that the user can skip it if they’d like.
  • No carousels are used – instead, a sighted user can click on the small image thumbnails underneath the main image on a product page to see a bigger version. The screen reader will theoretically just cycle through the different images and describe them to the user.
  • Descriptions are fairly short to save the screen reader reading out a lot of content.
  • Elements such as drop down boxes and radio buttons are generally avoided since these are difficult to use with a screen reader. Text input fields are only used where absolutely necessary.
  • Buttons are generally used to access pages – when using a screen reader buttons are more obvious to the user as links than having linked images are.
  • For those who need the best colour contrast, text is generally not overlaid on images. If it is, then it’s white text against a dark part of the image so that the text is as legible as possible.

Testing the idea

The website for the carpenters I made runs on a range of devices and is mostly orange and black themed. White sections of text and image appear on top of a background image depciting a wooden fence.

I then developed a website for a carpenter client which incorporated all of the accessibility elements I had researched and tested it with a screen reader and Google Lighthouse, both of which showed that it worked with a screen reader.

This website was later used to build the prototype FFA website and also the website you are looking at now – my portfolio site. The framework this site is built on is responsive, meaning it works just as well on a phone as it does on a phone or tablet.

Test

The prototype was tested for accessibility by the Google Lighthouse auditing software which gave the prototype a perfect 100% score for accessibility components such as correct use of alt tags on images, buttons and links. Lighthouse also praises the site for its acceptable colour contrast, legible font sizes and large touch points.

The prototype has also been tested for accessibility using WebWAVE which allows users to see which components of a website are accessible. The prototype passes this test too.

Four usability testing sessions were conducted. The first one compared a simple customer journey on the FFA prototype to the Next and Matalan websites with blind users. The results were impressive.

  • 75% of testers preferred the FFA prototype to the Next and Matalan websites.
  • However, 58% of all tasks in this usability test could not be completed – showing that there are definite usability problems for the visually-impaired on mobile e-commerce websites.
  • The Next and Matalan websites accounted for 75% of all task failures.
  • 60% of all tasks that were completed successfully in Round 1 were completed on the FFA website.
  • A user was 58% likely to be unable to complete a task on the Matalan website, but only 20% likely to be unable to complete a task on the FFA website – making the FFA website theoretically three times more usable than the Matalan website.
  • The Matalan website accounted for 52% of all uncompleted tasks. FFA accounted for just 18%.
  • 30% of all uncompleted tasks were on completing the purchase, making this the biggest point of failure.
  • No users were able to view the cart or buy the product on the Matalan website, but 75% of them could on the Next and FFA websites.

The FFA prototype was praised for its ease of use and thoughtful features such as announcing that the item had been added to the cart straight away and giving users the ability to have their checkout details read back to them before purchasing the item.

18 percent of all test failures (as a whole) were on the prototype website, compared to 52 percent for the Matalan website.
20 percent of all test failures (as individual tasks) were on the prototype website, compared to 58 percent for the Matalan website.
Buying products and viewing the cart were two of the most challenging tasks, but the FFA prototype was the easiest to use for each task.

Outcome

Video demonstration of the FFA prototype website in action. On the left, simulated gestures used by a screen reader user are shown.

Video demonstration of the FFA prototype website being used with a screen reader on an Apple iPad with the screen turned off (to simulate a blind person using this website).

High contrast versions of the pages on the FFA prototype website shown on different devices.

High contrast versions of various pages shown on different mobile devices.

Evolve

Later versions of the prototype added features to make the prototype website work better for partially sighted users such as the ability to change the font size and colours and introducing better error-checking for the checkout form.

This project was developed directly into the Eyes Without Sight project. The knowledge gained about designing for the blind and screen reader compatibility was used in the Eyes Without Sight project and knowledge about designing interfaces for the visually impaired was developed further on that project to develop complete knowledge of what is required to design for the visually impaired.

High contrast versions of the pages on the FFA prototype website.
High contrast versions of the pages on the FFA prototype website shown at different font sizes.

Related

Enjoyed this case study? Have a look at some similar work!

Helping The Visually-Impaired Read

'Expensive, difficult to use and incompatible with some platforms'. This is what visually-impaired users said about using technology to read. How can this be improved?

Stellardrive Car Infotainment System

Infotainment systems are standard even on entry-level cars these days, so why are they still frustrating to use, slow to operate and poorly rated? What would be better?

Cura-T Facebook Chatbot

How do you make finding clinical trials easier? Interning at Earthware, I worked closely with Cancer Research UK to develop a Facebook Messenger chatbot to do that.