SlideShare a Scribd company logo
1 of 24
AccessibilityAccessibility
 TheThe Web Content Accessibility Guidelines (WCAG)Web Content Accessibility Guidelines (WCAG) provide anprovide an
international set of guidelines. They are developed by the Worldwideinternational set of guidelines. They are developed by the Worldwide
Web Consortium (W3C), the governing body of the web. TheseWeb Consortium (W3C), the governing body of the web. These
guidelines are the basis of most web accessibility law in the world.guidelines are the basis of most web accessibility law in the world.
Version 2.0 of these guidelines, published in December 2008, are basedVersion 2.0 of these guidelines, published in December 2008, are based
on four principles:on four principles:
 PerceivablePerceivable: Available to the senses (vision and hearing primarily): Available to the senses (vision and hearing primarily)
either through the browser or through assistive technologies (e.g.either through the browser or through assistive technologies (e.g.
screen readers, screen enlargers, etc.)screen readers, screen enlargers, etc.)
 OperableOperable: Users can interact with all controls and interactive elements: Users can interact with all controls and interactive elements
using either the mouse, keyboard, or an assistive device.using either the mouse, keyboard, or an assistive device.
 UnderstandableUnderstandable: Content is clear and limits confusion and ambiguity.: Content is clear and limits confusion and ambiguity.
 RobustRobust: A wide range of technologies (including old and new user: A wide range of technologies (including old and new user
agents and assistive technologies) can access the content.agents and assistive technologies) can access the content.
AccessibilityAccessibility
 Screen readers are audio interfaces. Rather than displaying web contentScreen readers are audio interfaces. Rather than displaying web content
visually for users in a "window" or screen on the monitor, screenvisually for users in a "window" or screen on the monitor, screen
readers convert text into synthesized speech so that users can listen toreaders convert text into synthesized speech so that users can listen to
the content.the content.
 https://www.youtube.com/watch?v=o_mvO6EQ0tMhttps://www.youtube.com/watch?v=o_mvO6EQ0tM
 https://www.youtube.com/watch?v=IK97XMibEwshttps://www.youtube.com/watch?v=IK97XMibEws
AccessibilityAccessibility
 Interaction design:Interaction design:
 Design convention such as underlined linksDesign convention such as underlined links
should be followedshould be followed
 Scrolling and other mouse activities are aScrolling and other mouse activities are a
learned behaviour and becomes more difficultlearned behaviour and becomes more difficult
with age making pull-down menus, scrollingwith age making pull-down menus, scrolling
lists, and scrolling pages difficult for some userslists, and scrolling pages difficult for some users
 Understanding, and accessing, what is clickableUnderstanding, and accessing, what is clickable
can be problematic for some elderly userscan be problematic for some elderly users
 Feedback in multiple modes (visual andFeedback in multiple modes (visual and
auditory) may be beneficialauditory) may be beneficial
AccessibilityAccessibility
 Information architecture:Information architecture:
 Clear labeling (of links, headings and menuClear labeling (of links, headings and menu
items) seems to be more important for olderitems) seems to be more important for older
users than younger usersusers than younger users
 Breadth vs. depth - shallow informationBreadth vs. depth - shallow information
hierarchies seemed to work better for older usershierarchies seemed to work better for older users
 Redundant links – the studies they reviewedRedundant links – the studies they reviewed
leant both waysleant both ways
AccessibilityAccessibility
 Visual design:Visual design:
 Experienced older users can scan pages as well asExperienced older users can scan pages as well as
younger users, but newer elderly users can find busyyounger users, but newer elderly users can find busy
pages and pages with irrelevant material (such aspages and pages with irrelevant material (such as
adverts) distractingadverts) distracting
 Older users generally prefer larger text – naturallyOlder users generally prefer larger text – naturally
http://www.cnib.cahttp://www.cnib.ca
 Older adults with vision deficits need to beOlder adults with vision deficits need to be
accommodated with suitable contrast along withaccommodated with suitable contrast along with
headings to help them narrow their visual searchheadings to help them narrow their visual search
AccessibilityAccessibility
 Information design:Information design:
 Skimming and scanning is common across allSkimming and scanning is common across all
age groups and vision abilitiesage groups and vision abilities
 Content development, plain language andContent development, plain language and
‘writing for the web’ are critical‘writing for the web’ are critical
AccessibilityAccessibility
1. Choose a content management system that supports accessibility.1. Choose a content management system that supports accessibility.
 There are many content management systems available to help you build yourThere are many content management systems available to help you build your
website. Common examples include Drupal and Wordpress, but there arewebsite. Common examples include Drupal and Wordpress, but there are
many other options available.many other options available.
 Once you've chosen a CMS that suits your needs, make sure to choose aOnce you've chosen a CMS that suits your needs, make sure to choose a
theme/template that is accessible. Consult the theme's documentation fortheme/template that is accessible. Consult the theme's documentation for
notes on accessibility and tips for creating accessible content and layouts fornotes on accessibility and tips for creating accessible content and layouts for
that theme. Be sure to follow the same guidelines when selecting modules,that theme. Be sure to follow the same guidelines when selecting modules,
plugins, or widgets. http://chronicle.com/blogs/profhacker/accessibility-plugins, or widgets. http://chronicle.com/blogs/profhacker/accessibility-
ready-wordpress-themes/55683ready-wordpress-themes/55683
 For elements like editing toolbars and video players, make sure that theyFor elements like editing toolbars and video players, make sure that they
support creating accessible content. For example, editing toolbars shouldsupport creating accessible content. For example, editing toolbars should
include options for headings and accessible tables, and video players shouldinclude options for headings and accessible tables, and video players should
include closed captioning. The CMS administration options (such as creatinginclude closed captioning. The CMS administration options (such as creating
a blog post or posting a comment) should be accessible as well.a blog post or posting a comment) should be accessible as well.
AccessibilityAccessibility
2. Use headings correctly to organize the structure of your content.2. Use headings correctly to organize the structure of your content.
 Screen reader users can use heading structure to navigate content. By usingScreen reader users can use heading structure to navigate content. By using
headings (<h1>, <h2>, etc.) correctly and strategically, the content of yourheadings (<h1>, <h2>, etc.) correctly and strategically, the content of your
website will be well-organized and easily interpreted by screen readers.website will be well-organized and easily interpreted by screen readers.
 Be sure to adhere to the correct order of headings, and separate presentationBe sure to adhere to the correct order of headings, and separate presentation
from structure by using CSS (Cascading Style Sheets). Do not pick a header justfrom structure by using CSS (Cascading Style Sheets). Do not pick a header just
because it looks good visually (which can confuse screen reader users); instead,because it looks good visually (which can confuse screen reader users); instead,
create a new CSS class to style your text.create a new CSS class to style your text.
Examples of proper use of headings:Examples of proper use of headings:
 Use <h1> for the primary title of the page. Avoid using an <h1> for anythingUse <h1> for the primary title of the page. Avoid using an <h1> for anything
other than the title of the website and the title of individual pages.other than the title of the website and the title of individual pages.
 Use headings to indicate and organize your content structure.Use headings to indicate and organize your content structure.
 Do not skip heading levels (e.g., go from an <h1> to an <h3>), as screen readerDo not skip heading levels (e.g., go from an <h1> to an <h3>), as screen reader
users will wonder if content is missing.users will wonder if content is missing.
AccessibilityAccessibility
3. Include proper alt text for images. www.sfoautisme.ca3. Include proper alt text for images. www.sfoautisme.ca
 Alt text should be provided for images, so that screen reader users canAlt text should be provided for images, so that screen reader users can
understand the message conveyed by the use of images on the page.understand the message conveyed by the use of images on the page.
This is especially important for informative images (such asThis is especially important for informative images (such as
infographics). When creating the alt text, the text should contain theinfographics). When creating the alt text, the text should contain the
message you wish to convey through that image, and if the imagemessage you wish to convey through that image, and if the image
includes text, that text should also be included in the alt.includes text, that text should also be included in the alt.
 The exception to this rule is when an image is used purely forThe exception to this rule is when an image is used purely for
decoration; in this case, the alt text can be left empty so that the screendecoration; in this case, the alt text can be left empty so that the screen
reader user is not distracted from the more important content on thereader user is not distracted from the more important content on the
page.page.
 If an image is the only content of a link, the screen reader will read theIf an image is the only content of a link, the screen reader will read the
file name if alt text is not provided. Always provide alt text for imagesfile name if alt text is not provided. Always provide alt text for images
that are used as links.that are used as links.
AccessibilityAccessibility
4. Give your links unique and descriptive names.4. Give your links unique and descriptive names.
 When including links in your content, use text that properly describesWhen including links in your content, use text that properly describes
where the link will go. Using "click here" is not considered descriptive,where the link will go. Using "click here" is not considered descriptive,
and is ineffective for a screen reader user.and is ineffective for a screen reader user.
 Just like sighted users scan the page for linked text, visually-impairedJust like sighted users scan the page for linked text, visually-impaired
users can use their screen readers to scan for links. As a result, screenusers can use their screen readers to scan for links. As a result, screen
reader users often do not read the link within the context of the rest ofreader users often do not read the link within the context of the rest of
the page. Using descriptive text properly explains the context of linksthe page. Using descriptive text properly explains the context of links
to the screen reader user.to the screen reader user.
 The most unique content of the link should be presented first, as screenThe most unique content of the link should be presented first, as screen
reader users will often navigate the links list by searching via the firstreader users will often navigate the links list by searching via the first
letter.letter.
 For example, if you are pointing visitors to a page called "About Us":For example, if you are pointing visitors to a page called "About Us":
 Try not to say: "Try not to say: "Click hereClick here to read about our company."to read about our company."
 Instead, say: "To learn more about our company, readInstead, say: "To learn more about our company, read About UsAbout Us."."
AccessibilityAccessibility
5. Use color with care.5. Use color with care.
 The most common form of color deficiency, red-green color deficiency,The most common form of color deficiency, red-green color deficiency,
affects approximately 8% of the population. Using ONLY colors suchaffects approximately 8% of the population. Using ONLY colors such
as these (especially to indicate required fields in a form) will preventas these (especially to indicate required fields in a form) will prevent
these individuals from understanding your message.these individuals from understanding your message.
 Other groups of people with disabilities, particularly users with learningOther groups of people with disabilities, particularly users with learning
