SlideShare una empresa de Scribd logo
1 de 60
Introduction to
Accessibility
Best Practices

James Townsend
Shaw Trust Accessibility Services Financial Open Day 2012
Who is this guy?
James Townsend
Web Developer, Shaw Trust Accessibility Services



Background
• Front-end Development

• Web Design

• UI/UX

• Accessibility
What I will talk about
• Ideas & techniques that you can use to
  improve accessibility of your digital
  projects
  • Not every technique can apply to every project

  • Implementing these techniques can help
    improve accessibility

  • Start small; a little can go a long way


                                          3
What I will talk about
1. Digital Accessibility
2. Principles
3. Content
4. Design
5. Development
6. Putting it all together

                             4
1. Digital Accessibility
Digital Devices


                   Desktop


                               Games Console
  Smart Phone




    Portable                           Tablet
  Games Console



                  Television
                                      6
Digital = Connected
The Web
Web Core Technologies




   HTML         CSS          JavaScript


              Browser


          Operating System
                                   9
Accessibility Implementation
           Device Form Factor
Hardware   Input Methods
           Assistive Technology


           Operating System
           APIs
Software
           Assistive Technology
           Browser




                                  10
The website: final piece of
       the puzzle
2. Principles
Inclusive Design
What is Inclusive Design?
“Inclusive design is where innovation
and imagination flourish. Meeting the
needs of the widest variety of people
does not inhibit creativity. It opens our
minds and inspires excellence.”

Sandi Wassmer
Inclusive Design Principles
1.   Equitable         6. Preventative
2.   Flexible          7. Tolerant
3.   Straightforward   8. Effortless
4.   Perceptible       9. Accommodating
5.   Informative       10.Consistent




                                 16
How does this improve
   accessibility?
User-focused
Usability = Accessibility
Progressive Enhancement
What is Progressive
 Enhancement?
“Progressive enhancement is a strategy for web design
that emphasizes accessibility, semantic HTML markup,
and external stylesheet and scripting technologies.
Progressive enhancement uses web technologies in a
layered fashion that allows everyone to access the basic
content and functionality of a web page, using any
browser or Internet connection, while also providing an
enhanced version of the page to those with more
advanced browser software or greater bandwidth.”

Wikipedia
Progressive Enhancement
           vs
  Graceful Degradation
Graceful Degradation            Progressive Enhancement


Build for modern browsers but Provide a basic level of user
provide a lower level of user   experience for all browsers
experience to older browsers    but build in advanced
                                functionality that newer
                                browsers can utilise




                                                  24
Progressive Enhancement &
   Layers of Accessibility
Layers of Accessibility




                     HTML




                          26
Layers of Accessibility




                     CSS



                     HTML




                          27
Layers of Accessibility




                     JavaScript


                     CSS



                     HTML




                          28
Layers of Accessibility



                     CSS for JavaScript


                     JavaScript


                     CSS



                     HTML




                          29
Layers of Accessibility

                     WAI-ARIA



                     CSS for JavaScript


                     JavaScript


                     CSS



                     HTML




                          30
POUR
W3C WCAG 2.0

• Perceivable

• Operable

• Understandable

• Robust


                   32
POUR
Difficulty   Problem                  Solution


Hearing      Cannot hear media        Make it Perceivable

             Difficulty with mouse,
Mobility                              Make it Operable
             keyboard

             Difficulty with text
Cognitive                             Make it Understandable
             content

             Cannot see the content
Visual                                Make it Robust
             or colour

                                                   33
Knowing principles helps
  you learn techniques
Putting principles into action
3. Content
Content is King
What we talk about
when we talk about
     content
Text




Credit: microsoft.com
                        39
Text - Comments




Credit: reuters.com
                      40
Text – Error Messages




Credit: linkedin.com
                        41
Images




Credit: apple.com
                    42
Data Visualisation




Credit: mint.com
                     43
