I haven’t done anything with the dissertation since May 7th 2019 when I finalised the Report Proposal which was handed in with the rest of BSc2b on May 10th. Since then I have been working on some other projects and taking some time away from the dissertation since I focused very heavily on it from around April 16th to May 7th.

June 17th 2019 – research begins again

But firstly, I made a small modification to the title, adding the word ‘severely’ in front of ‘visually impaired’, to make it apparent to the reader that I am focusing my dissertation on the blind or near-blind and not those who are colour blind or short-sighted or have some other visual impairment.

What do fashion e-commerce websites look like?

Like most industries, the appearance of a fashion e-commerce website depends very much on its target audience and the brand identity, but there are some things that stood out amongst the various sites that I looked at today:

  • White is much more commonly used than black as the body colour, but often white and black are the only two colours used on the site.
  • Having said that, ‘young and playful’ brands tend to use more colours, whereas more established and ‘sophisticated’ brands tend to stick to a limited colour palette.
  • Home pages tend to feature carousels and/or big feature images, usually directing you to a sale or a celebrity endorsement.
  • Big images are used, often with rollover actions such as zooming in.
  • Text is minimal, with images usually being what draws people in.
  • The brand mark and navigation tends to be centred.
  • Stores such as Next and H&M which cater to a large audience (they sell a lot of different items of clothing and brands) tend to have ‘busier’ home pages to showcase what they have available than more boutique or luxurious brands, such as Zara, Natori and even Lavish Alice to a degree.
Next is a high street retailer catering to a wide audience and stocking many brands. As such, the site is designed to make it easy for users to find exactly what they want by offering search facilities and categories that the user can filter by, including brand,
On the contrary, Natori is a boutique retailer selling only lingerie. Their site is a lot more elegant and simpler and encourages the user to browse more than search.
Lavish Alice is somewhere in between. It looks more elegant than the Next site, but does also feature carousels of their products down the page showing the products they produce. Like Natori, they focus on one main item of clothing (dresses) but increase brand recognition on their site by showing the latest images from Instagram tagged with #lavishme to show their customers and the sort of target audience they are aiming at.

What will my fashion e-commerce site look like?

That depends on how I decide to do this.

Option 1 – collaborate with a fashion student

Fashion students at NUA produce their own clothes and also their own identities. Therefore, to me it makes sense to collaborate with one of them because:

  • I could take a brand that they have created for one of their university pieces and turn it into an e-commerce website.
  • I could photograph their work and these could be used as product images – or even use some of their own images (if they’ll let me).
  • They could help me write meaningful descriptions for the products.

I don’t know much about fashion or creating fashion brand identities. If I were to do this alone, I’d need to do a lot of research which would be time consuming. I’d also need to somehow find some images of clothing I could use after having decided what clothing I’m going to sell and what the brand target audience will be and so on.

This could be interesting and something very different to what I do ordinarily, but I’m more interested in learning how to create websites that the blind can use and doing research into that. I’m not going to be judged on the brand – the only people who may judge the brand and products might be the testers if they notice that the brand isn’t great or the product descriptions are a little odd.

I can’t expect to take their brand and work for nothing, so I’d likely offer them a copy of the website prototype so that they could use it to:

  • Show how their identity and products could look on an e-commerce site.
  • Demonstrate how the blind/disabled may access their brand and products.
  • Show that they can work on a project with a student studying a course that isn’t always considered to be related to theirs and on a project outside of their own university projects.

I have contacted my course tutor to find out if I can do this. If I can I will try and find a fashion student who’d like to help me.

Option 2 – design my own brand

Realistically I don’t know enough to do this alone, hence why I’d love to collaborate with a fashion student who has already done this and use their work – at the end of the day I don’t mind what clothes the site is selling since it doesn’t matter all that much to me or change the end result massively (other than the ‘look and feel’ of the site, really).

I know some students who studied (since they are about to graduate!) Fashion, Communication & Promotion and might be able to give some insight as to how to design my own brand. I’m not sure what I’d do about the clothing images and product descriptions – I guess I’d turn to stock photography websites and write something that seemed relevant by looking at what existing sites do.

Realism vs usability

A difficult decision I have to make is ‘how realistic does this site need to be?’

