7 Steps To Digital Accessibility

A pile of purple pound coins representing the Purple PoundOver 20% of the world’s population has a disability and in the UK the combined spending power of people with disabilities and their families, also called the Purple Pound, is £249 billion a year. For this reason, ensuring your products and services are accessible and able to be used by people with disabilities makes good business sense.

Whether you're a small company just starting up or a larger corporation that's been in operation for a long time, we know there may be challenges in sourcing information that will allow you to make your products and services fully accessible. As an Accessibility and Usability Consultant at AbilityNet I've worked with our Digital Accessibility Services team to produce this seven-step guide to making your digital product accessible to all users, including those with disabilities.

A mobile phone with someone doing some online shopping Digital services can provide a level of independence to people with disabilities that they've never experienced before. A person who may not be able to walk to their local bank due to a physical disability can complete financial transactions using a banking app. A person who is blind can shop online rather than in-store using their computer and a screenreader, which is a piece of assistive technology that describes the visual information displayed on a computer screen. In both examples the digital service on offer allows greater ease of access for the customer compared to navigating to a shop in-person and then requiring assistance from someone in-shop. If you don’t design your websites and apps in an accessible way you are not only losing customers - you are denying people with disabilities their independence.

1. accessibility shouldn’t be an after-thought

Make sure you consider accessibility throughout each part of a project and don’t leave it until the last moment. It will save you a lot of time and money if different access needs are considered throughout research, design, development and testing phases. Retro-fitting accessibility can be stressful, painful and extremely challenging. An inclusive approach which is well-planned will ensure you have a more usable product/service which can be enjoyed by a greater number of your customers.

2. use personas

Using personas of people with situational, temporary and permanent disabilities will help you to understand the diverse needs of your customers. Conduct user testing on your website or app using people with disabilities when possible. Barclays' free Diverse Personas guide is available online and can be used to help people designing products and services to understand the needs of customers with different disabilities.

3. simplify language

Try to ensure you simplify language as much as possible so your content is accessible to as many people as possible. At the Government Digital Service (GDS) they try to ensure their content has an average reading age of nine. People with low literacy levels filling in passport forms, as an example, then have a much better chance of completing their tasks. There are a lot of great tips on language from the GDS

4. colour contrast

Ensuring you have good colour contrast makes content easier to read for people with low vision and also for any users accessing your website or app when out in the sunshine. You can check your colours using Check My Colours which analyses the colour contrast of web pages.

5. provide descriptions

You can provide descriptions to every image using alt text. Decorative images should have empty alt so they can be ignored by screenreaders. This includes adding captions for images on social media. You can review our articles on adding alt text to Facebook images and how to make your Tweets accessible. A quick web search should produce some great advice for web pages too. 

6. provide subtitles for video

With people increasingly using their smartphones on the move there has been a large increase in stats of video views without sound. Recently it was shared that around 85% of Facebook video views are with sound muted. This statistic makes a great case for subtitling your content. You should provide subtitles and transcripts for video content as this helps people who are hard-of-hearing, who may not have English as their first language and the 4 million non-disabled users whose preference is to use subtitles according to the ODI

Transcripts for videos particularly help people who are deaf and blind as they can convert the text to braille. YouTube offers a great free service with closed captions which can now be edited, but for embedding captions we recommend adopting others services to assist with captioning video content.

Quick and easy test: turn off the sound and watch your video. Does it make sense if not provided with subtitles and a transcript?

7. use native html

When possible ensure you use native html elements such as buttons, links and select boxes, as they are inherently accessible with assistive technologies such as screenreaders. If you need to develop custom elements ensure they have the appropriate ARIA support which will ensure they are accessible by assistive technology. HTML is a preferred format to PDF but if you need to use PDF ensure you tag correctly for accessibility. For more information on understanding how semantic HTLM can be used to enhance accessibility see the W3C Web Content Accessibility Guidelines (WCAG) 2.1

Quick test: unplug your mouse and ensure you can fully navigate and interact with buttons, links and forms on your website just by using the keyboard. This will dramatically improve the accessibility of your website for people who cannot use a mouse and for screenreader users.

AbilityNet can help

At AbilityNet our aim is to make the digital world a more accessible place. We offer a range of free and expert paid-for services for people at home, at work and in education. AbilityNet has a range of resources and expert knowledge we share with our clients and on our website. If you'd like to know more about our services you can contact us by calling 0800 269 545, email enquiries@abilitynet.org.uk or visit the Digital Accessibility Services section of our website.