Audio




Credit: bbc.co.uk
                    44
Video




Credit: starbucks.com
                        45
Content & Accessibility
Type of Content      Restriction

Text                 Cognitive
                     Hearing (Sign first language)

Images               Visual

Data Visualisation   Visual
                     Cognitive

Audio & Video        Hearing Impaired


                                              46
How can we make content
   more accessible?
Content Best Practices
•   Make it easy to understand
•   Use a logical structure
•   Break up long content into sections
•   Place important information at the top
•   Provide alternative text for non-text
    elements



                                   48
4. Design
What is Design?
“Design is the process of conceptualising
and creating something tangible, in order
to serve a specific purpose.”
Design Best Practices
•   Keep it simple
•   Make it responsive
•   Place important information at the top
•   Use highly contrasting colours
•   Don’t rely on colour alone
•   Use large font sizes


                                   52
4. Development
Web Technologies
•   HTML
•   CSS
•   JavaScript
•   WAI-ARIA




                   54
Development Best Practices
•   Use standards
•   Semantics
•   Validate
•   Progressive enhancement
•   Don’t rely on mouse events
•   Provide alternatives


                                 55
5. Putting it all together
Accessibility at every stage
   of the digital project
The one web approach
Questions?
Thank you!

Más contenido relacionado

Destacado

Web Standards and Accessibility
Web Standards and AccessibilityWeb Standards and Accessibility
Web Standards and AccessibilityNick DeNardis
 
Html & CSS - Best practices 2-hour-workshop
Html & CSS - Best practices 2-hour-workshopHtml & CSS - Best practices 2-hour-workshop
Html & CSS - Best practices 2-hour-workshopVero Rebagliatte
 
SharePoint 2010 Web Standards & Accessibility
SharePoint 2010 Web Standards & AccessibilitySharePoint 2010 Web Standards & Accessibility
SharePoint 2010 Web Standards & AccessibilityMavention
 
Mobile Accessibility Best Practices & Trends
Mobile Accessibility Best Practices & TrendsMobile Accessibility Best Practices & Trends
Mobile Accessibility Best Practices & TrendsAidan Tierney
 
Early prevention of accessibility issues with mockup & wireframe reviews
Early prevention of accessibility issues with mockup & wireframe reviewsEarly prevention of accessibility issues with mockup & wireframe reviews
Early prevention of accessibility issues with mockup & wireframe reviewsAidan Tierney
 
CSUN - Accessibility and Rapid e-Learning Tools
CSUN - Accessibility and Rapid e-Learning ToolsCSUN - Accessibility and Rapid e-Learning Tools
CSUN - Accessibility and Rapid e-Learning ToolsEduardo Meza-Etienne
 

Destacado (6)

Web Standards and Accessibility
Web Standards and AccessibilityWeb Standards and Accessibility
Web Standards and Accessibility
 
Html & CSS - Best practices 2-hour-workshop
Html & CSS - Best practices 2-hour-workshopHtml & CSS - Best practices 2-hour-workshop
Html & CSS - Best practices 2-hour-workshop
 
SharePoint 2010 Web Standards & Accessibility
SharePoint 2010 Web Standards & AccessibilitySharePoint 2010 Web Standards & Accessibility
SharePoint 2010 Web Standards & Accessibility
 
Mobile Accessibility Best Practices & Trends
Mobile Accessibility Best Practices & TrendsMobile Accessibility Best Practices & Trends
Mobile Accessibility Best Practices & Trends
 
Early prevention of accessibility issues with mockup & wireframe reviews
Early prevention of accessibility issues with mockup & wireframe reviewsEarly prevention of accessibility issues with mockup & wireframe reviews
Early prevention of accessibility issues with mockup & wireframe reviews
 
CSUN - Accessibility and Rapid e-Learning Tools
CSUN - Accessibility and Rapid e-Learning ToolsCSUN - Accessibility and Rapid e-Learning Tools
CSUN - Accessibility and Rapid e-Learning Tools
 

