Accessibilityand why it matters

What is accessibility?

Accessibility is the word used to describe whether a product (for example, a website, mobile site, digital TV interface or application) can be used by people of all abilities and disabilities.

Accessibility and why it matters

Who are we talking about?

People that with disabilities that need accessible products are people that suffer from:

Accessibility and why it matters

- Blindness or partial blindness - Colour blindness - Low vision - Hand tremors - Mild short-term memory loss - Attention deficit hyperactivity disorder (ADHD) - Dislexia - Age-related impairments - Hard hearing - Down syndrome - Deaf-blindness

… and so many others that I bet exist and we are not aware of!

Who are we talking about?

People that suffer from blindness in the UK

Accessibility and why it matters

- 2 million people in the UK are living with sight loss. These figures are expected to rise to over 2,250,000 in 2020 and nearly four million in 2050.

- There are 360,000 people registered as blind or partially sighted in the UK who have irreversible sight loss.

- An estimated 25,000 children in the UK are blind or partially sighted.

- Someone in the world goes blind every 5 seconds. - 50% of sight loss cases cannot be avoided.

Other people that need accessible products are also people that:

Accessibility and why it matters

- Don’t have or are unable to use a keyboard or mouse. - Have temporary disabilities due to accident or illness. - Are old - Are new users - Have a very bad internet connection speed - Are in a noisy environment - Have "screen glare” - Are driving - Have low literacy level - Have different learning styles - Are not fluent in English

How many of us have been on a website and had to get subtitles?

Who are also talking about

Why should we care?

Accessibility and why it matters

“The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect.” Tim Berners-Lee, W3C Director and inventor of the World Wide Web

Why should we care?

Accessibility and why it matters

It is essential that the Web be accessible in order to provide equal access and equal opportunity to people with diverse abilities. The UN Convention on the Rights of Persons with Disabilities recognises access to information and communications technologies, including the Web, as a basic human right.

There is also a strong business case for accessibility. Accessibility overlaps with other best practices such as mobile web design, device independence, multi-modal interaction, usability, design for older users, and search engine optimisation (SEO). Case studies show that accessible websites have better search results, reduced maintenance costs, and increased audience reach, among other benefits.

How do these people use the web?

How do these people use the web

Accessibility and why it matters

• Using screen readers - speech recognition software, operating system speech packages, etc

• Using screen magnifiers or zooming the pages

• Increasing the size of the text in the browser settings

• Changing background colours and fonts with plugins

All the people that we talked before navigate on the web by:

So… how can we help them to have a better experience?

General steps in accessibility

Know where to look at

• Since 1999 the World Wide Web Consortium (W3C) (the organisation that creates the standards for the Web) has been working on its "Web Accessibility Initiative" or WAI. The result of this initiative so far has been three sets of guidelines:

1. Web Content Accessibility Guidelines 1.0 (WCAG) - shows how to make their sites accessible

2. Authoring Tool Accessibility Guidelines 1.0 - For people who write programs that can be used to create Websites.

3. User Agent Accessibility Guidelines 1.0 - aimed at those who create Web browsers

• Be aware of WAI-ARIA - Accessible Rich Internet Applications. Defines ways to make Web content and Web applications (especially those developed with Ajax and JavaScript) more accessible to people with disabilities. For example, ARIA enables accessible navigation landmarks, JavaScript widgets, form hints and error messages, live content updates, and more.

• Ask users with disabilities to join our user research activities, usability tests and scope the product taking their problems into mind.

Accessibility and why it matters

Design

Design

• This helps users who are unable to, or have difficulty with, distinguishing one color from another. This includes people who are color blind (1 in 12 men, 1 in 200 women), have low vision (1 in 30 people), or are blind (1 in 188 people).

• Use colour to highlight or complement what is already visible.

Accessibility and why it matters

Don’t use colour as the only visual means of conveying information

Design

Accessibility and why it matters

In this example shown in grayscale, how many fields would you say are in an error state?

Design

What about now? With color the answer becomes, “all four”.

There are many acceptable ways to make this form visually accessible. We could put the red triangle icon in all of the error fields. We could use text to indicate and explain why a given field is in error. We could use tooltips, thick borders, bold text, underlines, italics, etc.

The choices are infinite, but the only rule is to use more than color alone.

Accessibility and why it matters

Design

• According to the WCAG, the contrast ratio between text and a text’s background should be at least 4.5 to 1. If your font is at least 24 px or 19 px bold, the minimum drops to 3 to 1.

This guideline helps users with low vision, colour blindness, or worsening vision see and read the text on your screen.

• We can now text these contrast levels more precisely and easier with tools like: http://webaim.org/resources/contrastchecker/ http://colorsafe.co/

Accessibility and why it matters

Ensure sufficient contrast between text and its background

