How to be accessible
By
Danilo JoséView All PostsNatalia TrevisanView All Posts
In a journey at Farfetch. Passion about technology in general and entrepreneur of ideas. Off-White Consumer.
Top Stories
1 - How to be accessible
Enthusiast about automated testing with a crazy life accompanied by trips, coffee and good food. Off-White lover.
Top Stories
1 - How to be accessible
When speaking of accessibility, most often the conversation concerns how navigable our website is for blind and visually impaired people. This is a very important part of the process, but there are also many other things to consider. When developing a web or mobile application, you must understand all customer needs to enable friendly and effective navigation.
Instead of first presuming the application works for all users, it helps to start from first principles and presume that it has failed. A great first step can be found in the standard software development rules available from the W3C Web Accessibility Initiative guidelines. These will help you to understand what needs to be done and how to do it.
What is an accessible application?
Products must be designed and developed so that people with disabilities can make the most of and enjoy them as much as people without disabilities. In short, products must be designed with all disabilities in mind, including auditory, neurological, cognitive and visual. To accommodate all disabilities, there are various tools to assist users including simple screen readers, screen readers that display sign language, and interaction assistive tools to help customers with mobility limitations. However, a product can only be considered accessible if it follows several key industry standards and guidelines.
For each guideline, the Web Content Accessibility Guidelines (WCAG 2.0) provide testable success criteria where requirements and conformity tests are necessary. These are in the areas of design specification, purchasing, regulation and contractual agreements. To satisfy the needs of different groups and situations, the W3C defined three levels of compliance, Level Access identified these levels as follows:
- A - Minimum level – without addressing these items, barriers exist that cannot be overcome by assistive technology. This level affects the broadest group with the most benefits and is essential.
- AA - More accessible – Even with minimum support, some barriers will still exist for some people. Not meeting criteria at this level may have an impact on certain groups of users and addressing the criteria may impact the look of a page to a greater extent or affect site logic.
- AAA – Even more accessible – Some Level AAA criteria cannot be applied everywhere, so level AAA is generally not required. That being said, even meeting level AAA does not make web pages accessible to everyone.
Level Access also adds, "The criteria are cumulative—to conform to Level AA, you must first conform to A. To conform to Level AAA, you must first conform to A and AA.”
Good practices?
In addition to outlining several accessibility values and actions, the W3C provides guidance on some accessibility best practices that include:
- Web content - refers to any part of a website, including text, images, forms, and multimedia, as well as any markup code, scripts, applications, and such.
- User agents - software that people use to access web content, including desktop graphical browsers, voice browsers, mobile phone browsers, multimedia players, plug-ins, and some assistive technologies.
- Authoring tools - software or services that people use to produce web content, including code editors, document conversion tools, content management systems, blogs, database scripts, and other tools.
The mission proposed here is for Quality Assurance engineers to work together with software developers to improve these areas, creating unifying efforts and sharing guidelines between their teams. Beyond development, it is also important to involve the linguistics team in order to produce the correct tone for people that listen to it through the use of the assistive technology.
The main goal of this work is not to expose errors, but to continue to build the best product for all of our consumers, with or without disabilities, while meeting W3C standards.
Tools and plugins to test and develop
Screen readers are an essential part of an accessibility toolkit. These software applications convert the text displayed on a computer screen into synthesized speech. The most commonly used screen readers are JAWS, NVDA (Windows), and Apple Voice Over (Mac).
For developers and quality assurance, there are also tools that help analyse the code and point out errors in the accessibility flow, such as: Monitor Plus, Accessibility tool of Firefox, the W3C Markup Validation Service tool and WAVE. They can be used to simulate how visually impaired people use the application, browse, search for an outfit item, add an item to the wishlist or add an item to the bag and finalize an order.
This type of test is hard and time-consuming. It is possible to guarantee good coding practices with automated scripts that verify all required tags exist on the pipeline. However, manual tests are the principal means for ensuring correct tag content on all tags.
To understand and to learn more about this subject, you can find a great deal of research on WebAIM - Web Accessibility In Mind and on the Stanford Online Accessibility Program. This research provides the most popular browsers, most popular screen readers, the best combination between browser and screen reader and a lot of other data that we can use to make our product more accessible and humane.
Accessibility for E-Commerce Websites
How important is accessibility on the web? It is important to consider the challenges that people with any type of disability face on a daily basis -- from the moment they step out of the comfort of their house to facing complex journeys to get to stores or public services. For this reason, the web needs to be easily accessible so that they can comfortably manage their lives from home while performing common tasks, such as buying clothes, paying their bills, and anything else that is possible to do online.
According to Alison Walden, Senior Director of Technology and Accessibility Lead at Publicis Sapient, the number of people with web-impacting disabilities is around 35 million in the United States alone. Furthermore, often there are financial repercussions for not making a website accessible, even though all the tools and knowledge to make a website accessible are out there.
For more details about accessibility research in the field of e-commerce, check out The state of accessibility in e-commerce.
Reinaldo Ferraz, a specialist in Web Development at W3C Brasil and Ceweb.br/NIC.br, has also provided useful e-commerce accessibility research to understand more about the difficulties of navigating e-commerce websites. For example: 76% of respondents can’t understand the images based on their "alt" text descriptions. Furthermore, 28% of respondents were unable to complete the purchase process due to a problem before or during checkout.
For more details about this research see: E-commerce websites are not prepared to receive people with disabilities.
An infographic from Purple in the United Kingdom, says: "Online shops should be open for everyone, but what if you can’t use a mouse, or see the screen, or hear the sound? The UK’s 11 million people with a limiting long term illness, impairment or disability should be amongst those who benefit most from online access to the UK’s major retailers, but many retailers still don’t design and build their websites to include everyone, turning away millions of customers and billions in sales.”
Among all these research sources, the most common accessibility problems concern the following: fields that have no labels, feedback errors that have no focus, images that have no alt tag that is responsible to describe the image, images with bad descriptions, and links that can’t be accessed with a keyboard, focus on the elements.
A Brief History of Accessibility at Farfetch
As with many websites, things start simple but can grow exponentially, and so does a lack of consistency. Visual consistency was one of the most immediately noticeable priorities as the website grew, and so we created visual components with specific guidelines to keep the UI and UX consistent throughout the user journey. These visual guidelines provided a few standard guidelines for accessibility within each component. This worked for a while until it ran into the growing complexity of our pages, where components developed by different people could have a slightly different design language when it came to accessibility.
To solve this problem, we created a guideline that described how interactive components needed to behave, the contrast between elements, how components should behave and what language they should use. While not that different from a normal UX guideline, it focused on particular ways of interacting with the application.
This guideline will be used to define components within our design system or any redesign within a page. It also frames how we should go back and fix any parts of the application that do not comply with the guidelines. It’s also very useful to develop meaningful manual and automated test scripts.
We have also created a specific channel to receive feedback related to accessibility. Farfetch customers can send us their feedback through email (accessibility@farfetch.com), keeping our communication lines open with our customers.
How did our accessibility transformation start?
At Farfetch, some teams started to work on accessibility because of experiences from some members. In one case, an initial analysis was performed to map some of the existing problems. During this analysis, they used some of the tools previously mentioned: Monitor Plus, Accessibility tool of Firefox, WAVE, the W3C validator and NVDA.
Afterwards, we conducted an interview with a blind person to check what problems they could find within the application. What was our main observation? All problems pointed out by the user had already been identified, concluding that we were able to guarantee accessibility through the use of these tools -- making them indispensable for application development.
Currently, some teams include accessibility among their key design objectives. It is now important that all teams verify the application areas of their responsibility to these common accessibility standards.
Moving forward
There is still much work to be done around this subject. With each change, our customer must remain our top priority.
The first step to any change is understanding our users’ needs, so please reach out to accessibility@farfetch.com for any feedback or suggestions concerning accessibility.
Understanding real accessibility cases from our users ensures we aren't focused on tools and potentially missing critical accessibility needs. At Farfetch, we have developed and evolved guidelines for good practices in application development and testing. We can now proudly add accessibility guidelines to these core practices.