Similar a Introduction to Accessibility Best Practices

Designing and Testing for Digital Accessibility
Designing and Testing for Digital AccessibilityDesigning and Testing for Digital Accessibility
Designing and Testing for Digital AccessibilityUsability Matters
 
Abstracting the UI Layer for WebSphere Portal
Abstracting the UI Layer for WebSphere PortalAbstracting the UI Layer for WebSphere Portal
Abstracting the UI Layer for WebSphere PortalPerficient, Inc.
 
Designing Learning #eldc2011
Designing Learning #eldc2011Designing Learning #eldc2011
Designing Learning #eldc2011Nick Floro
 
The future of the CMS
The future of the CMSThe future of the CMS
The future of the CMSInVision App
 
Accessibility in Practice
Accessibility in PracticeAccessibility in Practice
Accessibility in PracticeSandi Wassmer
 
Four Kitchens Presents: Future of the CMS
Four Kitchens Presents: Future of the CMSFour Kitchens Presents: Future of the CMS
Four Kitchens Presents: Future of the CMSFour Kitchens
 
Be My API How to Implement an API Strategy Everyone will Love
Be My API How to Implement an API Strategy Everyone will Love Be My API How to Implement an API Strategy Everyone will Love
Be My API How to Implement an API Strategy Everyone will Love CA API Management
 
Role-Based Accessibility in Government
Role-Based Accessibility in GovernmentRole-Based Accessibility in Government
Role-Based Accessibility in GovernmentAngela M. Hooker
 
UI Dev in Big data world using open source
UI Dev in Big data world using open sourceUI Dev in Big data world using open source
UI Dev in Big data world using open sourceTech Triveni
 
Web accessibility workshop 2
Web accessibility workshop 2Web accessibility workshop 2
Web accessibility workshop 2Vladimir Tomberg
 
2014 Android and iOS Design Trends
2014 Android and iOS Design Trends2014 Android and iOS Design Trends
2014 Android and iOS Design TrendsRapidValue
 
4Ward Company Presentation
4Ward Company Presentation4Ward Company Presentation
4Ward Company Presentation4Ward
 
Web accessibility workshop 2
Web accessibility workshop 2Web accessibility workshop 2
Web accessibility workshop 2Vladimir Tomberg
 
Headless Hype: What It's All About and When It Makes the Most Sense
Headless Hype: What It's All About and When It Makes the Most SenseHeadless Hype: What It's All About and When It Makes the Most Sense
Headless Hype: What It's All About and When It Makes the Most SensePerfectSense
 
2014 Android and iOS Design Trends
2014 Android and iOS Design Trends2014 Android and iOS Design Trends
2014 Android and iOS Design TrendsMelvin Thambi
 
Implementing a Multi-Device Approach to E-learning Design (US Session)
Implementing a  Multi-Device Approach to E-learning Design (US Session)Implementing a  Multi-Device Approach to E-learning Design (US Session)
Implementing a Multi-Device Approach to E-learning Design (US Session)Raptivity
 

Similar a Introduction to Accessibility Best Practices (20)

Designing and Testing for Digital Accessibility
Designing and Testing for Digital AccessibilityDesigning and Testing for Digital Accessibility
Designing and Testing for Digital Accessibility
 
Abstracting the UI Layer for WebSphere Portal
Abstracting the UI Layer for WebSphere PortalAbstracting the UI Layer for WebSphere Portal
Abstracting the UI Layer for WebSphere Portal
 
Designing Learning #eldc2011
Designing Learning #eldc2011Designing Learning #eldc2011
Designing Learning #eldc2011
 
The future of the CMS
The future of the CMSThe future of the CMS
The future of the CMS
 
Accessibility in Practice
Accessibility in PracticeAccessibility in Practice
Accessibility in Practice
 