In order to design a site that is semi-realistic, it needs to have a brand and a basic identity as this will dictate how the site looks and feels – but that is not what’s being tested. What is being tested is how usable it is for blind users. However, in order to be realistic the site does need to resemble a fashion e-commerce site and it also needs to be usable and visually appealing for those who can see. How many websites exist only for the blind? Virtually none, but there are a number of sites that are not only excellent to use for the sighted, but also good for the disabled to use.

Designing and building the site

There is going to need to be some serious thought into the content hierarchy since this is critical for accessible websites. Headings and page elements such as header areas and body sections need to be in the correct order.

Regardless of who I work with or how I create the brand, the site will definitely need to be built with Axure RP or something similar. This will be an excellent way to improve my skills with Axure RP, which is something that I said I wanted to get better at this summer. If I’m working with a Fashion student I might work relatively closely with them on the initial wireframes and prototypes.

The website will be coded using a unique codebase that uses ARIA and WCAG compliment HTML as well as mobile responsive components for things like carousels and animations which potentially form a large part of e-commerce fashion websites. OwlCarousel and AOS (Animate On Scroll) can be used for these.

What’s next?

I think it would be a good idea to try out some of these fashion e-commerce websites on a mobile phone with a screen reader just to see how usable they are at the moment. I might not use an iPhone to do this like I was before because I don’t have an iPhone to hand, so I might use a screen reader on Android or Windows Phone instead, but the result will still be interesting to see (and it might also be interesting to compare VoiceOver on iOS to whatever I use on another platform).

Whilst I wait to hear if collaborating with a Fashion student is a possibility it might also be a good idea to think about the usability testing and how that could run and exactly what I want to get out of it.

Bibliography

The Independent. (2019). 110 best online clothes shops to bookmark as your fashion go-to’s. [online] Available at: https://www.independent.co.uk/extras/indybest/fashion-beauty/best-online-clothes-shops-women-men-luxury-budget-vintage-discount-8092852.html [Accessed 17 Jun. 2019].

Awwwards.com. (2019). 50 of the Fiercest Fashion Websites. [online] Available at: https://www.awwwards.com/50-fashion-websites.html [Accessed 17 Jun. 2019].

Inamedinova, L. (2016). Top 5 Fashion E-commerce Websites That Change The Way You Shop. [online] Forbes.com. Available at: https://www.forbes.com/sites/laura-inamedinova/2016/05/05/top-5-fashion-e-commerce-websites-that-change-the-way-you-shop/#53515a7e4cc7 [Accessed 17 Jun. 2019].

Orendorff, A. (2019). The State of the Ecommerce Fashion Industry: Statistics, Trends & Strategy. [online] Enterprise Ecommerce Blog – Enterprise Business Marketing, News, Tips & More. Available at: https://www.shopify.com/enterprise/ecommerce-fashion-industry [Accessed 17 Jun. 2019].

Siders, S. (2018). Top 18 Ecommerce Fashion Websites to Watch in 2019. [online] The BigCommerce Blog. Available at: https://www.bigcommerce.co.uk/blog/fashion-apparel-ecommerce-design/#best-fashion-ecommerce-sites [Accessed 17 Jun. 2019].

Zorzini, C. (2019). 60 Amazing Online Fashion Stores and Their UX Tricks You Should Steal. [online] Ecommerce Platforms. Available at: https://ecommerce-platforms.com/ecommerce-websites/independent-fashion-stores [Accessed 17 Jun. 2019].

June 18th 2019 – Using the Primark site on a mobile device with a screen reader

In my previous research I tried to use several sites using screen readers on desktop and mobile devices, but since confirming that I want to produce a fashion e-commerce website I haven’t attempted to try any fashion e-commerce sites on a mobile device with a screen reader to find out how easy – or difficult – they are to use.

I do plan to try out more sites than Primark, but Pimark’s site was a good starting point because just like Next they cater for a large audience and are very reasonably priced – not luxurious or high-end at all and so the website is probably a good ‘all round’ interpretation of the modern online fashion retail site.

The iPhone is the most popular smartphone among the blind as I found out in April when conducting initial research into this project. For that reason, when I was testing my own very basic prototypes in late April and early May to prove that I could potentially build a fully-fledged website that would work for the blind, I used an iPhone and VoiceOver. I don’t own an iPhone and I didn’t want to go into university to record the videos below, so instead I used my old Nokia Lumia 930 which runs Windows 10 Mobile. Windows 10 Mobile, like desktop versions of Windows, has Microsoft Narrator included with it so I used that.