Embed inclusive design to reach a wider audience, says AbilityNet expert

AbilityNet’s accessibility and disability consultant Raphael Clegg-Vinell challenged delegates at the London Chapter of World Interaction Design Day last month to think about inclusive design differently.

Often apps and websites - even those run by large companies - do not adhere to inclusive design principles and end up excluding many thousands of potential customers. “I wanted to get across that inclusive design is a different concept to accessibility,” said Raphael. “Often clients come to us late in the development of a site or app and we can make small tweaks to make sure they adhere to accessibility guidelines. We will look at how they can make things technically accessible for people who are blind or deaf for example. "

It's impossible to design for everyone

“But with inclusive design, from very early on, you’re looking at how you can design for as many people as possible. Inclusive design is about accepting you can’t design something which works for absolutely everyone, but looking at your audience and designing for as many people as possible. We don’t mean just for apps and websites, but for services too such as checkouts, for example.

"Some obvious points might be to not have lots of buttons very near to each other on a screen. If someone struggles with dexterity for whatever reason - they could have a disability, less mobility with old age, but perhaps even long fingernails could be an issue. It makes sense to put more space between buttons and therefore design for a much wider number of people.”  

workshop participants at the IxDA meetup

Raphael was joined by Dr Madeleine Pritchard, a research fellow and speech and language therapist at City, University of London. Together they challenged participants at the event co-run by Adobe and the London chapter of the Interaction Design Association ( IxDA) to redesign an app using inclusive design principles. 

Cognitive disabilities and accessibility

They presented some of the key differences between accessibility and inclusive design and progressed to look more specifically at cognitive disabilities and accessibility. “Cognitive disabilities and accessibility is something that’s often overlooked,” said Raphael. “We explored the subject and participants were given exercises to demonstrate what happens when each of us comes into contact with interfaces, particularly when they’re complex and busy.  

workshop attendees were presented with challenges that required inclusive thinking

“Workshop attendees were then given a design challenge focusing on re-designing an app to benefit people in a range of environments and with different access needs.”

The IxDA, which leads the day, has over 200 local groups globally and over 100,000 individuals. It brings together interaction designers and people interested in the discipline from all sorts of different job roles.

Raphael said: “The day was a great success. Positively, inclusion and diversity in design has been gaining lots of traction recently and many companies are starting to realise the benefits it brings to their business and brand. Personally, myself and Madeleine were pleased with the workshop we ran and we received lots of kind feedback afterwards. We look forward to the next Interaction Design Day.”

More information

Seven apps to help reduce anxiety at University

The Students' Union at the University of Manchester recently voted to drop clapping, whooping and cheering in favour of "jazz hands" to help reduce anxiety amongst people for whom social situations can be very stressful. We've seen a big increase in stress and mental health issues in the work we do supporting students so we recognise what an impact this can have on a person's studies.

We also know that many people don't realise how technology can help reduce stress and help them feel more in control of their studies. A student using an app on their mobile phone

Change brings stress

According to the Guardian up to a third of the population will experience an anxiety disorder or panic attacks at some point in their life. Levels of stress and anxiety can change when we least expect it - but most people report an increase when they’re in a new environment, such as starting university.

It's understandable that students may feel overwhelmed with deadlines, a change of location, managing finances and the pressures of maintaining a good work/life balance. But, there are ways to help minimise the stress. 

Useful apps and advice for anxiety

1. Exercise

Exercise is a great way to reduce stress and the Nike+ training app is a comprehensive and stylish app. It offers workouts of varying endurance, mobility and strength, from short, 15-minute workouts to longer endurance sessions, so you can constantly change up your workout and keep it exciting.

2. Take time out

The Calm app can help teach the skill of meditation, help encourage restful sleep, provides information on mindful movement and offers music to help you focus and relax. 

Adult colouring books are all the rage, and Colorfy puts a digital twist on this calming technique, choose from a range of images from flowers to cute animals, just tap the section and colour away.  

3. Planning and organising

