Web Accessibility | Accessibility

Standards Based Development

Five Layers of Accessibility

  1. html
  2. css
  3. JavaScript
  4. css for JavaScript
  5. wai aria

Web Accessibility

four main types of disabilities that can be used to explain how we should be thinking about accessibility:

Web Accessibility

Web Accessibility is the inclusive practice of making websites usable by people of all abilities and disabilities. Correctly designed, developed and edited web documents allow all users to have equal access to information and functionality. Web Accessibility addresses these needs:

html Accessibility

JavaScript Accessibility

Essential Components of Web Accessibility

Website accessibility relies on eight components:

  1. the website itself - natural information (text, images and sound) and the markup code that defines its structure and presentation
  2. user agents, such as web browsers and media players
  3. assistive technologies, such as screen readers and input devices used in place of the conventional keyboard and mouse
  4. users' knowledge and experience using the web
  5. developers
  6. authoring tools
  7. evaluation tools
  8. a defined web accessibility standard, or a policy for your organization (against which to evaluate the accessibility)

These components interact with each other to create an environment that is accessible to people with disabilities.

Web developers usually use authoring tools and evaluation tools to create Web content.

People ("users") use Web browsers, media players, assistive technologies or other "user agents" to get and interact with the content."

Guidelines for different components

Authoring Tool Accessibility Guidelines

atag contains 28 checkpoints that provide guidance on:

  • producing accessible output that meets standards and guidelines
  • promoting the content author for accessibility-related information
  • providing ways of checking and correcting inaccessible content
  • integrating accessibility in the overall look and feel
  • making the authoring tool itself accessible to people with disabilities

Web Content Accessibility Guidelines (WCAG)

  • WCAG 1.0: Web Content Accessibility Guidelines: 14 guidelines that are general principles of accessible design
  • WCAG 2.0: 12 principal guidelines

User Agent Accessibility Guidelines (UAAG)

  • UAAG contains a comprehensive set of checkpoints that cover:
    • access to all content
    • user control over how content is rendered
    • user control over the user interface
    • standard programming interfaces

Web Accessibility

References and Resources

http://www.slideshare.net/kwahlbin/accessible-web-content-intellectual-disabilities-16830644 http://www.slideshare.net/webusability/the-forgotten-of-web-accessibility# http://www.accessiq.org/news/features/2013/03/webvtt-and-captioning-on-the-web" title="WebVTT and Captioning on the Web">WebVTT and Captioning on the Web http://developer.yahoo.com/blogs/ydn/posts/2013/03/increase-ios-accessibility-with-accessibility-hints/" title="Increase iOS Accessibility with Accessibility Hints">Increase iOS Accessibility with Accessibility Hints http://dvcs.w3.org/hg/html-api-map/raw-file/tip/Overview.html" title="HTML to Platform Accessibility API's Implementation Guide"> A user agent developer's guide to understanding and implementing accessibility support in html YahooAccessibility's YouTube Channel http://www.w3.org/community/wai-engage/wiki/Main_Page" title="WAI-Engage Community Group Wiki"> GROUPS? http://blog.dundee.ac.uk/accessibility/2013/03/open-badges-for-accessibility/ math a11y http://www.dessci.com/en/solutions/access/

References and Resources

Web Accessibility Techniques

Accessibility and Screen Readers

Some screen readers (such as Apple's VoiceOver), read the content inside pseudo elements. When you assign single characters to your icons, you wouldn't want the screen reader to read these characters. By using the PUA or the symbols options for the encoding of your glyphs, you can prevent this problem.

You can make screen readers read any text you wish. This is usually useful when you want to use an icon without any visual text near it. Here's an example:


<a href="#" data-icon="">
<span class="visuallyhidden">Home</span></a>
.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

Accessibility and Screen Readers and Icon Fonts

References

a11y Web Development References & Resources

  • Accessibility Innovators - LinkedIn Group

    • Accessibilty First