My Lumia 930 has not been my main phone for over a year now, but has been used a lot recently for testing these websites.

The software on the Lumia 930 is 3 years old now and although slightly newer versions of Windows 10 Mobile do exist, they can’t run on the Lumia 930. Unfortunately as the 930 gets older day by day and the Microsoft Edge browser is improved at a rate of knots (very soon Edge will be running on the Chromium engine and Microsoft will abandon its Trident engine, for example), the 930 and its software become less and less relevant to today’s world and so testing on it becomes harder – and of course less relevant. Originally I had wanted to test the Next website on the mobile device with the screen reader since I had mentioned Next in my report proposal and this blog post, but unfortunately the Next website performs horribly on the 3 year old version of Edge (38) that is installed on my 930. The Primark website performed a lot better and is mentioned in my report proposal, so I tested that instead.

Microsoft Narrator vs Apple VoiceOver

Firstly, Microsoft Narrator has recently been overhauled for the desktop versions of Windows 10 – but of course with the production of new versions of Windows 10 Mobile ceasing at the end of 2017 with 1709 being the final release and support for it altogether ending by December 10th 2019, it’s very unlikely that Windows 10 Mobile devices will receive the new and improved version of Narrator that Windows 10 desktops will.

That said, I found the version of Narrator installed with Windows 10 1607 on my Lumia 930 to be OK to use. It’s very similar to VoiceOver in that it uses gestures such as taps and swipes to navigate the operating system (though the list of gestures isn’t as extensive – there’s less to learn but arguably it is a little less capable) and speaks out elements to you.

I found that Narrator had some nice features such as the ability to swipe up or down with one finger to change how you navigated through pages, e.g. it was easy to change whether you navigated pages by going to headings, tables, links, paragraphs, ‘items’ or even landmarks. I also liked how you could turn Narrator on or off by holding down the Start and Volume Up buttons – a lot easier than trying to find the option in menus and navigate using a screen reader through a lot of menus. Narrator also told you where links went to – a good and bad thing, potentially.

However, VoiceOver was better at reading pages from top to bottom without user interaction. It was easier to complete the forms using VoiceOver. The carousels worked better with VoiceOver and it was able to read the German text in my test site in German (Narrator couldn’t) and it also has the screen cover mode which is really useful for testing as well as privacy. I think the gestures felt more natural and responsive on VoiceOver too. It was easier to access operating system elements such as the system tray and browser interface with Narrator than VoiceOver, but I found that I’d often do this accidentally and it became an annoyance.

They’re both good options in their right, but I preferred using VoiceOver. I seemed to grasp it faster.

It would be interesting to see if the Narrator experience is the same on a Windows 10 tablet with the latest version of Windows 10 (such as my Surface Pro 4) to how it is on the aging Lumia 930.

Using my own accessibility prototypes with Microsoft Narrator

Admittedly, I did the whole thing backwards.

In order to get to grips with Microsoft Narrator, I should have first experimented with my own accessibility prototypes that I made at the end of April with Narrator to understand how Narrator worked and how to use it before testing the Primark site with it. Instead, I spent several hours playing around with Narrator on the Primark site and then finally knew how to use Narrator well enough to record a decent video of it.

Below are the two videos I recorded of me using my April 2019 prototypes on the 930 with Microsoft Narrator. I used a Microsoft app called Project My Screen to mirror my 930’s screen onto my desktop computer’s which I recorded – it worked well!

Testing my basic accessible website and accessible website with a carousel prototypes with Microsoft Narrator.
Testing my accessible forms prototype with Microsoft Narrator.

On the whole Microsoft Narrator was fine and worked in a similar way to VoiceOver, proving that if a site is designed to be accessible then it should work fine across multiple screen readers. Back in April these prototypes were also tested with NVDA on Windows 10 on my desktop PC and worked fine too.

Some things were harder to do with Narrator, such as selecting items from combo boxes (it was difficult with VoiceOver too, perhaps it’s best to avoid them and use radio buttons or check boxes instead) and it couldn’t read the whole page, but otherwise it was fine.

Using the Primark website with Microsoft Narrator

The Primark website was not amazing to use with a screen reader. However, I might try using it with VoiceOver just to see if it works better with that screen reader (though theoretically it won’t make a difference).