Google Keep is an electronic post-it notes app that can make simple text notes and checklists - you can take pictures, use the touchscreen for handwriting/sketch input and record short voice memos. It has a nice, visual, tile-based interface and synchronises between app and the web. It also has location-based reminders, so you can set a note to notify you when you are in a specific location; your shopping list can ping you when you are in town, or the question you scribbled down to ask a lecturer will ping you when you are on campus.

4. Mental health support

Your Students Union will be loaded with plenty of useful help, advice and knowledge of local groups where you can talk with like-minded people. You can also contact Student Minds the UK's student mental health charity, they aim to 'transform the state of student mental health so that all in higher education can thrive'.

5. Finance management

Monzo is a new way of managing your banking. A few friends have tried this and are very happy about the positive money management it gives them. You can set spending targets as monthly targets for spending on things like groceries and going out.

Monzo banking app works on iphone and android

You'll be able to see an overview of your account any time, sorted by what you spend on, with notifications if you’re spending too fast. It also appears to be great for travels, if you're lucky enough to have a break away during your studies, you can use the card all around the world. 

6. Advice for accessible events

Events like a Students Union meeting can be a minefield for all sorts of reasons. Most people would understand the need to make rooms wheelchair accessible, but there are many other issues to consider. From removing physical barriers to avoiding loud music, we've pulled together our best top tips for accessible events 

7. Extra help for students in Higher Education

Don't forget that students with anxiety may be eligible for the Disabled Student Allowances (DSAs) these are grants to help meet the extra course costs students face because of a disability or learning difference. DSAs are paid on top of the standard student finance package, or on their own. 

You don't have to pay DSAs back and they're not counted as income when working out whether you get benefits or Tax Credits.


Use our free HE support checker to see whether you could be eligible for DSAs or other support.


How can AbilityNet help?

8 ways universities can be more accessible and inclusive

Ian Carter

As a student services manager at Brighton University, Ian Carter’s (pictured) role includes responsibility for inclusive practice and disability, ensuring that disabled students can learn in the best possible environment across the university’s five campuses.

At least 11% of the UK University’s 24,000 students are registered disabled, meaning that 11 in every 100 could have a disability advisor and funding to support their studies and extra provision. But with government cutting back on disabled student funds, universities are having to make their environments more inclusive for disabled students in order to keep up or improve their reputation and maintain / increase student satisfaction.

Below, Ian offers his tips and advice for universities and staff looking to become more inclusive, from moving some module assessments online to allow students to take exams in their own time and by their own methods, and offering pre-term gaming nights for students on the autism spectrum to feel more at ease.

1. Check whether the learning environment is inclusive 

Where possible we try to follow the principles of Universal Design for Learning (UDL), which means providing as many different options as possible for students with their learning, eg allowing students with anxiety to provide video recorded presentations or not assessing grammar and spelling for students with dyslexia.

We identify problems inherent in the curriculum. I.e., if there is only one assessment style for a course, for example - one three hour exam - this could provide complexities for large numbers of the cohort.

Some students might require a room by themselves because they need to use speech-to-text to give their answers. Other students might have an assistant with them to help read questions. And we might need a separate hall for students with dyslexia to have extra time. The UDL model instead looks at removing barriers to make things inclusive for everyone. 

2. Look at whether online assessments would be more appropriate 

Our MBA attracts a very diverse mix of students in terms of age, background and disabilities and some modules now use an online assessment instead of a three-hour open book exam. We feel this suits the needs of a larger number of the students.

The assessment is open online for a whole weekend to give students in different time zones, some of who are working full time, the space to complete. It means those who need a reader or to use speech-to-text, or more time, can have it without us making extra provision.

Tutors also know the students and their abilities, so can use their own judgement on whether a student is capable of the work that’s been submitted. We’ve had brilliant feedback with doing this the last three years, and are now considering how appropriate this method might be for other open book exams. 

3. Professional bodies might be more flexible about courses than you realise

A lot of courses are set by the professional standards bodies in those sectors, i.e. the National Council for the Training of Journalists sets the course outline for journalism courses. Departments often believe that these courses are unchangeable, but we’ve found that lots of professional bodies are very willing to have conversations about how the learning environment can be made inclusive.

For example, it used to be the case that all newspaper journalism students had to pass a shorthand exam. The Equalities Act has helped open things up and promoted conversations about what is suitable for different students. It’s still the case that 80% of journalism students will pass their shorthand, but everyone recognises that there are other methods of note taking if the student struggles with shorthand because of a disability. 

