Guidance for 3rd party content providers Ba.com accessibility Guidance for 3rd party content providers

Accessibility refresh The law USA DoT requires all CORE functions (selling and servicing) to be AA compliant to the WCAG 2.0 accessibility standards by June 2016 All non-core to be compliant by December 2016 The customer and business benefits Customers with disabilities should be able to access services and buy products online without prejudice Making a web product more accessible not only increases revenue, but increases efficiency gains and customer satisfaction A customer with a disability will see from the start of their journey that British Airways go the extra mile for them

Types of disability Blindness (total or partial) Customers will require a screen reading aid or braille Customers may require high contrast/ larger text Visual impairments (Colour, luminosity, tunnel vision, etc.) Customers require things to be easy to see and differentiate Relying on colour could lead to customers making mistakes Learning and communication difficulties Content and instructions should be easy to read and understand Dyslexia, Autistic scale, low level of English/ core language, etc. Mobility impairments (Arthritis, MS, broken limbs etc.) Customers should be able to use the web product with other user-agents (keyboards, pointers, wheels, etc.) Others Epilepsy, hearing, Alzheimer's, Dementia, Parkinson's, etc.….

Accessibility as part of your processes

‘The rules’ for content providers

Correct content heading hierarchy

All images must have alt text Unless an image is truly offering information that is useful to a reader, alt should be alt=“” If the title of the image is present in text, alt=“” If the image is offering information useful to a customer and this information is not present anywhere else, alt=“description” A banner image containing text will either need a descriptive alt tag or a LONGDESC. Best to avoid using text as images

All images must have alt text

Content and focus order Focus order specifies how customers who don’t use mice navigate through content on a page In most cases, components have been designed to cater for the correct logical focus order AA guidelines recommend that focus order is logical and makes sense to the customer This may mean that content needs to be structured and presented in such a way that customers can follow what is being said in a logical manner

Example – focus order

Example – Focus and Screenreader flow An example on how to illustrate the screen reader reading order as shown in green, with the focus order in purple.

HTML title All pages must have a unique HTML title This is what you see in the browser tab Needs to be SEO friendly and clear to the customer

Content and Aria role tags ARIA role tags announces to screenreader users that the state of the page has changed You should not need to do much with role tags unless You are building forms and changing a form field causes the page to update (example, select country) You are offering a link that opens up a modal or popup (State that Aria tag needs to be added, don’t worry about the syntax) Or you are designing a page where a user interaction will change the state of the page (Opening an accordion)

Links and buttons Links should make sense when read out of content Avoid the use of ‘Click here’ or similar Try to succinctly remind the customer where they will go if they interact with the link Where ‘More’, ‘More information’ etc need to be used, if you think the link means nothing out of context, add an anchor (<a>) title Don’t overdo anchor titles Be clear what the will happen when a customer interacts with a button Avoid ‘Next’, use verbs such as ‘Buy’ Avoid ‘View’ as blind people can’t view!

Forms and errors All form fields must have a label that makes sense to the customer Grouped items such as radios should have a fieldset group assigned Errors either need to be explained at the top of the page or made clear near the form field so that customers know what they need to do to correct the error

IDD – Forms and labelling

Colour and contrast To be AA compliant, contrast must be at least: At a ratio of 4.5:1 for normal text and 3:1 for large text (14 point and bold or larger, or 18 point or larger). Remember though that a point is not a pixel, so 14pt text is not 14px. WebAim’s contrast checker can be used to check foreground and background contrast compliance For gradients and text on images. If you have white or light text, check the text against the lightest part of the gradient. Visa-versa for dark text

Using Webaim contrast checker Passes contrast on all copy larger than 11pt Passes contrast on all copy larger than 14pt bold or 18pt regular FAILS on anything else

Videos All videos must have a transcript A transcript should appear in a popup window (not modal) as html mark-up A transcript only needs to explain elements of the video that are of use to the customer Captions are not required A transcript should be linked from a link underneath the video

PDFs Portable document format files must be made to be AA complaint This will mean that the source file will need to have been created to AA levels of complaince PDFs should be saved as accessible PDFs if converting from Office or similar Image/ brochureware PDFs will need alternative text if images are conveying information