The key issues I found were:

  • Images had no alt text at all – a big mistake for fashion websites where people buy clothes purely based on how they look!
  • Heading levels were used incorrectly – the page title was in an H1 tag, but there were no H2s or H3s on the main pages, but H4s were used for product titles. The H4 tags should be replaced with H2s (that have the same styling as the current H4s) or the H4s should be regular paragraphs with the styling of the current H4s.
  • Interactive experiences, such as ‘pinch to zoom’ images did not translate well or at all with screen reader use. You’d often reach one and the screen reader would have trouble knowing what to do or say, especially as there’s no alt text for the image.
  • Pages were not constructed using ARIA elements such as using <main> tags to hold the site content. This made navigating between landmarks difficult and instead more time consuming options such as navigating by headings or page elements (or ‘items’ as Narrator calls it) had to be used.
  • Sometimes Primark have two items with the same name and description on their site, but there might be a subtle difference between them such as the size. I thought this could be confusing for users, sighted or otherwise. Instead, I feel that items with multiple product SKUs or options should be on one page and the user can select any options on the page.
  • Product images often form links, but the screen reader [Microsoft Narrator] was unable to inform the user that this was also a link unless the user happened to be navigating the site by links.

It will be interesting to try some other fashion e-commerce devices to see if they have similar problems.

In the video below I wasn’t able to find my nearest store to buy the clothes, but I think if I tried to do this again I’d have a better idea of how to attempt using Narrator – I think the issue was that I didn’t completely know how to use Narrator.

Me attempting to use the Primark website with Microsoft Narrator.

Do I think I can make a better mobile fashion e-commerce experience for the blind?

I think so. By seeing what problems I encountered when using the Primark site I already have some ideas for how I can make a site that’s much easier for a blind user to use, but also looks good for somebody who is sighted. Basic things like the addition of alt text to describe what the clothes look like would be a massive – and very simple – improvement.

This brings me neatly onto my next point…

Fashion collaboration or go it alone? To brand or not to brand? What am I testing?

All good questions.

Can I collaborate?

Yesterday I made the first steps to find out if I could work with a Fashion student on this to see if they could help me develop a brand and some products that my site could hypothetically sell. My tutor says he doesn’t know the answer to that question just yet, but will do in July. He says he doesn’t see it being a big issue though because what I’m being assessed on is my technical report – not the fashion brand used in the prototype.

To brand or not to brand?

My course tutor feels that the brand is not critical, rather a ‘nice to have’. I feel that in order to design a site that looks like a genuine fashion site a brand is needed or at least considered. The appearance and functionality of the Next and Primark sites is completely different to that of more luxurious brands. As a compromise, I could make my own brand based on an existing one and not worry too much about it since at the end of the day, the usability of the prototype with the blind is what’s being tested – but I’d like to try and make something convincing that potentially works for everybody.

Would I be wasting my time thinking about colours and images form a part of a site that’s going to be tested with people who cannot see? I don’t think so. If images and colour form a large part of a website and a brand then surely those should be communicated to its audience, regardless of whether they can see or not. In my mind, the [blind] user should be able to picture the brand and its product in their head. My title asks ‘what can be done to improve the accessibility of mobile e-commerce sites’ – being able to visualise a brand and its products is surely an improvement? In my mind it’s no different from a deaf person being able to look at a fast car or a jet fighter and being able to imagine the noise that it makes.

Usable for just the blind or an investigation into e-commerce sites in general?

My dissertation is still all about accessibility and specifically for the blind or severely disabled. ‘It’s gone too far to cancel,’ is what I think when I consider changing it and I don’t want to change it. Building a prototype with a logical/representative user flow that a blind person can use on a mobile device (likely an iPhone with VoiceOver) is at the heart of the project and the technical report will focus on the success of that interface and experience.

The brand and the visuals and everything that goes ‘on top’ is technically a ‘nicety’, but potentially a necessary nicety. Again, my title asks how accessibility can be improved – if it can’t be improved without making a website look ugly or unable to incorporate a brand then the chances are that in the real world these improvements will never see the light of day.

Personally, I think that these improvements can be incorporated into a nice looking site. Putting content into sections such as ‘<main>’ and ‘<header>’ and adding alt text for images doesn’t fundamentally change the way a site looks, rather just improves accessibility for screen reader use. I expect the conclusion of my report to be along these lines.

The industry is looking for products that work well for everybody. Does creating a prototype that only works for the blind defeat the purpose of accessibility? Yes, in my mind.