4. The National Association of Disability Practitioners (NADP) has a lot of learning to share

I’m one of thirteen directors of the NADP, which has around 1300 members. We use a JISC mail group for members where a lot of great advice and best practise is shared about how to support disabled students. We’ll share case studies and situations to glean knowledge of what’s working. 

5. Make sure any new facilities are created with inclusivity in mind

Often we are tinkering around the edges with changing things within the current structure, but with new and refurbished teaching rooms we can consider various lecture capture options so that more students have easy access to lectures and lecture notes.

We still have more than 300 rooms that are not new and where possible we allow students to use their mobile devices to record and to take photos. Most PowerPoint presentations are put up on the student intranet before lectures.

students chatting at study tables with library books in background

We say that lecturers should allow students to record lectures if they want to, but they don’t have to if there are concerns around DPR or confidentiality. There are 2000 academics at the university and everyone has different ways of working. It’s difficult to enforce the same rules with everyone. 

6. Talk to your IT advisors for help on accessibility and inclusivity

You can make use of IT in classroom to increase inclusivity. Our academics talk to our IT advisors about how they can adapt the environment and use technology in the best possible way for all students. 

7 Make use of outside resources and experts

Adam Tweed, disability support advisor at AbilityNet came in to talk to us about apps and tech we could use to support student’s mental health and other disabilities. Thirteen staff including a number from our IT department came to this and it proved very useful. 

8. Going the extra mile with supporting disabled students

Five years ago we started offering students on the autism spectrum the opportunity to come and stay with friends or family for a residential, ahead of beginning university. At the time we only had about 10 students identifying as being on the spectrum, but numbers have increased.

We hold a gaming night and by the end of the night the students have usually made friends and set up a WhatsApp or Facebook group. We also support a self-managed social group for students on the autism spectrum called the ‘A’ Team which helps fund different social events chosen by members.

Further reading

Apps for dyslexia at university

There are some fantastic support resources available for students with dyslexia; support that is likely to be equally useful to students without dyslexia. World Dyslexia Awareness Week 2018 is taking place from October 1st - 7th and this year's theme being #21stCenturyDyslexia.

In support of World Dyslexia Awareness Week we’ve pulled together some apps, advice and support we think is most valuable to students with dyslexia.A desk with technology, books and a coffee placed on it Ten percent of the population are dyslexic; four percent severely so, according to the British Dyslexia Association. That is around one in every 10 people and estimated to be approximately six million people in the UK.

Like other learning differences such as dyspraxia and dyscalculia, dyslexia is linked with brain wiring, it does not affect intelligence. Dyslexia causes a change in abilities with learning, reading and writing. But, we believe dyslexia should not be the reason to stop anyone from going to university.

Dyslexia's known characteristics

Dyslexia has been linked to some exceptional positive characteristics including advanced creativity, great problem-solving skills, a lively imagination and a holistic approach to projects, all fantastically employable skills. There are many great leaders too who speak openly about their dyslexia and are brilliant role models for us all, these include Richard Branson, Stephen Spielberg and Bill Gates, all people who embraced their skills and have made fundamental impacts within their industries.

It is important to emphasise that every student's needs will be unique to them and no two students with dyslexia will require the same initial support, it's good to try a range of apps and see which ones work for each individual.

It's certainly understandable that on top of the anxiety we all experience from new environments that students with dyslexia would be apprehensive about putting themselves in a new academic environment. But, this really needn't be a barrier for furthering education.

Three popular apps for Dyslexia

microsoft To Do - From work to play, To-Do is the easiest way to get stuff done, every day.

  1. Microsoft to do: Still in it's early-days on this but it appears to be potentially very powerful. It can be used as a simple to-do list with items added and ticked off when complete, but it will also integrate with Outlook to recognise when you write something like “I’ll get that to you Thursday” and will ask you if you would like this added to your list for completion on Thursday. It also reports to intelligently suggest priorities
  2. Study ambiance: This app is available on Android only but has a selection of background noise tracks ranging from the crackle of a fireplace to the sound of light rain. There are six tracks available o ffline and many more online ranging from ‘thunderstorm’ to ‘library’. You can listen to the tracks on their own or combine each of them with a choice of piano, guitar, music box or Alpha waves. Alternatively you can try Noisili, a free online alternative. 
  3. Office Lens: This free app from Microsoft turns your phone into a ‘smart’ scanner correcting perspective in a capture so as to crop a picture to fill the screen; this is useful for handwritten notes but also captures of information from whiteboards for example. You are then able to save as a picture, as a pdf, save to online storage (OneDrive) or into the free notetaking OneNote. The iOS version is also able to access the Immersive Reader feature of the Microsoft Learning Tools and will therefore read out text in close to realtime.

