Skip to main content

Home/ Web Accessibility/ Group items tagged examples

Rss Feed Group items tagged

Filter: All | Bookmarks | Topics Simple Middle
Vernon Fowler

WebAIM: Color Contrast Checker - 0 views

webaim.org/...contrastchecker

accessibility contrast webdesign tool standards color colour colors colours text links DIG252 WEB300 checker

shared by Vernon Fowler on 12 Mar 14 - No Cached
  • WAVE can analyze contrast ratios for all page elements at once.
  • Colorzilla is an excellent tool for extracting the color value from any page element.
  • You can append ?fcolor=0000ff&bcolor=ff0000 (where the fcolor value is the foreground color and the bcolor value is the background color) to the URL of this page to analyze colors directly from a link or URL (link example).
Vernon Fowler

Validation messages - 0 views

www.accessibility-developer-guide.com/...validation-messages

forms accessibility validation

shared by Vernon Fowler on 09 Feb 19 - No Cached
  • If there are any validation messages, the focus is set to the first invalid input: this way, a screen reader will immediately announce the associated message, so the user knows that there is at least one invalid input to be fixed.
  • For multiple radio buttons or checkboxes, the message is associated to the surrounding <fieldset>.
  • In addition to this, each invalid input is associated to its message using aria-describedby. This is important, as it makes sure that screen readers also announce the messages when navigating through the inputs using the Tab key.
  • Vernon Fowler on 09 Feb 19
     
    "Data submitted in a form is usually validated in some way. And if there is any unacceptable data, the form is traditionally re-displayed, together with validation messages. In such a case, it is important to immediately inform screen reader users, so they know that they have to look at their data and submit again. "
Vernon Fowler

Accessible Breadcrumb Navigation - 0 views

scottaohara.github.io/a11y_breadcrumbs

navigation accessible accessibility markup

shared by Vernon Fowler on 17 Jul 19 - No Cached
  • Being that a breadcrumb is contained within a nav element, it will be surfaced as a landmark to screen readers. Providing it an accessible name of "breadcrumb" (or whatever term may be more meaningful to your site) will help differentiate it from any other navigation landmarks in the current document, such as the primary navigation
  • using aria-label to provide an accessible name, and aria-current to indicate the currently active link
  • screen reader support for aria-current is rather good
  • ...2 more annotations...
  • Some other breadcrumb patterns remove the <a> element, or at least the href from the link. These examples retain the a href for current link, as without it, people using a screen reader and navigating by links, or via focusable content with the tab key would not come across the currently active link.
  • Breadcrumbs are useful on large websites where pages have clearly defined hierarchy.
‹ Previous 21 - 23 of 23
Showing 20▼ items per page