Skip to main content

Home/ Web Accessibility/ Group items tagged usability

Rss Feed Group items tagged

Filter: All | Bookmarks | Topics Simple Middle
Vernon Fowler

Juicy Studio: CSS Analyser - 0 views

juicystudio.com/...csstest.php

test testing accessibility css webdesign tools validation webdev usability validator

shared by Vernon Fowler on 02 Aug 11 - Cached
  • Vernon Fowler on 02 Aug 11
     
    "This service has been provided to allow you to check the validity of your CSS against the W3C's validation service, along with a colour contrast test, and a test to ensure that relevant sizes are specified in relative units of measurement. If the CSS is specified by a URL, it will be loaded into the text area to offer an option to make changes for testing without having to re-upload. "
Vernon Fowler

Guidelines for Visualizing Links - 0 views

www.nngroup.com/...idelines-for-visualizing-links

usability links accessibility webdesign DIG252

shared by Vernon Fowler on 17 Aug 14 - No Cached
  • Don't underline any text that's not a link
  • The color for unvisited links should be more vivid, bright, and saturated than the color for visited links, which should look "used" (dull and washed out).
  • The two colors should be variants or shades of the same color, so that they're clearly related.
  • ...1 more annotation...
  • Don't place links so close together that users with reduced motor skills will have difficulty selecting them.
Vernon Fowler

6 Surprising Bad Practices That Hurt Dyslexic Users - UX Movement - 0 views

uxmovement.com/...tices-that-hurt-dyslexic-users

accessibility dyslexia ux web fonts color contrast webdesign typography usability

shared by Vernon Fowler on 13 Aug 14 - No Cached
  • many dyslexic users are sensitive to the brightness the high contrast colors cause
  • use an off-white color for your background, like a light gray or tan. You can also use a dark gray for your text instead of pure black to cut the glare even more
  • dyslexic users need more breaks between ideas than non-dyslexic users
  • ...4 more annotations...
  • Breaking up your text to one idea per paragraph makes reading a lot easier for both dyslexic and non-dyslexic users.
  • a sans-serif font would allow dyslexic users to see the shapes of letters clearer
  • you shouldn’t use italicized text because they make letters hard to read
  • avoid creating the river effect by using left aligned text, instead of justified text for your paragraphs
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.
Vernon Fowler

Bruce Lawson's personal site  : The practical value of semantic HTML - 0 views

www.brucelawson.co.uk/...actical-value-of-semantic-html

accessibility html mobile navigation

shared by Vernon Fowler on 25 Feb 19 - No Cached
  • styles each header element differently depending on the value of its itemprop attribute. Using itemprop, we’re able to ensure that the author, publication date, title, and subheading are prominently featured.
  • If you plan to put things into microdata, please note that Apple, being Apple, go their own way, and don’t use a schema.org vocabulary here. Le sigh. See my article Content needs a publication date! for more. Or view source on this page to see how I’m using microdata on this article.
  • Apple WatchOS also optimises display of items wrapped in <figure> elements
  • ...4 more annotations...
  • First, choose the appropriate type attribute and element tag for your form controls. WebKit supports a variety of form control types including passwords, numeric and telephone fields, date, time, and select menus. Choosing the most relevant type attribute allows WebKit to present the most appropriate interface to handle user input.
  • unlike iOS and macOS, input methods on watchOS require full-screen interaction. Label your form controls or specify aria label or placeholder attributes to provide additional context in the status bar when a full-screen input view is presented.
  • By choosing the right semantics now, a machine that I don’t know about yet can understand my content and display it in the best way for its users.
  • Semantic HTML will give usability benefits to many users, help to future-proof your work, potentially boost your search engine results, and help people with disabilities use your site.
Vernon Fowler

WCAG 2.1 is Coming-and Here's What You Should Know Right Now - Siteimprove - 0 views

siteimprove.com/...what-you-should-know-right-now

forms usability buttons inclusivedesign errors navigation accessibility mobile touch

shared by Vernon Fowler on 09 Apr 18 - No Cached
  • Expect the new WCAG standards to emphasize a mobile experience that matches what users might expect from a traditional browsing session. This will likely include making your site’s touch screen functions more compatible with assistive technology. 
  • The new standards are expected to raise that level to 400% to help users with low vision navigate sites more smoothly.
  • WCAG 2.1 will likely seek to place limits on where and when pop-ups and similar advertising can appear. 
  • ...1 more annotation...
  • For users with motor skill issues, clicking on incorrect links and buttons is a common problem. WCAG 2.1 will likely require improvements in navigation technology that makes it easier both to find the right link and to correct actions if the wrong link is clicked. 
  • Vernon Fowler on 09 Apr 18
     
    Considering how massively the online landscape has changed in the past decade, it's amazing that international standards for web accessibility haven't been updated since December of 2008. That's about to change. After soliciting and assessing recommendations from the public, the international Web Accessibility Initiative is set to announce version 2.1 of its Web Content Accessibility Guidelines in the middle of this year. As that update draws nearer, there are a few key changes website owners may want to start planning for. (Keep in mind that all WCAG 2.1 changes are tentative.)
Vernon Fowler

WebAIM: Link Contrast Checker - 0 views

webaim.org/...linkcontrastchecker

accessibility contrast tool links body background

shared by Vernon Fowler on 28 Sep 18 - No Cached
  • For usability and accessibility, links should be underlined by default.
Vernon Fowler

WebAIM: Links and Hypertext - Link Text and Appearance - 0 views

webaim.org/...link_text

links hypertext link text accessibility usability UX webdesign

shared by Vernon Fowler on 26 Mar 14 - No Cached
  • links are more useful when they make sense out of context
  • In most cases, it is better to use human-readable text instead of the URL.
  • The alternative text should convey the content of the image and the function of the link. In most cases, the content of the image and function of the link are the same, so this text can be very succinct (e.g, alt="Products").
  • ...6 more annotations...
  • When images are used as links, the alternative text performs the function of link text.
  • on both mouse hover and keyboard focus
  • they are also accustomed to seeing tabs and main navigational features (oftentimes created as graphics rather than text) without underlining. In these cases, the linked items should be designed so it is apparent that the user can click on them to perform an action.
  • Authors should avoid non-informative link phrases such as: click here here more read more link to [some link destination] info
  • adjacent links should have adequate whitespace (such as link CSS margins) between them to minimize users inadvertently clicking the wrong link
  • an alphabetical index may use each individual letter of the alphabet as a link
Vernon Fowler

10 colour contrast checking tools to improve the accessibility of your design | 456 Ber... - 3 views

www.456bereastreet.com/...e_accessibility_of_your_design

accessibility color tools webdesign css validator usability webdev validation test testing design contrast resources

shared by Vernon Fowler on 12 Oct 10 - Cached
  • online tool simulates colour blindness on an image that you upload or on a web page that you specify, while the Photoshop plugin changes the colours of the document you are working on
« First ‹ Previous 61 - 73 of 73
Showing 20▼ items per page