Don't forget that students with dyslexia may be eligible for the Disabled Student Allowances (DSA) these are grants to help meet the extra course costs students face because of a disability. DSAs are paid on top of the standard student finance package, or on their own. You don't have to pay DSAs back and they're not counted as income when working out whether you get benefits or Tax Credits. You can see if you’re eligible for DSA’s with our free HE support checker.

AbilityNet can help

Whether you are a student, student adviser, parent or guardian we can help:

Can tech help improve the experience of international students?

The Higher Education Commission has launched ‘Staying Ahead: Are International Students Going Down Under?’ - a new report highlighting the challenges of continuing to recruit overseas students to the UK. It raises a lot of questions about the UK's role as a leading provider of HE to the rest of the world - but can inclusive tech services help deliver a better experience for them?

UK higher education enjoys a world-class reputation and is second only to the USA in attracting overseas students. That position is under threat however, with falling numbers coming to the UK amid increased competition and concerns about increasing fees. I attended the launch event at the Houses of Parliament and amongst the many points raised saw an opportunity for tech to enhance the student experience and help stop the slide.

Stats presented by UKCISA showed a decline in international students in the last few years - this was attributed to many factors but discussion particularly focused on a need to identify a Unique Selling Proposition (USP) for UK HE that could attract international students. 

AbilityNet is passionate about the endless possibilities tech offers in an educational setting, especially for those with additional needs, so it was great to see the CEO of JISC on the panel mentioning the role of tech in HE systems and the difference it can make to the success of every students.

This includes internal admissions, student support systems that can identify study needs, accessible virtual learning environments (VLEs), and signposting support for assistive tech including apps and adjustments. 

We know that this type of technology has the potential to increase well-being, inclusion and support for students with disabilities and learning differences, but it also provides additional support for the whole cohort of students - so perhaps it provides a USP for attracting international talent?

It will be great to see what the future may hold for technology and education and the benefits it will bring to each individuals studies. 

More information

Read the report ‘Staying Ahead: Are International Students Going Down Under?’

The twitter handle used was @EduSkillsHE - use the hashtag #StayingAhead to follow ongoing discussion on Twitter.

AbilityNet offers support to students and advisers about technology and disabilities:

The Xbox Adaptive Controller - Gaming for Everyone

'Gaming for Everyone' is Microsoft's motto from Xbox and encapsulates their mission to make Xbox a more fun, diverse and inclusive place for everyone to play. Unfortunately 'everyone' has not always included all gamers, as many felt frustrated by the standard controller that made the console unplayable for people with a variety of health conditions and impairments. For those with mobility-limiting conditions the standard controller is challenging due to its inflexibility and inability to connect with assistive technology if, for example, you need to use a one-handed joystick.

But finally, gaming will be for everyone thanks to the Xbox Adaptive Controller, which was released this month as part of Global Accessibility Awareness Day.

Xbox Adaptive Controller

About the Xbox Adaptive Controller

Numerous features reveal inclusivity as the primary function of the device: like nineteen 3.5mm jack inputs to attach all the peripherals that can ease a user's gaming experience and two large buttons with light resistance and easy remapping of in-game controls.

Having inputs to attach peripherals allows the use of assistive technology such as the 3dRudder foot controller for gaming and also the Quadstick: a game controller for quadriplegics

The controller is the first of its kind released by a major company and targeted at the disability community, making this an important step forward in the accessibility in gaming space.

It is however important to acknowledge the work of smaller organisations such as SpecialEffect, an AbilityNet Tech4good Awards winner, that for some time have been using a range of modified and off-the-shelf technology to help people with physical disabilities to play video games.

V&A museum adds the Xbox Adaptive Controller to its collection

Xbox Adaptive Controller on display at the V&A MuseumThe Xbox Adaptive Controller was recently acquired by the V&A museum and added to their Rapid Response Collecting gallery because of its outstanding design.

