stairs-ramp-analogy-text.rtf

{\rtf1\ansi\ansicpg1252\cocoartf1265\cocoasubrtf190
{\fonttbl\f0\fswiss\fcharset0 ArialMT;\f1\froman\fcharset0 TimesNewRomanPSMT;\f2\fswiss\fcharset0 Helvetica;
\f3\froman\fcharset204 Times-Roman;}
{\colortbl;\red255\green255\blue255;\red191\green191\blue191;}
{\*\listtable{\list\listtemplateid1\listhybrid{\listlevel\levelnfc0\levelnfcn0\leveljc0\leveljcn0\levelfollow0\levelstartat1\levelspace360\levelindent0{\*\levelmarker \{decimal\}.}{\leveltext\leveltemplateid1\'02\'00.;}{\levelnumbers\'01;}\fi-360\li720\lin720 }{\listlevel\levelnfc0\levelnfcn0\leveljc0\leveljcn0\levelfollow0\levelstartat1\levelspace360\levelindent0{\*\levelmarker \{decimal\}.}{\leveltext\leveltemplateid2\'02\'01.;}{\levelnumbers\'01;}\fi-360\li1440\lin1440 }{\listname ;}\listid1}
{\list\listtemplateid2\listhybrid{\listlevel\levelnfc23\levelnfcn23\leveljc0\leveljcn0\levelfollow0\levelstartat1\levelspace360\levelindent0{\*\levelmarker \{disc\}}{\leveltext\leveltemplateid101\'01\uc0\u8226 ;}{\levelnumbers;}\fi-360\li720\lin720 }{\listname ;}\listid2}
{\list\listtemplateid3\listhybrid{\listlevel\levelnfc0\levelnfcn0\leveljc0\leveljcn0\levelfollow0\levelstartat1\levelspace360\levelindent0{\*\levelmarker \{decimal\}.}{\leveltext\leveltemplateid201\'02\'00.;}{\levelnumbers\'01;}\fi-360\li720\lin720 }{\listlevel\levelnfc0\levelnfcn0\leveljc0\leveljcn0\levelfollow0\levelstartat1\levelspace360\levelindent0{\*\levelmarker \{decimal\}.}{\leveltext\leveltemplateid202\'02\'01.;}{\levelnumbers\'01;}\fi-360\li1440\lin1440 }{\listname ;}\listid3}
{\list\listtemplateid4\listhybrid{\listlevel\levelnfc23\levelnfcn23\leveljc0\leveljcn0\levelfollow0\levelstartat1\levelspace360\levelindent0{\*\levelmarker \{disc\}}{\leveltext\leveltemplateid301\'01\uc0\u8226 ;}{\levelnumbers;}\fi-360\li720\lin720 }{\listname ;}\listid4}
{\list\listtemplateid5\listhybrid{\listlevel\levelnfc0\levelnfcn0\leveljc0\leveljcn0\levelfollow0\levelstartat1\levelspace360\levelindent0{\*\levelmarker \{decimal\}.}{\leveltext\leveltemplateid401\'02\'00.;}{\levelnumbers\'01;}\fi-360\li720\lin720 }{\listlevel\levelnfc0\levelnfcn0\leveljc0\leveljcn0\levelfollow0\levelstartat1\levelspace360\levelindent0{\*\levelmarker \{decimal\}.}{\leveltext\leveltemplateid402\'02\'01.;}{\levelnumbers\'01;}\fi-360\li1440\lin1440 }{\listname ;}\listid5}
{\list\listtemplateid6\listhybrid{\listlevel\levelnfc23\levelnfcn23\leveljc0\leveljcn0\levelfollow0\levelstartat1\levelspace360\levelindent0{\*\levelmarker \{disc\}}{\leveltext\leveltemplateid501\'01\uc0\u8226 ;}{\levelnumbers;}\fi-360\li720\lin720 }{\listname ;}\listid6}}
{\*\listoverridetable{\listoverride\listid1\listoverridecount0\ls1}{\listoverride\listid2\listoverridecount0\ls2}{\listoverride\listid3\listoverridecount0\ls3}{\listoverride\listid4\listoverridecount0\ls4}{\listoverride\listid5\listoverridecount0\ls5}{\listoverride\listid6\listoverridecount0\ls6}}
{\info
{\author Taliesin Smith}}\paperw15840\paperh12240\margl1134\margr1134\margb1134\margt1134\vieww31360\viewh19160\viewkind0
\deftab709
\pard\pardeftab709\sb240\sa120

\f0\b\fs32 \cf0 Step/Ramp Analogy for Making Web Content Accessible \
\pard\pardeftab709\li576\fi-576\ri0\sb240\sa120
\ls1\ilvl1
\f1\b0\fs24 \cf0  	
\f0\i\b\fs28 6. Step/Ramp Analogy (long version)\
\pard\pardeftab709

\f1\i0\b0\fs24 \cf0 Notes for building my info graphic, \'93the accessibility ramp for web content.\'94 It describes access techniques for each content type or stair. The blue highlights are where content experts are needed.\
\
To site this work, use the following conference proceedings citation:\
\pard\pardeftab709\li720\fi-360\ri0
\ls2\ilvl0
\f2 \cf0 	
\f3 T. L. Smith, in "Ramping it up! Building websites with accessibility and assistive technologies in mind.", 
\f1\i The Accessibility Conference, 
\f3\i0 May 29, 2013, Guelph, ON. Canada.
\f1 \
\pard\pardeftab709
\cf0 \

\itap1\trowd \taflags1 \trgaph108\trleft-108 \trbrdrt\brdrnil \trbrdrl\brdrnil \trbrdrr\brdrnil 
\clvertalc \clshdrawnil \clbrdrt\brdrs\brdrw1\brdrcf0 \clbrdrl\brdrs\brdrw1\brdrcf0 \clbrdrb\brdrs\brdrw1\brdrcf0 \clbrdrr\brdrs\brdrw20\brdrcf2 \clpadl100 \clpadr100 \gaph\cellx1440
\clvertalc \clshdrawnil \clbrdrt\brdrs\brdrw1\brdrcf0 \clbrdrl\brdrs\brdrw1\brdrcf0 \clbrdrb\brdrs\brdrw1\brdrcf0 \clbrdrr\brdrs\brdrw20\brdrcf2 \clpadl100 \clpadr100 \gaph\cellx2880
\clvertalc \clshdrawnil \clbrdrt\brdrs\brdrw1\brdrcf0 \clbrdrl\brdrs\brdrw1\brdrcf0 \clbrdrb\brdrs\brdrw1\brdrcf0 \clbrdrr\brdrs\brdrw20\brdrcf2 \clpadl100 \clpadr100 \gaph\cellx4320
\clvertalc \clshdrawnil \clbrdrt\brdrs\brdrw1\brdrcf0 \clbrdrl\brdrs\brdrw1\brdrcf0 \clbrdrb\brdrs\brdrw1\brdrcf0 \clbrdrr\brdrs\brdrw20\brdrcf2 \clpadl100 \clpadr100 \gaph\cellx5760
\clvertalc \clshdrawnil \clbrdrt\brdrs\brdrw1\brdrcf0 \clbrdrl\brdrs\brdrw1\brdrcf0 \clbrdrb\brdrs\brdrw1\brdrcf0 \clbrdrr\brdrs\brdrw20\brdrcf2 \clpadl100 \clpadr100 \gaph\cellx7200
\clvertalc \clshdrawnil \clbrdrt\brdrs\brdrw1\brdrcf0 \clbrdrl\brdrs\brdrw1\brdrcf0 \clbrdrb\brdrs\brdrw1\brdrcf0 \clbrdrr\brdrs\brdrw1\brdrcf0 \clpadl100 \clpadr100 \gaph\cellx8640
\pard\intbl\itap1\pardeftab709\qc

\b\fs20 \cf0 Solid Base & Text
\fs24 \cell 
\pard\intbl\itap1\pardeftab709\qc

\fs20 \cf0 Links &
\fs24 \

\fs20 Navigation
\fs24 \cell 
\pard\intbl\itap1\pardeftab709\qc

\fs20 \cf0 Images &
\fs24 \

\fs20 Charts
\fs24 \cell 
\pard\intbl\itap1\pardeftab709\qc

\fs20 \cf0 Colour &
\fs24 \

\fs20 Layout
\fs24 \cell 
\pard\intbl\itap1\pardeftab709\qc

\fs20 \cf0 Tables &
\fs24 \

\fs20 Forms
\fs24 \cell 
\pard\intbl\itap1\pardeftab709\qc

\fs20 \cf0 Audio/Video,  
\fs24 \

\fs20 Multimedia & PDF
\fs24 \cell \row

\itap1\trowd \taflags1 \trgaph108\trleft-108 \trbrdrl\brdrnil \trbrdrt\brdrnil \trbrdrr\brdrnil 
\clvertalc \clshdrawnil \clbrdrt\brdrs\brdrw20\brdrcf2 \clbrdrl\brdrs\brdrw1\brdrcf0 \clbrdrb\brdrs\brdrw1\brdrcf0 \clbrdrr\brdrs\brdrw20\brdrcf2 \clpadl100 \clpadr100 \gaph\cellx1440
\clvertalc \clshdrawnil \clbrdrt\brdrs\brdrw20\brdrcf2 \clbrdrl\brdrs\brdrw1\brdrcf0 \clbrdrb\brdrs\brdrw1\brdrcf0 \clbrdrr\brdrs\brdrw20\brdrcf2 \clpadl100 \clpadr100 \gaph\cellx2880
\clvertalc \clshdrawnil \clbrdrt\brdrs\brdrw20\brdrcf2 \clbrdrl\brdrs\brdrw1\brdrcf0 \clbrdrb\brdrs\brdrw1\brdrcf0 \clbrdrr\brdrs\brdrw20\brdrcf2 \clpadl100 \clpadr100 \gaph\cellx4320
\clvertalc \clshdrawnil \clbrdrt\brdrs\brdrw20\brdrcf2 \clbrdrl\brdrs\brdrw1\brdrcf0 \clbrdrb\brdrs\brdrw1\brdrcf0 \clbrdrr\brdrs\brdrw20\brdrcf2 \clpadl100 \clpadr100 \gaph\cellx5760
\clvertalc \clshdrawnil \clbrdrt\brdrs\brdrw20\brdrcf2 \clbrdrl\brdrs\brdrw1\brdrcf0 \clbrdrb\brdrs\brdrw1\brdrcf0 \clbrdrr\brdrs\brdrw20\brdrcf2 \clpadl100 \clpadr100 \gaph\cellx7200
\clvertalc \clshdrawnil \clbrdrt\brdrs\brdrw20\brdrcf2 \clbrdrl\brdrs\brdrw1\brdrcf0 \clbrdrb\brdrs\brdrw1\brdrcf0 \clbrdrr\brdrs\brdrw1\brdrcf0 \clpadl100 \clpadr100 \gaph\cellx8640
\pard\intbl\itap1\pardeftab709

\fs20 \cf0 Doctype
\b0\fs24 \
\pard\intbl\itap1\pardeftab709

\fs20 \cf0 Declare your doctype; You can not validate your code without a doctype.
\fs24 \
\
\pard\intbl\itap1\pardeftab709

\b\fs20 \cf0 Language
\b0\fs24 \
\pard\intbl\itap1\pardeftab709

\fs20 \cf0 Define natural language and mark changes to the main language of the document.
\fs24 \
\
\pard\intbl\itap1\pardeftab709

\b\fs20 \cf0 Semantic Document Structure
\b0\fs24 \
\pard\intbl\itap1\pardeftab709

\fs20 \cf0 Correctly use the HTML's built-in semantic structure to create natural document hierarchy and meaningful structure. Headings are particularly important.
\fs24 \
\
\pard\intbl\itap1\pardeftab709

\b\fs20 \cf0 Natural linear order
\b0\fs24 \
\pard\intbl\itap1\pardeftab709

\fs20 \cf0 Natural, logical reading ordering is a good place to start. A screen reader reads  in the order of the defined natural language. Use CSS to layout things out visually and to create meaningful blocks to visual users.
\fs24 \
\
\pard\intbl\itap1\pardeftab709

\b\fs20 \cf0 Reading level
\b0\fs24 \
\pard\intbl\itap1\pardeftab709

\fs20 \cf0 Keep it simple as possible.
\fs24 \cell 
\pard\intbl\itap1\pardeftab709

\b\fs20 \cf0 Skip navigation links/ & Landmarks
\b0\fs24 \
\pard\intbl\itap1\pardeftab709

\fs20 \cf0 Provide direct access to page content. Use the document's semantic structure for built-in keyboard navigation. New HTML 5 tags are particularly useful.
\fs24 \
\
\pard\intbl\itap1\pardeftab709

\b\fs20 \cf0 Well-planned , consistent  navigation 
\b0 Users like consistency, keep it in the same place, let them know where they are, keep it looking the same.
\fs24 \
\

\b\fs20 Links
\b0\fs24 \
\pard\intbl\itap1\pardeftab709

\fs20 \cf0 are the stepping stones of the internet. Tell users where they are going and warn them of 
\b context changes.
\b0\fs24 \
\

\fs20 Use 
\b unique
\b0  
\b meaningful words
\b0  for linked text. Careful use of the title attribute \'96 DRY principle is a good practice here.
\fs24 \cell 
\pard\intbl\itap1\pardeftab709

\b\fs20 \cf0 Text Alternatives
\b0\fs24 \
\pard\intbl\itap1\pardeftab709

\fs20 \cf0 Provide meaningful text alternatives for all content images. This is the required
\b  alt attribute. 
\b0 Use 
\b null-alt
\b0  appropriately.
\fs24 \
\

\fs20 For 
\b charts or complex images
\b0 , use your judgement. May need supplementary content (which could potentially benefit all users). Main thing is to maintain the meaning of the document. If the document is rendered meaningless without the image or with only a brief description, the user needs more.
\fs24 \cell 
\pard\intbl\itap1\pardeftab709

\b\fs20 \cf0 Don't rely on colour alone
\b0  to communicate meaning information. Use mark-up, text, context and non-colour style.
\fs24 \
\

\b\fs20 Choose colours wisely.
\b0  This does not mean do not use colour, it means be sure to not use confusing colours and to test your choices for sufficient contrast ratios. 
\i\b Unsure test your choices. The Brewer Palette may be useful.
\i0\b0\fs24 \
\

\b\fs20 Choose sufficient contrast
\b0  between foreground and background colour by testing it.
\fs24 \
\

\b\fs20 CSS for layout  & consistency-
\b0  all 
\b presentation needs.
\b0  Using 
\b CSS & HTML together properly
\b0  will give you the biggest bang in making your content accessible and easier to maintain.
\fs24 \cell 
\pard\intbl\itap1\pardeftab709

\b\fs20 \cf0 Simplify Tables
\b0  wherever possible. Use the rich set of table mark-up available to make your tables readable (this helps in styling to for visual readers, too).
\fs24 \
\

\b\fs20 Use Caption
\b0  to introduce the content of your data table instead of a paragraph or heading.
\fs24 \
\

\fs20 Use 
\b tables only for tabular data 
\b0 \'96 not content layout!
\fs24 \
\

\b\fs20 Forms
\b0  are complex & challenging; dynamic interactive functioning content.
\fs24 \
\

\fs20 Like tables, 
\b keep it simple 
\b0 \'96 don't ask for data you don't need. Most legal cases have happened around in-accessible forms & tables.
\fs24 \
\

\b\fs20 Use labels
\b0  for form controls and 
\b associate
\b0  them to the control.
\fs24 \
\

\b\fs20 Group form controls. 
\b0 There is a rich set of tags for creating meaning in forms; Legend, fieldset, optgroup, etc. Also helps with styling \'96 extremely important for visual users, too.
\fs24 \
\

\b\fs20 Clear error identification
\b0  
\i (don't rely on colour alone).
\i0\fs24 \
\

\b\fs20 Intuitive error handling. 
\b0 Need to work through this carefully. Including clearly telling the user they succeeded.
\fs24 \
\

\b\fs20 Leave control with user
\b0  (enough time, rechecking  & submitting).
\fs24 \
\

\fs20 (Note: Most legal cases have happened around in-accessible forms & tables.)
\fs24 \cell 
\pard\intbl\itap1\pardeftab709

\b\fs20 \cf0 No auto-play 
\b0 of anything. Leave control with user
\b  
\b0 (samurai mantra).
\fs24 \
\

\fs20 Provide open or closed 
\b captions 
\b0 for audio and video.
\fs24 \
\

\b\fs20 Audio description for v
\b0 ideo that cannot be understood by the soundtrack alone: (open or closed).
\fs24 \
\

\b\fs20 Transcripts
\b0  in some cases makes better sense than captions (podcasts of conversations).
\fs24 \
\

\fs20 The 
\b WCAG Samurai
\b0  have sensible advice for overcoming real barriers to sound and audio media.
\fs24 \
\

\fs20 Not sure what WCAG says about PDF, but the Samurai have clear advice here, too.
\fs24 \
\

\fs20 PDF \'96 first ask is there a reason  not to use HTML? PDF must be tagged.
\fs24 \cell \lastrow\row
\pard\pardeftab709\li576\fi-576\ri0\sb240\sa120
\ls3\ilvl1\cf0  	
\f0\i\b\fs28 \
\ls3\ilvl1
\f1\i0\b0\fs24  	
\f0\i\b\fs28 6. Step/Ramp Analogy (condensed version)\
\pard\pardeftab709

\f1\i0\b0\fs24 \cf0 Notes for building my info graphic also\'93the accessibility ramp for web content.\'94 It describes access techniques for each content type or stair. The blue highlights are where content experts are needed.\
\
To site this work, use the following conference proceedings citation:\
\pard\pardeftab709\li720\fi-360\ri0
\ls4\ilvl0
\f2 \cf0 	
\f3 T. L. Smith, in "Ramping it up! Building websites with accessibility and assistive technologies in mind.", 
\f1\i The Accessibility Conference, 
\f3\i0 May 29, 2013, Guelph, ON. Canada.
\f1 \
\pard\pardeftab709
\cf0 \

\itap1\trowd \taflags1 \trgaph108\trleft-108 \trbrdrt\brdrnil \trbrdrl\brdrnil \trbrdrr\brdrnil 
\clvertalc \clshdrawnil \clbrdrt\brdrs\brdrw1\brdrcf0 \clbrdrl\brdrs\brdrw1\brdrcf0 \clbrdrb\brdrs\brdrw1\brdrcf0 \clbrdrr\brdrs\brdrw20\brdrcf2 \clpadl100 \clpadr100 \gaph\cellx1440
\clvertalc \clshdrawnil \clbrdrt\brdrs\brdrw1\brdrcf0 \clbrdrl\brdrs\brdrw1\brdrcf0 \clbrdrb\brdrs\brdrw1\brdrcf0 \clbrdrr\brdrs\brdrw20\brdrcf2 \clpadl100 \clpadr100 \gaph\cellx2880
\clvertalc \clshdrawnil \clbrdrt\brdrs\brdrw1\brdrcf0 \clbrdrl\brdrs\brdrw1\brdrcf0 \clbrdrb\brdrs\brdrw1\brdrcf0 \clbrdrr\brdrs\brdrw20\brdrcf2 \clpadl100 \clpadr100 \gaph\cellx4320
\clvertalc \clshdrawnil \clbrdrt\brdrs\brdrw1\brdrcf0 \clbrdrl\brdrs\brdrw1\brdrcf0 \clbrdrb\brdrs\brdrw1\brdrcf0 \clbrdrr\brdrs\brdrw20\brdrcf2 \clpadl100 \clpadr100 \gaph\cellx5760
\clvertalc \clshdrawnil \clbrdrt\brdrs\brdrw1\brdrcf0 \clbrdrl\brdrs\brdrw1\brdrcf0 \clbrdrb\brdrs\brdrw1\brdrcf0 \clbrdrr\brdrs\brdrw20\brdrcf2 \clpadl100 \clpadr100 \gaph\cellx7200
\clvertalc \clshdrawnil \clbrdrt\brdrs\brdrw1\brdrcf0 \clbrdrl\brdrs\brdrw1\brdrcf0 \clbrdrb\brdrs\brdrw1\brdrcf0 \clbrdrr\brdrs\brdrw1\brdrcf0 \clpadl100 \clpadr100 \gaph\cellx8640
\pard\intbl\itap1\pardeftab709\qc

\b\fs20 \cf0 Solid Base & Text
\fs24 \cell 
\pard\intbl\itap1\pardeftab709\qc

\fs20 \cf0 Links &
\fs24 \

\fs20 Navigation
\fs24 \cell 
\pard\intbl\itap1\pardeftab709\qc

\fs20 \cf0 Images &
\fs24 \

\fs20 Charts
\fs24 \cell 
\pard\intbl\itap1\pardeftab709\qc

\fs20 \cf0 Colour/ 
\fs24 \

\fs20 Layout
\fs24 \cell 
\pard\intbl\itap1\pardeftab709\qc

\fs20 \cf0 Tables/ 
\fs24 \

\fs20 Forms
\fs24 \cell 
\pard\intbl\itap1\pardeftab709\qc

\fs20 \cf0 Audio/Video/  
\fs24 \

\fs20 Multimedia & PDF
\fs24 \cell \row

\itap1\trowd \taflags1 \trgaph108\trleft-108 \trbrdrl\brdrnil \trbrdrt\brdrnil \trbrdrr\brdrnil 
\clvertalc \clshdrawnil \clbrdrt\brdrs\brdrw20\brdrcf2 \clbrdrl\brdrs\brdrw1\brdrcf0 \clbrdrb\brdrs\brdrw1\brdrcf0 \clbrdrr\brdrs\brdrw20\brdrcf2 \clpadl100 \clpadr100 \gaph\cellx1440
\clvertalc \clshdrawnil \clbrdrt\brdrs\brdrw20\brdrcf2 \clbrdrl\brdrs\brdrw1\brdrcf0 \clbrdrb\brdrs\brdrw1\brdrcf0 \clbrdrr\brdrs\brdrw20\brdrcf2 \clpadl100 \clpadr100 \gaph\cellx2880
\clvertalc \clshdrawnil \clbrdrt\brdrs\brdrw20\brdrcf2 \clbrdrl\brdrs\brdrw1\brdrcf0 \clbrdrb\brdrs\brdrw1\brdrcf0 \clbrdrr\brdrs\brdrw20\brdrcf2 \clpadl100 \clpadr100 \gaph\cellx4320
\clvertalc \clshdrawnil \clbrdrt\brdrs\brdrw20\brdrcf2 \clbrdrl\brdrs\brdrw1\brdrcf0 \clbrdrb\brdrs\brdrw1\brdrcf0 \clbrdrr\brdrs\brdrw20\brdrcf2 \clpadl100 \clpadr100 \gaph\cellx5760
\clvertalc \clshdrawnil \clbrdrt\brdrs\brdrw20\brdrcf2 \clbrdrl\brdrs\brdrw1\brdrcf0 \clbrdrb\brdrs\brdrw1\brdrcf0 \clbrdrr\brdrs\brdrw20\brdrcf2 \clpadl100 \clpadr100 \gaph\cellx7200
\clvertalc \clshdrawnil \clbrdrt\brdrs\brdrw20\brdrcf2 \clbrdrl\brdrs\brdrw1\brdrcf0 \clbrdrb\brdrs\brdrw1\brdrcf0 \clbrdrr\brdrs\brdrw1\brdrcf0 \clpadl100 \clpadr100 \gaph\cellx8640
\pard\intbl\itap1\pardeftab709

\fs20 \cf0 Doctype
\b0\fs24 \
\pard\intbl\itap1\pardeftab709

\fs20 \cf0 Valid code is your  base.
\fs24 \
\
\pard\intbl\itap1\pardeftab709

\b\fs20 \cf0 Language
\b0\fs24 \
\pard\intbl\itap1\pardeftab709

\fs20 \cf0 Define language and language changes.
\fs24 \
\
\pard\intbl\itap1\pardeftab709

\b\fs20 \cf0 Semantic Document Structure
\b0\fs24 \
\pard\intbl\itap1\pardeftab709

\fs20 \cf0 HTML's built-in semantic structure creates meaning
\fs24 \
\
\pard\intbl\itap1\pardeftab709

\b\fs20 \cf0 Natural linear order
\b0\fs24 \
\pard\intbl\itap1\pardeftab709

\fs20 \cf0 A screen reader reads in the order of the defined natural language. 
\fs24 \
\
\pard\intbl\itap1\pardeftab709

\b\fs20 \cf0 Reading level
\b0\fs24 \
\pard\intbl\itap1\pardeftab709

\fs20 \cf0 Keep it simple as possible.
\fs24 \cell 
\pard\intbl\itap1\pardeftab709

\b\fs20 \cf0 Skip navigation links/ & Landmarks
\b0\fs24 \
\pard\intbl\itap1\pardeftab709

\fs20 \cf0 Provide direct access to page content.  (HTML 5 awesomeness)
\fs24 \
\
\pard\intbl\itap1\pardeftab709

\b\fs20 \cf0 Well-planned , consistent  navigation 
\b0 Users like consistency.
\fs24 \
\

\b\fs20 Links
\b0 - like stepping stones; leave 
\b context changes 
\b0 in the control of the user.
\fs24 \
\
\pard\intbl\itap1\pardeftab709

\fs20 \cf0 Use 
\b unique
\b0  
\b meaningful words
\b0  for linked text. \'96 keep links DRY (do not repeat yourself over and over on the same page).
\fs24 \cell 
\pard\intbl\itap1\pardeftab709

\b\fs20 \cf0 Text Alternatives
\b0\fs24 \
\pard\intbl\itap1\pardeftab709

\fs20 \cf0 Provide meaningful text alternatives for all content images. The 
\b alt attribute
\b0  is required, but can be left empty with purpose.
\fs24 \
\

\fs20 For 
\b charts or complex images 
\b0 may need supplementary content (potentially benefits everyone). Goal is to maintain the meaning of the document.
\fs24 \cell 
\pard\intbl\itap1\pardeftab709

\b\fs20 \cf0 Don't rely on colour alone
\b0  for  meaning information.
\fs24 \
\

\b\fs20 Choose colours wisely.
\b0  Avoid confusing colours 
\i\b (Brewer Palette).
\i0\b0\fs24 \
\

\fs20 Test for 
\b sufficient contrast
\b0  ratios.
\fs24 \
\

\fs20 Use 
\b CSS for layout  & consistency.
\b0  Using 
\b CSS & HTML together properly
\b0  is the biggest bang in making your content accessible & easier to maintain.
\fs24 \cell 
\pard\intbl\itap1\pardeftab709

\b\fs20 \cf0 Simplify Tables
\b0  wherever possible. Use the rich set of semantic table mark-up available.
\fs24 \
\

\fs20 Use the 
\b Caption
\b0  element to introduce the content of your data table.
\fs24 \
\

\fs20 Use 
\b tables only for tabular data 
\b0 \'96 not content layout!
\fs24 \
\

\b\fs20 Forms
\b0  are complex by nature. 
\b Keep them simple 
\b0 \'96 don't ask for data you don't need.  (Note: Most legal cases have happened around in-accessible forms & tables.)
\fs24 \
\

\b\fs20 Use & associate
\b0  
\b labels
\b0  for every form control.
\fs24 \
\

\b\fs20 Group form controls. 
\b0 Use the rich set of tags for creating meaning in forms: legend, fieldset, optgroup - good for all users.
\fs24 \
\

\b\fs20 Clear error identification
\b0  
\i & i
\i0\b ntuitive error handling. C
\b0 learly telling the user where the they have gone wrong and when they have succeeded.
\fs24 \
\

\b\fs20 Reasonable time-outs
\b0  (user control).
\fs24 \cell 
\pard\intbl\itap1\pardeftab709

\b\fs20 \cf0 No auto-play 
\b0 of anything (user control).
\fs24 \
\

\fs20 Provide open or closed 
\b captions 
\b0 for audio and video.
\fs24 \
\

\b\fs20 Audio description for v
\b0 ideo that cannot be understood by the soundtrack alone: (open or closed).
\fs24 \
\

\b\fs20 Transcripts
\b0  in some cases makes better sense than captions (i.e. talking heads & interviews)
\fs24 \
\

\fs20 PDF \'96 first ask is there a reason  not to use HTML? PDF must be tagged to be accessible.
\fs24 \cell \lastrow\row
\pard\pardeftab709\li576\fi-576\ri0\sb240\sa120
\ls5\ilvl1\cf0  	
\f0\i\b\fs28 10. Step/Ramp Analogy (finer step details)\
\pard\pardeftab709

\f1\i0\b0\fs24 \cf0 Notes for building my info graphic also\'93the accessibility ramp for web content.\'94 It describes access techniques for each content type or stair. The blue highlights are where content experts are needed.\
\
To site this work, use the following conference proceedings citation:\
\pard\pardeftab709\li720\fi-360\ri0
\ls6\ilvl0
\f2 \cf0 	
\f3 T. L. Smith, in "Making Web Content Accessible in Ten Steps or Less.", Open Education Week
\f1\i , 
\f3\i0 March 11, 2014, St. John's, NL,  Canada.
\f1 \
\pard\pardeftab709
\cf0 \

\itap1\trowd \taflags1 \trgaph108\trleft-108 \trbrdrt\brdrnil \trbrdrl\brdrnil \trbrdrr\brdrnil 
\clvertalc \clshdrawnil \clbrdrt\brdrs\brdrw1\brdrcf0 \clbrdrl\brdrs\brdrw1\brdrcf0 \clbrdrb\brdrs\brdrw1\brdrcf0 \clbrdrr\brdrs\brdrw20\brdrcf2 \clpadl100 \clpadr100 \gaph\cellx1080
\clvertalc \clshdrawnil \clbrdrt\brdrs\brdrw1\brdrcf0 \clbrdrl\brdrs\brdrw1\brdrcf0 \clbrdrb\brdrs\brdrw1\brdrcf0 \clbrdrr\brdrs\brdrw20\brdrcf2 \clpadl100 \clpadr100 \gaph\cellx2160
\clvertalc \clshdrawnil \clbrdrt\brdrs\brdrw1\brdrcf0 \clbrdrl\brdrs\brdrw1\brdrcf0 \clbrdrb\brdrs\brdrw1\brdrcf0 \clbrdrr\brdrs\brdrw20\brdrcf2 \clpadl100 \clpadr100 \gaph\cellx3240
\clvertalc \clshdrawnil \clbrdrt\brdrs\brdrw1\brdrcf0 \clbrdrl\brdrs\brdrw1\brdrcf0 \clbrdrb\brdrs\brdrw1\brdrcf0 \clbrdrr\brdrs\brdrw20\brdrcf2 \clpadl100 \clpadr100 \gaph\cellx4320
\clvertalc \clshdrawnil \clbrdrt\brdrs\brdrw1\brdrcf0 \clbrdrl\brdrs\brdrw1\brdrcf0 \clbrdrb\brdrs\brdrw1\brdrcf0 \clbrdrr\brdrs\brdrw20\brdrcf2 \clpadl100 \clpadr100 \gaph\cellx5400
\clvertalc \clshdrawnil \clbrdrt\brdrs\brdrw1\brdrcf0 \clbrdrl\brdrs\brdrw1\brdrcf0 \clbrdrb\brdrs\brdrw1\brdrcf0 \clbrdrr\brdrs\brdrw20\brdrcf2 \clpadl100 \clpadr100 \gaph\cellx6480
\clvertalc \clshdrawnil \clbrdrt\brdrs\brdrw1\brdrcf0 \clbrdrl\brdrs\brdrw1\brdrcf0 \clbrdrb\brdrs\brdrw1\brdrcf0 \clbrdrr\brdrs\brdrw20\brdrcf2 \clpadl100 \clpadr100 \gaph\cellx7560
\clvertalc \clshdrawnil \clbrdrt\brdrs\brdrw1\brdrcf0 \clbrdrl\brdrs\brdrw1\brdrcf0 \clbrdrb\brdrs\brdrw1\brdrcf0 \clbrdrr\brdrs\brdrw1\brdrcf0 \clpadl100 \clpadr100 \gaph\cellx8640
\pard\intbl\itap1\pardeftab709\qc

\b\fs20 \cf0 1.Solid Base
\fs24 \cell 
\pard\intbl\itap1\pardeftab709\qc

\fs20 \cf0 2.Text
\fs24 \cell 
\pard\intbl\itap1\pardeftab709\qc

\fs20 \cf0 3. Links &
\fs24 \

\fs20 Navigation
\fs24 \cell 
\pard\intbl\itap1\pardeftab709\qc

\fs20 \cf0 4. Images &
\fs24 \

\fs20 Charts
\fs24 \cell 
\pard\intbl\itap1\pardeftab709\qc

\fs20 \cf0 5. Tables
\fs24 \cell 
\pard\intbl\itap1\pardeftab709\qc

\fs20 \cf0 6. Design Choices
\fs24 \cell 
\pard\intbl\itap1\pardeftab709\qc

\fs20 \cf0  7. Forms
\fs24 \cell 
\pard\intbl\itap1\pardeftab709\qc

\fs20 \cf0 8. Audio/ Video/  
\fs24 \

\fs20 9. Multimedia & 
\fs24 \

\fs20 10. PDF
\fs24 \cell \row

\itap1\trowd \taflags1 \trgaph108\trleft-108 \trbrdrl\brdrnil \trbrdrt\brdrnil \trbrdrr\brdrnil 
\clvertalc \clshdrawnil \clbrdrt\brdrs\brdrw20\brdrcf2 \clbrdrl\brdrs\brdrw1\brdrcf0 \clbrdrb\brdrs\brdrw1\brdrcf0 \clbrdrr\brdrs\brdrw20\brdrcf2 \clpadl100 \clpadr100 \gaph\cellx1080
\clvertalc \clshdrawnil \clbrdrt\brdrs\brdrw20\brdrcf2 \clbrdrl\brdrs\brdrw1\brdrcf0 \clbrdrb\brdrs\brdrw1\brdrcf0 \clbrdrr\brdrs\brdrw20\brdrcf2 \clpadl100 \clpadr100 \gaph\cellx2160
\clvertalc \clshdrawnil \clbrdrt\brdrs\brdrw20\brdrcf2 \clbrdrl\brdrs\brdrw1\brdrcf0 \clbrdrb\brdrs\brdrw1\brdrcf0 \clbrdrr\brdrs\brdrw20\brdrcf2 \clpadl100 \clpadr100 \gaph\cellx3240
\clvertalc \clshdrawnil \clbrdrt\brdrs\brdrw20\brdrcf2 \clbrdrl\brdrs\brdrw1\brdrcf0 \clbrdrb\brdrs\brdrw1\brdrcf0 \clbrdrr\brdrs\brdrw20\brdrcf2 \clpadl100 \clpadr100 \gaph\cellx4320
\clvertalc \clshdrawnil \clbrdrt\brdrs\brdrw20\brdrcf2 \clbrdrl\brdrs\brdrw1\brdrcf0 \clbrdrb\brdrs\brdrw1\brdrcf0 \clbrdrr\brdrs\brdrw20\brdrcf2 \clpadl100 \clpadr100 \gaph\cellx5400
\clvertalc \clshdrawnil \clbrdrt\brdrs\brdrw20\brdrcf2 \clbrdrl\brdrs\brdrw1\brdrcf0 \clbrdrb\brdrs\brdrw1\brdrcf0 \clbrdrr\brdrs\brdrw20\brdrcf2 \clpadl100 \clpadr100 \gaph\cellx6480
\clvertalc \clshdrawnil \clbrdrt\brdrs\brdrw20\brdrcf2 \clbrdrl\brdrs\brdrw1\brdrcf0 \clbrdrb\brdrs\brdrw1\brdrcf0 \clbrdrr\brdrs\brdrw20\brdrcf2 \clpadl100 \clpadr100 \gaph\cellx7560
\clvertalc \clshdrawnil \clbrdrt\brdrs\brdrw20\brdrcf2 \clbrdrl\brdrs\brdrw1\brdrcf0 \clbrdrb\brdrs\brdrw1\brdrcf0 \clbrdrr\brdrs\brdrw1\brdrcf0 \clpadl100 \clpadr100 \gaph\cellx8640
\pard\intbl\itap1\pardeftab709

\fs20 \cf0 Doctype
\b0\fs24 \
\pard\intbl\itap1\pardeftab709

\fs20 \cf0 Valid code is your  base.
\fs24 \
\
\pard\intbl\itap1\pardeftab709

\b\fs20 \cf0 Title
\b0\fs24 \
\pard\intbl\itap1\pardeftab709

\fs20 \cf0 Tell users they are by providing a unique & meaningful page title.
\fs24 \
\
\pard\intbl\itap1\pardeftab709

\b\fs20 \cf0 Character Set
\b0\fs24 \
\pard\intbl\itap1\pardeftab709

\fs20 \cf0 To interpret things correctly, the browser needs to know this.
\fs24 \

\fs20 HTML5 default is 
\fs24 \

\fs20 UTF-8.
\fs24 \cell 
\pard\intbl\itap1\pardeftab709

\b\fs20 \cf0 Language
\b0\fs24 \
\pard\intbl\itap1\pardeftab709

\fs20 \cf0 Define the main language and language changes.
\fs24 \
\
\pard\intbl\itap1\pardeftab709

\b\fs20 \cf0 Logical Document Hierarchy & Meaningful Document Structure
\b0\fs24 \
\pard\intbl\itap1\pardeftab709

\fs20 \cf0 HTML's built-in semantic structure creates meaning.
\fs24 \
\
\pard\intbl\itap1\pardeftab709

\b\fs20 \cf0 Natural linear order
\b0\fs24 \
\pard\intbl\itap1\pardeftab709

\fs20 \cf0 A screen reader reads in the order of the defined natural language. 
\fs24 \
\
\pard\intbl\itap1\pardeftab709

\b\fs20 \cf0 Reading level
\b0\fs24 \
\pard\intbl\itap1\pardeftab709

\fs20 \cf0 Keep it simple as possible.
\fs24 \cell 
\pard\intbl\itap1\pardeftab709

\b\fs20 \cf0 Skip navigation links/ & Landmarks
\b0\fs24 \
\pard\intbl\itap1\pardeftab709

\fs20 \cf0 Provide direct access to page content.  (HTML 5 awesomeness) WAI-ARIA is another standard 
\fs24 \
\
\pard\intbl\itap1\pardeftab709

\b\fs20 \cf0 Well-planned , consistent  navigation 
\b0 Users like consistency.
\fs24 \
\

\b\fs20 Links
\b0 - like stepping stones; leave 
\b context changes 
\b0 in the control of the user.
\fs24 \
\
\pard\intbl\itap1\pardeftab709

\fs20 \cf0 Use 
\b unique
\b0  
\b meaningful words
\b0  for linked text. \'96 keep links DRY (do not repeat yourself over and over on the same page).
\fs24 \cell 
\pard\intbl\itap1\pardeftab709

\b\fs20 \cf0 Text Alternatives
\b0\fs24 \
\pard\intbl\itap1\pardeftab709

\fs20 \cf0 Provide meaningful text alternatives for all content images. The 
\b alt attribute
\b0  is required, but can be left empty with purpose.
\fs24 \
\

\fs20 For 
\b charts or complex images 
\b0 may need supplementary content (potentially benefits everyone). Goal is to maintain the meaning of the document.
\fs24 \cell 
\pard\intbl\itap1\pardeftab709

\b\fs20 \cf0 Simplify Tables
\b0  wherever possible. Use the rich set of semantic table mark-up available to embed meaning and reading direction into the table.
\fs24 \
\

\fs20 Use the 
\b Caption
\b0  element to introduce the content of your data table.
\fs24 \
\

\fs20 Use 
\b tables only for tabular data 
\b0 \'96 not content layout!
\fs24 \
\
\cell 
\pard\intbl\itap1\pardeftab709

\b\fs20 \cf0 Colour & Layout
\b0\fs24 \
\

\b\fs20 Don't rely on colour alone
\b0  for meaning information.
\fs24 \
\

\b\fs20 Choose colours wisely.
\b0  Avoid confusing colours 
\i\b (Brewer Palette).
\i0\b0\fs24 \
\

\fs20 Test for 
\b sufficient contrast
\b0  ratios.\
Minimum contrast\
Regular text - 4.5:1\
Large text: 3:1\
\
Contrast enhanced\
7:1/4.5:1
\fs24 \
\

\fs20 Use 
\b CSS for layout & consistency.
\b0  
\fs24 \
\

\fs20 Using 
\b CSS & HTML together properly
\b0  gives you  the biggest bang in making your content accessible & easier to maintain.
\fs24 \cell 
\pard\intbl\itap1\pardeftab709

\b\fs20 \cf0 Forms
\b0  are complex by nature. 
\b Keep them simple 
\b0 \'96 don't ask for data you don't need.  (Note: Most legal cases have happened around in-accessible forms & tables.)
\fs24 \
\

\b\fs20 Use & associate
\b0  
\b labels
\b0  for every form control.
\fs24 \
\

\b\fs20 Group form controls. 
\b0 Use the rich set of tags for creating meaning in forms: legend, fieldset, optgroup - good for all users.
\fs24 \
\

\b\fs20 Clear error identification
\b0  
\i & i
\i0\b ntuitive error handling. C
\b0 learly telling the user where the they have gone wrong and when they have succeeded.
\fs24 \
\

\b\fs20 Reasonable time-outs
\b0  (user control).
\fs24 \cell 
\pard\intbl\itap1\pardeftab709

\fs20 \cf0 Multimedia \'96 follow 
\b web standards
\b0 .
\fs24 \
\

\fs20 Audio/ Video -
\b\fs24 \

\fs20 No auto-play 
\b0 of anything (user control).
\fs24 \
\

\fs20 Provide open or closed 
\b captions 
\b0 for audio and video.
\fs24 \
\

\fs20 Provide
\b  audio description 
\b0 for video when video cannot be understood by the soundtrack alone: (open or closed).
\fs24 \
\

\b\fs20 Transcripts
\b0  in some cases makes better sense than captions (i.e. talking heads & interviews)
\fs24 \
\

\fs20 PDF \'96 first ask is there a reason  not to use HTML? PDF must be 
\b tagged
\b0  to be accessible.
\fs24 \cell \lastrow\row
\pard\pardeftab709
\cf0 \
}