Four Kitchens Presents: Future of the CMS
Four Kitchens Presents: Future of the CMSFour Kitchens Presents: Future of the CMS
Four Kitchens Presents: Future of the CMS
 
Be My API How to Implement an API Strategy Everyone will Love
Be My API How to Implement an API Strategy Everyone will Love Be My API How to Implement an API Strategy Everyone will Love
Be My API How to Implement an API Strategy Everyone will Love
 
Role-Based Accessibility in Government
Role-Based Accessibility in GovernmentRole-Based Accessibility in Government
Role-Based Accessibility in Government
 
UI Dev in Big data world using open source
UI Dev in Big data world using open sourceUI Dev in Big data world using open source
UI Dev in Big data world using open source
 
Web accessibility workshop 2
Web accessibility workshop 2Web accessibility workshop 2
Web accessibility workshop 2
 
2014 Android and iOS Design Trends
2014 Android and iOS Design Trends2014 Android and iOS Design Trends
2014 Android and iOS Design Trends
 
About 4Ward
About 4WardAbout 4Ward
About 4Ward
 
4Ward Company Presentation
4Ward Company Presentation4Ward Company Presentation
4Ward Company Presentation
 
Designing for Everybody Workshop
Designing for Everybody WorkshopDesigning for Everybody Workshop
Designing for Everybody Workshop
 
Web accessibility workshop 2
Web accessibility workshop 2Web accessibility workshop 2
Web accessibility workshop 2
 
IT Project NE - Services Offer 2013
IT Project NE - Services Offer 2013IT Project NE - Services Offer 2013
IT Project NE - Services Offer 2013
 
Headless Hype: What It's All About and When It Makes the Most Sense
Headless Hype: What It's All About and When It Makes the Most SenseHeadless Hype: What It's All About and When It Makes the Most Sense
Headless Hype: What It's All About and When It Makes the Most Sense
 
2014 Android and iOS Design Trends
2014 Android and iOS Design Trends2014 Android and iOS Design Trends
2014 Android and iOS Design Trends
 
Implementing a Multi-Device Approach to E-learning Design (US Session)
Implementing a  Multi-Device Approach to E-learning Design (US Session)Implementing a  Multi-Device Approach to E-learning Design (US Session)
Implementing a Multi-Device Approach to E-learning Design (US Session)
 
Content Publishing
Content PublishingContent Publishing
Content Publishing
 

Último

Q4 2023 Quarterly Investor Presentation - FINAL - v1.pdf
Q4 2023 Quarterly Investor Presentation - FINAL - v1.pdfQ4 2023 Quarterly Investor Presentation - FINAL - v1.pdf
Q4 2023 Quarterly Investor Presentation - FINAL - v1.pdfTejal81
 
Webinar: The Art of Prioritizing Your Product Roadmap by AWS Sr PM - Tech
Webinar: The Art of Prioritizing Your Product Roadmap by AWS Sr PM - TechWebinar: The Art of Prioritizing Your Product Roadmap by AWS Sr PM - Tech
Webinar: The Art of Prioritizing Your Product Roadmap by AWS Sr PM - TechProduct School
 
How to release an Open Source Dataweave Library
How to release an Open Source Dataweave LibraryHow to release an Open Source Dataweave Library
How to release an Open Source Dataweave Libraryshyamraj55
 
2024.03.12 Cost drivers of cultivated meat production.pdf
2024.03.12 Cost drivers of cultivated meat production.pdf2024.03.12 Cost drivers of cultivated meat production.pdf
2024.03.12 Cost drivers of cultivated meat production.pdfThe Good Food Institute
 
CyberSecurity - Computers In Libraries 2024
CyberSecurity - Computers In Libraries 2024CyberSecurity - Computers In Libraries 2024
CyberSecurity - Computers In Libraries 2024Brian Pichman
 