So to conclude, the site needs to look realistic and ultimately be an enjoyable experience for everybody to use – but the core of my technical report will be about how it’s better for the blind to use than a site like Primark’s (for example) and will also gently mention that it’s potentially usable for everybody. Though I am still undecided about whether sighted people will be testing my prototype at this point in time.

Bibliography

Support.microsoft.com. (2017). Hear text read aloud with Narrator (Applies to: Windows 10 Mobile). [online] Available at: https://support.microsoft.com/en-gb/help/17245/windows-10-mobile-narrator [Accessed 18 Jun. 2019].

Support.microsoft.com. (2019). Microsoft Lifecycle Policy: Windows 10 Mobile. [online] Available at: https://support.microsoft.com/en-gb/lifecycle/search?alpha=Windows%2010%20Mobile,%20released%20in%20August%202016 [Accessed 18 Jun. 2019].

June 19th 2019 – Using the Lavish Alice website on a mobile device with a screen reader

After yesterday’s mixed experience with using the Primark site on my Windows 10 phone with Microsoft Narrator, I thought I’d try out another fashion e-commerce site and see if the experience was any better. I decided to try Lavish Alice, since it is mentioned in this blog post and seems to be (from my very limited fashion brand knowledge) almost like a ‘half-way house’ between a brand like Next and Primark that cater for a wide range of people and a brand like Zara which seems to be a lot more luxurious and caters to a narrower target audience. Lavish Alice also has some celebrity endorsements, including some of the members of Little Mix and Mollie King who was in the girl band The Saturdays.

You can see the video of me using the Lavish Alice site with Narrator below.

Using the Lavish Alice website using Narrator,

My findings from using the Lavish Alice website with Narrator

On the whole it seemed to be a good experience. I felt that the site had been designed with accessibility more in mind than the Primark website for the following reasons:

  • The website has been constructed in landmark sections, e.g. most of the page content is contained in a section called ‘main’ and the footer in a section called ‘footer’ and different items in the footer are in individual sections. This makes it quicker for the user to navigate using a screen reader because they can jump between whole sections rather than between headings, paragraphs or links.
  • Images have descriptive alt text, meaning that the user is able to visualise what is on the screen.
  • The alt text is intelligent – it is even able to describe images that come in from Instagram and are displayed on the #lavishme grid (which takes its content from the latest Instagram posts tagged with #lavishme).
  • Even buttons that use icons rather than text have alt text, for example the shopping bag button in the upper right of the site uses an icon of a bag rather than a label – the button has the alt text ‘bag’, so the screen reader is able to read this to the user.
  • Headings are used more consistently, for example the main site heading is an H1 and the rest are H2. There are no H3s or H4s that I could find, but the use of heading level 2 did seem appropriate throughout.
  • The site’s hidden navigation works really well with the screen reader because of it’s use of panels that expand across the page and the fact that links to expand these panels are all in list elements, so the screen reader is able to list the number of items that are in the menu and tell you where you are.
  • Interactive elements that work well for sighted users, such as carousels, worked OK with the screen reader because

There were some things that weren’t so easy to do:

  • Where there were images that appear in ‘lightboxes’ (i.e., as an overlay on top of the site) it was very difficult to ‘escape’ or close these images to continue using the website.
  • I wasn’t able to add an item to the basket because for some reason on the page where I had to select my size I couldn’t use the screen reader. I’m not sure if this is a flaw with my skills, Microsoft Narrator or the website.

I also learned that it was possible to scroll through items in combo boxes with Narrator by simply swiping up and down the screen using one finger (similar to how it’s done in VoiceOver) you can ‘scroll’ through the options in the menu and Narrator will tell you what’s in the combo box.

What I learned by using the Lavish Alice website with Narrator

It proves to me that is possible to make an attractive-looking website that does work with screen readers – but it can be made better.

I liked the navigation used on this website a lot and was very impressed with how well it worked with a screen reader. This is possibly a good source of inspiration for how I could create a similar navigation experience on my own prototype.

The use of sections was really interesting – it taught me that you should really put content into sections to make navigating the site quicker for those using a screen reader.

It also taught me that alt text on images can be really important and in terms of fashion sites, can probably make or break a sale.

Testing some high street brands’ websites with Narrator

I thought it would be good to put some high street names to the test. I’ve already looked at the Primark site, time for some others.