Corinna Gardner, senior curator at the V&A, commented on the Xbox Adaptive Controller being added to a gallery at the V&A: "The Rapid Response Collecting is about bringing objects into the museum that signal moments of economic, political, social and technological change... The Xbox Adaptive Controller was an object that we thought very much captured a specific moment within the field of video games but also more broadly about social and inclusive design. It’s a real opportunity to bring an object into the collection that addresses the question of inclusive design head on. It’s an important and attractive acquisition for us here at the V&A."

The importance of accessibility in gaming

The reason gaming is so important for so many people is because it is the only form of medium that can unite imagination and interactivity to such a degree that you can put yourself in the center of the action. It makes you feel a sense of satisfaction and accomplishment whenever you complete an objective and the majority of people, with or without a disability, will otherwise not experience the thrill of driving a Ferrari in Monte Carlo or swinging around New York City like Spiderman.

Millions of players have been unable to enjoy video games because of the lack of support for users with health conditions and/or impairments, but recently there has been an apparent shift towards holistic adoption of accessibility and inclusive design approaches. Many games have dedicated accessibility settings that, for example, allow you to make text larger and deactivate quick time-events where the player has to press a button in a limited time. These features are being warmly received by all players, with the wider gaming community appreciating features being present that make games interesting, fun, and arguably most importantly - more accessible for people with disabilities.

Find Out More

Read our blog on 5 ways accessibility in video games is evolving

Read our interview with Ian Hamilton, video game accessibility specialist and advocate

DA Briefing ergonomics

Liverpool DSA Assessment Centre

How to learn from Apple's mistakes on website accessibility

We often post about how good Apple is on accessibility, but a legal complaint against the company by a screenreader user last month has shown that even the biggest tech giants can fall foul of accessibility regulations and guidelines sometimes. Smaller organisations are often not considering web accessibility at all, meaning they could be discriminating against disabled people without realising. 

apple website screenshot with the message 'welcome to the big screens' introducing their new iPhones

According to the complaint against Apple, the company's website misses out some descriptions of images for screenreader users and presents confusing and unclear links about store locations and hours. These problems can make using a website frustrating and difficult for a blind person. 

Myself and the AbilityNet accessibility team looked at the case last month and then ran through the Apple.com website to check out the issues. It revealed some simple, easily fixable problems which I've mentioned below. They found that although there were no issues here which completely prevented reaching the final stage of buying an iPhone, there are a number of challenges with the flow that will cause some users difficulties such as:

  1. Dynamic progression through shopping process
  2. Unclear method for returning to previous steps
  3. Insufficiently labelled radio buttons

Check out our detailed analysis for an expert insight on how to address accessibility issues. And feel free to use the code and ideas to make changes to your own website to provide a more inclusive digital experience. 

Investigating Apple website accessibility issues

First we looked at difficulties accessing store locations and hours.

One of the issues noted within the complaint was that screenreader users had difficulty finding store information e.g. location and opening times. So we ran through the user-journey for finding a store, using the JAWS screenreader as this is one of the more popular screenreaders available - and is specifically mentioned in the case.

