HTML5 accessibility - 0 views
Accessible forms using WCAG 2.0 | Web Usability - 0 views
-
The label element is not used for the following because labels for these elements are provided via the value attribute
-
This technique inserts new content into the DOM immediately following the element that was activated to trigger the script. The triggering element must be a link or a button, and the script must be called from its onclick event. These elements are natively focusable, and their onclick event is device independent. Focus remains on the activated element and the new content, inserted after it, becomes the next thing in both the tab order and screen-reader reading order. Note that this technique works for synchronous updates. For asynchronous updates (sometimes called AJAX), an additional technique is needed to inform the assistive technology that the asynchronous content has been inserted.
Digital Web Magazine - Understanding Disabilities when Designing a Website - 0 views
-
In the UK In the US 2m people have a vision impairment3 10m people have a vision impairment4 8.2m people have mild to moderate deafness5, 688,000 people have severe to profound deafness6 28m people have a hearing impairment7 3.4m people have a physical disability8 8m people have a physical disability9 1.5m people have a learning disability10 6.8m people have a learning disability11 6m people have dyslexia12 25m people have dyslexia13
-
Most people who are blind will rely on screen reading software such as
-
JAWS or Windows-Eyes
- ...41 more annotations...
Accessibility Challenges Survey | 456 Berea Street - 0 views
Accessibility in web design provides a high degree of usability - 0 views
-
The BBC has developed a script called Betsie, which will convert pages to plain HTML.
-
There can be a fine line between enabling and excluding technology. All it takes is some careless HTML, the addition of a few unsupported images and some multimedia frills, and entire web sites can disappear from view for substantial numbers of users.
WebAIM: Usable and Accessible Form Validation and Error Recovery - 0 views
-
Errors on top
-
As one would guess, the "Errors on top" approach causes the error message to appear before the form. When presented, focus should generally be set directly to this error message. This allows screen reader and keyboard users to immediately access the error message without having to find it amongst the rest of the page contents. The message should also be visually apparent. Focus can be set to the message with client-side scripting using JavaScript focus() or similar, or the server-generated page can include an anchor name in the URI (e.g., http://myserver.com/form.php#errormessage) which will set focus directly to a named anchor or element id located at the beginning of the feedback message.
-
also helpful to inform the user as to the number of errors that were detected
- ...2 more annotations...
Hiding Content for Accessibility - Snook.ca - 0 views
-
This clip technique is also what's provided in the .visuallyhidden helper class in HTML5 Boilerplate.
-
We've only begun using and testing this technique, so even this may not be perfect. Any feedback and suggestions are quite welcome.
Places It's Tempting To Use Display: None; But Don't | CSS-Tricks - 0 views
-
I recently heard a heartbreaking story about a blind girl trying to apply for college and the form had missing labels so she had no idea what to put in what fields.
-
@media queries Turning on Voice Over in OS X and using Safari is a screen reader. Now imagine that Safari window was open to a very narrow width and the page had some @media queries for handling smaller viewports. And say that @media query hides some things with display: none in order to better visually accomodate the space. This could be good or bad for accessibility. Are you hiding a bunch of crap that isn't important to the page? Or are you hiding useful things that a person using a screen reader should have access to like they normally would.
html5-boilerplate/css/main.css at master · h5bp/html5-boilerplate · GitHub - 0 views
-
/* * Hide from both screenreaders and browsers: h5bp.com/u */.hidden { display: none !important; visibility: hidden;}/* * Hide only visually, but have it available for screenreaders: h5bp.com/v */.visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px;}/* * Extends the .visuallyhidden class to allow the element to be focusable * when navigated to via the keyboard: h5bp.com/p */.visuallyhidden.focusable:active,.visuallyhidden.focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto;}/* * Hide visually and from screenreaders, but maintain layout */.invisible { visibility: hidden;}