Skip to main content

Home/ Web Accessibility/ Group items tagged WebAIM

Rss Feed Group items tagged

Filter: All | Bookmarks | Topics Simple Middle
Vernon Fowler

WebAIM: Keyboard Accessibility - Tabindex - 0 views

webaim.org/...tabindex

DIG252 keyboard accessibility navigation focus html

shared by Vernon Fowler on 20 Aug 14 - No Cached
  • tabindex="0" and tabindex="-1" have special meaning and provide distinct functionality in HTML. A value of 0 indicates that the element should be placed in the default navigation order. This allows elements that are not natively focusable (such as <div>, <span>, and <p>) to receive keyboard focus. Of course one should generally use links and form controls for all interactive elements, but this does allow other elements to be focusable and trigger interaction.
  • A value of 0 indicates that the element should be placed in the default navigation order. This allows elements that are not natively focusable (such as <div>, <span>, and <p>) to receive keyboard focus.
  • A tabindex="-1" value removes the element from the default navigation flow (i.e., a user cannot tab to it), but it allows it to receive programmatic focus, meaning focus can be set to it from a link or with scripting. This can be very useful for elements that should not be tabbed to, but that may need to have focus set to them. A good example is a modal dialog window - when opened, focus should be set to the dialog so a screen reader will begin reading and the keyboard will begin navigating within the dialog. Because the dialog (probably just a <div> element) is not focusable by default, assigning it tabindex="-1" allows focus to be set to it with scripting when it is presented.
  • ...1 more annotation...
  • A value of -1 can also be useful in complex widgets and menus that utilize arrow keys or other shortcut keys to ensure that only one element within the widget is navigable with the tab key, but still allow focus to be set on other components within the widget.
Vernon Fowler

WebAIM: Constructing a POUR Website - Putting People at the Center of the Process - 0 views

webaim.org/pour

WCAG accessibility web content

shared by Vernon Fowler on 09 Mar 16 - No Cached
  • Vernon Fowler on 09 Mar 16
     
    "The four main guiding principles of accessibility in WCAG 2.0 are: Perceivable Operable Understandable Robust"
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: Usable and Accessible Form Validation and Error Recovery - 0 views

webaim.org/...formvalidation

validation accessibility usability forms errors aria

shared by Vernon Fowler on 16 Mar 17 - No Cached
  • 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...
  • provide a link within the error message that will set focus to the appropriate form control
  • Regardless of the mechanism used to identify and recover from form errors, aria-invalid="true" should generally be set on each invalid form control. This attribute causes screen readers to identify the control as being "invalid" or in need of attention.
Vernon Fowler

WebAIM: Using NVDA to Evaluate Web Accessibility - 0 views

webaim.org/nvda

accessibility testing NVDA

shared by Vernon Fowler on 02 Jun 17 - No Cached
  • Vernon Fowler on 02 Jun 17
     
    "This article is designed to help users who are new to NonVisual Desktop Access (NVDA) learn the basic controls for testing web content, and to serve as a reference for the occasional NVDA user. "
Vernon Fowler

WebAIM: Semantic Structure - 0 views

webaim.org/...semanticstructure

semantic structure headings html markup lists accessibility

shared by Vernon Fowler on 05 Feb 14 - No Cached
  • Technically, lower degree headings should be contained within headings of the next highest degree (i.e., one should not skip heading levels, such as from an <h2> to an <h4>, going down the document).
  • one should not skip heading levels
Vernon Fowler

WebAIM: To ARIA! The Cause of, and Solution to, All Our Accessibility Problems - 0 views

webaim.org/...aria-cause-solution

accessibility aria

shared by Vernon Fowler on 16 Oct 17 - No Cached
  • this role is often used extraneously (<button role="button">)
  • aria-label can also override other important information such as link text
  • aria-expanded This can tell screen reader users that activating a button or link will cause content to expand and collapse below (e.g., an accordion), and also whether it is currently collapsed or expanded.
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

WAVE Help - 0 views

wave.webaim.org/help

wave tools accessibility testing bookmarklet toolbar headings structure forms

shared by Vernon Fowler on 04 Mar 14 - No Cached
  • Vernon Fowler on 04 Mar 14
     
    "WAVE is tool to help web developers make their web content more accessible. WAVE cannot tell you if your web content is accessible. Only a human can determine true accessibility. But, WAVE can help you evaluate the accessibility of your web content."
« First ‹ Previous 41 - 50 of 50
Showing 20▼ items per page