There were multiple difficulties noted. The key issues were:

  • Insufficiently labelled input fields (meaning screenreaders are left unsure of what information is needed in the boxes they're asked to enter information into)
  • Links with identical text, that lead to different locations. While this is not a failure of WCAG (Web Content Accessibility Guidelines), it is not good practise.
  • Dynamic content not made accessible to screenreader users, e.g. auto-suggest search results

Further difficulties noted in the complaint were:

  • Unable to browse and purchase electronics such as the iPhone, iPad, and MacBook Pro laptop
  • Inability to make service appointments online
  • Trouble finding a store

Finding a store

We found that navigating to the 'Find a store' page was relatively simple. From the homepage, using a JAWS screenreader, the user presses H until 'Apple Store' heading is selected. Then they tab to the 'Find a store' link, which leads to the find a store page. The form on this page is presented as the image below.

Find a store, City and State or Zip, complete store list

Sighted users are informed that this input field requires the City and State or Zip code (US).  JAWS users will hear the placeholder text (City and State or Zip) announced if they use the JAWS form field list, or JAWS users who tab onto the input field will instead just hear 'Find a store. Edit. Required.'

This tells them that:

  1. The label is 'Find a store'
  2. It is an edit field, so they need to enter some information
  3. It is a required field

But it is not clear what information they need to enter. Is it a town? Postcode? County?

Whilst users may opt to guess at this point, it is straightforward to ensure that screenreader users get the same information as sighted users by entering the following code:

<input class="global-retail-search block" required="" type="search" placeholder="City and State or Zip" autocorrect="off" results="0" data-autoglobalsearch-module="retail-locator">

This uses the placeholder attribute (highlighted) to label the input field. However, the placeholder attribute should not be relied on to convey information. This article on the popular Smashing Magazine website explains why not to rely on the placeholder attribute. 

This issue is easily remedied - simply use the aria-label attribute, as below, to duplicate the placeholder text for sighted users in the process.

<input class="global-retail-search block" required="" type="search" placeholder="City and State or Zip" aria-label="City and State or Zip"autocorrect="off" results="0" data-autoglobalsearch-module="retail-locator">

Alternatively, the more traditional HTML <label> element could be used to provide a hidden label, announced for screenreader users.

Accessing Apple store information online

Let's assume the user tries to enter a city name (not an unreasonable assumption) to see what happens.

Entering some characters into the search field displays the following auto-suggest results:

New York, New York Mills

While these are easily visible below the search input field, screenreader users are not informed of these results. In addition, pressing enter has no effect except to set the focus back to the top of the page. This means that screenreader users will need to manually navigate to the search results in the bottom half of the screen – they are still not made aware of these results however, so would need to manually explore.

Once they reach the results, further challenges are presented. Each of the store location results has identical 'View store details' links:

graphic showing list of Apple store locations

These are all announced as 'View store details' - there is no easy way for screenreader users to distinguish them. On the homepage, Apple uses hidden text to distinguish otherwise similar links e.g. 'Find out more', or 'Buy now'. This is not the case here. When reading through the links on the page, a screenreader hears the following:

view store details, view store details, view store details, view store details

Note the multiple 'View store details' links.

However, each of the stores is prefixed with a descriptive heading, so a user can select a link and then use a shortcut to hear the preceding heading announced. This would tell them that the first link to 'View store details' is about 'Apple Upper East Side'.

As there is already a technique in place elsewhere on the website for augmenting links with descriptive hidden text, it would not be difficult to replicate this here such that the links were announced as 'View store details: Apple Upper East Side' for example.

Viewing store details

Selecting a link to view the store details leads to a further page with store information:

Apple East Side Address, Madison Avenue

It was relatively straightforward to read the store information here. The address and store hours were announced as expected by the JAWS screenreader.

Browsing and buying products

When looking to buy products from the online store, some specific difficulties were encountered. For example, when following the flow to purchase the iPhone X, the flow consists of multiple steps, at each step making a choice such as model, carrier, finish.

These steps are dynamic – as soon as a user chooses the option for step 1, they are taken to step 2 without warning. This is a failure of the WCAG 2.0 success criteria on input. Users inputting data (e.g. making a selection via a form control) should not experience a change in context e.g. being taken to a new page, or step, without warning.  

However, otherwise this flow works reasonably well - the user is told when they land on a new step, and can proceed as expected. The dynamic nature may cause difficulties for some users however, especially as the method for returning to the previous step is not clearly explained – vital in case a user selects an option by mistake. A preferred solution is to let the users make their choice – colour, carrier, capacity etc – and then select a button to confirm their choice before they are taken to a new page.

There was one interesting issue related to the final step of selecting the capacity of the iPhone being purchased:

Now choose your capacity click options 64gb or 256gb

These buttons are marked up as radio buttons. However, the labels are not usefully announced. Sighted users can see the superscript 2, but this is not distinguished as such by JAWS users, who hear this announced as "64GB 2$49.91/mo" and it is further not clear that this 2 relates to a footnote which gives further information about the available capacity on the selected model.

Mo is also not explained adequately. It would be better to use 'Month' in full to avoid ambiguity.

Summary

There were no issues here which completely prevented reaching the final stage of buying an iPhone, but there were a number of challenges with the flow that will cause some users difficulties such as

  1. Dynamic progression through shopping process
  2. Unclear method for returning to previous steps
  3. Insufficiently labelled radio buttons

The fixes described above provide an expert view of the way to address these issues to deliver a more inclusive user experience.

For more on making your website accessible, click here. 

Joe Chidzik is the Principal Accessibility Consultant at AbilityNet

Pages