disabilities, benefit greatly from color when used to distinguish anddisabilities, benefit greatly from color when used to distinguish and
organize your content.organize your content.
 To satisfy both groups, use color, but also be sure to use other visualTo satisfy both groups, use color, but also be sure to use other visual
indicators, such as an asterisk or question mark. Be sure to alsoindicators, such as an asterisk or question mark. Be sure to also
distinguish blocks of content from one another using visual separationdistinguish blocks of content from one another using visual separation
(such as whitespace or borders).(such as whitespace or borders).
 There are severalThere are several tools you can use to evaluate color contrasttools you can use to evaluate color contrast, which, which
will assist you in making your page as visually usable as possible towill assist you in making your page as visually usable as possible to
individuals with low vision or varying levels of color blindness.individuals with low vision or varying levels of color blindness.
AccessibilityAccessibility
5. Use color with care.5. Use color with care.
 The most common form of color deficiency, red-green color deficiency,The most common form of color deficiency, red-green color deficiency,
affects approximately 8% of the population. Using ONLY colors suchaffects approximately 8% of the population. Using ONLY colors such
as these (especially to indicate required fields in a form) will preventas these (especially to indicate required fields in a form) will prevent
these individuals from understanding your message.these individuals from understanding your message.
 Other groups of people with disabilities, particularly users with learningOther groups of people with disabilities, particularly users with learning
disabilities, benefit greatly from color when used to distinguish anddisabilities, benefit greatly from color when used to distinguish and
organize your content.organize your content.
 To satisfy both groups, use color, but also be sure to use other visualTo satisfy both groups, use color, but also be sure to use other visual
indicators, such as an asterisk or question mark. Be sure to alsoindicators, such as an asterisk or question mark. Be sure to also
distinguish blocks of content from one another using visual separationdistinguish blocks of content from one another using visual separation
(such as whitespace or borders).(such as whitespace or borders).
 There are severalThere are several tools you can use to evaluate color contrasttools you can use to evaluate color contrast, which, which
will assist you in making your page as visually usable as possible towill assist you in making your page as visually usable as possible to
individuals with low vision or varying levels of color blindness.individuals with low vision or varying levels of color blindness.
AccessibilityAccessibility
 6. Design your forms for accessibility.6. Design your forms for accessibility.
 When form fields are not labeled appropriately, the screen reader user does not have the same cues available as theWhen form fields are not labeled appropriately, the screen reader user does not have the same cues available as the
sighted user. It may be impossible to tell what type of content should be entered into a form field.sighted user. It may be impossible to tell what type of content should be entered into a form field.
 Each field in your form should have a well-positioned, descriptive label. For example, if the field is for a person's name,Each field in your form should have a well-positioned, descriptive label. For example, if the field is for a person's name,
