Tech Talk
Web accessibility refers to the inclusive practice of removing barriers that prevent access to websites by people with disabilities. When sites are correctly designed, developed and edited, all users have equal access to information and functionality.
The point is there are some assumptions we often make that we probably should not make because we don't know who will be accessing our site or how they will be accessing it.
Accessibility is vital for many people.
There are semester long University classes that provide a Professional Certificate in Web Accessibility, and really thick books written on accessibility.
Don't be intimidated, There are standards to guide you but it's also a mindset — be courteous and make things easy to access for all people trying to get to it.
Think Universal Design:
Universal Design is the design of products and environments to be usable by all people, to the greatest extent possible, without the need for adaptation or specialized design. Ron Mace, Center for Universal Design, NC State University
To design something so that it is accessible means ... all people, regardless of any impairment, interact with your content.
There is no reason we can't decide to uphold these Laws even though we are not required to.
Section 508 Of The Rehabilitation Act
(A) DEVELOPMENT, PROCUREMENT, MAINTENANCE, OR USE OF ELECTRONIC AND INFORMATION TECHNOLOGY.--When developing, procuring, maintaining, or using electronic and information technology, each Federal department or agency, including the United States Postal Service, shall ensure, unless an undue burden would be imposed on the department or agency, that the electronic and information technology allows, regardless of the type of medium of the technology-- ... (ii) individuals with disabilities who are members of the public seeking information or services from a Federal department or agency to have access to and use of information and data that is comparable to the access to and use of the information and data by such members of the public who are not individuals with disabilities.
States Parties shall take appropriate measures to ensure to persons with disabilities access, on an equal basis with others, to ... information and communications, including information and communications technologies and systems...
Americans with Disabilities Act
The ADA is one of America's most comprehensive pieces of civil rights legislation that prohibits discrimination and guarantees that people with disabilities have the same opportunities as everyone else to participate in the mainstream of American life...
US International Council on Disabilities - Mission
To promote the rights and full participation of persons with disabilities through global engagement and United States foreign affairs.
Web Content Accessibility Guidelines (WCAG 2.0)
covers a wide range of recommendations for making Web content more accessible. WCAG 2.0 success criteria are written as testable statements that are not technology-specific.
Web Accessibility Initiative (WAI)
WAI brings together people from industry, disability organizations, government, and research labs from around the world to develop guidelines and resources to help make the Web accessible to people with disabilities including auditory, cognitive, neurological, physical, speech, and visual disabilities.
ARIA Static, page-based sites are increasingly being replaced by dynamic, desktop-style web applications... Many users are at risk of being excluded due to accessibility gaps. ... While [using <div> and <span> s] results in a widget that looks like its desktop counterpart, there usually isn't enough semantic information in the markup to be usable by an assistive technology.
Valid Code — It is important to have valid code on your Web pages. Web browsers are very forgiving with bad code, but that does not guarantee that what you meant will actually be represented accurately by the browser and to assistive technologies.
Semantics — HTML Semantics are important for SEO and Accessibility alike. SEO standards help computers help people. Styling isn't everything.
Define the language of the document allows Text-to-speech engines, like screen readers, know how to read the text.
<html lang="en-US">
ARIA Landmarks are attributes you can add to elements in your page to define areas like the main content or a navigation region. The possible landmarks are as follows:
Mouse and Keyboard Events. not everyone can use a mouse so make interactive elements navigable with the tab by using tabindex
tabindex="0"
Provide corisponding keyboard events.
Visual Focus
Never override global focus
:focus {outline: none;} /* No! */
Set specific element focus for elements that have a focus, this will often be the same as :hover
.
a:focus { outline:2px solid #f00; }
Menus — Making a site's menu accessible has two basic principles.
Skip to content — When keyboard-only users interact with your site they use the tab key to jump from link to link. If you have a lot of links at the first of your page in your header or in a menu, they must tab through those every time they come to a new page just to get to the main content. Providing a skip to main content link allows them to easily bypass this.
Forms basically, all of the input fields need to be labeled with label elements.
Color Contrast - Ensure that foreground and background colors have enough contrast so that users with visual disabilities can read the content.
Links
href
value:hover
& :focus
.
Dynamic Link Behavior When a link has some sort of interactive behavior:
href="javascript:..."
href="#"
Provide Multiple Ways to Find Content
USE ARIA standards!: ARIA Checkbox example
Sties that are required to meet legal standards: cdc.gov, ssa.gov