Design

Accessibility and why it matters

Examples

https://news.ycombinator.com/item?id=2222522 http://www.goldbrecht-systems.com/ http://www.breckgear.com/ http://squarespace.com/

Contrasted text can also be slick http://alistapart.com/ http://www.area17.com/ http://www.vogue.co.uk/ http://www.itsnicethat.com/ http://www.vanschneider.com/ http://liftinteractive.com/

Design

• Short equivalents for images, including icons, buttons, and graphics

• Description of data represented on charts, diagrams, and illustrations

• Brief descriptions of non-text content such as audio and video files

• Labels for form controls, input, and other user interface components

Text alternatives convey the purpose of an image or function to provide an equivalent user experience. For instance, an appropriate text alternative for a search button would be "search" rather than "magnifying lens".

Text alternatives can be presented in a variety of ways. For instance, they can be read aloud for people who cannot see the screen and for people with reading difficulties, enlarged to custom text-sizes, or displayed on braille devices.

Text alternatives serve as labels for controls and functionality to aid keyboard navigation and navigation by voice recognition (speech input).

They also serve as labels to identify audio, video, and files in other formats, as well as applications that are embedded as part of a website.

Accessibility and why it matters

Designing text alternatives for non-text content would help many users

Accessibility and why it matters

Design

Many people rely on predictable user interfaces and are disoriented or distracted by inconsistent appearance or behaviour. Examples of making content more predictable include:

• Navigation mechanisms that are repeated on multiple pages appear in the same place each time

• User interface components that are repeated on web pages have the same labelling each time

• Significant changes on a web page do not happen without the consent of the user

Meeting this requirement helps people to quickly learn the functionality and navigation mechanisms provided on a website, and to operate them according to their specific needs and preferences. For instance, some people assign personalised shortcut keys to functions they frequently use to enhance keyboard navigation. Others memorize the steps to reach certain pages or to complete processes on a website. Both rely on predictable and consistent functionality.

Content appears and operates in predictable ways - consistency

Development

Accessibility and why it matters

General points

• WAI-ARIA - Accessible Rich Internet Applications. ARIA (WAI-ARIA if you want to be formal) is a set of attributes that you can add to HTML elements. These attributes communicate role, state and property semantics to assistive technologies via the accessibility APIs implemented in browsers.

• Progressive enhancement Some browsers default to navigate the web without JavaScript, and a few users opt to turn JavaScript off for security reasons. Either way, excessive dependance on scripting can degrade the ability of your site to function for some users.

Although it’s by no means necessary to completely avoid JavaScript, accessible web design should always provide a solid fallback for tasks which use JavaScript. The concept is called ‘progressive enhancement’, and essentially means that your web site should first be set up to work without scripting, then additional functionality can be added which uses scripting. One common area for JavaScript to come into play is site navigation – and the last thing you want is for your visitors to be unable to navigate your site.

• Enable keyboard navigation This will allow users that user the keyboard to navigate on your website to go wherever they want without major problems

HTML5 introduced several new elements to improve the structure of our pages. Not that long ago we could see something like:

Any semantic meaning in these attributes is largely implicit and they aren’t machine-readable so, in practice, user agents will treat “content__main” no differently than they would “you-silly-sausage”.

Adding id’s and class attributes simply to build a visual layout dilutes any tenuous meaning even further.

Accessibility and why it matters

Development - HTML

Semantics and Structure

We can replace some of our divisions with more semantically precise structural elements to help reduce our reliance on divisions and presentational id and class attributes. HTML5 structural elements include:

section

article

aside

header

footer

nav

Using these elements not only allows our html to be cleaner and more structured as well as it gives more context to browsers where to find and how to display information.

As a consequence, users that navigate with a screen reader for instance, will also find information quicker, once the screen readers read what the browser tells them.

Do not change native semantics, unless you really have to.

Accessibility and why it matters

Development - HTML

Semantics and Structure

Buttons and links are elements that we use on a daily basis on the web. Both are simple to understand and don’t need to be reinvented.

So, when writing your html, ensure controls with button-type behaviour (interaction, affects the current page) use the <button> tag, and regular text links (go to an external page, anchor on page, or external document) use the <a> tag like text links (eg. blue underlined text).

That will help users on:

• Accessibility and usability • A more robust website (support older user

agents, non-JS, etc.) • lighter and less complex code • more consistent implementation so easier to

maintain

Accessibility and why it matters

Development - HTML Semantics

Don’t confuse links with buttons

This is a common problem with e-commerce and marketing campaigns once many times they rely on amazing animations, interactions and/or technology.

When we use plugins that are not available on some browsers or versions, we are preventing this experience to some users, that could convert and find the website or app amazing.

Accessibility and why it matters

Development - HTML