Scenario Library et REX Discover industry- and role- based scenarios
Scenario Library et REX Discover industry- and role- based scenariosScenario Library et REX Discover industry- and role- based scenarios
Scenario Library et REX Discover industry- and role- based scenariosErol GIRAUDY
 
.NET 8 ChatBot with Azure OpenAI Services.pptx
.NET 8 ChatBot with Azure OpenAI Services.pptx.NET 8 ChatBot with Azure OpenAI Services.pptx
.NET 8 ChatBot with Azure OpenAI Services.pptxHansamali Gamage
 
Technical SEO for Improved Accessibility WTS FEST
Technical SEO for Improved Accessibility  WTS FESTTechnical SEO for Improved Accessibility  WTS FEST
Technical SEO for Improved Accessibility WTS FESTBillieHyde
 
Top 10 Squarespace Development Companies
Top 10 Squarespace Development CompaniesTop 10 Squarespace Development Companies
Top 10 Squarespace Development CompaniesTopCSSGallery
 
Trailblazer Community - Flows Workshop (Session 2)
Trailblazer Community - Flows Workshop (Session 2)Trailblazer Community - Flows Workshop (Session 2)
Trailblazer Community - Flows Workshop (Session 2)Muhammad Tiham Siddiqui
 
Emil Eifrem at GraphSummit Copenhagen 2024 - The Art of the Possible.pptx
Emil Eifrem at GraphSummit Copenhagen 2024 - The Art of the Possible.pptxEmil Eifrem at GraphSummit Copenhagen 2024 - The Art of the Possible.pptx
Emil Eifrem at GraphSummit Copenhagen 2024 - The Art of the Possible.pptxNeo4j
 
The New Cloud World Order Is FinOps (Slideshow)
The New Cloud World Order Is FinOps (Slideshow)The New Cloud World Order Is FinOps (Slideshow)
The New Cloud World Order Is FinOps (Slideshow)codyslingerland1
 
3 Pitfalls Everyone Should Avoid with Cloud Data
3 Pitfalls Everyone Should Avoid with Cloud Data3 Pitfalls Everyone Should Avoid with Cloud Data
3 Pitfalls Everyone Should Avoid with Cloud DataEric D. Schabell
 
Introduction to RAG (Retrieval Augmented Generation) and its application
Introduction to RAG (Retrieval Augmented Generation) and its applicationIntroduction to RAG (Retrieval Augmented Generation) and its application
Introduction to RAG (Retrieval Augmented Generation) and its applicationKnoldus Inc.
 
UiPath Studio Web workshop series - Day 2
UiPath Studio Web workshop series - Day 2UiPath Studio Web workshop series - Day 2
UiPath Studio Web workshop series - Day 2DianaGray10
 
The Importance of Indoor Air Quality (English)
The Importance of Indoor Air Quality (English)The Importance of Indoor Air Quality (English)
The Importance of Indoor Air Quality (English)IES VE
 
Automation Ops Series: Session 2 - Governance for UiPath projects
Automation Ops Series: Session 2 - Governance for UiPath projectsAutomation Ops Series: Session 2 - Governance for UiPath projects
Automation Ops Series: Session 2 - Governance for UiPath projectsDianaGray10
 
TrustArc Webinar - How to Live in a Post Third-Party Cookie World
TrustArc Webinar - How to Live in a Post Third-Party Cookie WorldTrustArc Webinar - How to Live in a Post Third-Party Cookie World
TrustArc Webinar - How to Live in a Post Third-Party Cookie WorldTrustArc
 
From the origin to the future of Open Source model and business
From the origin to the future of  Open Source model and businessFrom the origin to the future of  Open Source model and business
From the origin to the future of Open Source model and businessFrancesco Corti
 

Último (20)

Q4 2023 Quarterly Investor Presentation - FINAL - v1.pdf
Q4 2023 Quarterly Investor Presentation - FINAL - v1.pdfQ4 2023 Quarterly Investor Presentation - FINAL - v1.pdf
Q4 2023 Quarterly Investor Presentation - FINAL - v1.pdf
 
