Skip to main content

Home/ Web Accessibility/ Group items tagged screen

Rss Feed Group items tagged

Vernon Fowler

Don't Rely on Default Browser Error Messages - Intopia - 0 views

  • Another issue is that the messages are temporary. As soon as you put focus on the input with mouse, keyboard or touch, the message disappears. People with cognitive impairments will find it difficult to use these, and I think anyone trying to fill in the form while they’re distracted will have trouble as well. People who rely on the keyboard for navigation (which includes both sighted users and screen reader users) will also lose these messages as they move around the form.
  • If you’re confident of your error messages, you can remove the browser validation by adding the novalidate attribute to the wrapping form element, like this: <form novalidate>...</form>
  • You can style this with CSS, using the :valid and :invalid pseudo-classes
  • ...2 more annotations...
  • Only the first error is noted with a message.
  • The rest rely on a change of border colour, which is, again, not evident to screen reader users.
  •  
    "When I found out the major browsers were beginning to include error validation into their support for forms, I was pretty excited. Form validation is always a fiddly part of accessibility, so I'm always looking out for ways to make it easier for developers to do properly. I read MDN's form data validation tutorial and a CSS Tricks article on client-side form validation and immediately made some test forms. Sadly, I was disappointed with the results. The default error validation in browsers is almost completely inaccessible. I was hoping we'd get default "you've forgotten to fill this in" messages that could be customised. I might have been a bit too optimistic! Validation at the browser level has many of the same issues we find at the website level."
Sandra Earl

The Accessible iPhone 3GS-- The Mac-cessibility Network - News [Lioncourt.com] - 1 views

  • There are two basic methods of operation for VoiceOver. One involves sliding your finger around the screen and allowing VoiceOver to announce what you’re touching. Double tapping the item you are touching, or else tapping a second finger down on the screen while touching it, will activate that item.
Vernon Fowler

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.
Vernon Fowler

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;}
Vernon Fowler

HTML5 Accessibility Chops: When to use an ARIA role | The Paciello Group Blog - 0 views

  • The situation for new HTML5 elements is different and likely to remain so for some time. It will be years before New HTML5 elements get robust accessibility support implemented across browsers and platforms. This is particularly so for non interactive elements such as the new HTML5 structural elements because  accessibility APIs in general do not have defined roles for many non interactive elements. In this case it is recommended to add the appropriate ARIA roles to elements that are meant to convey meaning but are effectively meaningless due to lack of implemented accessibility support. For example, adding role=navigation to a nav element fills the gaps in support for HTML5 semantics as ARIA  is more robustly  supported by most modern browsers and assistive technology:
  • <nav role=”navigation”>
  • Authors/developers can safely assume that any element that has been around since HTML 4.0 is already accessibility supported in browsers that support accessibility. So they do not need a default implicit role added.
Vernon Fowler

HTML5 Accessibility Chops: section elements | The Paciello Group Blog - 0 views

  • The following table illustrates support and interaction features for a number of structural HTML elements. The information is based on support for these elements by the JAWS screen reader.
  • Recommended ARIA role mappings for HTML5 section elements
  • <header role=”banner”>
  • ...1 more annotation...
  • <nav role=”navigation”>
  •  
    "banner"
Vernon Fowler

WebAIM: "Skip Navigation" Links - 0 views

  • In most cases, this is not necessary. Remember, the purpose of "skip navigation" links is to reduce the clutter of lists of links. Adding more links increases link-clutter.
Vernon Fowler

Customizing the Read More « WordPress Codex - 0 views

  • To customize this text, add the following code to your functions.php file.
  • If you are using a Child Theme, the above code will not work without modification if the parent theme has its own filters setting its own "more" link.
  • The following code is an example of the additional code needed to get the above code to work from a child theme of the parent theme Twenty Eleven. You will need to examine your actual parent theme's code for the correct parameters in the remove_filter() code, they must exactly match the add_filter() parameters used by the parent.
  • ...1 more annotation...
  • If you want to include the title of the post in the more text, use the_title() template tag
    • Vernon Fowler
       
      Already done for you in accessibility-ready themes like twentyseventeen. If unsure, check by either looking for a screen-reader-text span inside the "Continue reading" link; or install the WP Accessibility plugin to confirm under Miscellaneous Accessibility Settings. https://wordpress.org/plugins/wp-accessibility/
  •  
    "Modify the Read More text when using the the_excerpt()"
Vernon Fowler

