Alice Bartlett Whos involved Usability UI Design UX Design Accessibility Everyone Functionality Development VISUAL Color blind hard of seeing blind 1 Software magnification and text size screen reading contrast color selection hapticauditory feedback dial tone ID: 778957
Download The PPT/PDF document "WEB ACCESSIBILITY 2017 Multiple ways to..." is the property of its rightful owner. Permission is granted to download and print the materials on this web site for personal, non-commercial use only, and to display it on your personal computer provided you do not modify the materials and that you retain all copyright notices contained in the materials. By downloading content from our website, you accept the terms of this agreement.
Slide1
WEB ACCESSIBILITY
2017
Slide2Multiple ways to get the same thing done is awesome for accessibility
-Alice Bartlett
Slide3Who’s involved?
Usability
UI Design
UX Design
Accessibility
Everyone
Functionality
Development
Slide4VISUAL
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
Slide58.1 Million (3.3%)
Have a vision related impairment
Slide6HEARING
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
Slide77.6 Million (3.1%)
Have a hearing related impairment
Slide8Motor
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
Slide919.9 Million (8.2%)
Have a motor related impairment
Slide10Cognitive
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.
Slide1115.2 Million (6.3%)
Have a cognitive related impairment
Source: http://www.interactiveaccessibility.com/accessibility-statistics
Slide12Have some form of impairment
56.7 Million (18.7%)
Slide13BIG 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.
Slide14We 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
Slide15REMEMBER P.O.U.R
Perceivable, Operable, Understandable, Robust
Slide16Users must be able to perceive the information being presented (it can’t be invisible to all their senses)
Perceivable
Slide17Headings
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>
Slide18Alt 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.
Slide19Use 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.
Slide20SharePoint will create title text for images automatically. You must change the title text when you upload an image.
Slide21Alt 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”.
Slide22Use 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:
Slide23Title Tag Example
<img src="LeadershipSafari.png" title="An auditorium full of students with presenter on stage.">
Slide24In 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.
Slide25Do 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
Slide26Do 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.
Slide27Users must be able to operate the interface (the interface cannot require interaction that a user cannot perform)
Operable
Slide28Keep 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.
Slide29Users 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
Slide30Design
Keep it simple!
Good design is good accessibility.
Keep it simple to keep it
accessible.
Slide31Bad
Good
Design
Don’t use color alone to convey information
Slide32Bad
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.
Slide33Design
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
Slide34Bad
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?
Slide35Bad
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.
Slide36Do 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.
Slide37Users must be able to access the content as technologies advance.
Robust
Slide38Again, 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.
Slide39Validate your code
Run your pages through the
W3C validator
to ensure it works reliably with assistive technology.
https://validator.w3.org/
Slide40GOOD NEWS!
All non-content items on every page are already accessible.
Slide41Responsive 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.
Slide42Demo time!!
Slide43What is WCAG?
“Wick-agg”
“Wuh-cagg”
“Double you cagg”
“Double you see ayy gee”
Slide44WCAG 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.
Slide45How to meet WCAG 2.0 requirements
https://www.w3.org/WAI/WCAG20/quickref/
Slide46WCAG 2.0 checklist
https://www.wuhcag.com/wcag-checklist/
Slide47Online Accessibility Tools
Color Contrast
http://webaim.org/resources/contrastchecker/
aChecker
http://achecker.ca/checker/index.php
WAVEhttp://wave.webaim.org/
Slide48Color Contrast Ratio Example
Slide49Thanks!
ANY QUESTIONS?
Follow up / questions / comments
Joshua Salazar - salaz3j@cmich.edu