SheDev 2024
SheDev 2024SheDev 2024
SheDev 2024
 
Webinar: The Art of Prioritizing Your Product Roadmap by AWS Sr PM - Tech
Webinar: The Art of Prioritizing Your Product Roadmap by AWS Sr PM - TechWebinar: The Art of Prioritizing Your Product Roadmap by AWS Sr PM - Tech
Webinar: The Art of Prioritizing Your Product Roadmap by AWS Sr PM - Tech
 
How to release an Open Source Dataweave Library
How to release an Open Source Dataweave LibraryHow to release an Open Source Dataweave Library
How to release an Open Source Dataweave Library
 
2024.03.12 Cost drivers of cultivated meat production.pdf
2024.03.12 Cost drivers of cultivated meat production.pdf2024.03.12 Cost drivers of cultivated meat production.pdf
2024.03.12 Cost drivers of cultivated meat production.pdf
 
CyberSecurity - Computers In Libraries 2024
CyberSecurity - Computers In Libraries 2024CyberSecurity - Computers In Libraries 2024
CyberSecurity - Computers In Libraries 2024
 
Scenario Library et REX Discover industry- and role- based scenarios
Scenario Library et REX Discover industry- and role- based scenariosScenario Library et REX Discover industry- and role- based scenarios
Scenario Library et REX Discover industry- and role- based scenarios
 
.NET 8 ChatBot with Azure OpenAI Services.pptx
.NET 8 ChatBot with Azure OpenAI Services.pptx.NET 8 ChatBot with Azure OpenAI Services.pptx
.NET 8 ChatBot with Azure OpenAI Services.pptx
 
Technical SEO for Improved Accessibility WTS FEST
Technical SEO for Improved Accessibility  WTS FESTTechnical SEO for Improved Accessibility  WTS FEST
Technical SEO for Improved Accessibility WTS FEST
 
Top 10 Squarespace Development Companies
Top 10 Squarespace Development CompaniesTop 10 Squarespace Development Companies
Top 10 Squarespace Development Companies
 
Trailblazer Community - Flows Workshop (Session 2)
Trailblazer Community - Flows Workshop (Session 2)Trailblazer Community - Flows Workshop (Session 2)
Trailblazer Community - Flows Workshop (Session 2)
 
Emil Eifrem at GraphSummit Copenhagen 2024 - The Art of the Possible.pptx
Emil Eifrem at GraphSummit Copenhagen 2024 - The Art of the Possible.pptxEmil Eifrem at GraphSummit Copenhagen 2024 - The Art of the Possible.pptx
Emil Eifrem at GraphSummit Copenhagen 2024 - The Art of the Possible.pptx
 
The New Cloud World Order Is FinOps (Slideshow)
The New Cloud World Order Is FinOps (Slideshow)The New Cloud World Order Is FinOps (Slideshow)
The New Cloud World Order Is FinOps (Slideshow)
 
3 Pitfalls Everyone Should Avoid with Cloud Data
3 Pitfalls Everyone Should Avoid with Cloud Data3 Pitfalls Everyone Should Avoid with Cloud Data
3 Pitfalls Everyone Should Avoid with Cloud Data
 
Introduction to RAG (Retrieval Augmented Generation) and its application
Introduction to RAG (Retrieval Augmented Generation) and its applicationIntroduction to RAG (Retrieval Augmented Generation) and its application
Introduction to RAG (Retrieval Augmented Generation) and its application
 
UiPath Studio Web workshop series - Day 2
UiPath Studio Web workshop series - Day 2UiPath Studio Web workshop series - Day 2
UiPath Studio Web workshop series - Day 2
 
The Importance of Indoor Air Quality (English)
The Importance of Indoor Air Quality (English)The Importance of Indoor Air Quality (English)
The Importance of Indoor Air Quality (English)
 
