Skip to main content

Home/ Web Accessibility/ Group items tagged hide

Rss Feed Group items tagged

Filter: All | Bookmarks | Topics Simple Middle
Vernon Fowler

Inclusively Hidden | scottohara.me - 0 views

www.scottohara.me/...inclusively-hidden.html

accessibility inclusivedesign screenreaders

shared by Vernon Fowler on 02 Oct 18 - No Cached
  • sometimes content is for decorative purposes only, and it would be optimal to not announce this content to assistive technology.
  • don’t use aria-hidden on focusable content
  • Purposefully Hidden from Assistive Technology
  • ...1 more annotation...
  • using aria-hidden to hide content specifically from screen readers
  • Vernon Fowler on 02 Oct 18
     
    There are various techniques to visually hide content in our web interfaces, but are you aware of the different effects they have on the accessibility of that content? While it would be nice if there was a single, native, solution for hiding content, there are contextual benefits to the various techniques at our disposal. Since there have been many articles already written about these techniques, over the many years they've been in use, the focus of this article will be to highlight the ones that are most appropriate for modern web development. We won't just look at the code behind each of these techniques, instead we'll focus on why each technique has its place, using practical examples to demonstrate their purposes. But before we talk about how to hide content we should ask ourselves a question… Why are we hiding content?
Vernon Fowler

Places It's Tempting To Use Display: None; But Don't | CSS-Tricks - 0 views

css-tricks.com/g-to-use-display-none-but-dont

webdesign accessibility usability screen reader reading

shared by Vernon Fowler on 07 Oct 12 - No Cached
  • 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.
Vernon Fowler

html5-boilerplate/css/main.css at master · h5bp/html5-boilerplate · GitHub - 0 views

github.com/...main.css

css html5 boilerplate screen reader reading usability webdesign accessibility