The reasoning behind this is to see if these high street names are truly catering to a wide audience. It would seem odd that the Lavish Alice site, that caters to quite a small market (in the grand scheme of things) has better accessibility than a high street name that a wide range of people shop at.

TK Maxx

Discount fashion retailer TK Maxx is a high street name that appeals to a large audience.

Watch the video below to see how the site fared!

How did TK Maxx do?

On the whole it was OK but there were several annoying usability issues:

  • The hamburger menu couldn’t be used with the screen reader. The screen reader couldn’t recognise that the hamburger menu was the div that was on top – it kept on reading assets that were on the website underneath it.
  • The URLs are really long – I know sometimes URLs have to be long, but it’s an annoyance for screen readers because they all read the URLs (but some read them more frequently than others, e.g. Narrator reads the URL that each and every link on a page will take the user to – others just read the URL of the current open page).
  • The TK Maxx site appears to use the product title as the alt text for images, which can be a bit confusing when the user hears the same thing is read twice. Sometimes it’s not obvious that this might be alt text and the alt text is not terribly descriptive. Imagine some alt text that read ‘Nike Downshifter Trainers’ – but what do the trainers look like?
  • There are a lot of headings on the site – almost all text appears to be a header, not paragraph text. This means that H1-H5 are used.

Otherwise, it worked OK. The use of sections was good and on the whole navigating the site through landmarks worked fine.

Tesco F&F

When I was researching accessibility for the blind for the first time in April 2019, I discovered that Tesco was one of the first companies to bring accessibility into their website design. In around 2000 their website was deemed a good example of a site good for the blind.

Have they managed to uphold their reputation?

How did Tesco F&F do?

There were some features of this site that should have helped improve accessibility, but using Microsoft Narrator at least there were some annoyances:

  • Items tend to be placed in HTML sections which means that the user can navigate between landmarks/sections quickly and therefore get to the bottom of the page faster, but accessing the individual items inside these sections can be difficult.
  • The Tesco site is unusual in that products are not directly accessible from the site, for example tapping on one of the pictures of the clothes does not open a link to buy the product (for both sighted and non-sighted users). This is possibly more of a general usability issue. I couldn’t find out how to make a purchase or even reach a product page.
  • Pictures don’t tend to have alt text, so it’s not easy to imagine what’s on sale.
  • The navigation works just like a regular drop-down menu, but accessing it requires navigating through a few landmarks and sections within sections to reach the button to open the hamburger menu.
  • The Tesco logo appears to be made of multiple images or multiple parts of an SVG, so navigating through the site by individual items takes the user through each part of the logo before they can progress onto the next item on the site.

It wasn’t bad, but navigating ‘through’ the logo was difficult and it was also difficult at times to access some of the individual items in groups. It was probably better to use than the Primark website, despite the lack of alt text for images (Tesco’s item clothing titles are quite straight-forward and do describe the piece of clothing, so it’s easier to understand what’s being shown than it is on the Primark site), but not as easy to use as the Lavish Alice site or even TK Maxx’s.

Mark’s & Spencer

M&S is another high street retailer, aimed at the older, more mature market. Perhaps they have some good accessibility options to cater for an audience who may potentially suffer from partial sightedness? Watch the video below to see how their site fared!

Note that their website is a little different because they don’t have one distinct ‘clothing’ site, instead it’s broken down into different types of clothes which are sub-sites of their main site which also sells things like food and furniture.

How did M&S do?

Not badly on the whole, there are some good points such as how easy it is to navigate through carousels and select product options, but there are some annoyances too.

  • Using a screen reader, the user must always navigate through the 15-item long hamburger menu, regardless of whether it is collapsed or not. It takes a lot of swiping or constantly changing the navigation method on the screen reader to skip the navigation.
  • The ‘accessibility link’s are not accessible via the screen reader.
  • Image alt text is poor, but some links (such as the link to go to the main M&S site in the header area) have link alt text which is a welcome addition and unusual. The screen reader reads link alt text in the same way that it reads image alt text.
  • The site, like a lot of others, is broken down into sections, but sometimes there are sections nested inside of others which can potentially be a little confusing to navigate, but can help speed up navigation potentially if you know what each section contains and know that you may want to skip that section.
  • This is a common issue among most websites, but sections aren’t labelled so often it is difficult to know what’s in each section without navigating through the content inside them.
  • Modal windows are relatively easy to close by activating the section that they are in, but this wouldn’t necessarily be obvious to a blind user. They wouldn’t be able to tell if the modal window had been opened or closed.
  • Carousels however are easy to navigate with the screen reader telling the user how many items are in the carousel and which item is currently active, a little like a list.
  • It was easy to select product options from combo boxes and add items to the bag, but not so easy to navigate the bag and access the checkout page.
  • Heading levels appear to have almost been used correctly, with H2 and H3 headings being used correctly, but with no H1 headings at all.

