Common Mistakes in Web Development and Avoiding Them

1

• Common Mistakes in Web Development and
  Avoiding Them
• Jorge Plano

2
Low quality or non-existent ALT tags on images

• alternative text must transmit the same
  information as the graphic
• this is not the same that a description of the
  graphic

3
Navigation mechanisms

• confusing or inconsistent
• disorienting the user

4
Pop up windows

• if the user can not see What happened?
• if mental disabilities What is this?

5
Incorrect denomination of links

• The most famous link
• Clic here

6
To help navigation some assistive technologies
create an auxiliary window with a list of links

• Click here
• Click here
• Click here
• Click here
• Click here
• Click here
• Click here
• Click here

7
Decorative images that don't have an empty
alternative text attribute

• no text at all or a non empty text

8
Videos or animations that

• are non captioned for users that can not hear
• have no description of the action for users that
  can not see

9
Flash

• links inside Flash inaccessibles by keyboard
• animations without textual alternative
• But ...
• there are ways to build accessible Flash!
• www.adobe.com/accessibility

10
Illegible text

• text size too small and frozen
• low contrast between text and background

11
Inaccessible links

• links that only can be reached or activated by
  mouse

12
Some cues for success
13
Structure, structure, structure
14
Ask yourself

• When you write a text, how do you put a title or
  subtitle?
• 1) Enlarge the text to a size level that you like
• 2) Select the style of the title level that you
  want
• Graphically minded vs. information minded

15
Do not design thinking of the web as a paper
medium

• Behinds
• there is an structure behind a web page, but,
• there is nothing behind paper (only dead trees)
• the designer rules vs. the web page as a
  collaborative creation of the designer and the
  user

16
Good strategy

• 1) develop content with structure and check that
  it gives the right information and interaction
• 2) add styles to position content, to get an
  attractive looking and to enhance interactions
• 3) add programmatic elements to enhance the user
  experience

17

• Thank you for your attention
• Jorge Plano ltjplano_at_yahoo.comgt