Accessibility is about unified design.
@michellesanverAccessibility done right #phpuk
View Slide
@michellesanver
@michellesanverWIIIIIIIE \o/“Learn the most bysharing your knowledgewith others” - @coderabbi
@michellesanverMichelle Sanver
@michellesanverMichelle SanverCo-President of PHPWomen
@michellesanverPHPWomen15 pounds or 30 dollars
@michellesanverMichelle SanverAccent(s)!?
@michellesanverI’m a backend developer.
@michellesanverDisclaimerThere’s a lot more to accessibility.
@michellesanverAfter lunch story
@michellesanverAronAron is a blind programmer
@michellesanverAronHe really knows how to use a screenreader
@michellesanverAronI don’t
@michellesanverDisclaimerThis talk is not how I planned it
@michellesanverThis talk is not about“people with disabilities”
@michellesanverThis talk is about peoplewho are using the web.
@michellesanverGood CodeWritten with the user in mind
@michellesanverAssistive technology
@michellesanverAssistive technologyScreen Readers
@michellesanverAssistive technologyText-To-Speech
@michellesanverAssistive technologyScreen Magnifiers
@michellesanverAssistive technologyJoysticks
@michellesanverAssistive technologyKeyboards
@michellesanverAssistive technologyMobile Devices
@michellesanverAudience participation!What other assistive technology is there?
@michellesanverAll technology isassistive technology
@michellesanverWhat if accessibilityonline was likeaccessibility IRL?
@michellesanverA typical ramp
@michellesanverA hotel layout
@michellesanverHotel Layout: SunshinePHPI lost my glasses…
@michellesanverHotel Layout: PHPUKI *really* hope I keep my glasses
@michellesanverAccessibility is aboutUniversal design
@michellesanverUniversal Design“Universal design is the design of products andenvironments to be usable by all people, to thegreatest extent possible, without the need foradaptation or specialized design.”-Ron Mace
@michellesanverUniversal DesignKeywordsequitable, flexible, simple,intuitive, low effort, approachable,usable
@michellesanverGuidelines, rules and toolsKeep your JavaScript ON!!!
@michellesanverGuidelines, rules and toolsAll functionality for all people
@michellesanverContent Gudelines
@michellesanverGeneral WritingUse Consistent Language
@michellesanverGeneral WritingWrite out acronyms(At least the first time you use them)
@michellesanverGeneral WritingBe clear and concise
@michellesanverHeadingsScreen reader users can useheading structure to navigatecontent.
@michellesanverHeadingsKeep your headers logical
@michellesanverHeadingsDon’t skip “h2” for design
@michellesanverFont-Face, Size and colourEasy to use sans-serif font
@michellesanverFont-Face, Size and colourSize: 12pt or more
@michellesanverFont-Face, Size and colourSize headers: Relative in order
@michellesanverFont-Face, Size and colourHeading 3: 14ptHeading 2: 16ptHeading 1: 18pt
@michellesanverFont-Face, Size and colourKeep a high contrast between background andfont colour.
@michellesanverLinksGive your links unique and descriptive names
@michellesanverTablesOnly for tabular data!
@michellesanverTablesFor complex tables, provide a summary
@michellesanverFormsLabel form fields!
@michellesanverFormsShould be “tabable”
@michellesanverForms“Tabable” in visual order
@michellesanverFormsUse fieldsets for related fields
@michellesanverFormsDon’t use only * for required fields
@michellesanverFormsUse ARIA in *addition* to asterixARIA required="true" and ARIA required="false"
@michellesanverFormsAfter submittingInclude errors in the page-title
@michellesanverFormsCAPTCHA is bad mmmkayhttp://webaim.org/blog/spam_free_accessible_forms/
@michellesanverColoursColourblindness
@michellesanverColoursLearning disabilities
@michellesanverColoursSatisfy both groups!Use colours *and* visual indicators
@michellesanverAudio & VideoAlternative text version
@michellesanverVideoUse Captions
@michellesanverAudioInclude a text transcript
@michellesanverAudio & VideoAlso for non-auditory learners
@michellesanverAudio & VideoIf filling material for an already descriptive article…No alternative needed
@michellesanverAudio & VideoDo *not* autoplay!
@michellesanverAudio & VideoMake sure you can pause.
@michellesanverAudio & VideoAvoid flashes
@michellesanverAudio & Video3 flashes in one second can cause epilepticreactions.
@michellesanverImagesAlt Text
@michellesanverImagesAlt TextWhat you’re trying to convey!
@michellesanverImagesAlt TextCan be replaced with a caption.
@michellesanverImagesAlt TextLeave empty for decorative images
@michellesanverImagesHigh contrast
@michellesanverImagesFor graphs, include a table if possible
@michellesanverImagesAvoid images of text
@michellesanverWAI-Aria
@michellesanverWAI-AriaARIA = Accessible Rich Internet Applications
@michellesanverAriaRoles
@michellesanverAria: Roles“button” can be a fancy clickable element
@michellesanverAriaStates and Properties
@michellesanverAria examplesRoles of "navigation" and "menu"
@michellesanverAria examplesLandmarks of "banner" and "main content"
@michellesanverAria examplesAlerts of "live" and "atomic"
@michellesanverAria examplesForms
@michellesanverDynamic contentAccessible slide shows
@michellesanverDynamic contentKeyboard friendly video playersNO AUTOPLAY PLZ
@michellesanverAria: Live RegionsTell the user about dynamic updates!
@michellesanverAria: Live RegionsPolite or assertive
@michellesanverAria: Live RegionsAllows your JavaScript to be ON
@michellesanverAria: Live RegionsTwitter uses live regions NICELY
@michellesanverAria: Live Regions: TwitterHas a dedicated accessibility team
@michellesanverAria: Live Regions: TwitterTweet field has tons of information
@michellesanverAria Example Twitteraria-labelledby="tweet-box-mini-home-profile-label"id="tweet-box-mini-home-profile" class="tweet-box rich-editor notie"contenteditable="true" spellcheck="true"role="textbox" aria-multiline="true" dir="ltr"aria-autocomplete="list"aria-expanded="false"aria-owns=“typeahead-dropdown-6”>What's happening?
@michellesanverOnline AssessmentTools
@michellesanverOnline Assessment ToolsWavehttp://wave.webaim.org/
@michellesanverOnline Assessment ToolsColor Filterhttp://colorfilter.wickline.org/
@michellesanverOnline Assessment ToolsVischeckhttp://www.vischeck.com/vischeck/
@michellesanverOnline Assessment ToolsColor Contrast Checkerhttp://webaim.org/resources/contrastchecker/
@michellesanverOnline Assessment ToolsFor moreW3C Web Accessibility Tools listhttp://www.w3.org/WAI/ER/tools/
@michellesanverWrapup
@michellesanverWrapupAccessibility is *not* about assistive technology.
@michellesanverWrapupAccessibility is about people.
@michellesanverWrapupAccessibility is aboutuniversal design
@michellesanverWrapupAccessibility means no workarounds
@michellesanverWrapupKeep your JavaScript ON
@michellesanverWrapupFollow guidelines
@michellesanverWrapupUse WAI-Aria
@michellesanverAsk questions!
@michellesanverThank you!Please rate my talk!https://joind.in/13371(OMG, do you see the 1337? :D)
@michellesanverAccessibilityLet’s talk about it.
michellesanver
niftycorp
uhooi
kishida
assu_ming
syukai
antyadev
rakus_dev
cer
smt7174
suzukimar
pylapp
cherdarchuk
62gerente
jcasabona
lara
jlugia
swwweet
eitanlees
geoffreycrofte
paulrobertlloyd
samanthasiow
holman
erikaheidi