WEB ACCESSIBILITY 2017 Multiple ways to get the same thing done is awesome for accessibility - PowerPoint Presentation

Slide1

WEB ACCESSIBILITY

2017

Slide2

Multiple ways to get the same thing done is awesome for accessibility

-Alice Bartlett

Slide3

Who’s involved?

Usability

UI Design

UX Design

Accessibility

Everyone

Functionality

Development

Slide4

VISUAL

Color blind, hard of seeing, blind

1

Software

: magnification and text size, screen reading, contrast, color selection, haptic/auditory feedback, dial tone

Hardware: tactile buttons, auto-answer/hang-up (Flip phone), haptic feedback

Slide5

8.1 Million (3.3%)

Have a vision related impairment

Slide6

HEARING

Hard of hearing, deaf

2

Software:

haptic feedback, caption support

Hardware: compatibility with hearing aids/devices, convert stereo to mono sound, auto-answer/hang-up, haptic feedback

Slide7

7.6 Million (3.1%)

Have a hearing related impairment

Slide8

Motor

Limited motor control

3

Software:

size of buttons, touch screen vs. tactile buttons, voice recognition, custom gestures, predictive text/autocorrect

Hardware:

size of device, surface finish, response to prosthesis, switch access/use

Slide9

19.9 Million (8.2%)

Have a motor related impairment

Slide10

Cognitive

Inability to keep attention or gets easily distracted on pages with lots of clutter.

4

Software:

Limit access to parts of screen/interface, customization of interface, no redundancy

Hardware:

Large, easy to understand interface.

Slide11

15.2 Million (6.3%)

Have a cognitive related impairment

Source: http://www.interactiveaccessibility.com/accessibility-statistics

Slide12

Have some form of impairment

56.7 Million (18.7%)

Slide13

BIG CONCEPT

Accessibility doesn’t just mean making it easier to use for people with disabilities. A big part of accessibility is making all aspects of the design easy to use for everyone.

Slide14

We can reframe accessibility in terms of what we provide, not what other people lack

-Anne Gibson

http://alistapart.com/article/reframing-accessibility-for-the-web

Slide15

REMEMBER P.O.U.R

Perceivable, Operable, Understandable, Robust

Slide16

Users must be able to perceive the information being presented (it can’t be invisible to all their senses)

Perceivable

Slide17

Headings

Headings should have a logical hierarchical order.

<h1> is reserved for page title. There should never be another <h1> on the page.

<h1>Heading 1</h1>

<h2>Heading 2</h2>

<h3>Heading 3</h3>

<h2> Heading 2</h2>

<h3>Heading 3</h3>

<h4>Heading 4</h4>

Slide18

Alt Text:

Alt Text is descriptive text in case the image does not load. It is read by screen readers.

Title Text:

Title text is text read by screen readers when an image does load and is the text that shows up in the little box when hovering over an image.

Slide19

Use Alt Tags!

Be accurate and equivalent

in presenting the same

content

and function of the image.

Be clear. This means the correct content (if there is content) and function (if there is a function) of the image should be presented as clearly as is appropriate. Typically no more than a few words are necessary, though rarely a short sentence or two may be appropriate.Do NOT be redundant or provide the same information as text within the context of the image.

Do

NOT use the phrases "image of ..." or "graphic of ..." to describe the image.

It usually apparent to the user that it is an image. And if the image is conveying content, it is typically not necessary that the user know that it is an image that is conveying the content, as opposed to text. If the fact that an image is a photograph or illustration, etc. is important content, it may be useful to include this in alternative text.

Slide20

SharePoint will create title text for images automatically. You must change the title text when you upload an image.

Slide21

Alt Tag Example

<img src="CMULogo.png" alt="C M U Wordmark">

Note: CMU is spelt as “C M U”. When using acronyms, separate the letters, otherwise screen readers will read CMU as “kuh-mew”.

Slide22

Use Image Titles!

Image title (and the element name speaks for itself) should provide

additional information

and follow the rules of the regular title: it should be relevant, short, catchy, and concise (a title “

offers advisory information about the element for which it is set“). In FireFox and Opera it pops up when you hover over an image:

Slide23

Title Tag Example

<img src="LeadershipSafari.png" title="An auditorium full of students with presenter on stage.">

Slide24

In short...

Title is used to add

additional

information to an image. This text is what is displayed when hovering with a mouse and what a screen reader reads.

Alt is used to add alternative information to an image. What will display or be read by screen readers in the event an image does not load.

Slide25

Do NOT put text on images if you can avoid it

Text on images cannot be read on screen readers.

If you have to put text on images, add the text to the title / alt and keep it short

Slide26

Do NOT use images of buttons

Use the <button> element. This makes it easy for screen readers and the feedback of the “state” (hover, pressed, enabled, disabled) properties for buttons are helpful for users in general.

Slide27

Users must be able to operate the interface (the interface cannot require interaction that a user cannot perform)

Operable

Slide28

Keep custom scripts to a minimum

If you do write javascript or do create custom html or css, ensure you run it by OIT to make sure it meets accessibility requirements.

Failure to do so may result in removal of your web page.

Slide29

Users must be able to understand the information as well as the operation of the user interface (the content or operation cannot be beyond their understanding).

Understandable

Slide30

Design

Keep it simple!

Good design is good accessibility.

Keep it simple to keep it

accessible.

Slide31

Bad

Good

Design

Don’t use color alone to convey information

Slide32

Bad

Click the button to the left

The larger area represents…

The highlighted text is...

DesignAvoid using Color, Size, Location, Position, Shape or Sound in instructions or help information.

Slide33

Design

Avoid underlining text that isn’t a link. Users expect underlined text to be links. There are other ways to put emphasis on text, if that is your intent

Slide34

Bad

Welcome!

Click here

to learn more.

GoodWelcome! Learn more about our services.

Links

Link text / descriptive text should be clear and concise.

This makes it clear that you are navigating elsewhere and what content will be present there.

To learn more what? Click? What if I’m on a phone or touch screen device?

Slide35

Bad

Check out our services

See what services we offer

Links

Links that go to the same place should have the same text

Though it’s clear what both links are doing, it could be confusing that they’re going to the same place.

Slide36

Do NOT use <br /> as a styling element

Using the <br /> elements as a styling element (i.e.- using multiple <br /> elements to create lots of space between content) has unexpected results for screen readers.

In SharePoint, when you press the ‘Enter’ key multiple times, a lot of <br /> tags will show up. There are other ways to create space on a web page.

Slide37

Users must be able to access the content as technologies advance.

Robust

Slide38

Again, keep it simple!

Don’t use tables to design complex interfaces

Don’t use headings for large text

Don’t use large text for headings

In other words, use proper semantics.

Slide39

Validate your code

Run your pages through the

W3C validator

to ensure it works reliably with assistive technology.

https://validator.w3.org/

Slide40

GOOD NEWS!

All non-content items on every page are already accessible.

Slide41

Responsive Web Design

Fluid grids

Adaptive images

Media Queries

Responsive contentVertical Forms

We are using Bootstrap 3.0 as a content framework for our website. This makes all of our content responsive by default.

Slide42

Demo time!!

Slide43

What is WCAG?

“Wick-agg”

“Wuh-cagg”

“Double you cagg”

“Double you see ayy gee”

Slide44

WCAG Requirements

Level A

Minimum level of conformance.

Level AA

Intermediate level of conformance required.

Level AAAThe highest level of conformance.

As a publicly funded institution, CMU is obligated to meet at least WCAG 2.0 AA requirements.

Slide45

How to meet WCAG 2.0 requirements

https://www.w3.org/WAI/WCAG20/quickref/

Slide46

WCAG 2.0 checklist

https://www.wuhcag.com/wcag-checklist/

Slide47

Online Accessibility Tools

Color Contrast

http://webaim.org/resources/contrastchecker/

aChecker

http://achecker.ca/checker/index.php

WAVEhttp://wave.webaim.org/

Slide48

Color Contrast Ratio Example

Slide49

Thanks!

ANY QUESTIONS?

Follow up / questions / comments

Joshua Salazar - salaz3j@cmich.edu