WebAIM: Creating Accessible Tables - Data Tables - 0 views

  • The summary attribute of the <table> tag may be used to provide a summary of a data table structure (not content). Support for summary varies, but in general, it is screen reader specific (it's not accessible to anyone else) and is not well supported. Additionally, the summary attribute is not part of the HTML5 specification. In general, if a table is so complex that it needs an explanation of how it is structured, it probably is not very accessible and should probably be simplified. For these reasons, we do not recommend the use of summary. If it is used, it must never be used for layout tables.
Vernon Fowler

WebAIM: Creating Accessible Forms - General Form Accessibility - 0 views

  • Screen reader users generally navigate through a form using the Tab key to jump from form control to form control. Associated form labels are read for each form control when the user navigates to them. Any non-label text content between the form controls is usually skipped over. Be sure to include important cues or instructions in associated labels or at the beginning of the form.
Vernon Fowler

The Accessibility of WAI-ARIA · An A List Apart Article - 0 views

  • Pages semantically enriched through WAI-ARIA do not currently validate, but this drawback is acceptable: Common browsers do not mind the additional markup.
  • Some sites currently circumvent the validation problem by adding WAI-ARIA attributes to the source code via a script that is executed when the page loads.
  • in HTML5, WAI-ARIA validates
  • ...1 more annotation...
  • as long as older screen reader/browser combinations incapable of interpreting WAI-ARIA still constitute a significant part of the installed base, web designers who care for accessibility should use WAI-ARIA markup only to enrich their sites. They should not rely on it.
Vernon Fowler

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.
Sandra Earl

Designing and Developing mobile web sites in the real world, part 2 - Opera Developer C... - 0 views

  • In tandem with the launch of their 3G mobile website, Siminn also launched a slightly lighter version of the same site - a 2G-optimized mobile presence to serve less powerful phones. Both sites are anchored to the same reservoir of information, but the 3G site makes less-restricted use of CSS, images, and other coding ornamentations.
  • The only distinction Siminn makes concerning the dimensionality of the user-experience is whether the device is 2G or 3G enabled. As stated before, 2G devices are sent to a slightly lighter version of the 3G site
  • This is exactly what Siminn are doing. By detecting the type of phone, they are presenting the customer with the most appropriate version of the page – either the 3G enhanced or the more basic design.
  • ...19 more annotations...
  • e chose not to try and replicate the entire Icelandair website, but rather to cleave from it four or five of its most crucial elements.
  • This page contains the only form on the mobile site. In general, forms should be avoided because form input via a mobile device can be a tricky endeavor. However, there are certain coding practices that can simplify form input. For example, if your form field should only accept numeric input, then you should make use of the -wap-input-format property of WAP CSS. The Apple iPhone will automatically set the input to numeric if the name of the input element is set to certain values - phone or zip for example.
  • Mobile users only need to be shown news items that have some inherent urgency.
  • Much like your desktop browser recognizes a mailto: link as an email address, mobile devices recognize tel: links and phone numbers.
  • Do not assume that just because the UA string is not in your enumerated list of “Accepted strings”, it is not possible to view the site.
  • This is where you build in progressive enhancements to the website experience.
  • WURFL is an open source list of known phones and their capabilities. This can be put into a database and when a mobile device visits the your site you can sniff the UA, look-up the capabilities of that device (including screen-dimensions, default browser, etc) and serve them the best possible experience.
  • The RDF vocabulary is a standard across many mobile devices. Vendors that use this approach allow mobile sites to keep up-to-date with any new devices, without having to keep their own database of device types.
  • ou can find more details about standards support in Opera Mini/Mobile 4 here: Designing with Opera Mini 4 in mind JavaScript support in Opera Mini 4
  • There are a few basic coding items to avoid in the mobile web space. Chief among these, at least for now (now being 10/2007), is client-side scripting.
  • While it's tempting to try and port that elegant bit of AJAX from your conventional web to your mobile web, you will only create headaches for yourself.
  • ome browsers do support various levels of JavaScript, but as a developer you should not expect it to work across all devices.
  • retty heavy processor hog, so continuous scripting can drain a battery fast
  • mobile browser support for stylesheets varies greatly.
  • keep things simple.
  • most mobile devices default to their own font sizes and families regardless of styling. Thus, when working on the Siminn project we made no attempt to influence font size or family. In cases where we wanted a larger font, we simply relied on the generic XHTML heading elements.
  • he inclusion of font-size=smaller in the body tag worked as a kind of global reset for font sizes in every device we tested. With this little bit of code we were able to sufficiently reduce the default font size and thus more faithfully reproduce the design that we had been tasked with coding.
  • XHTML-MP - the mobile web subset of XHTML - is fully supported on most modern devices.
  • You can't read 2 books and several articles about mobile web development and cover everything. Much of the effort is trial and error. When starting out, emulators are a good way to get a rough idea of how the site will work. It gives you some feel for the navigation, architecture and flow of the site, but the look and feel varies from the emulator to the real device. The best thing you can do is get a few real phones to test on. I'm sure between yourself, co-workers and a few friends, you can manage to test your site on a good cross-section of the phones out there. Finally, there is some help. The W3C mobile web initiative does have a checklist to see how well your site is doing and so does dev.mobi - if you take heed of these two lists, your site should give a quality experience to most customers.
Sandra Earl

WebAIM: Accessibility of Rich Internet Applications - 0 views

  • WAI-ARIA (Accessible Rich Internet Applications or ARIA) is a W3C protocol for enhancing and supporting accessibility of scripted and dynamic content.
  • ARIA provides accessible interactive controls (such as tree menus, drag and drop, sliders, sort controls, etc.), content roles for identifying page structure (navigation, search, main content, etc.), areas that can be dynamically updated (called "live regions" in ARIA), better support for keyboard accessibility and interactivity, and much more.
  • accessibility issues with rich internet applications can be characterized as: Providing the semantic structure of page areas and functionality (e.g., navigation, main content, search, etc.) Maintaining accessibility of content that is dynamic and may change within the page (e.g., AJAX content updates) Allowing certain non-focusable page elements to receive keyboard focus (e.g., setting focus to an error message within the page) Providing keyboard and screen reader accessibility with complex widgets and navigation elements (e.g., sliders, menu trees, etc.)
  • ...2 more annotations...
  • WAI-ARIA provides the ability for developers to specify roles for document areas (and many other things).
  • ARIA is being implemented into many scripting libraries (such as jQuery, Dojo, YUI, and GWT). While developers can certainly implement ARIA into their advanced widgets and applications, using ARIA-supported libraries greatly simplifies the process of providing this level of accessibility.
Sandra Earl

Designing for Dyslexics: Part 2 of 3 - Accessites.org - 0 views

  • “Ensure that foreground and background color combinations provide sufficient contrast when viewed by someone having color deficits or when viewed on a black and white screen.”
  • Scoptic Sensitivity Syndrome
  • can make high contrast text difficult to read because the words seem to constantly move on the page.
  • ...7 more annotations...
  • anecdotal evidence suggests that, as soon as you reduce the colour contrast, the reading difficulties suffered by dyslexics are alleviated, to some degree, across the board.
  • Contrasts that comply with the thresholds can, and do, create very real problems for dyslexics.
  • t has been my experience that just about every issue within accessible web design is about balance. Skew any one factor too much in favour of a particular user group and you risk disadvantaging another group with opposing needs.
  • What I am suggesting is that, if a colour theme is chosen that conforms to, or exceeds, the W3C colour difference threshold, an alternative, low contrast style sheet should be provided as standard.
  • I then suggested that “disability” be defined as an “inability to pursue an activity because of a medically determinable physical or mental impairment.”
  • suggest that adhering to the Hewlett-Packard colour difference threshold would represent a more balanced approach to the issue of colour contrast. To that end,
  • I’ve developed an alternative color contrast analyser for people to try.
Sandra Earl

Web Axe - Practical Web Design Accessibility Tips - Podcast and Blog: Paul Boag wears r... - 0 views

  • In Boagworld podcast episode 130, I discovered that in order to help test web accessibility, Paul Boag wears glasses (that he doesn't need) and gloves and attempts to navigate through a site. Excellent idea!In order to better understand [the elderly's] experience I have bought a pair to ski gloves and some reading glasses (I don't need reading glasses). Every now and again, I surf the site I am designing wearing both the glasses and gloves. The glasses make the screen hard to read while the gloves hamper my use of the mouse and the keyboard. There is nothing more frustrating than trying to select something from a drop down menu wearing ski gloves!
Sandra Earl

YUI Theater - Doug Geoffray: "From the Mouth of a Screenreader" » Yahoo! User... - 0 views

  • he context is important for us on the frontend as we begin to confront the same challenges that desktop software developers have been addressing for many years.
  • Doug been a touchstone for us at YUI in the research and development of our Menu Control, a project that is helping us to lay a foundation for what is possible in terms of DHTML accessibility as YUI evolves.
« First ‹ Previous 41 - 60 of 69 Next ›
Showing 20 items per page