Avoid tags, features, and plug-ins that are available to only one brand or version of a browser.

What is "alt text"? Alt text is a text alternative defined for images. The typical image is coded in HTML in the following form: <img alt="text alternative”>

Not all users can see the images. So as common practice an alternative text is included in the image tag.

The Rules: 1. Every <img> must have an alt= attribute 2. Describe the information, not the picture

Let’s see an example

3. Active images require descriptive alt text. Active image should describe the action the image performs. So if you have a link image then the alt text should tell the user what the link does. If it's a link to another page then it could be the name of that page

4. Images that contain information require descriptive alt text like charts and graphs.

5. Decorative images should have empty alt text. The alt text should be the empty (null) string. <img alt=“”>

Accessibility and why it matters

Development - HTML

Give alt descriptions to images

In recent years we have experienced a de-evolution in form fields. Modern designs have foregone traditional identifying attributes and interactive affordances in favor of a more minimalist approach.

Today’s forms lack two specific items that are vital for accessibility:

• clearly defined boundaries • visible labels • field-sets • Legends

Example of accessible code

Accessibility and why it matters

Development - HTML

Be careful with forms

Fieldset and Legend tags HTML provides another set of tags that can significantly improve the user experience for people accessing the form. These tags are the <fieldset> and <legend> tags. These are used to group and describe the purpose of related form fields, effectively providing a context from which the following fields can be understood.

Fieldset tags are used as a mechanism for grouping related sections of forms. This can be extremely beneficial for people with cognitive disabilities as it effectively breaks the form into smaller subsections, making the form easier to interpret in the first instance.

The <legend> tag should be used to provide descriptions of the form groupings on the page. For any given <fieldset> there should always be one associated <legend> tag.

Accessibility and why it matters

Development - HTML

Be careful with forms

Reset style sheet has been a big life saviour to designers and developers allowing them to create a consistent style and experience across many different devices and browsers. However, it plays a role in one of the most widespread accessibility blunders on the Internet.

This single line of CSS makes it nearly impossible for a sighted user to use a website with just a keyboard. Fortunately, since the initial CSS resets were released, many popular ones including Eric Meyer’s have been updated to remove un-styling of the :focus pseudo-class.

The problem is, most websites do not create their own focus styles. These focus indicators, which are fundamental to the success of keyboard users, are largely absent on the web.

Accessibility and why it matters

Development - CSS

Provide visual focus indication for keyboard focus.

To take full advantage of the Internet, users with partial or poor sight need to be able to enlarge the text on web pages for the information to be accessible to them. Usually this is set up on browser preferences.

As such, you need to specify the font size in terms of %, em or a relative value (small, medium etc.).

This practice is quite common already due to responsive web design and typography as consequence, but many people argue about this once many users just zoom the web page instead of changing their browser settings.

Accessibility and why it matters

Development - CSS

Allow users to resize their text

font sizefont size

• Enabling a screen reader and going through your design and forms will help you to understand how a visually impaired user might experience your design.

These tools exist in most operative systems: • OS X or iOS - VoiceOver. • Windows 10, Windows 10 Mobile - Narrator • Android - TalkBack.

• Navigating your design using only your keyboard can give you a better sense of how someone with mobility issues may experience it.

Accessibility and why it matters

Development - testing

Testing with VoiceOver and navigate with the keyboard

Well, this seems like a bit (or a lot) to do…

“The single most important thing to understand is that people use web sites in very different ways. This doesn’t just mean disabled people using special equipment but everyone – regardless of whether you might think of them as having a “special need”.”

MEL PEDLEY, Owner of Black Widow Web Design Company and Team member of accessites.org

Some further reading

https://www.w3.org/standards/webdesign/accessibility W3C Guidelines: Web Content Accessibility Guidelines 1.0 Authoring Tool Accessibility Guidelines 1.0 User Agent Accessibility Guidelines 1.0

http://www.who.int/mediacentre/factsheets/fs282/en/ https://medium.com/salesforce-ux/7-things-every-designer-needs-to-know-about-accessibility-64f105f0881b#.ilkb3iy4u https://medium.com/@jonbmetz/accessibility-is-a-process-not-a-project-ce1c1cdc3aa7#.n1jiq3qg0 http://formidable.com/blog/2014/05/08/anchors-buttons-and-accessibility/ https://www.abilitynet.org.uk/blog/five-golden-rules-compliant-alt-text http://html5doctor.com/using-aria-in-html/ http://studioscience.github.io/accessibility-standards/ http://contrastrebellion.com/ http://www.sitepoint.com/how-to-use-aria-effectively-with-html5/ http://12devsofxmas.co.uk/2016/01/day-8-testing-using-a-screen-reader/ http://tink.uk/

Accessibility and why it matters

Thank you all

Margarida Sousa