Loading presentation...

Present Remotely

Send the link below via email or IM


Present to your audience

Start remote presentation

  • Invited audience members will follow you as you navigate and present
  • People invited to a presentation do not need a Prezi account
  • This link expires 10 minutes after you close the presentation
  • A maximum of 30 users can follow your presentation
  • Learn more about this feature in our knowledge base article

Do you really want to delete this prezi?

Neither you, nor the coeditors you shared it with will be able to recover it again.



No description

Leonie Lindo

on 21 July 2014

Comments (0)

Please log in to add your comment.

Report abuse

Transcript of Accessibility

The 4 Principles
Accessibility Guidelines
Our sites provide people with information, support and a community.

The people that use our sites varies and we need to cater for those who have a range of impairments as they should be able to access the information on our sites like everyone else.

Principle 2
Principle 1
Principle 3
Perceivable - Information and user interface components must be presentable to users in ways they can perceive.
Text Alternatives: Provide text alternatives for any non-text content
e.g. images that convey content and is not decorative alt text should be provided . For decorative images alt text (alt="")

Images that represent infographics (charts, graphs etc...) - equivalent text alternatives should be provided in context on a separate (linked and/or referenced via longdesc) page
Form buttons have a descriptive value

Form inputs have associated text labels or, if labels cannot be used, a descriptive title attribute
Text Alternatives
<legend>Choose a shipping method:</legend>
<label for="address">Enter your address:</label><br />
<textarea id="address" name="addresstext"></textarea>
Time based Media
(Video and audio)
Provide descriptive text transcript and auditory clues
A text or audio description is provided for non-live, web-based video-only (e.g., video that has no audio track).
Synchronized captions for non-live and live multimedia that contains audio (audio-only broadcasts, web casts, video conferences, Flash animations, etc.)
Use semantic mark up
Semantic HTML is the use of HTML markup to reinforce the meaning, of the information in web pages rather than merely to define its presentation (aesthetics).
Headings <h1> to <h6> to be nested correctly in the content structure , Correct use of lists
<ul> unorder list,
<ol> ordered list , and
<dl> definition list
Use correctly emphasized or special text
<strong>, <b>, <em>, <i>, <code>, <abbr>, <blockquote>etc...
You should understand the purpose of the tag before using it
Tables are user for tabular data only
Use table headers, captions and summaries
Basically the table structure is not used for layout presentational purposes (the 90's are over)
Make it easier for users to see and hear content including separating foreground from background.
Color alone is not used to distinguish links from surrounding text unless the color contrast between the link and the surrounding text is at least 3:1 and an additional differentiation (e.g., it becomes underlined) is provided when the link is hovered over or receives focus.
Provide enough color contrast between text and its background so that it can be read by people with moderately low vision (who do not use contrast-enhancing assistive technology).
The page is readable and functional when the text size is doubled (this is not including page zoom)
Visual impairments
Tritanopia - very rare
Retinitis Pigmentosa
Color vision deficiencies
Degenerative eye disease
There are many more the few I have shown should illustrate the importance of providing text alternative for no-textural content
Operable - UI components and navigation must be operable.
Keyboard Accessible
Make all functionality available from a keyboard
N.B Page-specified shortcut keys and accesskeys (accesskey should typically be avoided) to not conflict with existing browser and screen reader shortcuts.
Ensure that content does not "trap" keyboard focus (tabbing) within subsections of content on a Web page.
i.e. tab through the site to see if the sequence of elements coming into focus is logical focus.
Enough Time
Provide users enough time to read and use content
Automatically moving, blinking, or scrolling content that lasts longer than 3 seconds can be paused, stopped, or hidden by the user.
e.g. Twitter feed auto scrolls but a pause and play button has been provided
Minimize the occurrence of content that requires timed interaction. This enables people with blindness, low vision, cognitive limitations, or motor impairments to interact with content.
Seizures - Photosensitivity
No page content flashes more than 3 times per second unless that flashing content is sufficiently small and the flashes are of low contrast and do not contain too much red. (See general flash and red flash thresholds)
Ideally we should not have any content that flashes more than 3 times per second
To not cause the user to have a seizure due to photosenstivity
Avoid distracting the user during their interaction with the page
Provide skip navigation: links to elements on the page and other pages
Provide ways to help users navigate, find content, and determine where they are
Page should have correct heading structure - this helps with screenreaders when summarizing the page via headings
There should always be a <h1> on the page giving a a descriptive and informative page title.
Ensure that when users encounter information in an order that is consistent with the meaning of the content and can be operated from the keyboard, also ensure current keyboard focus is visible.
Help users understand the purpose of each link so they can decide whether they want to follow the link.
Understandable - Information and the operation of user interface must be understandable.
The language of the page is identified using the HTML lang attribute
Words that may be ambiguous, unknown, or used in a very specific way are defined through adjacent text, a definition list, a glossary, or other suitable method.
Use abbreviation tag <abbr> and or link to a glossary when necessary
Consider: English is not the first language of a person that communicates using sign language, their reading levels may vary.
Make Web pages appear and operate in predictable ways
Ensure that functionality is predictable as visitors navigate their way through a document.

e.g. When a page element receives focus, it does not result in a substantial change to the page, the spawning of a pop-up window
Navigation links that are repeated on web pages do not change order when navigating through the site
Elements that have the same functionality across multiple web pages are consistently identified.
Input Assistance
Help users avoid and correct mistakes
Ensure that users are aware that an error has occurred and can determine what is wrong. The error message should be as specific as possible.
To help users avoid making mistakes when their input is required:
Provide sufficient labels, cues, and instructions for required interactive elements that are provided via instructions, examples, properly positioned form labels, and/or fieldsets/legends.
If an input error is detected, provide suggestions for fixing the input.
Provide instructions and cues in context to help in form completion and submission.
Principle 4: Robust
Content must be robust enough that it can be interpreted reliably by a wide variety of user agents, including assistive technologies.
Ensure that user agents, including assistive technologies, can accurately interpret and parse content.

i.e. significant HTML/XHTML validation/parsing errors are avoided. Check at http://validator.w3.org/
Ensure that Assistive Technologies (AT) can gather information about, activate (or set) and keep up to date on the status of user interface controls in the content.

i.e. Markup is used in a way that facilitates accessibility. This includes following the HTML/XHTML specifications and using forms, form labels, frame titles, etc. appropriately.
Accessible Rich Internet Applications Suite, defines a way to make Web content and Web applications more accessible to people with disabilities. It especially helps with dynamic content and advanced user interface controls developed with Ajax, HTML, JavaScript, and related technologies.
Some website functionality is not available to some users with disabilities particularly people who use screenreaders and people unable to use a mouse
ARIA Landmark roles
Provide the user with an intuitive navigation of the page and gives a better understanding of the layout in relation to it content
Also provides the user with a better understanding of the events that are happening on interaction with UI components and forms
How to use roles


<div id="header" role="banner"> <header role="banner">
<div id="nav" role="navigation"> <nav role="navigation">
<div id="main" role="main"> <main role="main">
<div id="footer" role="contentinfo"> <footer role="contentinfo">
div id="side-bar" role="complementary"> <aside role="complementary">
Tools to test accessibility
Web aim: http://wave.webaim.org/
Firefox extension : Accessibility Evaluation Toolbar https://addons.mozilla.org/en-US/firefox/addon/accessibility-evaluation-toolb/
You can paste/ type your page url into the input field and web aim will run a test and then produced a report. It will tag icons next to selectors indicating the test status (error, warning etc...)
Or you can download the Firefox extension https://addons.mozilla.org/En-us/firefox/addon/wave-toolbar/
The WAVE will be added to you toolbar providing you with clicking on the different options you tage is instantly tested
Accessibility Evaluation Toolbar
WCAG Colour contrast checker
Web Content Accessibility Guild lines 2.0 (WCAG 2.0) Checklist
The documentation for WCAG 2.0 is extensive, so they have kindly provided us with a list of checkpoints to make sure our hard work is going to meet W3C's accessibility standards.
Role list
Page example: http://www.html5accessibility.com/tests/roles-land.html
How ARIA landmark roles help screen reader users
The see the list of roles and the purpose of there use please visit http://blog.paciellogroup.com/2013/02/using-wai-aria-landmarks-2013/
This site lists the roles and why and where you would use them.
Each Role can be clicked on and will go to a detailed description f the role and its purpose in http://www.w3.org/TR/wai-aria/roles
Useful tool: http://juicystudio.com/services/luminositycontrastratio.php
Useful tool: http://snook.ca/technical/colour_contrast/colour.html
For more video similar to this visit
Example: aria-live="polite"
Dynamic content changes without page reload - the screenreader will update the user on the content on the page
How ARIA Live attribute helps screen reader user
Full transcript