Automation Ops Series: Session 2 - Governance for UiPath projects
Automation Ops Series: Session 2 - Governance for UiPath projectsAutomation Ops Series: Session 2 - Governance for UiPath projects
Automation Ops Series: Session 2 - Governance for UiPath projects
 
TrustArc Webinar - How to Live in a Post Third-Party Cookie World
TrustArc Webinar - How to Live in a Post Third-Party Cookie WorldTrustArc Webinar - How to Live in a Post Third-Party Cookie World
TrustArc Webinar - How to Live in a Post Third-Party Cookie World
 
From the origin to the future of Open Source model and business
From the origin to the future of  Open Source model and businessFrom the origin to the future of  Open Source model and business
From the origin to the future of Open Source model and business
 

Introduction to Accessibility Best Practices

Notas del editor

  1. We use more and more digital devicesNo more just desktop PCs – now mobile phones, tables, consoles, tvs
  2. More digital devices are connected to the Internet
  3. Devices are now all accessing the web
  4. Core technologies of the webDevices using these across the board
  5. Accessibility is implemented at the hardware and software level
  6. Even with accessibility implemented in hardware and software, the website has to be accessible
  7. 1. EquitableBe welcoming, don't discriminate and engage with people. Create different user experiences and make certain they have equally valuable outcomes. Aesthetics matter.2. FlexibleProvide options. Think who, how, why, what, where and when people will be using your website. Make sure there is choice for diverse users and maintain device independence.3. StraightforwardBe obvious and not ambiguous. Make sure your website's features add value, not complexity. Remember, good design is as little design as possible.4. PerceptibleDon't assume anything. Make sure your website's purpose is clear, its content, structure and sequence are meaningful and convey information to all of the senses.5. InformativeMake sure people know where they are on your website and provide ways for them to find what they're looking for. Be timely, predictable, uncomplicated and precise.6. PreventativeProvide easy to follow instructions and gently guide users in interacting with your website. Help them to minimise errors when submitting data, through well considered form design.7. TolerantHandle errors respectfully and indicate precisely what the error is, where it is and how to fix it. Remember to let people know the outcome.8. EffortlessDon't make demands or place restrictions on your users. People should not have to work or think hard to find what they want on your website. Ensure it can be used efficiently and effectively.9. AccommodatingBe approachable, uncluttered and give people room to manoeuvre. Make sure that your website is unobtrusive and can be accessed by different devices of all shapes and sizes.10. ConsistentFollow standards, guidelines, conventions and best practices. Provide a familiar environment with memorable functionality.
  8. HTML layer most importantSource order = tab orderUse the best matching HTML elementIs the page understandable without CSSInteraction using links, forms and reloads
  9. CSS can be inaccessibledisplay:none, visibility:hidden (hide from everyone):hover only works for mouse:focus to rescueAlways use :hover and :focus combinedCSS is for design not interaction
  10. Javascript is icing on the cakeDoes anything you need the user to do work without javascript?Hijack existing elementsCreate buttons for JS only interactionsScreen readers know JavaScript, they often just don’t know what happensFocus() to the rescueMind the tab orderTabindex=0 makes even divs keyboard accessibleTabindex=-1 js only tab accessAjax = delays = tricky to communicateInform about what happens
  11. Different CSS if JavaScript is availableChange the interface for the JS versionCSS much faster than JavaScript
  12. WAI-ARIA maps existing and well known OS concepts to custom elements in the browserAdd semantics to non-semantic markupProvides instant updates and notificationsRolesLandmarksStates and PropertiesLive regions (informing about changes)Don’t rely on it
  13. Percievable – text alternatives, subtitles, transcriptsOperable – keyboard only, allow navigation with headings, anchors, voice recognitionUnderstandable – high colour contrast, san serif fonts, avoid flashy graphics, multiple visual cuesVisual – Valid HTML, standards