Matalan

As a budget high street retailer, Matalan is one of the ‘go-to’ places for British shoppers to buy their clothes. How did their site fare?

How did Matalan do?

‘Average’ is how I’d describe it. Again, not overly difficult to use, but not extremely easy. I was however able to go to the checkout on this site using the screen reader which I haven’t been able to do on any of the other ones so far, so that is a good thing.

  • The site does not appear to be split into sections, meaning that to navigate through the site you need to navigate by individual items or headings or links. This slows down navigation but at least it gives you a rough idea of where you may be as you are required to navigate between elements and headings rather than untitled sections.
  • Although I could get to the checkout, the checkout window on their mobile site is a modal window which requires a lot of ‘navigating’ to get to – you have to navigate through the elements on the page underneath the modal window before you reach the elements in the checkout modal window itself.
  • The hidden navigation still has to be navigated through even when the button to open it has not been activated.
  • Links are not always obvious and are often pictures that need to be activated.
  • There is little-to-no link alt text and image alt text is just the product name – which often does not describe what the image is displaying.
  • However, carousels are easy enough to navigate with the screen reader using the previous and next buttons as well as the little ‘breadcrumb’ buttons at the bottom of the carousel. Sadly because there is poor image alt text, it can be difficult to decipher what the image in the carousel is displaying.

H&M

Multinational mid-high end retailer H&M have a very visual website, but does it work well with screen readers?

How did H&M do?

The site wasn’t bad, there were some good points but also some usability faults.

  • The site’s home page is arranged into very logical sections, but sadly the product and category pages are not, so navigation on these pages is a little harder and needs more swiping.
  • The home page is very visual but unfortunately does not have good image alt text – a lot of the image alt text for images on the home page is just ‘campaign image’ which is not descriptive at all.
  • However, the image alt text for product pages is much better and more descriptive, often including the colour and size of the clothing.
  • The bag is easy to access and the button has appropriate link alt text, but unfortunately committing to a purchase by going to the checkout is more difficult.
  • Certain carousel elements such as the breadcrumb buttons to move the image are in individual sections, meaning that when you navigate the site using landmarks (supposed to be the quickest way of navigating since you are skipping whole sections of a website) you have to go through each element in the carousel which is very slow and frustrating.
  • You don’t have to navigate through the hidden menu unless the button to activate it has been tapped – which is a benefit!

What testing these sites has told me

It’s told me that there is a need to improve accessibility of mobile fashion e-commerce sites, first and foremost. No site that I tested was perfect to use with a screen reader. I don’t propose on making a site that is ‘perfect’ to use with a screen reader, but I hope I can make one that’s better.

Things for me to take into account:

  • Keep URLs short – some screen readers read out URLs of links.
  • Avoid using modal windows – they can be difficult to close and even to reach.
  • Ensure that hamburger menus can only be used when the button is ‘activated’.
  • If possible, don’t use hamburger menus at all.
  • Ensure that sufficient image alt and link alt text is used to describe the website to a blind user. Buttons with links such as the shopping basket/bag should definitely have alt text.
  • Place headings between sections to describe the section to the user.
  • Sections are good for navigation as they help the user to skip large chunks of the site.
  • Combo boxes are possibly better than radio buttons or check boxes because the user doesn’t need to navigate through them all to get to the next item. The combo box list is either collapsed or expanded.
  • Carousels can work with screen readers if the buttons to operate them can be activated and if the images can have sufficient alt text. Otherwise, they should probably be avoided.
  • It needs to be very easy to reach the checkout with as few popups as possible since these are difficult to navigate with the screen reader.
  • Heading levels need to be correct and consistent.

Bibliography

W3C Web Accessibility Initiative (WAI). (2009). Tesco – Case Study of Accessibility Benefits ◦ Web Accessibility Initiative ◦ W3C. [online] Available at: https://www.w3.org/WAI/business-case/archive/tesco-case-study [Accessed 17 Apr. 2019].