Accessibility means a digital world for everyone, regardless of where, when, why, and how you consume the content that is being communicated. It’s communication that’s non-discriminatory in every way.
-from simplyaccessible.com
Accessibility means a digital world for everyone.
Census Data Concludes: Nearly 1 in 5 People Have a Disability in the U.S.
Businesses must comply with Section 508 when supplying Electronic and Information Technology goods and services to the federal government. - source webaim.org
Achromatopsia
Deuteranopia
Protanopia
Tritanopia
You want to buy the latest/greatest tech gadget and the page loads blank.
...the page is freaking out and filled unrecognizable errors
Regardless of project management method:
Let's ensure that people with disabilities can easily access the web.
These attributes communicate to assistive technologies a semantic:
❮button role="button"❯ button text ❮/button❯
❮input type="text" required aria-required="true"❯
❮div hidden aria-hidden="true"❯
❮h1 role="heading" aria-level="1"❯heading text❮/h1❯
What this means is that, where implemented, the browser will expose the default implicit semantics of the element so you don’t have to.
❮header❯ maps to role="banner"
❮nav❯ maps to role="navigation"
❮main❯ maps to role="main"
❮section❯ maps to role="region"
❮article❯ maps to role="article"
❮aside❯ maps to role="complementary"
❮footer❯ maps to role="contentinfo"
BUT IE and Safari do not offer support for all of the role mappings. -Deque University
❮header role="banner"❯
❮nav role="navigation" ❯
❮main role="main" ❯
❮footer role="contentinfo" ❯
Products
Go through the main nav every time?
Or do you provide a skip nav?
Or skip different sections of content?
The difference in color and light between parts of an image. -wikipedia
Bad: Error Messaging Relies on Color
Better: Message Conveyed With Icons
Simple. Do it.
HTML
CSS
//hiding text elements from the view, but keeping them available to the screen reader
.sr-only {
position: absolute !important;
height: 1px;
width: 1px;
overflow: hidden;
clip: rect(1px, 1px, 1px, 1px);
clip-path: polygon(0px 0px, 0px 0px, 0px 0px, 0px 0px); //for clip being deprecated
}
Example from: Tips for Creating Accessible SVG by Leonie Watson
tabindex="1"
for="IdOfTheRepresentedInput"
because the screen reader announces it
Make note of pages you audit:
So many ways:
pa11y
The four main guiding principles of accessibility are:
Perceivable - provide content alternatives (images, audio, video)
Operable (without a mouse)
Understandable - clear and simple (writing and functionality)
Robust - works across many devices
A11y Slackers: http://web-a11y.herokuapp.com/ or #a11y on twitter