it should be labeled appropriately as either "Full Name" or have two separate fields labeled as "First Name" and "Lastit should be labeled appropriately as either "Full Name" or have two separate fields labeled as "First Name" and "Last
Name." Use the <label> tag or an ARIA property (see tip #9) to associate the label text with the form field.Name." Use the <label> tag or an ARIA property (see tip #9) to associate the label text with the form field.
 As you are going through a form field, a person should be able to tab through the form and fill out all the fields beforeAs you are going through a form field, a person should be able to tab through the form and fill out all the fields before
getting to the "Submit" button, or they may not even realize that additional fields exist. Essentially, the tab ordergetting to the "Submit" button, or they may not even realize that additional fields exist. Essentially, the tab order
should follow the visual order.should follow the visual order.
 If you have fields that are related or similar, consider grouping them together using fieldsets. For example, fields likeIf you have fields that are related or similar, consider grouping them together using fieldsets. For example, fields like
"Full Name" and "Date of Birth" could be grouped together as "Personal Information." This type of form"Full Name" and "Date of Birth" could be grouped together as "Personal Information." This type of form
organization can help a screen reader user keep track of progress, and can provide the context that might be lost whileorganization can help a screen reader user keep track of progress, and can provide the context that might be lost while
filling out the form.filling out the form.
 If certain form fields are required, the field should be labeled accordingly, and configured to alert the screen readerIf certain form fields are required, the field should be labeled accordingly, and configured to alert the screen reader
user. Commonly, required fields are noted as such with an asterisk, which will not be spoken by some screen readers.user. Commonly, required fields are noted as such with an asterisk, which will not be spoken by some screen readers.
Asterisks (or similar visual indications) should still be used for sighted users, people with learning disabilities or peopleAsterisks (or similar visual indications) should still be used for sighted users, people with learning disabilities or people
who speak English as a second language. Indicating that a field is required to a screen reader can be accomplished bywho speak English as a second language. Indicating that a field is required to a screen reader can be accomplished by
adding ARIA required="true" and ARIA required="false" for optional fields. After submitting the form, user will needadding ARIA required="true" and ARIA required="false" for optional fields. After submitting the form, user will need
to be alerted to submission confirmation and any submission errors. We recommend including any error counts in theto be alerted to submission confirmation and any submission errors. We recommend including any error counts in the
page title (after the user has submitted), so the user will immediately be informed that there are errors on the page. If apage title (after the user has submitted), so the user will immediately be informed that there are errors on the page. If a
user submits a form with errors, the user should be brought to a submission page that indicates what the errors are, anduser submits a form with errors, the user should be brought to a submission page that indicates what the errors are, and
provides an easy way to navigate to those errors.provides an easy way to navigate to those errors.
 Finally, the use of CAPTCHA is inaccessible and should not be used to validate submissions.Finally, the use of CAPTCHA is inaccessible and should not be used to validate submissions. WebAIMWebAIM
has a helpful summary of accessible alternatives (link is external)has a helpful summary of accessible alternatives (link is external) to CAPTCHA to keep forms free of spamto CAPTCHA to keep forms free of spam
submissions.submissions.
AccessibilityAccessibility
6. Design your forms for accessibility.6. Design your forms for accessibility.
 When form fields are not labeled appropriately, the screen reader userWhen form fields are not labeled appropriately, the screen reader user
does not have the same cues available as the sighted user. It may bedoes not have the same cues available as the sighted user. It may be
impossible to tell what type of content should be entered into a formimpossible to tell what type of content should be entered into a form
field.field.
 Each field in your form should have a well-positioned, descriptive label.Each field in your form should have a well-positioned, descriptive label.
For example, if the field is for a person's name, it should be labeledFor example, if the field is for a person's name, it should be labeled
appropriately as either "Full Name" or have two separate fields labeledappropriately as either "Full Name" or have two separate fields labeled
as "First Name" and "Last Name."as "First Name" and "Last Name."
 As you are going through a form field, a person should be able to tabAs you are going through a form field, a person should be able to tab
through the form and fill out all the fields before getting to thethrough the form and fill out all the fields before getting to the
"Submit" button, the tab order should follow the visual order."Submit" button, the tab order should follow the visual order.
 If form fields are required, it should be labeled accordingly. AsterisksIf form fields are required, it should be labeled accordingly. Asterisks
will not be spoken by some screen readers. Asterisks should still bewill not be spoken by some screen readers. Asterisks should still be
used for sighted users. Indicating that a field is required to a screenused for sighted users. Indicating that a field is required to a screen
reader is essential. If a user submits a form with errors, the user shouldreader is essential. If a user submits a form with errors, the user should
be brought to a submission page that indicates what the errors are, andbe brought to a submission page that indicates what the errors are, and
provides an easy way to navigate to those errors.provides an easy way to navigate to those errors.
 Finally, the use of CAPTCHA is inaccessible and should not be used toFinally, the use of CAPTCHA is inaccessible and should not be used to
validate submissions.validate submissions. WebAIMWebAIM
has a helpful summary of accessible alternatives (link is external)has a helpful summary of accessible alternatives (link is external) toto
CAPTCHA to keep forms free of spam submissions.CAPTCHA to keep forms free of spam submissions.
AccessibilityAccessibility
7. Use tables for tabular data, not for layout.7. Use tables for tabular data, not for layout.
 Using tables for page layout adds additional verbosity to screen readerUsing tables for page layout adds additional verbosity to screen reader
users. Whenever a screen reader encounters a table, the user isusers. Whenever a screen reader encounters a table, the user is
informed that there is a table with "x" number of columns and rows,informed that there is a table with "x" number of columns and rows,
which distracts from the content. Also, the content may be read in anwhich distracts from the content. Also, the content may be read in an
order that does not match the visual order of the page. Do not createorder that does not match the visual order of the page. Do not create
the layout of a website using a table; instead, use CSS for presentation.the layout of a website using a table; instead, use CSS for presentation.
 When a data table is necessary (i.e. you have a set of data that is bestWhen a data table is necessary (i.e. you have a set of data that is best
interpreted in a table format, such as a bank statement), use headers forinterpreted in a table format, such as a bank statement), use headers for
rows and columns, which helps explain the relationships of cells.rows and columns, which helps explain the relationships of cells.
Complex tables may have several cells within the table that have aComplex tables may have several cells within the table that have a
unique relationship to each other, and these should be identified byunique relationship to each other, and these should be identified by
using the "scope" attribute in HTML. Table captions (HTML5) canusing the "scope" attribute in HTML. Table captions (HTML5) can
be used to give additional information to users about how best to readbe used to give additional information to users about how best to read
and understand the table relationships.and understand the table relationships.
AccessibilityAccessibility
8. Ensure that all content can be accessed with the keyboard alone in a logical way.8. Ensure that all content can be accessed with the keyboard alone in a logical way.
 Users with mobility disabilities, including repetitive stress injuries, may not beUsers with mobility disabilities, including repetitive stress injuries, may not be
able to use a mouse or trackpad. These people are able to access contentable to use a mouse or trackpad. These people are able to access content
through the use of a keyboard by pressing the "tab" or "arrow" keys, orthrough the use of a keyboard by pressing the "tab" or "arrow" keys, or
through the use of alternative input devices such as single-switch input orthrough the use of alternative input devices such as single-switch input or
mouth stick. As a result, the tab order should match the visual order, somouth stick. As a result, the tab order should match the visual order, so
keyboard-only users are able to logically navigate through site content.keyboard-only users are able to logically navigate through site content.
 Long pages with lots of content should be broken up with anchor links (jumpLong pages with lots of content should be broken up with anchor links (jump
listslists http://webaim.org/techniques/screenreader/#linearizationhttp://webaim.org/techniques/screenreader/#linearization ), allowing), allowing
keyboard-only users to skip to relevant portions of the page without having tokeyboard-only users to skip to relevant portions of the page without having to
negotiate through other content. "Skip to main content" should be provided atnegotiate through other content. "Skip to main content" should be provided at
the top of each page, so keyboard-only users won't have to tab through thethe top of each page, so keyboard-only users won't have to tab through the
page navigation in order to get the main content.page navigation in order to get the main content.
 For pages with local menus and multiple levels and sub-items, the menusFor pages with local menus and multiple levels and sub-items, the menus
should be configured so that all menu items can be accessed with the keyboard.should be configured so that all menu items can be accessed with the keyboard.
Do not use elements that only activate when a user hovers over items with aDo not use elements that only activate when a user hovers over items with a
mouse, as keyboard-only or screen readers users will not be able to activatemouse, as keyboard-only or screen readers users will not be able to activate
them.them.
 Form exampleForm example
https://www.zoho.com/creator/online-form-builder/gallery.htmlhttps://www.zoho.com/creator/online-form-builder/gallery.html
AccessibilityAccessibility
9. Use ARIA roles and landmarks.9. Use ARIA roles and landmarks.
 ARIA (Accessible Rich Internet Applications) is an easy and powerful technicalARIA (Accessible Rich Internet Applications) is an easy and powerful technical
specification for ensuring your site structure is accessible. By assigning ARIAspecification for ensuring your site structure is accessible. By assigning ARIA
roles and landmarks to web elements, you enhance the ability of screen readerroles and landmarks to web elements, you enhance the ability of screen reader
users to navigate and interact with your content. ARIA roles and landmarks canusers to navigate and interact with your content. ARIA roles and landmarks can
be easily added to your HTML, in the same way that you add classes to HTMLbe easily added to your HTML, in the same way that you add classes to HTML
in order to load attributes from CSS.in order to load attributes from CSS.
 Examples of common ARIA usage include:Examples of common ARIA usage include:
 Roles of "navigation" and "menu": Used to identify the site's primaryRoles of "navigation" and "menu": Used to identify the site's primary
navigation and individual page menus.navigation and individual page menus.
 Landmarks of "banner" and "main content": Used to identify the header andLandmarks of "banner" and "main content": Used to identify the header and
main content sections of a webpage.main content sections of a webpage.
 Alerts of "live" and "atomic": Used to help screen reader users with dynamicAlerts of "live" and "atomic": Used to help screen reader users with dynamic
page changes, such as stock tickers and search filters.page changes, such as stock tickers and search filters.
 Forms: ARIA allows the addition of descriptive text to a form field ("describedForms: ARIA allows the addition of descriptive text to a form field ("described
by" or "labeled by") and the identification of buttons and required controlsby" or "labeled by") and the identification of buttons and required controls
(more information under tip #6).(more information under tip #6).
AccessibilityAccessibility
AccessibilityAccessibility
AccessibilityAccessibility
10. Make dynamic content accessible.10. Make dynamic content accessible.
 When content updates dynamically (i.e. without a page refresh), screenWhen content updates dynamically (i.e. without a page refresh), screen
readers may not be aware. This includes screen overlays, lightboxes, in-readers may not be aware. This includes screen overlays, lightboxes, in-
page updates, popups, and modal dialogs. Keyboard-only users may bepage updates, popups, and modal dialogs. Keyboard-only users may be
trapped in page overlays. Magnification software users might betrapped in page overlays. Magnification software users might be
zoomed in on the wrong section of the page.zoomed in on the wrong section of the page.
 These functions can easily be made accessible. Options include ARIAThese functions can easily be made accessible. Options include ARIA
roles and alerts, as well as front-end development frameworks thatroles and alerts, as well as front-end development frameworks that
specifically support accessibility.specifically support accessibility.
 Ensure that video players do not auto-play (non-consensual sound),Ensure that video players do not auto-play (non-consensual sound),
and that the players can be used with a keyboard. Additionally, alland that the players can be used with a keyboard. Additionally, all
videos must have options for closed captioning and transcripts for thevideos must have options for closed captioning and transcripts for the
hearing-impaired.hearing-impaired.
 If your site contains a slideshow, make sure that each photo has alt textIf your site contains a slideshow, make sure that each photo has alt text
and can be navigated via the keyboard. If you are using any uniqueand can be navigated via the keyboard. If you are using any unique
widgets (such as a calendar picker or drag-and-drops), be sure to testwidgets (such as a calendar picker or drag-and-drops), be sure to test
for accessibility.for accessibility.
Key Tips for Making Your WebsiteKey Tips for Making Your Website
Senior FriendlySenior Friendly
 Break information into short sections.Break information into short sections.
 Give instructions clearly and number each step.Give instructions clearly and number each step.
 Minimize the use of jargon and technical terms.Minimize the use of jargon and technical terms.
 Use single mouse clicks.Use single mouse clicks.
 Allow additional space around clickable targets.Allow additional space around clickable targets.
 Use 12- or 14-point type size, and make it easy for users to enlarge text.Use 12- or 14-point type size, and make it easy for users to enlarge text.
 Use high-contrast color combinations, such as black type against aUse high-contrast color combinations, such as black type against a
white background.white background.
 Provide a speech function to hear text read aloud.Provide a speech function to hear text read aloud.
 Provide text-only versions of multimedia content.Provide text-only versions of multimedia content.
 Minimize scrolling.Minimize scrolling.
 Choose a search engine that uses keywords and doesn't require specialChoose a search engine that uses keywords and doesn't require special
characters or knowledge of Boolean terms.characters or knowledge of Boolean terms.
 VisitVisit www.NIHSeniorHealth.govwww.NIHSeniorHealth.gov for an example of a website thatfor an example of a website that
incorporates these senior-friendly guidelines.incorporates these senior-friendly guidelines.
sourcessources
 http://webaccess.berkeley.edu/resources/tips/http://webaccess.berkeley.edu/resources/tips/
 http://www.webcredible.com/blog-reports/webhttp://www.webcredible.com/blog-reports/web
BADBAD
 http://majors.uat.edu/Game-Production/http://majors.uat.edu/Game-Production/
 http://www.alfredsung.com/eyewear/eyewear3http://www.alfredsung.com/eyewear/eyewear3
GOODGOOD
 http://community.sitepoint.com/t/list-of-http://community.sitepoint.com/t/list-of-
best-accessible-websites/1838best-accessible-websites/1838
 www.NIHSeniorHealth.govwww.NIHSeniorHealth.gov

More Related Content

Viewers also liked

Identity screenplay
Identity screenplayIdentity screenplay
Identity screenplaylivgascoine
 
Media pitch- Film Noir film Identity
Media pitch- Film Noir film IdentityMedia pitch- Film Noir film Identity
Media pitch- Film Noir film Identitylivgascoine
 
Amended Script- Allure Animations
Amended Script- Allure AnimationsAmended Script- Allure Animations
Amended Script- Allure Animationslivgascoine
 
The process of making my film review for web based media
The process of making my film review for web based mediaThe process of making my film review for web based media
The process of making my film review for web based medialivgascoine
 
Media evalutation scriptg
Media evalutation scriptgMedia evalutation scriptg
Media evalutation scriptglivgascoine
 
Programme specifique en français/ anglais/espagnol Nuit des Musées 2014
Programme specifique en français/ anglais/espagnol Nuit des Musées 2014Programme specifique en français/ anglais/espagnol Nuit des Musées 2014
Programme specifique en français/ anglais/espagnol Nuit des Musées 2014Bâle Région Mag
 
Script for recording video analysing Detour
Script for recording video analysing DetourScript for recording video analysing Detour
Script for recording video analysing Detourlivgascoine
 
Invitation Atelier mode et cultures
Invitation Atelier mode et culturesInvitation Atelier mode et cultures
Invitation Atelier mode et culturesBâle Région Mag
 
Janvier 2016 programme culturel Saint-Louis
Janvier 2016 programme culturel Saint-LouisJanvier 2016 programme culturel Saint-Louis
Janvier 2016 programme culturel Saint-LouisBâle Région Mag
 
Concert pour les victimes des inondations en serbie
Concert pour les victimes des inondations en serbieConcert pour les victimes des inondations en serbie
Concert pour les victimes des inondations en serbieBâle Région Mag
 
Andalousie février 2016 Association de l'Art à l'Oeuvre
Andalousie  février 2016 Association de l'Art à l'OeuvreAndalousie  février 2016 Association de l'Art à l'Oeuvre
Andalousie février 2016 Association de l'Art à l'OeuvreBâle Région Mag
 
Théâtre de Bâle Janvier 2016
Théâtre de Bâle Janvier 2016Théâtre de Bâle Janvier 2016
Théâtre de Bâle Janvier 2016Bâle Région Mag
 
Théâtre de Bâle decembre 2015
Théâtre de Bâle decembre 2015 Théâtre de Bâle decembre 2015
Théâtre de Bâle decembre 2015 Bâle Région Mag
 
Programme de la Nuit des Musées 2014
Programme de la Nuit des Musées 2014Programme de la Nuit des Musées 2014
Programme de la Nuit des Musées 2014Bâle Région Mag
 
Restauration de la Fondation Vasarely Projet patrimonial
Restauration de la Fondation Vasarely Projet patrimonialRestauration de la Fondation Vasarely Projet patrimonial
Restauration de la Fondation Vasarely Projet patrimonialBâle Région Mag
 
Radiohead 'in rainbow' marketing strategy
Radiohead 'in rainbow' marketing strategyRadiohead 'in rainbow' marketing strategy
Radiohead 'in rainbow' marketing strategynsharif125
 

Viewers also liked (18)

Identity screenplay
Identity screenplayIdentity screenplay
Identity screenplay
 
Script amended
Script amendedScript amended
Script amended
 
Media pitch- Film Noir film Identity
Media pitch- Film Noir film IdentityMedia pitch- Film Noir film Identity
Media pitch- Film Noir film Identity
 
Amended Script- Allure Animations
Amended Script- Allure AnimationsAmended Script- Allure Animations
Amended Script- Allure Animations
 
The process of making my film review for web based media
The process of making my film review for web based mediaThe process of making my film review for web based media
The process of making my film review for web based media
 
Media evalutation scriptg
Media evalutation scriptgMedia evalutation scriptg
Media evalutation scriptg
 
Programme specifique en français/ anglais/espagnol Nuit des Musées 2014
Programme specifique en français/ anglais/espagnol Nuit des Musées 2014Programme specifique en français/ anglais/espagnol Nuit des Musées 2014
Programme specifique en français/ anglais/espagnol Nuit des Musées 2014
 
Script for recording video analysing Detour
Script for recording video analysing DetourScript for recording video analysing Detour
Script for recording video analysing Detour
 
Invitation Atelier mode et cultures
Invitation Atelier mode et culturesInvitation Atelier mode et cultures
Invitation Atelier mode et cultures
 
Janvier 2016 programme culturel Saint-Louis
Janvier 2016 programme culturel Saint-LouisJanvier 2016 programme culturel Saint-Louis
Janvier 2016 programme culturel Saint-Louis
 
Concert pour les victimes des inondations en serbie
Concert pour les victimes des inondations en serbieConcert pour les victimes des inondations en serbie
Concert pour les victimes des inondations en serbie
 
Andalousie février 2016 Association de l'Art à l'Oeuvre
Andalousie  février 2016 Association de l'Art à l'OeuvreAndalousie  février 2016 Association de l'Art à l'Oeuvre
Andalousie février 2016 Association de l'Art à l'Oeuvre
 
Théâtre de Bâle Janvier 2016
Théâtre de Bâle Janvier 2016Théâtre de Bâle Janvier 2016
Théâtre de Bâle Janvier 2016
 
Théâtre de Bâle decembre 2015
Théâtre de Bâle decembre 2015 Théâtre de Bâle decembre 2015
Théâtre de Bâle decembre 2015
 
Programme de la Nuit des Musées 2014
Programme de la Nuit des Musées 2014Programme de la Nuit des Musées 2014
Programme de la Nuit des Musées 2014
 
Restauration de la Fondation Vasarely Projet patrimonial
Restauration de la Fondation Vasarely Projet patrimonialRestauration de la Fondation Vasarely Projet patrimonial
Restauration de la Fondation Vasarely Projet patrimonial
 
Radiohead 'in rainbow' marketing strategy
Radiohead 'in rainbow' marketing strategyRadiohead 'in rainbow' marketing strategy
Radiohead 'in rainbow' marketing strategy
 
Question 1
Question 1Question 1
Question 1
 

Similar to Making your website accessible

Plan For Accessibility - TODCon 2008
Plan For Accessibility - TODCon 2008Plan For Accessibility - TODCon 2008
Plan For Accessibility - TODCon 2008Denise Jacobs
 
Responsive Web Designed for your communication and marketing needs
Responsive Web Designed for your communication and marketing needsResponsive Web Designed for your communication and marketing needs
Responsive Web Designed for your communication and marketing needsSEGIC
 
Responsive Process HOW Interactive
Responsive Process HOW InteractiveResponsive Process HOW Interactive
Responsive Process HOW InteractiveSteve Fisher
 
How to Project-Manage and Implement a Responsive Website
How to Project-Manage and Implement a Responsive WebsiteHow to Project-Manage and Implement a Responsive Website
How to Project-Manage and Implement a Responsive WebsiteJj Jurgens
 
Accessibility And 508 Compliance In 2009
Accessibility And 508 Compliance In 2009Accessibility And 508 Compliance In 2009
Accessibility And 508 Compliance In 2009Emagination ®
 
GDI Seattle Intermediate HTML and CSS Class 1
GDI Seattle Intermediate HTML and CSS Class 1GDI Seattle Intermediate HTML and CSS Class 1
GDI Seattle Intermediate HTML and CSS Class 1Heather Rock
 
Mastering WCAG: Essential Compliance Tips
Mastering WCAG: Essential Compliance TipsMastering WCAG: Essential Compliance Tips
Mastering WCAG: Essential Compliance TipsInclusivea11y
 
How to create accessible websites - WordCamp New York
How to create accessible websites - WordCamp New YorkHow to create accessible websites - WordCamp New York
How to create accessible websites - WordCamp New YorkRachel Cherry
 
A Half Day Workshop on Building Accessible Websites For People With Disabilities
A Half Day Workshop on Building Accessible Websites For People With DisabilitiesA Half Day Workshop on Building Accessible Websites For People With Disabilities
A Half Day Workshop on Building Accessible Websites For People With DisabilitiesAayush Shrestha
 
Wordcamp buffalo
Wordcamp buffaloWordcamp buffalo
Wordcamp buffalothegeniusca
 
How accessibility improves SEO.pptx
How accessibility improves SEO.pptxHow accessibility improves SEO.pptx
How accessibility improves SEO.pptxAbilityNet
 
Indictrans technologies CMS presentation
Indictrans technologies CMS presentationIndictrans technologies CMS presentation
Indictrans technologies CMS presentationKanhaiya Kale
 
corePHP Usability Accessibility by Steven Pignataro
corePHP Usability Accessibility by Steven PignatarocorePHP Usability Accessibility by Steven Pignataro
corePHP Usability Accessibility by Steven PignataroJohn Coonen
 
UX-Driven & Inclusive Data Visualizations
UX-Driven & Inclusive Data VisualizationsUX-Driven & Inclusive Data Visualizations
UX-Driven & Inclusive Data VisualizationsMichelle Michael
 

Similar to Making your website accessible (20)

Plan For Accessibility - TODCon 2008
Plan For Accessibility - TODCon 2008Plan For Accessibility - TODCon 2008
Plan For Accessibility - TODCon 2008
 
EVOLVE'16 | Maximize | Libby Schaper & Gina Petrucceli | Web Accessibility & AEM
EVOLVE'16 | Maximize | Libby Schaper & Gina Petrucceli | Web Accessibility & AEMEVOLVE'16 | Maximize | Libby Schaper & Gina Petrucceli | Web Accessibility & AEM
EVOLVE'16 | Maximize | Libby Schaper & Gina Petrucceli | Web Accessibility & AEM
 
EVOLVE'16 | Maximize | Gina Petruccelli & Libby Schaper | Web Accessibility &...
EVOLVE'16 | Maximize | Gina Petruccelli & Libby Schaper | Web Accessibility &...EVOLVE'16 | Maximize | Gina Petruccelli & Libby Schaper | Web Accessibility &...
EVOLVE'16 | Maximize | Gina Petruccelli & Libby Schaper | Web Accessibility &...
 
Responsive Web Designed for your communication and marketing needs
Responsive Web Designed for your communication and marketing needsResponsive Web Designed for your communication and marketing needs
Responsive Web Designed for your communication and marketing needs
 
Responsive Process HOW Interactive
Responsive Process HOW InteractiveResponsive Process HOW Interactive
Responsive Process HOW Interactive
 
How to Project-Manage and Implement a Responsive Website
How to Project-Manage and Implement a Responsive WebsiteHow to Project-Manage and Implement a Responsive Website
How to Project-Manage and Implement a Responsive Website
 
Accessibility And 508 Compliance In 2009
Accessibility And 508 Compliance In 2009Accessibility And 508 Compliance In 2009
Accessibility And 508 Compliance In 2009
 
Aside, within HTML5 + CSS
Aside, within HTML5 + CSSAside, within HTML5 + CSS
Aside, within HTML5 + CSS
 
GDI Seattle Intermediate HTML and CSS Class 1
GDI Seattle Intermediate HTML and CSS Class 1GDI Seattle Intermediate HTML and CSS Class 1
GDI Seattle Intermediate HTML and CSS Class 1
 
Mastering WCAG: Essential Compliance Tips
Mastering WCAG: Essential Compliance TipsMastering WCAG: Essential Compliance Tips
Mastering WCAG: Essential Compliance Tips
 
How to create accessible websites - WordCamp New York
How to create accessible websites - WordCamp New YorkHow to create accessible websites - WordCamp New York
How to create accessible websites - WordCamp New York
 
A Half Day Workshop on Building Accessible Websites For People With Disabilities
A Half Day Workshop on Building Accessible Websites For People With DisabilitiesA Half Day Workshop on Building Accessible Websites For People With Disabilities
A Half Day Workshop on Building Accessible Websites For People With Disabilities
 
Wordcamp buffalo
Wordcamp buffaloWordcamp buffalo
Wordcamp buffalo
 
How accessibility improves SEO.pptx
How accessibility improves SEO.pptxHow accessibility improves SEO.pptx
How accessibility improves SEO.pptx
 
Lit 20170306
Lit 20170306Lit 20170306
Lit 20170306
 
Indictrans technologies CMS presentation
Indictrans technologies CMS presentationIndictrans technologies CMS presentation
Indictrans technologies CMS presentation
 
Web Accessibility
Web AccessibilityWeb Accessibility
Web Accessibility
 
corePHP Usability Accessibility by Steven Pignataro
corePHP Usability Accessibility by Steven PignatarocorePHP Usability Accessibility by Steven Pignataro
corePHP Usability Accessibility by Steven Pignataro
 
Html5
Html5Html5
Html5
 
UX-Driven & Inclusive Data Visualizations
UX-Driven & Inclusive Data VisualizationsUX-Driven & Inclusive Data Visualizations
UX-Driven & Inclusive Data Visualizations
 

More from Bernard Charlebois (20)

Customer retention
Customer retentionCustomer retention
Customer retention
 
Chesterville sept 2018
Chesterville sept 2018Chesterville sept 2018
Chesterville sept 2018
 
Entrepreneurship highs and lows
Entrepreneurship highs and lowsEntrepreneurship highs and lows
Entrepreneurship highs and lows
 
Work life harmony
Work life harmonyWork life harmony
Work life harmony
 
Lead generation
Lead generationLead generation
Lead generation
 
Value proposition
Value propositionValue proposition
Value proposition
 
Marketing and advertising
Marketing and advertisingMarketing and advertising
Marketing and advertising
 
Consumer behaviour decision process
Consumer behaviour decision processConsumer behaviour decision process
Consumer behaviour decision process
 
Confidence in media
Confidence in mediaConfidence in media
Confidence in media
 
Starter company Renfrew County
Starter company Renfrew CountyStarter company Renfrew County
Starter company Renfrew County
 
Chesterville seo
Chesterville seoChesterville seo
Chesterville seo
 
Chesterville SEO
Chesterville SEOChesterville SEO
Chesterville SEO
 
Search Engine Optimization (SEO)
Search Engine Optimization (SEO)Search Engine Optimization (SEO)
Search Engine Optimization (SEO)
 
Online advertising and marketing
Online advertising and marketingOnline advertising and marketing
Online advertising and marketing
 
Présentation gestionnaire médias sociaux
Présentation gestionnaire médias sociauxPrésentation gestionnaire médias sociaux
Présentation gestionnaire médias sociaux
 
2Phase3 Seminar oct 2013
2Phase3 Seminar oct 20132Phase3 Seminar oct 2013
2Phase3 Seminar oct 2013
 
Google analytics
Google analyticsGoogle analytics
Google analytics
 
Webinaire medias sociaux 15janv2014
Webinaire medias sociaux 15janv2014Webinaire medias sociaux 15janv2014
Webinaire medias sociaux 15janv2014
 
Online advertising and marketing
Online advertising and marketingOnline advertising and marketing
Online advertising and marketing
 
Médias sociaux
Médias sociauxMédias sociaux
Médias sociaux
 

Recently uploaded

VIP Call Girls Kolkata Ananya 🤌 8250192130 🚀 Vip Call Girls Kolkata
VIP Call Girls Kolkata Ananya 🤌  8250192130 🚀 Vip Call Girls KolkataVIP Call Girls Kolkata Ananya 🤌  8250192130 🚀 Vip Call Girls Kolkata
VIP Call Girls Kolkata Ananya 🤌 8250192130 🚀 Vip Call Girls Kolkataanamikaraghav4
 
Call Girls South Delhi Delhi reach out to us at ☎ 9711199012
Call Girls South Delhi Delhi reach out to us at ☎ 9711199012Call Girls South Delhi Delhi reach out to us at ☎ 9711199012
Call Girls South Delhi Delhi reach out to us at ☎ 9711199012rehmti665
 
AlbaniaDreamin24 - How to easily use an API with Flows
AlbaniaDreamin24 - How to easily use an API with FlowsAlbaniaDreamin24 - How to easily use an API with Flows
AlbaniaDreamin24 - How to easily use an API with FlowsThierry TROUIN ☁
 
Packaging the Monolith - PHP Tek 2024 (Breaking it down one bite at a time)
Packaging the Monolith - PHP Tek 2024 (Breaking it down one bite at a time)Packaging the Monolith - PHP Tek 2024 (Breaking it down one bite at a time)
Packaging the Monolith - PHP Tek 2024 (Breaking it down one bite at a time)Dana Luther
 
VIP Kolkata Call Girl Alambazar 👉 8250192130 Available With Room
VIP Kolkata Call Girl Alambazar 👉 8250192130  Available With RoomVIP Kolkata Call Girl Alambazar 👉 8250192130  Available With Room
VIP Kolkata Call Girl Alambazar 👉 8250192130 Available With Roomdivyansh0kumar0
 
Contact Rya Baby for Call Girls New Delhi
Contact Rya Baby for Call Girls New DelhiContact Rya Baby for Call Girls New Delhi
Contact Rya Baby for Call Girls New Delhimiss dipika
 
定制(AUT毕业证书)新西兰奥克兰理工大学毕业证成绩单原版一比一
定制(AUT毕业证书)新西兰奥克兰理工大学毕业证成绩单原版一比一定制(AUT毕业证书)新西兰奥克兰理工大学毕业证成绩单原版一比一
定制(AUT毕业证书)新西兰奥克兰理工大学毕业证成绩单原版一比一Fs
 
The Intriguing World of CDR Analysis by Police: What You Need to Know.pdf
The Intriguing World of CDR Analysis by Police: What You Need to Know.pdfThe Intriguing World of CDR Analysis by Police: What You Need to Know.pdf
The Intriguing World of CDR Analysis by Police: What You Need to Know.pdfMilind Agarwal
 
VIP Kolkata Call Girl Kestopur 👉 8250192130 Available With Room
VIP Kolkata Call Girl Kestopur 👉 8250192130  Available With RoomVIP Kolkata Call Girl Kestopur 👉 8250192130  Available With Room
VIP Kolkata Call Girl Kestopur 👉 8250192130 Available With Roomdivyansh0kumar0
 
Denver Web Design brochure for public viewing
Denver Web Design brochure for public viewingDenver Web Design brochure for public viewing
Denver Web Design brochure for public viewingbigorange77
 
定制(Management毕业证书)新加坡管理大学毕业证成绩单原版一比一
定制(Management毕业证书)新加坡管理大学毕业证成绩单原版一比一定制(Management毕业证书)新加坡管理大学毕业证成绩单原版一比一
定制(Management毕业证书)新加坡管理大学毕业证成绩单原版一比一Fs
 
Call Girls In Mumbai Central Mumbai ❤️ 9920874524 👈 Cash on Delivery
Call Girls In Mumbai Central Mumbai ❤️ 9920874524 👈 Cash on DeliveryCall Girls In Mumbai Central Mumbai ❤️ 9920874524 👈 Cash on Delivery
Call Girls In Mumbai Central Mumbai ❤️ 9920874524 👈 Cash on Deliverybabeytanya
 
VIP Kolkata Call Girl Dum Dum 👉 8250192130 Available With Room
VIP Kolkata Call Girl Dum Dum 👉 8250192130  Available With RoomVIP Kolkata Call Girl Dum Dum 👉 8250192130  Available With Room
VIP Kolkata Call Girl Dum Dum 👉 8250192130 Available With Roomdivyansh0kumar0
 
Chennai Call Girls Alwarpet Phone 🍆 8250192130 👅 celebrity escorts service
Chennai Call Girls Alwarpet Phone 🍆 8250192130 👅 celebrity escorts serviceChennai Call Girls Alwarpet Phone 🍆 8250192130 👅 celebrity escorts service
Chennai Call Girls Alwarpet Phone 🍆 8250192130 👅 celebrity escorts servicevipmodelshub1
 
Russian Call Girls in Kolkata Ishita 🤌 8250192130 🚀 Vip Call Girls Kolkata
Russian Call Girls in Kolkata Ishita 🤌  8250192130 🚀 Vip Call Girls KolkataRussian Call Girls in Kolkata Ishita 🤌  8250192130 🚀 Vip Call Girls Kolkata
Russian Call Girls in Kolkata Ishita 🤌 8250192130 🚀 Vip Call Girls Kolkataanamikaraghav4
 
Call Girls in Uttam Nagar Delhi 💯Call Us 🔝8264348440🔝
Call Girls in Uttam Nagar Delhi 💯Call Us 🔝8264348440🔝Call Girls in Uttam Nagar Delhi 💯Call Us 🔝8264348440🔝
Call Girls in Uttam Nagar Delhi 💯Call Us 🔝8264348440🔝soniya singh
 
定制(UAL学位证)英国伦敦艺术大学毕业证成绩单原版一比一
定制(UAL学位证)英国伦敦艺术大学毕业证成绩单原版一比一定制(UAL学位证)英国伦敦艺术大学毕业证成绩单原版一比一
定制(UAL学位证)英国伦敦艺术大学毕业证成绩单原版一比一Fs
 

Recently uploaded (20)

VIP Call Girls Kolkata Ananya 🤌 8250192130 🚀 Vip Call Girls Kolkata
VIP Call Girls Kolkata Ananya 🤌  8250192130 🚀 Vip Call Girls KolkataVIP Call Girls Kolkata Ananya 🤌  8250192130 🚀 Vip Call Girls Kolkata
VIP Call Girls Kolkata Ananya 🤌 8250192130 🚀 Vip Call Girls Kolkata
 
Call Girls South Delhi Delhi reach out to us at ☎ 9711199012
Call Girls South Delhi Delhi reach out to us at ☎ 9711199012Call Girls South Delhi Delhi reach out to us at ☎ 9711199012
Call Girls South Delhi Delhi reach out to us at ☎ 9711199012
 
young call girls in Uttam Nagar🔝 9953056974 🔝 Delhi escort Service
young call girls in Uttam Nagar🔝 9953056974 🔝 Delhi escort Serviceyoung call girls in Uttam Nagar🔝 9953056974 🔝 Delhi escort Service
young call girls in Uttam Nagar🔝 9953056974 🔝 Delhi escort Service
 
AlbaniaDreamin24 - How to easily use an API with Flows
AlbaniaDreamin24 - How to easily use an API with FlowsAlbaniaDreamin24 - How to easily use an API with Flows
AlbaniaDreamin24 - How to easily use an API with Flows
 
Packaging the Monolith - PHP Tek 2024 (Breaking it down one bite at a time)
Packaging the Monolith - PHP Tek 2024 (Breaking it down one bite at a time)Packaging the Monolith - PHP Tek 2024 (Breaking it down one bite at a time)
Packaging the Monolith - PHP Tek 2024 (Breaking it down one bite at a time)
 
VIP Kolkata Call Girl Alambazar 👉 8250192130 Available With Room
VIP Kolkata Call Girl Alambazar 👉 8250192130  Available With RoomVIP Kolkata Call Girl Alambazar 👉 8250192130  Available With Room
VIP Kolkata Call Girl Alambazar 👉 8250192130 Available With Room
 
Contact Rya Baby for Call Girls New Delhi
Contact Rya Baby for Call Girls New DelhiContact Rya Baby for Call Girls New Delhi
Contact Rya Baby for Call Girls New Delhi
 
定制(AUT毕业证书)新西兰奥克兰理工大学毕业证成绩单原版一比一
定制(AUT毕业证书)新西兰奥克兰理工大学毕业证成绩单原版一比一定制(AUT毕业证书)新西兰奥克兰理工大学毕业证成绩单原版一比一
定制(AUT毕业证书)新西兰奥克兰理工大学毕业证成绩单原版一比一
 
The Intriguing World of CDR Analysis by Police: What You Need to Know.pdf
The Intriguing World of CDR Analysis by Police: What You Need to Know.pdfThe Intriguing World of CDR Analysis by Police: What You Need to Know.pdf
The Intriguing World of CDR Analysis by Police: What You Need to Know.pdf
 
Model Call Girl in Jamuna Vihar Delhi reach out to us at 🔝9953056974🔝
Model Call Girl in  Jamuna Vihar Delhi reach out to us at 🔝9953056974🔝Model Call Girl in  Jamuna Vihar Delhi reach out to us at 🔝9953056974🔝
Model Call Girl in Jamuna Vihar Delhi reach out to us at 🔝9953056974🔝
 
VIP Kolkata Call Girl Kestopur 👉 8250192130 Available With Room
VIP Kolkata Call Girl Kestopur 👉 8250192130  Available With RoomVIP Kolkata Call Girl Kestopur 👉 8250192130  Available With Room
VIP Kolkata Call Girl Kestopur 👉 8250192130 Available With Room
 
Hot Sexy call girls in Rk Puram 🔝 9953056974 🔝 Delhi escort Service
Hot Sexy call girls in  Rk Puram 🔝 9953056974 🔝 Delhi escort ServiceHot Sexy call girls in  Rk Puram 🔝 9953056974 🔝 Delhi escort Service
Hot Sexy call girls in Rk Puram 🔝 9953056974 🔝 Delhi escort Service
 
Denver Web Design brochure for public viewing
Denver Web Design brochure for public viewingDenver Web Design brochure for public viewing
Denver Web Design brochure for public viewing
 
定制(Management毕业证书)新加坡管理大学毕业证成绩单原版一比一
定制(Management毕业证书)新加坡管理大学毕业证成绩单原版一比一定制(Management毕业证书)新加坡管理大学毕业证成绩单原版一比一
定制(Management毕业证书)新加坡管理大学毕业证成绩单原版一比一
 
Call Girls In Mumbai Central Mumbai ❤️ 9920874524 👈 Cash on Delivery
Call Girls In Mumbai Central Mumbai ❤️ 9920874524 👈 Cash on DeliveryCall Girls In Mumbai Central Mumbai ❤️ 9920874524 👈 Cash on Delivery
Call Girls In Mumbai Central Mumbai ❤️ 9920874524 👈 Cash on Delivery
 
VIP Kolkata Call Girl Dum Dum 👉 8250192130 Available With Room
VIP Kolkata Call Girl Dum Dum 👉 8250192130  Available With RoomVIP Kolkata Call Girl Dum Dum 👉 8250192130  Available With Room
VIP Kolkata Call Girl Dum Dum 👉 8250192130 Available With Room
 
Chennai Call Girls Alwarpet Phone 🍆 8250192130 👅 celebrity escorts service
Chennai Call Girls Alwarpet Phone 🍆 8250192130 👅 celebrity escorts serviceChennai Call Girls Alwarpet Phone 🍆 8250192130 👅 celebrity escorts service
Chennai Call Girls Alwarpet Phone 🍆 8250192130 👅 celebrity escorts service
 
Russian Call Girls in Kolkata Ishita 🤌 8250192130 🚀 Vip Call Girls Kolkata
Russian Call Girls in Kolkata Ishita 🤌  8250192130 🚀 Vip Call Girls KolkataRussian Call Girls in Kolkata Ishita 🤌  8250192130 🚀 Vip Call Girls Kolkata
Russian Call Girls in Kolkata Ishita 🤌 8250192130 🚀 Vip Call Girls Kolkata
 
Call Girls in Uttam Nagar Delhi 💯Call Us 🔝8264348440🔝
Call Girls in Uttam Nagar Delhi 💯Call Us 🔝8264348440🔝Call Girls in Uttam Nagar Delhi 💯Call Us 🔝8264348440🔝
Call Girls in Uttam Nagar Delhi 💯Call Us 🔝8264348440🔝
 
定制(UAL学位证)英国伦敦艺术大学毕业证成绩单原版一比一
定制(UAL学位证)英国伦敦艺术大学毕业证成绩单原版一比一定制(UAL学位证)英国伦敦艺术大学毕业证成绩单原版一比一
定制(UAL学位证)英国伦敦艺术大学毕业证成绩单原版一比一
 

Making your website accessible

  • 1. AccessibilityAccessibility  TheThe Web Content Accessibility Guidelines (WCAG)Web Content Accessibility Guidelines (WCAG) provide anprovide an international set of guidelines. They are developed by the Worldwideinternational set of guidelines. They are developed by the Worldwide Web Consortium (W3C), the governing body of the web. TheseWeb Consortium (W3C), the governing body of the web. These guidelines are the basis of most web accessibility law in the world.guidelines are the basis of most web accessibility law in the world. Version 2.0 of these guidelines, published in December 2008, are basedVersion 2.0 of these guidelines, published in December 2008, are based on four principles:on four principles:  PerceivablePerceivable: Available to the senses (vision and hearing primarily): Available to the senses (vision and hearing primarily) either through the browser or through assistive technologies (e.g.either through the browser or through assistive technologies (e.g. screen readers, screen enlargers, etc.)screen readers, screen enlargers, etc.)  OperableOperable: Users can interact with all controls and interactive elements: Users can interact with all controls and interactive elements using either the mouse, keyboard, or an assistive device.using either the mouse, keyboard, or an assistive device.  UnderstandableUnderstandable: Content is clear and limits confusion and ambiguity.: Content is clear and limits confusion and ambiguity.  RobustRobust: A wide range of technologies (including old and new user: A wide range of technologies (including old and new user agents and assistive technologies) can access the content.agents and assistive technologies) can access the content.
  • 2. AccessibilityAccessibility  Screen readers are audio interfaces. Rather than displaying web contentScreen readers are audio interfaces. Rather than displaying web content visually for users in a "window" or screen on the monitor, screenvisually for users in a "window" or screen on the monitor, screen readers convert text into synthesized speech so that users can listen toreaders convert text into synthesized speech so that users can listen to the content.the content.  https://www.youtube.com/watch?v=o_mvO6EQ0tMhttps://www.youtube.com/watch?v=o_mvO6EQ0tM  https://www.youtube.com/watch?v=IK97XMibEwshttps://www.youtube.com/watch?v=IK97XMibEws
  • 3. AccessibilityAccessibility  Interaction design:Interaction design:  Design convention such as underlined linksDesign convention such as underlined links should be followedshould be followed  Scrolling and other mouse activities are aScrolling and other mouse activities are a learned behaviour and becomes more difficultlearned behaviour and becomes more difficult with age making pull-down menus, scrollingwith age making pull-down menus, scrolling lists, and scrolling pages difficult for some userslists, and scrolling pages difficult for some users  Understanding, and accessing, what is clickableUnderstanding, and accessing, what is clickable can be problematic for some elderly userscan be problematic for some elderly users  Feedback in multiple modes (visual andFeedback in multiple modes (visual and auditory) may be beneficialauditory) may be beneficial
  • 4. AccessibilityAccessibility  Information architecture:Information architecture:  Clear labeling (of links, headings and menuClear labeling (of links, headings and menu items) seems to be more important for olderitems) seems to be more important for older users than younger usersusers than younger users  Breadth vs. depth - shallow informationBreadth vs. depth - shallow information hierarchies seemed to work better for older usershierarchies seemed to work better for older users  Redundant links – the studies they reviewedRedundant links – the studies they reviewed leant both waysleant both ways
  • 5. AccessibilityAccessibility  Visual design:Visual design:  Experienced older users can scan pages as well asExperienced older users can scan pages as well as younger users, but newer elderly users can find busyyounger users, but newer elderly users can find busy pages and pages with irrelevant material (such aspages and pages with irrelevant material (such as adverts) distractingadverts) distracting  Older users generally prefer larger text – naturallyOlder users generally prefer larger text – naturally http://www.cnib.cahttp://www.cnib.ca  Older adults with vision deficits need to beOlder adults with vision deficits need to be accommodated with suitable contrast along withaccommodated with suitable contrast along with headings to help them narrow their visual searchheadings to help them narrow their visual search
  • 6. AccessibilityAccessibility  Information design:Information design:  Skimming and scanning is common across allSkimming and scanning is common across all age groups and vision abilitiesage groups and vision abilities  Content development, plain language andContent development, plain language and ‘writing for the web’ are critical‘writing for the web’ are critical
  • 7. AccessibilityAccessibility 1. Choose a content management system that supports accessibility.1. Choose a content management system that supports accessibility.  There are many content management systems available to help you build yourThere are many content management systems available to help you build your website. Common examples include Drupal and Wordpress, but there arewebsite. Common examples include Drupal and Wordpress, but there are many other options available.many other options available.  Once you've chosen a CMS that suits your needs, make sure to choose aOnce you've chosen a CMS that suits your needs, make sure to choose a theme/template that is accessible. Consult the theme's documentation fortheme/template that is accessible. Consult the theme's documentation for notes on accessibility and tips for creating accessible content and layouts fornotes on accessibility and tips for creating accessible content and layouts for that theme. Be sure to follow the same guidelines when selecting modules,that theme. Be sure to follow the same guidelines when selecting modules, plugins, or widgets. http://chronicle.com/blogs/profhacker/accessibility-plugins, or widgets. http://chronicle.com/blogs/profhacker/accessibility- ready-wordpress-themes/55683ready-wordpress-themes/55683  For elements like editing toolbars and video players, make sure that theyFor elements like editing toolbars and video players, make sure that they support creating accessible content. For example, editing toolbars shouldsupport creating accessible content. For example, editing toolbars should include options for headings and accessible tables, and video players shouldinclude options for headings and accessible tables, and video players should include closed captioning. The CMS administration options (such as creatinginclude closed captioning. The CMS administration options (such as creating a blog post or posting a comment) should be accessible as well.a blog post or posting a comment) should be accessible as well.
  • 8. AccessibilityAccessibility 2. Use headings correctly to organize the structure of your content.2. Use headings correctly to organize the structure of your content.  Screen reader users can use heading structure to navigate content. By usingScreen reader users can use heading structure to navigate content. By using headings (<h1>, <h2>, etc.) correctly and strategically, the content of yourheadings (<h1>, <h2>, etc.) correctly and strategically, the content of your website will be well-organized and easily interpreted by screen readers.website will be well-organized and easily interpreted by screen readers.  Be sure to adhere to the correct order of headings, and separate presentationBe sure to adhere to the correct order of headings, and separate presentation from structure by using CSS (Cascading Style Sheets). Do not pick a header justfrom structure by using CSS (Cascading Style Sheets). Do not pick a header just because it looks good visually (which can confuse screen reader users); instead,because it looks good visually (which can confuse screen reader users); instead, create a new CSS class to style your text.create a new CSS class to style your text. Examples of proper use of headings:Examples of proper use of headings:  Use <h1> for the primary title of the page. Avoid using an <h1> for anythingUse <h1> for the primary title of the page. Avoid using an <h1> for anything other than the title of the website and the title of individual pages.other than the title of the website and the title of individual pages.  Use headings to indicate and organize your content structure.Use headings to indicate and organize your content structure.  Do not skip heading levels (e.g., go from an <h1> to an <h3>), as screen readerDo not skip heading levels (e.g., go from an <h1> to an <h3>), as screen reader users will wonder if content is missing.users will wonder if content is missing.
  • 9. AccessibilityAccessibility 3. Include proper alt text for images. www.sfoautisme.ca3. Include proper alt text for images. www.sfoautisme.ca  Alt text should be provided for images, so that screen reader users canAlt text should be provided for images, so that screen reader users can understand the message conveyed by the use of images on the page.understand the message conveyed by the use of images on the page. This is especially important for informative images (such asThis is especially important for informative images (such as infographics). When creating the alt text, the text should contain theinfographics). When creating the alt text, the text should contain the message you wish to convey through that image, and if the imagemessage you wish to convey through that image, and if the image includes text, that text should also be included in the alt.includes text, that text should also be included in the alt.  The exception to this rule is when an image is used purely forThe exception to this rule is when an image is used purely for decoration; in this case, the alt text can be left empty so that the screendecoration; in this case, the alt text can be left empty so that the screen reader user is not distracted from the more important content on thereader user is not distracted from the more important content on the page.page.  If an image is the only content of a link, the screen reader will read theIf an image is the only content of a link, the screen reader will read the file name if alt text is not provided. Always provide alt text for imagesfile name if alt text is not provided. Always provide alt text for images that are used as links.that are used as links.
  • 10. AccessibilityAccessibility 4. Give your links unique and descriptive names.4. Give your links unique and descriptive names.  When including links in your content, use text that properly describesWhen including links in your content, use text that properly describes where the link will go. Using "click here" is not considered descriptive,where the link will go. Using "click here" is not considered descriptive, and is ineffective for a screen reader user.and is ineffective for a screen reader user.  Just like sighted users scan the page for linked text, visually-impairedJust like sighted users scan the page for linked text, visually-impaired users can use their screen readers to scan for links. As a result, screenusers can use their screen readers to scan for links. As a result, screen reader users often do not read the link within the context of the rest ofreader users often do not read the link within the context of the rest of the page. Using descriptive text properly explains the context of linksthe page. Using descriptive text properly explains the context of links to the screen reader user.to the screen reader user.  The most unique content of the link should be presented first, as screenThe most unique content of the link should be presented first, as screen reader users will often navigate the links list by searching via the firstreader users will often navigate the links list by searching via the first letter.letter.  For example, if you are pointing visitors to a page called "About Us":For example, if you are pointing visitors to a page called "About Us":  Try not to say: "Try not to say: "Click hereClick here to read about our company."to read about our company."  Instead, say: "To learn more about our company, readInstead, say: "To learn more about our company, read About UsAbout Us."."
  • 11. AccessibilityAccessibility 5. Use color with care.5. Use color with care.  The most common form of color deficiency, red-green color deficiency,The most common form of color deficiency, red-green color deficiency, affects approximately 8% of the population. Using ONLY colors suchaffects approximately 8% of the population. Using ONLY colors such as these (especially to indicate required fields in a form) will preventas these (especially to indicate required fields in a form) will prevent these individuals from understanding your message.these individuals from understanding your message.  Other groups of people with disabilities, particularly users with learningOther groups of people with disabilities, particularly users with learning disabilities, benefit greatly from color when used to distinguish anddisabilities, benefit greatly from color when used to distinguish and organize your content.organize your content.  To satisfy both groups, use color, but also be sure to use other visualTo satisfy both groups, use color, but also be sure to use other visual indicators, such as an asterisk or question mark. Be sure to alsoindicators, such as an asterisk or question mark. Be sure to also distinguish blocks of content from one another using visual separationdistinguish blocks of content from one another using visual separation (such as whitespace or borders).(such as whitespace or borders).  There are severalThere are several tools you can use to evaluate color contrasttools you can use to evaluate color contrast, which, which will assist you in making your page as visually usable as possible towill assist you in making your page as visually usable as possible to individuals with low vision or varying levels of color blindness.individuals with low vision or varying levels of color blindness.
  • 12. AccessibilityAccessibility 5. Use color with care.5. Use color with care.  The most common form of color deficiency, red-green color deficiency,The most common form of color deficiency, red-green color deficiency, affects approximately 8% of the population. Using ONLY colors suchaffects approximately 8% of the population. Using ONLY colors such as these (especially to indicate required fields in a form) will preventas these (especially to indicate required fields in a form) will prevent these individuals from understanding your message.these individuals from understanding your message.  Other groups of people with disabilities, particularly users with learningOther groups of people with disabilities, particularly users with learning disabilities, benefit greatly from color when used to distinguish anddisabilities, benefit greatly from color when used to distinguish and organize your content.organize your content.  To satisfy both groups, use color, but also be sure to use other visualTo satisfy both groups, use color, but also be sure to use other visual indicators, such as an asterisk or question mark. Be sure to alsoindicators, such as an asterisk or question mark. Be sure to also distinguish blocks of content from one another using visual separationdistinguish blocks of content from one another using visual separation (such as whitespace or borders).(such as whitespace or borders).  There are severalThere are several tools you can use to evaluate color contrasttools you can use to evaluate color contrast, which, which will assist you in making your page as visually usable as possible towill assist you in making your page as visually usable as possible to individuals with low vision or varying levels of color blindness.individuals with low vision or varying levels of color blindness.
  • 13. AccessibilityAccessibility  6. Design your forms for accessibility.6. Design your forms for accessibility.  When form fields are not labeled appropriately, the screen reader user does not have the same cues available as theWhen form fields are not labeled appropriately, the screen reader user does not have the same cues available as the sighted user. It may be impossible to tell what type of content should be entered into a form field.sighted user. It may be impossible to tell what type of content should be entered into a form field.  Each field in your form should have a well-positioned, descriptive label. For example, if the field is for a person's name,Each field in your form should have a well-positioned, descriptive label. For example, if the field is for a person's name, it should be labeled appropriately as either "Full Name" or have two separate fields labeled as "First Name" and "Lastit should be labeled appropriately as either "Full Name" or have two separate fields labeled as "First Name" and "Last Name." Use the <label> tag or an ARIA property (see tip #9) to associate the label text with the form field.Name." Use the <label> tag or an ARIA property (see tip #9) to associate the label text with the form field.  As you are going through a form field, a person should be able to tab through the form and fill out all the fields beforeAs you are going through a form field, a person should be able to tab through the form and fill out all the fields before getting to the "Submit" button, or they may not even realize that additional fields exist. Essentially, the tab ordergetting to the "Submit" button, or they may not even realize that additional fields exist. Essentially, the tab order should follow the visual order.should follow the visual order.  If you have fields that are related or similar, consider grouping them together using fieldsets. For example, fields likeIf you have fields that are related or similar, consider grouping them together using fieldsets. For example, fields like "Full Name" and "Date of Birth" could be grouped together as "Personal Information." This type of form"Full Name" and "Date of Birth" could be grouped together as "Personal Information." This type of form organization can help a screen reader user keep track of progress, and can provide the context that might be lost whileorganization can help a screen reader user keep track of progress, and can provide the context that might be lost while filling out the form.filling out the form.  If certain form fields are required, the field should be labeled accordingly, and configured to alert the screen readerIf certain form fields are required, the field should be labeled accordingly, and configured to alert the screen reader user. Commonly, required fields are noted as such with an asterisk, which will not be spoken by some screen readers.user. Commonly, required fields are noted as such with an asterisk, which will not be spoken by some screen readers. Asterisks (or similar visual indications) should still be used for sighted users, people with learning disabilities or peopleAsterisks (or similar visual indications) should still be used for sighted users, people with learning disabilities or people who speak English as a second language. Indicating that a field is required to a screen reader can be accomplished bywho speak English as a second language. Indicating that a field is required to a screen reader can be accomplished by adding ARIA required="true" and ARIA required="false" for optional fields. After submitting the form, user will needadding ARIA required="true" and ARIA required="false" for optional fields. After submitting the form, user will need to be alerted to submission confirmation and any submission errors. We recommend including any error counts in theto be alerted to submission confirmation and any submission errors. We recommend including any error counts in the page title (after the user has submitted), so the user will immediately be informed that there are errors on the page. If apage title (after the user has submitted), so the user will immediately be informed that there are errors on the page. If a user submits a form with errors, the user should be brought to a submission page that indicates what the errors are, anduser submits a form with errors, the user should be brought to a submission page that indicates what the errors are, and provides an easy way to navigate to those errors.provides an easy way to navigate to those errors.  Finally, the use of CAPTCHA is inaccessible and should not be used to validate submissions.Finally, the use of CAPTCHA is inaccessible and should not be used to validate submissions. WebAIMWebAIM has a helpful summary of accessible alternatives (link is external)has a helpful summary of accessible alternatives (link is external) to CAPTCHA to keep forms free of spamto CAPTCHA to keep forms free of spam submissions.submissions.
  • 14. AccessibilityAccessibility 6. Design your forms for accessibility.6. Design your forms for accessibility.  When form fields are not labeled appropriately, the screen reader userWhen form fields are not labeled appropriately, the screen reader user does not have the same cues available as the sighted user. It may bedoes not have the same cues available as the sighted user. It may be impossible to tell what type of content should be entered into a formimpossible to tell what type of content should be entered into a form field.field.  Each field in your form should have a well-positioned, descriptive label.Each field in your form should have a well-positioned, descriptive label. For example, if the field is for a person's name, it should be labeledFor example, if the field is for a person's name, it should be labeled appropriately as either "Full Name" or have two separate fields labeledappropriately as either "Full Name" or have two separate fields labeled as "First Name" and "Last Name."as "First Name" and "Last Name."  As you are going through a form field, a person should be able to tabAs you are going through a form field, a person should be able to tab through the form and fill out all the fields before getting to thethrough the form and fill out all the fields before getting to the "Submit" button, the tab order should follow the visual order."Submit" button, the tab order should follow the visual order.  If form fields are required, it should be labeled accordingly. AsterisksIf form fields are required, it should be labeled accordingly. Asterisks will not be spoken by some screen readers. Asterisks should still bewill not be spoken by some screen readers. Asterisks should still be used for sighted users. Indicating that a field is required to a screenused for sighted users. Indicating that a field is required to a screen reader is essential. If a user submits a form with errors, the user shouldreader is essential. If a user submits a form with errors, the user should be brought to a submission page that indicates what the errors are, andbe brought to a submission page that indicates what the errors are, and provides an easy way to navigate to those errors.provides an easy way to navigate to those errors.  Finally, the use of CAPTCHA is inaccessible and should not be used toFinally, the use of CAPTCHA is inaccessible and should not be used to validate submissions.validate submissions. WebAIMWebAIM has a helpful summary of accessible alternatives (link is external)has a helpful summary of accessible alternatives (link is external) toto CAPTCHA to keep forms free of spam submissions.CAPTCHA to keep forms free of spam submissions.
  • 15. AccessibilityAccessibility 7. Use tables for tabular data, not for layout.7. Use tables for tabular data, not for layout.  Using tables for page layout adds additional verbosity to screen readerUsing tables for page layout adds additional verbosity to screen reader users. Whenever a screen reader encounters a table, the user isusers. Whenever a screen reader encounters a table, the user is informed that there is a table with "x" number of columns and rows,informed that there is a table with "x" number of columns and rows, which distracts from the content. Also, the content may be read in anwhich distracts from the content. Also, the content may be read in an order that does not match the visual order of the page. Do not createorder that does not match the visual order of the page. Do not create the layout of a website using a table; instead, use CSS for presentation.the layout of a website using a table; instead, use CSS for presentation.  When a data table is necessary (i.e. you have a set of data that is bestWhen a data table is necessary (i.e. you have a set of data that is best interpreted in a table format, such as a bank statement), use headers forinterpreted in a table format, such as a bank statement), use headers for rows and columns, which helps explain the relationships of cells.rows and columns, which helps explain the relationships of cells. Complex tables may have several cells within the table that have aComplex tables may have several cells within the table that have a unique relationship to each other, and these should be identified byunique relationship to each other, and these should be identified by using the "scope" attribute in HTML. Table captions (HTML5) canusing the "scope" attribute in HTML. Table captions (HTML5) can be used to give additional information to users about how best to readbe used to give additional information to users about how best to read and understand the table relationships.and understand the table relationships.
  • 16. AccessibilityAccessibility 8. Ensure that all content can be accessed with the keyboard alone in a logical way.8. Ensure that all content can be accessed with the keyboard alone in a logical way.  Users with mobility disabilities, including repetitive stress injuries, may not beUsers with mobility disabilities, including repetitive stress injuries, may not be able to use a mouse or trackpad. These people are able to access contentable to use a mouse or trackpad. These people are able to access content through the use of a keyboard by pressing the "tab" or "arrow" keys, orthrough the use of a keyboard by pressing the "tab" or "arrow" keys, or through the use of alternative input devices such as single-switch input orthrough the use of alternative input devices such as single-switch input or mouth stick. As a result, the tab order should match the visual order, somouth stick. As a result, the tab order should match the visual order, so keyboard-only users are able to logically navigate through site content.keyboard-only users are able to logically navigate through site content.  Long pages with lots of content should be broken up with anchor links (jumpLong pages with lots of content should be broken up with anchor links (jump listslists http://webaim.org/techniques/screenreader/#linearizationhttp://webaim.org/techniques/screenreader/#linearization ), allowing), allowing keyboard-only users to skip to relevant portions of the page without having tokeyboard-only users to skip to relevant portions of the page without having to negotiate through other content. "Skip to main content" should be provided atnegotiate through other content. "Skip to main content" should be provided at the top of each page, so keyboard-only users won't have to tab through thethe top of each page, so keyboard-only users won't have to tab through the page navigation in order to get the main content.page navigation in order to get the main content.  For pages with local menus and multiple levels and sub-items, the menusFor pages with local menus and multiple levels and sub-items, the menus should be configured so that all menu items can be accessed with the keyboard.should be configured so that all menu items can be accessed with the keyboard. Do not use elements that only activate when a user hovers over items with aDo not use elements that only activate when a user hovers over items with a mouse, as keyboard-only or screen readers users will not be able to activatemouse, as keyboard-only or screen readers users will not be able to activate them.them.  Form exampleForm example https://www.zoho.com/creator/online-form-builder/gallery.htmlhttps://www.zoho.com/creator/online-form-builder/gallery.html
  • 17. AccessibilityAccessibility 9. Use ARIA roles and landmarks.9. Use ARIA roles and landmarks.  ARIA (Accessible Rich Internet Applications) is an easy and powerful technicalARIA (Accessible Rich Internet Applications) is an easy and powerful technical specification for ensuring your site structure is accessible. By assigning ARIAspecification for ensuring your site structure is accessible. By assigning ARIA roles and landmarks to web elements, you enhance the ability of screen readerroles and landmarks to web elements, you enhance the ability of screen reader users to navigate and interact with your content. ARIA roles and landmarks canusers to navigate and interact with your content. ARIA roles and landmarks can be easily added to your HTML, in the same way that you add classes to HTMLbe easily added to your HTML, in the same way that you add classes to HTML in order to load attributes from CSS.in order to load attributes from CSS.  Examples of common ARIA usage include:Examples of common ARIA usage include:  Roles of "navigation" and "menu": Used to identify the site's primaryRoles of "navigation" and "menu": Used to identify the site's primary navigation and individual page menus.navigation and individual page menus.  Landmarks of "banner" and "main content": Used to identify the header andLandmarks of "banner" and "main content": Used to identify the header and main content sections of a webpage.main content sections of a webpage.  Alerts of "live" and "atomic": Used to help screen reader users with dynamicAlerts of "live" and "atomic": Used to help screen reader users with dynamic page changes, such as stock tickers and search filters.page changes, such as stock tickers and search filters.  Forms: ARIA allows the addition of descriptive text to a form field ("describedForms: ARIA allows the addition of descriptive text to a form field ("described by" or "labeled by") and the identification of buttons and required controlsby" or "labeled by") and the identification of buttons and required controls (more information under tip #6).(more information under tip #6).
  • 20. AccessibilityAccessibility 10. Make dynamic content accessible.10. Make dynamic content accessible.  When content updates dynamically (i.e. without a page refresh), screenWhen content updates dynamically (i.e. without a page refresh), screen readers may not be aware. This includes screen overlays, lightboxes, in-readers may not be aware. This includes screen overlays, lightboxes, in- page updates, popups, and modal dialogs. Keyboard-only users may bepage updates, popups, and modal dialogs. Keyboard-only users may be trapped in page overlays. Magnification software users might betrapped in page overlays. Magnification software users might be zoomed in on the wrong section of the page.zoomed in on the wrong section of the page.  These functions can easily be made accessible. Options include ARIAThese functions can easily be made accessible. Options include ARIA roles and alerts, as well as front-end development frameworks thatroles and alerts, as well as front-end development frameworks that specifically support accessibility.specifically support accessibility.  Ensure that video players do not auto-play (non-consensual sound),Ensure that video players do not auto-play (non-consensual sound), and that the players can be used with a keyboard. Additionally, alland that the players can be used with a keyboard. Additionally, all videos must have options for closed captioning and transcripts for thevideos must have options for closed captioning and transcripts for the hearing-impaired.hearing-impaired.  If your site contains a slideshow, make sure that each photo has alt textIf your site contains a slideshow, make sure that each photo has alt text and can be navigated via the keyboard. If you are using any uniqueand can be navigated via the keyboard. If you are using any unique widgets (such as a calendar picker or drag-and-drops), be sure to testwidgets (such as a calendar picker or drag-and-drops), be sure to test for accessibility.for accessibility.
  • 21. Key Tips for Making Your WebsiteKey Tips for Making Your Website Senior FriendlySenior Friendly  Break information into short sections.Break information into short sections.  Give instructions clearly and number each step.Give instructions clearly and number each step.  Minimize the use of jargon and technical terms.Minimize the use of jargon and technical terms.  Use single mouse clicks.Use single mouse clicks.  Allow additional space around clickable targets.Allow additional space around clickable targets.  Use 12- or 14-point type size, and make it easy for users to enlarge text.Use 12- or 14-point type size, and make it easy for users to enlarge text.  Use high-contrast color combinations, such as black type against aUse high-contrast color combinations, such as black type against a white background.white background.  Provide a speech function to hear text read aloud.Provide a speech function to hear text read aloud.  Provide text-only versions of multimedia content.Provide text-only versions of multimedia content.  Minimize scrolling.Minimize scrolling.  Choose a search engine that uses keywords and doesn't require specialChoose a search engine that uses keywords and doesn't require special characters or knowledge of Boolean terms.characters or knowledge of Boolean terms.  VisitVisit www.NIHSeniorHealth.govwww.NIHSeniorHealth.gov for an example of a website thatfor an example of a website that incorporates these senior-friendly guidelines.incorporates these senior-friendly guidelines.

Editor's Notes

  1. Open Wordpress
  2. Open colour tools