shared by Vernon Fowler on 07 Oct 12 - No Cached
  • /* * 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

A List Apart: Articles: Now You See Me - 0 views

www.alistapart.com/...now-you-see-me

css webdesign accessibility usability content javascript class

shared by Vernon Fowler on 28 Oct 12 - No Cached
  • visibility: hidden; Element is hidden from view, but is not removed from the normal flow (i.e., it still takes up the space it normally would) Content is ignored by screen readers display: none; Element is removed from the normal flow and hidden; the space it occupied is collapsed Content is ignored by screen readers height: 0; width: 0; overflow: hidden; Element is collapsed and contents are hidden Content is ignored by screen readers
  • if you want to ensure users have access to content (even if it isn’t displayed visually in the current interface), the final option (positioning content offscreen) is really the way to go.
  • Screen readers have access to the content
  • ...6 more annotations...
  • position: absolute; left: -999em;
  • but links may “focus” oddly and negative indent may not prove long enough to fully hide content
  • limited to text and inline elements
  • Content is removed from the normal flow and shifted off the left-hand edge; the space it occupied is collapsed
    • Vernon Fowler
      Vernon Fowler on 17 Mar 13
       
      This is usually my desired effect.
  • If you don’t want your hidden content to be read by a screen reader, those defaults may work for you
  • how profoundly your choice of hiding mechanism can influence the accessibility of your content to assistive technologies like screen readers
Vernon Fowler

Hiding Content for Accessibility - Snook.ca - 0 views

snook.ca/...ding-content-for-accessibility

webdesign accessibility screen reader reading usability

shared by Vernon Fowler on 07 Oct 12 - No Cached
  • 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

Now You See Me · An A List Apart Article - 0 views

alistapart.com/...now-you-see-me

accessible content hide accessibility

shared by Vernon Fowler on 20 May 13 - No Cached
Vernon Fowler

WebAIM: CSS in Action - Invisible Content Just for Screen Reader Users - 0 views

webaim.org/...invisiblecontent

accessibility hide content CSS

shared by Vernon Fowler on 27 Nov 13 - No Cached
  • recommended styles for visually hiding content that will be read by a screen reader
  • Vernon Fowler on 27 Nov 13
     
    "There are occasional instances where content should be made available to screen reader users, but hidden from sighted users. In most cases, if content (particularly content that provides functionality or interactivity) is important enough to provide to screen reader users, it should probably be made available to all users. Cases where verbose cues or instructions are provided only for screen reader users are most likely a reflection of poor design and accessibility. However, there are a few cases where information is apparent visually, but may not be apparent to screen reader users. In these cases, it may be appropriate to mark-up content in a way that it is read by a screen reader, but invisible to sighted users. "
Vernon Fowler

Screenreaders · Bootstrap - 0 views

getbootstrap.com/...screenreaders

accessibility webdesign

shared by Vernon Fowler on 16 Sep 18 - No Cached
  • Hide an element to all devices except screen readers with .sr-only.
  • Combine .sr-only with .sr-only-focusable to show the element again when it’s focused (e.g. by a keyboard-only user).
Sandra Earl

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

accessites.org/...ning-for-dyslexics-part-3-of-3

accessibility cognitive learning disabilities dyslexia

shared by Sandra Earl on 12 Oct 10 - Cached
  • Shorter line lengths and narrower text columns make reading easier.
  • Consider setting a percentage width for text areas and set the margins to “0 auto” via CSS. The page side margins will then increase proportionately on wider screens.
  • Most browsers have a default line-height of around 1em. This normally results in closely packed lines of text. Increasing the line-height to around 1.3em immediately makes longer lines of text easier to read. Likewise, ensure that paragraphs are visibly separated. Don’t be afraid of white space. Use it to enhance readability.
  • ...16 more annotations...
  • percentages or ems.
  • If possible, use a sans-serif font. The decorative “hooks” on the main strokes of serif letters may create additional problems for dyslexic users.
  • If you have to use a corporate serif font, consider reducing the letter-spacing slightly so that the letters within a word lie closer together but increasing the word-spacing to create a slightly larger distance between individual words.
  • uneven word spacing disrupts that pattern recognition.
  • Unjustified text, although less attractive at first glance. is far easier to read.
  • When italic fonts are used on a web page, the individual letters can have a slightly jagged line compared to a non-italic font. This “pixelation,” coupled with their “lean to the left” makes them hard for a dyslexic person to read. The effect is compounded if the text is also small.
  • Use italics sparingly and consider bold text for important words. They’ll be far easier to read.
  • Photographs, charts and icons can convey a great deal of information regarding the topic of a page. Graphics can break the page up into smaller chunks. They can also provide visual memory aids and support comprehension for dyslexics.
  • Dyslexics often have poor organisational skills. Lists can help them by organising information into small, logical chunks.
  • Dyslexics tend to have poor information processing skills. So it is relatively easy to overload them by literally providing too much information on one page.
  • Within a page, use headings to sub-divide the page logically and visually. Adding coloured heading backgrounds or borders will act as further support.
  • Consider breaking complex pages down into two or three smaller pages.
  • Keep site navigation simple and logical. Make sure that the Home page is easily reachable from any part of the site. Try not to “hide” this important link in a logo.
  • break long sentences down into two or more shorter sentences
  • Many designers do not realise that some screen reader users can see perfectly well. It is not uncommon for dyslexics to use screen readers to support their reading. This may create problems where text has been positioned off screen.
  • If you do make use of off screen positioning, try to do so sympathetically. Consider the viewpoint of those who can both hear the screen reader and see the page. Ask yourself if you’re potentially creating confusion.
Vernon Fowler

Don't Use The Placeholder Attribute - Smashing Magazine - 0 views

www.smashingmagazine.com/...placeholder-attribute

inclusive input formdesign aria forms inclusivedesign hint accessibility form html

shared by Vernon Fowler on 27 Jun 18 - No Cached
  • To recap, the placeholder attribute: Can’t be automatically translated; Is oftentimes used in place of a label, locking out assistive technology; Can hide important information when content is entered; Can be too light-colored to be legible; Has limited styling options; May look like pre-filled information and be skipped over.
  • Move the placeholder content above the input, but below the label:
  • Development Here’s how to translate our designed example to code:
  • ...4 more annotations...
  • aria-describedby ensures that the p content will be described last, after the label’s content and the kind of input it is associated with.
  • By using aria-describedby to programmatically associate the input with the p element, we are creating a priority of information for screen readers that has parity with what a person browsing without a screen reader would experience.
  • The floating label effect, a close cousin to this phenomenon, oftentimes utilizes the placeholder attribute in place of a label, as well.
  • Content hidden by an on-screen keyboard. 3rd party keyboards with larger heights may have a greater risk of blocking important content.
  • Vernon Fowler on 27 Jun 18
     
    Not only argues for not using the placeholder attribute but also describes an inclusive input hint and how to code it.
1 - 11 of 11
Showing 20▼ items per page