Accessibility is Usability (PPT, 1.71MB) - Web Accessibility

grassquantityΤεχνίτη Νοημοσύνη και Ρομποτική

15 Νοε 2013 (πριν από 3 χρόνια και 4 μήνες)

93 εμφανίσεις

Accessibility
IS
Usability

How

accessibility can lead to a better
experience for all users

Usability is the adherence to

common design patterns

A pattern describes a

common problem...

...and offers a solution to

that problem

Problem

The user needs to navigate through a site to
locate content and have clear indication of their
current location in the site.

Solution

Main Navigation Tabs


Persistent single
-
line row of tabs in a horizontal bar
provides consistent high
-
level navigation.

Patterns Save Time

Don

t have to solve a problem that

s already been
solved

Patterns Make The Web

Easier to Use

As adoption increases, users get
accustomed to how things work.

Patterns Become Mental
Models

Sets of beliefs in the user

s mind about how

a system should work

Existing patterns can be used
to create new patterns

http://alistapart.com

Bad UX

breaks


existing patterns

Gary Larson's The Far Side®

If your door needs
instructions, you

re doing
something wrong

Bad UX exists on the web too

(shocking, huh?)

<fieldset>


<legend>Select Your Academic Year</legend>


<input type="radio" name="year" value="1" /> <label>Freshmen</label>


<input type="radio" name="year" value="2" /> <label>Sophomore</label>


<input type="radio" name="year" value="3" /> <label>Junior</label>


<input type="radio" name="year" value="4" /> <label>Senior</label>

</fieldset>

Missing

for


Attribute in
Label

Wait...

Did he say

for


attribute?


That

s accessibility!

<fieldset>



<legend>Select Your Academic Year</legend>




<input id="freshmen" type="radio" name="year" value="1" /> <label for="freshmen">Freshmen</label>




<input id="sophomore" type="radio" name="year" value="2" /> <label
for="sophomore">Sophomore</label>




<input id="junior" type="radio" name="year" value="3" /> <label for="junior">Junior</label>




<input id="senior" type="radio" name="year" value="4" /> <label for="senior">Senior</label>


</fieldset>

Explicit Labels

(

for


attribute)

<fieldset>



<legend>Select Your Academic Year</legend>




<label><input type="radio" name="year" value="1" /> Freshmen</label>


<label><input type="radio" name="year" value="2" /> Sophomore</label>


<label><input type="radio" name="year" value="3" /> Junior</label>


<label><input type="radio" name="year" value="4" /> Senior</label>


</fieldset>

Implicit Labels

Screen reader support is better

but still not guaranteed

input[type='radio'], label[for] {


cursor: pointer;

}

Added UX Bonus

Make the label & input have a pointer cursor
to indicate they are

clickable


Consistent Navigation

Consistent Navigation

Individuals with disabilities use navigation
structures to orient themselves


Inconsistent navigation can be disorienting

Consistent Navigation

Users need a few seconds to adjust to
unique layouts when visiting new pages


Consistency reduces adjustment period

Descriptive Link Text

Descriptive Link Text

Visually impaired web users can scan web
pages by tabbing from link to link


Sighted users typically scan blocks of text
looking for information they are after


Descriptive Link Text

This is some text, lots and lots of lovely text. Now,
here's a sentence with a link in it. To read more
about our widgets please
click here
. Following this,
there is more text, lots and lots of lovely text. And
one more sentence, containing yet more text to
illustrate this point.

This is some text, lots and lots of lovely text. Now,
here's a sentence with a link in it. Please read
about our widgets

whilst visiting our website.
Following this, there is more text, lots and lots of
lovely text. And one more sentence, containing yet
more text to illustrate this point.

vs.

Descriptive Link Text

Effectively describes the link destination


Far easier to scan


Not reliant on surrounding text for context

Break Up Large

Blocks of Content

Visually impaired users have to listen to
information and remember it


Structuring content into small, management
groups is easier to comprehend

Break Up Large

Blocks of Content

Heading tags (h1, h2, h3 etc.) provide

semantic structure for screen readers and

visual structure for users

Break Up Large

Blocks of Content

Sirloin capicola tri
-
tip, prosciutto tail leberkas short loin. Brisket sirloin sausage
chuck, pastrami biltong capicola kielbasa beef ribs shankle bresaola turkey ball tip
ham. Spare ribs rump ribeye chicken jerky, t
-
bone ground round kielbasa sirloin
corned beef frankfurter prosciutto strip steak drumstick. Beef rump pancetta, corned
beef sirloin pastrami biltong shank drumstick doner pork belly tail ham hock
turducken. Bresaola t
-
bone turkey filet mignon venison shank fatback ribeye pork loin
boudin. Bresaola shank pork tri
-
tip filet mignon bacon tongue ground round pastrami
tenderloin venison tail ribeye spare ribs drumstick. Biltong chicken swine frankfurter
strip steak jowl pork belly pork. Leberkas turkey prosciutto spare ribs.

vs.

Bacon Ipsum

Sirloin capicola tri
-
tip, prosciutto tail leberkas short loin. Brisket sirloin sausage chuck,
pastrami biltong capicola kielbasa beef ribs shankle bresaola turkey ball tip ham.


Spare ribs rump ribeye chicken jerky, t
-
bone ground round kielbasa sirloin corned beef
frankfurter prosciutto strip steak drumstick. Beef rump pancetta, corned beef sirloin
pastrami biltong shank drumstick doner pork belly tail ham hock turducken.


A Meatier Lorem Ipsum Generator

Bresaola t
-
bone turkey filet mignon venison shank fatback ribeye pork loin boudin.
Bresaola shank pork tri
-
tip filet mignon bacon tongue ground round pastrami
tenderloin venison tail ribeye spare ribs drumstick. Biltong chicken swine frankfurter
strip steak jowl pork belly pork. Leberkas turkey prosciutto spare ribs.

http://baconipsum.com

Added UX Bonus

Headings can convey meaning of content
quickly


Much easier to scan webpage for relevant
information

No excuse for not
implementing basic
accessibility


It benefits everyone

Questions?

samuel
-
schrup@uiowa.edu